Added support for input status. See more on alxlit#22.

Added support input status with success, error and warning and feedback. Added a mixin file for bootstrap-chosen (bootstrap-chosen-mixinx) and a new variable for padding the feedback chosen.
rafaeldias · Feb 26, 2015 · a53dd31 · a53dd31
1 parent 4a47057
commit a53dd31
Show file tree

Hide file tree

Showing 7 changed files with 6,111 additions and 31 deletions.
diff --git a/bootstrap-chosen-mixins.less b/bootstrap-chosen-mixins.less
@@ -8,11 +8,10 @@
 //
 
 .chosen-control-validation(@text-color: @input-color; @border-color: @input-border; @background-color: @input-bg) {
-  .form-control-validation(@text-color; @border-color; @background-color);
-
   .chosen-single,
   .chosen-choices {
-    .form-control;
+    border-color: @border-color;
+    box-shadow: box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
   }
 
   &.chosen-container-active {

diff --git a/bootstrap-chosen-mixins.scss b/bootstrap-chosen-mixins.scss
@@ -0,0 +1,23 @@
+// bootstrap-chosen-mixins.scss
+//
+// An alternate stylesheet for Chosen (http://harvesthq.github.com/chosen/).
+// This one is supposed to integrate better with Bootstrap.
+//
+// Submit bugfixes to: http://github.com/alxlit/bootstrap-chosen
+//
+
+@mixin chosen-control-validation($text-color: $input-color, $border-color: $input-border, $background-color: $input-bg) {
+  .chosen-single,
+  .chosen-choices {
+    border-color: $border-color;
+    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+  }
+  &.chosen-container-active {
+    .chosen-single,
+    .chosen-choices {
+      border-color: darken($border-color, 10%);
+      $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
+      @include box-shadow($shadow);
+    }
+  }
+}
diff --git a/bootstrap-chosen-variables.scss b/bootstrap-chosen-variables.scss
@@ -11,6 +11,7 @@ $chosen-focus-border: 1px solid $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;
-$chosen-multi-height: $input-height-base + 6px !default;
+$chosen-multi-height: $input-height-base + 6px !default; 
+$chosen-feedback-padding: ($chosen-height * 1.25);
 $chosen-sprite-path: 'chosen-sprite.png' !default;
 $chosen-sprite-retina-path: '[email protected]' !default;
diff --git a/bootstrap-chosen.less b/bootstrap-chosen.less
@@ -142,14 +142,14 @@
   .has-feedback & {
 
     .chosen-choices {
-      padding-right : @chosen-feedback-padding;
+      padding-right: @chosen-feedback-padding;
     }
     span {
-      padding-right : @chosen-feedback-padding - 26px;
+      padding-right: @chosen-feedback-padding - 26px;
     }
 
     &.chosen-container-single ~ .form-control-feedback {
-      right : @chosen-feedback-padding - 26px;
+      right: @chosen-feedback-padding - 26px;
     }
   }
 }
@@ -473,25 +473,25 @@
 
   .has-feedback & {
     ~ .form-control-feedback {
-      left : 0;
+      left: 0;
     }
 
     .chosen-choices,
     span {
-      padding-right : 0;
+      padding-right: 0;
     }
 
     .chosen-choices {
-      padding-left : @chosen-feedback-padding;
+      padding-left: @chosen-feedback-padding;
     }
 
     &.chosen-container-single {
       ~ .form-control-feedback {
-        left : @chosen-feedback-padding - 26px;
+        left: @chosen-feedback-padding - 26px;
       }
 
       span {
-        padding-left : @chosen-feedback-padding - 26px;
+        padding-left: @chosen-feedback-padding - 26px;
       }
     }
   }

diff --git a/bootstrap-chosen.scss b/bootstrap-chosen.scss
@@ -8,6 +8,7 @@
 //
 
 @import "bootstrap-chosen-variables";
+@import "bootstrap-chosen-mixins";
 
 .chosen-select { width: 100%; }
 .chosen-select-deselect { width: 100%; }
@@ -124,6 +125,33 @@
       background: url($chosen-sprite-path) no-repeat -22px -3px;
     }
   }
+
+  .has-error & {
+    @include chosen-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
+  }
+
+  .has-success & {
+    @include chosen-control-validation($state-success-text, $state-success-text, $state-success-bg);
+  }
+
+  .has-warning & {
+    @include chosen-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
+  }
+
+  .has-feedback & {
+
+    .chosen-choices {
+      padding-right: $chosen-feedback-padding;
+    }
+    span {
+      padding-right: $chosen-feedback-padding - 26px;
+    }
+
+    &.chosen-container-single ~ .form-control-feedback {
+      right: $chosen-feedback-padding - 26px;
+    }
+  }
+
 }
 
 .chosen-container-single {
@@ -442,6 +470,31 @@
     direction: rtl;
     padding: 4px 5px 4px 20px;
   }
+
+  .has-feedback & {
+    ~ .form-control-feedback {
+      left: 0;
+    }
+
+    .chosen-choices,
+    span {
+      padding-right: 0;
+    }
+
+    .chosen-choices {
+      padding-left: $chosen-feedback-padding;
+    }
+
+    &.chosen-container-single {
+      ~ .form-control-feedback {
+        left: $chosen-feedback-padding - 26px;
+      }
+
+      span {
+        padding-left: $chosen-feedback-padding - 26px;
+      }
+    }
+  }
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) {