From 4c1a6c34b7204a91986baded4c6f5734e647ea5e Mon Sep 17 00:00:00 2001 From: Rafael Dias Date: Fri, 20 Feb 2015 17:09:38 -0200 Subject: [PATCH 1/4] Update chosen input status --- bootstrap-chosen-mixins.less | 25 +++++++++++++++++++++++++ bootstrap-chosen.less | 15 +++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 bootstrap-chosen-mixins.less diff --git a/bootstrap-chosen-mixins.less b/bootstrap-chosen-mixins.less new file mode 100644 index 0000000..a19faa1 --- /dev/null +++ b/bootstrap-chosen-mixins.less @@ -0,0 +1,25 @@ +// +// bootstrap-chosen-mixins.less +// +// 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 +// + +.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; + } + &.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%); + .box-shadow(@shadow); + } + } +} diff --git a/bootstrap-chosen.less b/bootstrap-chosen.less index 7d6cf60..e62c43b 100644 --- a/bootstrap-chosen.less +++ b/bootstrap-chosen.less @@ -8,6 +8,7 @@ // @import "bootstrap-chosen-variables.less"; +@import "bootstrap-chosen-mixins.less"; .chosen-select { width: 100%; } .chosen-select-deselect { width: 100%; } @@ -124,6 +125,19 @@ background: url("@{chosen-sprite-path}") no-repeat -22px -3px; } } + + + .has-error & { + .chosen-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg); + } + + .has-success & { + .chosen-control-validation(@state-success-text; @state-success-text; @state-success-bg); + } + + .has-warning & { + .chosen-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg); + } } .chosen-container-single { @@ -458,6 +472,7 @@ } } + @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { .chosen-rtl .chosen-search input[type="text"], .chosen-container-single .chosen-single abbr, From 673ae08ccd3f570b919047d32f51a0ca77780f58 Mon Sep 17 00:00:00 2001 From: Rafael Dias Date: Fri, 20 Feb 2015 17:17:46 -0200 Subject: [PATCH 2/4] Modified examples.html in order to test input status. --- example.html | 782 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 782 insertions(+) diff --git a/example.html b/example.html index 9df393e..26e6c95 100644 --- a/example.html +++ b/example.html @@ -26,6 +26,788 @@

Bootstrap + Chosen

+
+

Input States

+
+ +
+
+ + + + (error) +
+
+ + + + (error) +
+
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+

Standard Select

From 4a47057ff2f0fc04421827d6f823b6cd6fd92d72 Mon Sep 17 00:00:00 2001 From: Rafael Dias Date: Tue, 24 Feb 2015 00:19:42 -0300 Subject: [PATCH 3/4] Added support for . (less) --- bootstrap-chosen-mixins.less | 1 + bootstrap-chosen-variables.less | 1 + bootstrap-chosen.less | 42 ++++- example.html | 305 +++++++++++++++++++++++++++++--- 4 files changed, 325 insertions(+), 24 deletions(-) diff --git a/bootstrap-chosen-mixins.less b/bootstrap-chosen-mixins.less index a19faa1..23cda40 100644 --- a/bootstrap-chosen-mixins.less +++ b/bootstrap-chosen-mixins.less @@ -14,6 +14,7 @@ .chosen-choices { .form-control; } + &.chosen-container-active { .chosen-single, .chosen-choices { diff --git a/bootstrap-chosen-variables.less b/bootstrap-chosen-variables.less index fb350b6..0668d9b 100644 --- a/bootstrap-chosen-variables.less +++ b/bootstrap-chosen-variables.less @@ -20,5 +20,6 @@ @chosen-focus-transition: ~"border linear .2s, box-shadow linear .2s"; @chosen-height: @input-height-base; @chosen-multi-height: @input-height-base + 6px; +@chosen-feedback-padding: (@chosen-height * 1.25); @chosen-sprite-path: "chosen-sprite.png"; @chosen-sprite-retina-path: "chosen-sprite@2x.png"; diff --git a/bootstrap-chosen.less b/bootstrap-chosen.less index e62c43b..b6ba473 100644 --- a/bootstrap-chosen.less +++ b/bootstrap-chosen.less @@ -126,7 +126,6 @@ } } - .has-error & { .chosen-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg); } @@ -138,6 +137,21 @@ .has-warning & { .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 { @@ -232,6 +246,7 @@ -moz-background-clip: padding; background-clip: padding-box; } + } .chosen-container-single-nosearch { @@ -455,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; + } + } + } } .input-group { diff --git a/example.html b/example.html index 26e6c95..f297bcf 100644 --- a/example.html +++ b/example.html @@ -3,7 +3,7 @@ Bootstrap + Chosen - +