nikon/docsearch
1
0
Fork 0
Code Activity Actions

feat(styling): Set grayscale as default, add styling as external file

Browse source
This commit is contained in:
Pixelastic 2015-12-15 12:24:20 +01:00
parent f3e58b777f
commit 5d8cca8d70
5 changed files with 52 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
dev/docsearch-styling.css Normal file
View file

@ -0,0 +1,38 @@
/* Bottom border of each suggestion */
.ads-suggestion {
border-bottom-color: #3A3DD1;
}
/* Main category headers */
.ads-suggestion--category-header {
background-color: #4B54DE;
}
/* Highlighted search terms */
.ads-suggestion--highlight {
color: #3A33D1;
}
/* Highligted search terms in the main category headers */
.ads-suggestion--category-header .ads-suggestion--highlight {
background-color: #4D47D5;
}
/* Currently selected suggestion */
.aa-cursor .ads-suggestion--content {
color: #272296;
}
.aa-cursor .ads-suggestion {
background: #EBEBFB;
}
/* For bigger screens, when displaying results in two columns */
@media (min-width: 768px) {
/* Bottom border of each suggestion */
.ads-suggestion {
border-bottom-color: #7671df;
}
/* Left column, with secondary category header */
.ads-suggestion--subcategory-column {
border-right-color: #7671df;
background-color: #F2F2FF;
color: #4E4726;
}
}

2
dev/index.html
View file

@ -6,7 +6,7 @@
<title>Documentation</title>
<link rel="stylesheet" type="text/css" href="/stripe.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/docsearch.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/docsearch-styling.css" media="screen" />
<link rel="shortcut icon" href="favicon.ico">
</head>

0
dev/style.css
View file

16
src/styles/_variables.scss
View file

@ -1,3 +1,13 @@
$color1: #4B54DE;
$color2: #4D47D5;
$color3: #3A33D1;
$color-border: #3A3A3A;
$color-border-light: lighten($color-border, 15%);
$color-category-header: #333333;
$color-highlight-header: #3A3A3A;
$color-highlight: #448CDE;
$color-selected-background: #CECECE;
$color-selected-text: #0000FF;
$color-left-column-bg: #CECECE;
$color-left-column: #4E4726;
$breakpoint-medium: 568px;
$breakpoint-large: 768px;;

12
src/styles/main.scss
View file

@ -1,16 +1,4 @@
@import "variables";
$color-border: #3A33D1;
$color-border-light: lighten($color-border, 15%);
$color-category-header: #4B54DE;
$color-highlight-header: #4D47D5;
$color-highlight: $color-border;
$color-selected-background: #EBEBFB;
$color-left-column-bg: #F2F2FF;
$color-left-column: #4E4726;
$breakpoint-medium: 568px;
$breakpoint-large: 768px;;
// The dropdown adapts to screen size, to provide three different displays.
// - A simple list of matching results