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

pixelastic · pixelastic · commit 5d8cca8d7050 · 2015-12-15T12:32:57.000+01:00
diff --git a/dev/docsearch-styling.css b/dev/docsearch-styling.css
@@ -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;
+  }
+}
+
diff --git a/dev/index.html b/dev/index.html
@@ -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>
 
diff --git a/dev/style.css b/dev/style.css
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
@@ -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;;
+
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -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
