Styled chosen css. Lighter box shadow for blocks

2 files changed, 58 insertions, 25 deletions

diff --git a/app/assets/stylesheets/main.scss b/app/assets/stylesheets/main.scss
index c821c3c18a8..259a57e5925 100644
--- a/app/assets/stylesheets/main.scss
+++ b/app/assets/stylesheets/main.scss
@@ -3,10 +3,11 @@
 @import 'font-awesome';
 
 /** GitLab colors **/
-$link_color:#3A89A3;
-$blue_link: #2fa0bb;
-$style_color: #474d57;
+$link_color: #3A89A3;
+$blue_link: #2FA0BB;
+$style_color: #474D57;
 $hover: #D9EDF7;
+$hover_border: #ADF;
 
 /** GitLab Fonts **/
 @font-face { font-family: Korolev; src: font-url('korolev-medium-compressed.otf'); }
@@ -19,9 +20,9 @@ $hover: #D9EDF7;
 }
 
 @mixin solid_shade {
-  -moz-box-shadow: 0 0 0 3px #eee;
-  -webkit-box-shadow: 0 0 0 3px #eee;
-  box-shadow: 0 0 0 3px #eee;
+  -moz-box-shadow: 0 0 0 3px #f1f1f1;
+  -webkit-box-shadow: 0 0 0 3px #f1f1f1;
+  box-shadow: 0 0 0 3px #f1f1f1;
 }
 
 @mixin border-radius($radius) {
@@ -64,6 +65,14 @@ $hover: #D9EDF7;
   background-image: -o-linear-gradient($from, $to);
 }
 
+@mixin bg-light-gray-gradient {
+  background:#f1f1f1;
+  background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #f5f5f5), to(#e1e1e1));
+  background-image: -webkit-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
+  background-image: -moz-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
+  background-image: -o-linear-gradient(#f5f5f5 6.6%, #e1e1e1);
+}
+
 @mixin bg-gray-gradient {
   background:#eee;
   background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
diff --git a/app/assets/stylesheets/ref_select.scss b/app/assets/stylesheets/ref_select.scss
index ed6760f1b43..377d008605e 100644
--- a/app/assets/stylesheets/ref_select.scss
+++ b/app/assets/stylesheets/ref_select.scss
@@ -19,31 +19,66 @@
   margin-right: 10px;
 
   .chzn-drop {
-    margin:7px 0;
     min-width: 400px;
-    border: 2px solid $blue_link;
-    @include border-radius(4px);
+    .chzn-results {
+      max-height:300px;
+    }
+    .chzn-search input {
+      min-width:365px;
+    }
+  }
+}
+
+/** Fix for Search Dropdown Border **/
+.chzn-container {
+  .chzn-search {
+    input:focus {
+      -webkit-box-shadow: none;
+      -moz-box-shadow: none;
+      box-shadow: none;
+    }
+  }
+
+  .chzn-drop {
+    margin:7px 0;
+    min-width: 200px;
+    border: 1px solid #bbb;
+    border-radius:0;
 
     .chzn-results {
+      margin-top: 5px;
       max-height:300px;
 
       .group-result {
-        color: $blue_link;
+        color: $style_color;
+        border-bottom: 1px solid #EEE;
+        padding: 8px;
       }
       .active-result {
+        border-radius: 0;
+
         &.highlighted {
-          background: $blue_link;
+          background: $hover;
+          color: $style_color;
+        }
+        &.result-selected {
+          background: #EEE;
+          border-left: 4px solid #CCC;
         }
       }
     }
 
-    .chzn-search input {
-      min-width:365px;
+    .chzn-search {
+      @include bg-gray-gradient;
+      input {
+        min-width:165px;
+        border-color: #CCC;
+      }
     }
   }
 
   .chzn-single {
-    @include bg-gray-gradient;
+    @include bg-light-gray-gradient;
 
     div {
       background:transparent;
@@ -55,14 +90,3 @@
     }
   }
 }
-
-/** Fix for Search Dropdown Border **/
-.chzn-container {
-  .chzn-search {
-    input:focus {
-      -webkit-box-shadow: none;
-      -moz-box-shadow: none;
-      box-shadow: none;
-    }
-  }
-}