Merge pull request #29 from gremo/style-improvements

Minor style improvements
alxlit · Aug 2, 2014 · 5b4d091 · 5b4d091
2 parents a9534dc + f50fe4b
commit 5b4d091
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 13 deletions.
diff --git a/bootstrap-chosen-variables.less b/bootstrap-chosen-variables.less
@@ -10,12 +10,12 @@
 @chosen-background: @input-bg;
 @chosen-border: @input-border;
 @chosen-border-radius: @input-border-radius;
-@chosen-multi-border-radius: 0;
+@chosen-multi-border-radius: @chosen-border-radius;
 @chosen-box-shadow: ~"inset 0 1px 1px rgba(0, 0, 0, .075)";
-@chosen-drop-border: @gray-light;
+@chosen-drop-border: @input-border;
 @chosen-drop-box-shadow: ~"0 8px 8px rgba(0, 0, 0, .25)";
 @chosen-drop-zindex: 1060;
-@chosen-focus-border: rgba(82, 168, 236, .8);
+@chosen-focus-border: @input-border-focus;
 @chosen-focus-box-shadow: ~"0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6)";
 @chosen-focus-transition: ~"border linear .2s, box-shadow linear .2s";
 @chosen-height: @input-height-base;

diff --git a/bootstrap-chosen-variables.scss b/bootstrap-chosen-variables.scss
@@ -1,13 +1,12 @@
 $chosen-background: $input-bg !default;
 $chosen-border: $input-border !default;
 $chosen-border-radius: $input-border-radius !default;
-$chosen-multi-border-radius: 0 !default;
+$chosen-multi-border-radius: $chosen-border-radius !default;
 $chosen-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075) !default;
-$chosen-drop-border: $gray-light !default;
+$chosen-drop-border: $input-border !default;
 $chosen-drop-box-shadow: 0 8px 8px rgba(0, 0, 0, .25) !default;
 $chosen-drop-zindex: 1060 !default;
-$chosen-border-color:rgba(82, 168, 236, .8) !default;
-$chosen-focus-border: $chosen-border-color !default;
+$chosen-focus-border: $input-border-focus !default;
 $chosen-focus-box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px $chosen-border-color !default;
 $chosen-focus-transition: border linear .2s, box-shadow linear .2s !default;
 $chosen-height: $input-height-base !default;

diff --git a/bootstrap-chosen.less b/bootstrap-chosen.less
@@ -21,7 +21,6 @@
   .chosen-drop {
     background: @chosen-background;
     border: 1px solid @chosen-drop-border;
-    border-top-color: lighten(@chosen-drop-border, 25%);
     .border-bottom-radius(@chosen-border-radius);
     .box-shadow(@chosen-drop-box-shadow);
     margin-top: -1px;
@@ -130,11 +129,12 @@
 .chosen-container-single {
   .chosen-single {
     background-color: @chosen-background;
-    #gradient > .vertical(white, @gray-lighter);
     -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
             background-clip: padding-box;
     border: 1px solid @chosen-border;
+    .border-top-radius(@chosen-border-radius);
+    .border-bottom-radius(@chosen-border-radius);
     .box-shadow(@chosen-box-shadow);
     color: @gray;
     display: block;
@@ -296,6 +296,7 @@
         right: 4px;
         top: 5px;
         width: 12px;
+        cursor: pointer;
 
         &:hover {
           background-position: right -11px;
@@ -332,8 +333,9 @@
   }
 
   &.chosen-with-drop .chosen-single {
-    background-color: @gray-lighter;
+    background-color: @input-bg;
     border: 1px solid @chosen-focus-border;
+    .border-bottom-radius(0);
     .box-shadow(@chosen-focus-box-shadow);
     .transition(@chosen-focus-transition);
 
@@ -357,6 +359,10 @@
       color: #111 !important;
     }
   }
+
+  &.chosen-with-drop .chosen-choices {
+    .border-bottom-radius(0);
+  }
 }
 
 .chosen-disabled {

diff --git a/bootstrap-chosen.scss b/bootstrap-chosen.scss
@@ -21,7 +21,6 @@
   .chosen-drop {
     background: $chosen-background;
     border: 1px solid $chosen-drop-border;
-    border-top-color: lighten($chosen-drop-border, 25%);
     @include border-bottom-radius($chosen-border-radius);
     @include box-shadow($chosen-drop-box-shadow);
     margin-top: -1px;
@@ -130,11 +129,12 @@
 .chosen-container-single {
   .chosen-single {
     background-color: $chosen-background;
-    @include gradient-vertical(white, $gray-lighter);
     -webkit-background-clip: padding-box;
        -moz-background-clip: padding;
             background-clip: padding-box;
     border: 1px solid $chosen-border;
+    @include border-top-radius($chosen-border-radius);
+    @include border-bottom-radius($chosen-border-radius);
     @include box-shadow($chosen-box-shadow);
     color: $gray;
     display: block;
@@ -296,6 +296,7 @@
         right: 4px;
         top: 5px;
         width: 12px;
+        cursor: pointer;
 
         &:hover {
           background-position: right -11px;
@@ -332,8 +333,9 @@
   }
 
   &.chosen-with-drop .chosen-single {
-    background-color: $gray-lighter;
+    background-color: $input-bg;
     border: 1px solid $chosen-focus-border;
+    @include border-bottom-radius(0);
     @include box-shadow($chosen-focus-box-shadow);
     @include transition($chosen-focus-transition);
 
@@ -357,6 +359,10 @@
       color: #111 !important;
     }
   }
+
+  &.chosen-with-drop .chosen-choices {
+    @include border-bottom-radius(0);
+  }
 }
 
 .chosen-disabled {