From 0a0e84b8e82ebfa133a2bc4dd6f2d0cd730f6323 Mon Sep 17 00:00:00 2001
From: Christopher Rogers <chrissrogers@gmail.com>
Date: Tue, 15 Apr 2014 13:40:45 -0500
Subject: [PATCH] Standardizes search styles

Signed-off-by: Christopher Rogers <chrissrogers@gmail.com>
---
 source/stylesheets/screen.css.scss | 63 +++++++++++++++---------------
 source/stylesheets/variables.scss  |  2 +
 2 files changed, 33 insertions(+), 32 deletions(-)

diff --git a/source/stylesheets/screen.css.scss b/source/stylesheets/screen.css.scss
index 22b5d35..2935e18 100644
--- a/source/stylesheets/screen.css.scss
+++ b/source/stylesheets/screen.css.scss
@@ -36,15 +36,6 @@ html, body {
   height: 100%;
 }
 
-.search-highlight {
-  background-image: linear-gradient(to bottom right, #F7E633 0%, #F1D32F 100%);
-  padding: 2px;
-  margin: -2px;
-  border-radius: 4px;
-  border: 1px solid #F7E633;
-  text-shadow: 1px 1px 0 #666;
-}
-
 ////////////////////////////////////////////////////////////////////////////////
 // TABLE OF CONTENTS
 ////////////////////////////////////////////////////////////////////////////////
@@ -72,7 +63,7 @@ html, body {
     input {
       background: $nav-bg;
       border-width: 0 0 1px 0;
-      border-color: $nav-footer-border-color;
+      border-color: $search-box-border-color;
       padding: 6px 0 6px 20px;
       box-sizing: border-box;
       margin: 10px 15px;
@@ -243,28 +234,6 @@ html, body {
 ////////////////////////////////////////////////////////////////////////////////
 // This is all the stuff with the light background in the left half of the page
 
-.search-info {
-  margin-top: 0;
-  min-height: 52px;
-  padding: 1em 1.75em;
-  font-size: 1.2em;
-  font-weight: bold;
-  text-shadow: 0 1px 0 lighten($aside-notice-bg, 15%);
-  background: $aside-notice-bg; // TODO: color
-  position: fixed;
-  z-index: 75;
-  display: none;
-
-  @include box-sizing(border-box);
-
-  &:before {
-    @extend %icon-search;
-    vertical-align: middle;
-    padding-right: 0.5em;
-    font-size: 1.2em;
-  }
-}
-
 .content {
   // to place content above the dark box
   position: relative;
@@ -442,8 +411,38 @@ html, body {
       @extend %icon-ok-sign;
     }
   }
+
+  .search-highlight {
+    padding: 2px;
+    margin: -2px;
+    border-radius: 4px;
+    border: 1px solid #F7E633;
+    text-shadow: 1px 1px 0 #666;
+    @include background(linear-gradient(to bottom right, #F7E633 0%, #F1D32F 100%));
+  }
 }
 
+.search-info {
+  margin-top: 0;
+  min-height: 52px;
+  padding: 1em 1.75em;
+  font-size: 1.2em;
+  font-weight: bold;
+  text-shadow: 0 1px 0 lighten($search-notice-bg, 15%);
+  background: $search-notice-bg;
+  position: fixed;
+  z-index: 75;
+  display: none;
+
+  @include box-sizing(border-box);
+
+  &:before {
+    @extend %icon-search;
+    vertical-align: middle;
+    padding-right: 0.5em;
+    font-size: 1.2em;
+  }
+}
 
 ////////////////////////////////////////////////////////////////////////////////
 // CODE SAMPLE STYLES
diff --git a/source/stylesheets/variables.scss b/source/stylesheets/variables.scss
index 5aab15b..6b9021a 100644
--- a/source/stylesheets/variables.scss
+++ b/source/stylesheets/variables.scss
@@ -37,6 +37,7 @@ $main-bg: #eaf2f6;
 $aside-notice-bg: #8fbcd4;
 $aside-warning-bg: #c97a7e;
 $aside-success-bg: #6ac174;
+$search-notice-bg: #8fbcd4;
 
 
 // TEXT COLORS
@@ -86,6 +87,7 @@ $nav-footer-border-color: #666;
 $nav-embossed-border-top: 1px solid #000;
 $nav-embossed-border-bottom: 1px solid #404040;
 $main-embossed-text-shadow: 0px 1px 0px #fff;
+$search-box-border-color: #666;
 
 
 ////////////////////////////////////////////////////////////////////////////////