From 5d8cca8d70508ac8218cf5947f4f00812a8c1d98 Mon Sep 17 00:00:00 2001
From: Pixelastic <tim@pixelastic.com>
Date: Tue, 15 Dec 2015 12:24:20 +0100
Subject: [PATCH] feat(styling): Set grayscale as default, add styling as
 external file

---
 dev/docsearch-styling.css  | 38 ++++++++++++++++++++++++++++++++++++++
 dev/index.html             |  2 +-
 dev/style.css              |  0
 src/styles/_variables.scss | 16 +++++++++++++---
 src/styles/main.scss       | 12 ------------
 5 files changed, 52 insertions(+), 16 deletions(-)
 create mode 100644 dev/docsearch-styling.css
 delete mode 100644 dev/style.css

diff --git a/dev/docsearch-styling.css b/dev/docsearch-styling.css
new file mode 100644
index 000000000..0a026ec48
--- /dev/null
+++ 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
index 401241af6..cb55fe024 100644
--- 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
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 298f44931..9c7451531 100644
--- 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
index d93a23ac5..c59493031 100644
--- 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