diff --git a/.gitignore b/.gitignore index c3f0ce87e7e..661822d6b09 100644 --- a/.gitignore +++ b/.gitignore @@ -3,5 +3,6 @@ node_modules .project dist/ public/*.js -public/*.min.css +public/*.css chosen.zip +.sass-cache diff --git a/Gruntfile.coffee b/Gruntfile.coffee index b93c4c9071c..2da98a51099 100644 --- a/Gruntfile.coffee +++ b/Gruntfile.coffee @@ -45,14 +45,22 @@ module.exports = (grunt) -> 'public/chosen.jquery.min.js': ['public/chosen.jquery.js'] 'public/chosen.proto.min.js': ['public/chosen.proto.js'] + compass: + chosen_css: + options: + specify: + ['sass/chosen.scss'] + cssmin: minified_chosen_css: + options: + banner: "<%= minified_comments %>" src: 'public/chosen.css' dest: 'public/chosen.min.css' watch: scripts: - files: ['coffee/**/*.coffee'] + files: ['coffee/**/*.coffee', 'sass/*.scss'] tasks: ['build'] copy: @@ -88,13 +96,14 @@ module.exports = (grunt) -> grunt.loadNpmTasks 'grunt-contrib-watch' grunt.loadNpmTasks 'grunt-contrib-copy' grunt.loadNpmTasks 'grunt-contrib-clean' + grunt.loadNpmTasks 'grunt-contrib-compass' grunt.loadNpmTasks 'grunt-contrib-cssmin' grunt.loadNpmTasks 'grunt-build-gh-pages' grunt.loadNpmTasks 'grunt-zip' grunt.loadNpmTasks 'grunt-dom-munger' grunt.registerTask 'default', ['build'] - grunt.registerTask 'build', ['coffee', 'concat', 'uglify', 'cssmin'] + grunt.registerTask 'build', ['coffee', 'compass', 'concat', 'uglify', 'cssmin'] grunt.registerTask 'gh_pages', ['copy:dist', 'build_gh_pages:gh_pages'] grunt.registerTask 'prep_release', ['build','zip:chosen','package_jquery'] diff --git a/config.rb b/config.rb new file mode 100644 index 00000000000..a9f6692151e --- /dev/null +++ b/config.rb @@ -0,0 +1,8 @@ +http_path = "/" +css_dir = "public" +sass_dir = "sass" +images_dir = "public" + +relative_assets = true +line_comments = false +asset_cache_buster :none \ No newline at end of file diff --git a/package.json b/package.json index 52a8446f64a..028bb685627 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "grunt-contrib-watch": "~0.3.1", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-clean": "~0.4.1", + "grunt-contrib-compass": "~0.3.0", "grunt-contrib-cssmin": "~0.6.1", "grunt-build-gh-pages": "0.0.4", "grunt-zip": "~0.9.2", diff --git a/public/chosen.css b/public/chosen.css deleted file mode 100644 index e0267f0fe78..00000000000 --- a/public/chosen.css +++ /dev/null @@ -1,459 +0,0 @@ -/* @group Base */ -.chzn-container { - font-size: 13px; - position: relative; - display: inline-block; - vertical-align: middle; - zoom: 1; - *display: inline; -} -.chzn-container .chzn-drop { - background: #fff; - border: 1px solid #aaa; - border-top: 0; - position: absolute; - top: 100%; - left: -9999px; - -webkit-box-shadow: 0 4px 5px rgba(0,0,0,.15); - -moz-box-shadow : 0 4px 5px rgba(0,0,0,.15); - box-shadow : 0 4px 5px rgba(0,0,0,.15); - z-index: 1010; - width: 100%; - -moz-box-sizing : border-box; - -ms-box-sizing : border-box; - -webkit-box-sizing: border-box; - -khtml-box-sizing : border-box; - box-sizing : border-box; -} - -.chzn-container.chzn-with-drop .chzn-drop { - left: 0; -} - -/* @end */ - -/* @group Single Chosen */ -.chzn-container-single .chzn-single { - background-color: #ffffff; - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0 ); - background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4)); - background-image: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); - background-image: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); - background-image: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); - background-image: linear-gradient(#ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); - -webkit-border-radius: 5px; - -moz-border-radius : 5px; - border-radius : 5px; - -moz-background-clip : padding; - -webkit-background-clip: padding-box; - background-clip : padding-box; - border: 1px solid #aaaaaa; - -webkit-box-shadow: 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1); - -moz-box-shadow : 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1); - box-shadow : 0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1); - display: block; - overflow: hidden; - white-space: nowrap; - position: relative; - height: 23px; - line-height: 24px; - padding: 0 0 0 8px; - color: #444444; - text-decoration: none; -} -.chzn-container-single .chzn-default { - color: #999; -} -.chzn-container-single .chzn-single span { - margin-right: 26px; - display: block; - overflow: hidden; - white-space: nowrap; - -o-text-overflow: ellipsis; - -ms-text-overflow: ellipsis; - text-overflow: ellipsis; -} -.chzn-container-single .chzn-single-with-deselect span { - margin-right: 38px; -} - -.chzn-container-single .chzn-single abbr { - display: block; - position: absolute; - right: 26px; - top: 6px; - width: 12px; - height: 12px; - font-size: 1px; - background: url('chosen-sprite.png') -42px 1px no-repeat; -} -.chzn-container-single .chzn-single abbr:hover { - background-position: -42px -10px; -} -.chzn-container-single.chzn-disabled .chzn-single abbr:hover { - background-position: -42px -10px; -} -.chzn-container-single .chzn-single div { - position: absolute; - right: 0; - top: 0; - display: block; - height: 100%; - width: 18px; -} -.chzn-container-single .chzn-single div b { - background: url('chosen-sprite.png') no-repeat 0px 2px; - display: block; - width: 100%; - height: 100%; -} -.chzn-container-single .chzn-search { - padding: 3px 4px; - position: relative; - margin: 0; - white-space: nowrap; - z-index: 1010; -} -.chzn-container-single .chzn-search input { - background: #fff url('chosen-sprite.png') no-repeat 100% -20px; - background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-gradient(linear, 0 0, 0 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); - background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%); - background: url('chosen-sprite.png') no-repeat 100% -20px, -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%); - background: url('chosen-sprite.png') no-repeat 100% -20px, -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%); - background: url('chosen-sprite.png') no-repeat 100% -20px, linear-gradient(#eeeeee 1%, #ffffff 15%); - margin: 1px 0; - padding: 4px 20px 4px 5px; - outline: 0; - border: 1px solid #aaa; - font-family: sans-serif; - font-size: 1em; - width: 100%; - -moz-box-sizing : border-box; - -ms-box-sizing : border-box; - -webkit-box-sizing: border-box; - -khtml-box-sizing : border-box; - box-sizing : border-box; -} -.chzn-container-single .chzn-drop { - margin-top: -1px; - -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius : 0 0 4px 4px; - border-radius : 0 0 4px 4px; - -moz-background-clip : padding; - -webkit-background-clip: padding-box; - background-clip : padding-box; -} -.chzn-container-single-nosearch .chzn-search { - position: absolute; - left: -9999px; -} -/* @end */ - -/* @group Multi Chosen */ -.chzn-container-multi .chzn-choices { - background-color: #fff; - background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); - background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%); - background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%); - background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%); - background-image: linear-gradient(#eeeeee 1%, #ffffff 15%); - border: 1px solid #aaa; - margin: 0; - padding: 0; - cursor: text; - overflow: hidden; - height: auto !important; - height: 1%; - position: relative; - width: 100%; - -moz-box-sizing : border-box; - -ms-box-sizing : border-box; - -webkit-box-sizing: border-box; - -khtml-box-sizing : border-box; - box-sizing : border-box; -} -.chzn-container-multi .chzn-choices li { - float: left; - list-style: none; -} -.chzn-container-multi .chzn-choices .search-field { - white-space: nowrap; - margin: 0; - padding: 0; -} -.chzn-container-multi .chzn-choices .search-field input { - color: #666; - background: transparent !important; - border: 0 !important; - font-family: sans-serif; - font-size: 100%; - height: 15px; - padding: 5px; - margin: 1px 0; - outline: 0; - -webkit-box-shadow: none; - -moz-box-shadow : none; - box-shadow : none; -} -.chzn-container-multi .chzn-choices .search-field .default { - color: #999; -} -.chzn-container-multi .chzn-choices .search-choice { - -webkit-border-radius: 3px; - -moz-border-radius : 3px; - border-radius : 3px; - -moz-background-clip : padding; - -webkit-background-clip: padding-box; - background-clip : padding-box; - background-color: #e4e4e4; - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 ); - background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee)); - background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); - background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); - background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); - background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); - -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); - -moz-box-shadow : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); - box-shadow : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); - color: #333; - border: 1px solid #aaaaaa; - line-height: 13px; - padding: 3px 20px 3px 5px; - margin: 3px 0 3px 5px; - position: relative; - cursor: default; -} -.chzn-container-multi .chzn-choices .search-choice.search-choice-disabled { - background-color: #e4e4e4; - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 ); - background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee)); - background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); - background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); - background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); - background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); - background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); - color: #666; - border: 1px solid #cccccc; - padding-right: 5px; -} -.chzn-container-multi .chzn-choices .search-choice-focus { - background: #d4d4d4; -} -.chzn-container-multi .chzn-choices .search-choice .search-choice-close { - display: block; - position: absolute; - right: 3px; - top: 4px; - width: 12px; - height: 12px; - font-size: 1px; - background: url('chosen-sprite.png') -42px 1px no-repeat; -} -.chzn-container-multi .chzn-choices .search-choice .search-choice-close:hover { - background-position: -42px -10px; -} -.chzn-container-multi .chzn-choices .search-choice-focus .search-choice-close { - background-position: -42px -10px; -} -/* @end */ - -/* @group Results */ -.chzn-container .chzn-results { - margin: 0 4px 4px 0; - max-height: 240px; - padding: 0 0 0 4px; - position: relative; - overflow-x: hidden; - overflow-y: auto; - -webkit-overflow-scrolling: touch; -} -.chzn-container-multi .chzn-results { - margin: 0; - padding: 0; -} -.chzn-container .chzn-results li { - display: none; - line-height: 15px; - padding: 5px 6px; - margin: 0; - list-style: none; -} -.chzn-container .chzn-results .active-result { - cursor: pointer; - display: list-item; -} - -.chzn-container .chzn-results .disabled-result { - color: #ccc; - cursor: default; - display: list-item; -} -.chzn-container .chzn-results .disabled-result em { - background: transparent; -} -.chzn-container .chzn-results .highlighted { - background-color: #3875d7; - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3875d7', endColorstr='#2a62bc', GradientType=0 ); - background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc)); - background-image: -webkit-linear-gradient(top, #3875d7 20%, #2a62bc 90%); - background-image: -moz-linear-gradient(top, #3875d7 20%, #2a62bc 90%); - background-image: -o-linear-gradient(top, #3875d7 20%, #2a62bc 90%); - background-image: linear-gradient(#3875d7 20%, #2a62bc 90%); - color: #fff; -} -.chzn-container .chzn-results li em { - background: #feffde; - font-style: normal; -} -.chzn-container .chzn-results .highlighted em { - background: transparent; -} -.chzn-container .chzn-results .no-results { - background: #f4f4f4; - display: list-item; -} -.chzn-container .chzn-results .group-result { - cursor: default; - color: #999; - font-weight: bold; - display: list-item; -} -.chzn-container .chzn-results .group-option { - padding-left: 15px; -} -.chzn-container-multi .chzn-drop .result-selected { - color: #ccc; - cursor: default; - display: list-item; -} -.chzn-container-multi .chzn-drop .result-selected em { - background: transparent; -} -.chzn-container .chzn-results-scroll { - background: white; - margin: 0 4px; - position: absolute; - text-align: center; - width: 321px; /* This should by dynamic with js */ - z-index: 1; -} -.chzn-container .chzn-results-scroll span { - display: inline-block; - height: 17px; - text-indent: -5000px; - width: 9px; -} -.chzn-container .chzn-results-scroll-down { - bottom: 0; -} -.chzn-container .chzn-results-scroll-down span { - background: url('chosen-sprite.png') no-repeat -4px -3px; -} -.chzn-container .chzn-results-scroll-up span { - background: url('chosen-sprite.png') no-repeat -22px -3px; -} -/* @end */ - -/* @group Active */ -.chzn-container-active .chzn-single { - -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3); - -moz-box-shadow : 0 0 5px rgba(0,0,0,.3); - box-shadow : 0 0 5px rgba(0,0,0,.3); - border: 1px solid #5897fb; -} -.chzn-container-active.chzn-with-drop .chzn-single { - border: 1px solid #aaa; - -webkit-box-shadow: 0 1px 0 #fff inset; - -moz-box-shadow : 0 1px 0 #fff inset; - box-shadow : 0 1px 0 #fff inset; - background-color: #eee; - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0 ); - background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff)); - background-image: -webkit-linear-gradient(top, #eeeeee 20%, #ffffff 80%); - background-image: -moz-linear-gradient(top, #eeeeee 20%, #ffffff 80%); - background-image: -o-linear-gradient(top, #eeeeee 20%, #ffffff 80%); - background-image: linear-gradient(#eeeeee 20%, #ffffff 80%); - -webkit-border-bottom-left-radius : 0; - -webkit-border-bottom-right-radius: 0; - -moz-border-radius-bottomleft : 0; - -moz-border-radius-bottomright: 0; - border-bottom-left-radius : 0; - border-bottom-right-radius: 0; -} -.chzn-container-active.chzn-with-drop .chzn-single div { - background: transparent; - border-left: none; -} -.chzn-container-active.chzn-with-drop .chzn-single div b { - background-position: -18px 2px; -} -.chzn-container-active .chzn-choices { - -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3); - -moz-box-shadow : 0 0 5px rgba(0,0,0,.3); - box-shadow : 0 0 5px rgba(0,0,0,.3); - border: 1px solid #5897fb; -} -.chzn-container-active .chzn-choices .search-field input { - color: #111 !important; -} -/* @end */ - -/* @group Disabled Support */ -.chzn-disabled { - cursor: default; - opacity:0.5 !important; -} -.chzn-disabled .chzn-single { - cursor: default; -} -.chzn-disabled .chzn-choices .search-choice .search-choice-close { - cursor: default; -} - -/* @group Right to Left */ -.chzn-rtl { text-align: right; } -.chzn-rtl .chzn-single { padding: 0 8px 0 0; overflow: visible; } -.chzn-rtl .chzn-single span { margin-left: 26px; margin-right: 0; direction: rtl; } -.chzn-rtl .chzn-single-with-deselect span { margin-left: 38px; } - -.chzn-rtl .chzn-single div { left: 3px; right: auto; } -.chzn-rtl .chzn-single abbr { - left: 26px; - right: auto; -} -.chzn-rtl .chzn-choices .search-field input { direction: rtl; } -.chzn-rtl .chzn-choices li { float: right; } -.chzn-rtl .chzn-choices .search-choice { padding: 3px 5px 3px 19px; margin: 3px 5px 3px 0; } -.chzn-rtl .chzn-choices .search-choice .search-choice-close { left: 4px; right: auto; } -.chzn-rtl .chzn-container-single-nosearch .chzn-search { left: 9999px; } -.chzn-rtl .chzn-drop { left: 9999px; } -.chzn-rtl.chzn-container-single .chzn-results { margin: 0 0 4px 4px; padding: 0 4px 0 0; } -.chzn-rtl .chzn-results .group-option { padding-left: 0; padding-right: 15px; } -.chzn-rtl.chzn-container-active.chzn-with-drop .chzn-single div { border-right: none; } -.chzn-rtl .chzn-search input { - background: #fff url('chosen-sprite.png') no-repeat -30px -20px; - background: url('chosen-sprite.png') no-repeat -30px -20px, -webkit-gradient(linear, 0 0, 0 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); - background: url('chosen-sprite.png') no-repeat -30px -20px, -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%); - background: url('chosen-sprite.png') no-repeat -30px -20px, -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%); - background: url('chosen-sprite.png') no-repeat -30px -20px, -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%); - background: url('chosen-sprite.png') no-repeat -30px -20px, linear-gradient(#eeeeee 1%, #ffffff 15%); - padding: 4px 5px 4px 20px; - direction: rtl; -} -.chzn-container-single.chzn-rtl .chzn-single div b { - background-position: 6px 2px; -} -.chzn-container-single.chzn-rtl.chzn-with-drop .chzn-single div b { - background-position: -12px 2px; -} -/* @end */ - -/* @group Retina compatibility */ -@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) { - .chzn-rtl .chzn-search input, .chzn-container-single .chzn-single abbr, .chzn-container-single .chzn-single div b, .chzn-container-single .chzn-search input, .chzn-container-multi .chzn-choices .search-choice .search-choice-close, .chzn-container .chzn-results-scroll-down span, .chzn-container .chzn-results-scroll-up span { - background-image: url('chosen-sprite@2x.png') !important; - background-repeat: no-repeat !important; - background-size: 52px 37px !important; - } -} -/* @end */ diff --git a/sass/chosen.scss b/sass/chosen.scss new file mode 100644 index 00000000000..068126ffb65 --- /dev/null +++ b/sass/chosen.scss @@ -0,0 +1,409 @@ +@import "compass/css3/box-sizing"; +@import "compass/css3/images"; + +$chosen-sprite: image-url('chosen-sprite.png'); +$chosen-sprite-retina: image-url('chosen-sprite@2x.png'); + +/* @group Base */ +.chzn-container { + position: relative; + display: inline-block; + vertical-align: middle; + font-size: 13px; + zoom: 1; + *display: inline; + .chzn-drop { + position: absolute; + top: 100%; + left: -9999px; + z-index: 1010; + @include box-sizing(border-box); + width: 100%; + border: 1px solid #aaa; + border-top: 0; + background: #fff; + box-shadow: 0 4px 5px rgba(#000,.15); + } + &.chzn-with-drop .chzn-drop { + left: 0; + } +} +/* @end */ + +/* @group Single Chosen */ +.chzn-container-single{ + .chzn-single { + position: relative; + display: block; + overflow: hidden; + padding: 0 0 0 8px; + height: 23px; + border: 1px solid #aaa; + border-radius: 5px; + background-color: #fff; + @include background(linear-gradient(top, #fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%)); + background-clip: padding-box; + box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(#000,.1); + color: #444; + text-decoration: none; + white-space: nowrap; + line-height: 24px; + } + .chzn-default { + color: #999; + } + .chzn-single span { + display: block; + overflow: hidden; + margin-right: 26px; + text-overflow: ellipsis; + white-space: nowrap; + } + .chzn-single-with-deselect span { + margin-right: 38px; + } + .chzn-single abbr { + position: absolute; + top: 6px; + right: 26px; + display: block; + width: 12px; + height: 12px; + background: $chosen-sprite -42px 1px no-repeat; + font-size: 1px; + &:hover { + background-position: -42px -10px; + } + } + &.chzn-disabled .chzn-single abbr:hover { + background-position: -42px -10px; + } + .chzn-single div { + position: absolute; + top: 0; + right: 0; + display: block; + width: 18px; + height: 100%; + b { + display: block; + width: 100%; + height: 100%; + background: $chosen-sprite no-repeat 0px 2px; + } + } + .chzn-search { + position: relative; + z-index: 1010; + margin: 0; + padding: 3px 4px; + white-space: nowrap; + input { + @include box-sizing(border-box); + margin: 1px 0; + padding: 4px 20px 4px 5px; + width: 100%; + outline: 0; + border: 1px solid #aaa; + background: #fff $chosen-sprite no-repeat 100% -20px; + @include background($chosen-sprite no-repeat 100% -20px, linear-gradient(#eee 1%, #fff 15%)); + font-size: 1em; + font-family: sans-serif; + } + } + .chzn-drop { + margin-top: -1px; + border-radius: 0 0 4px 4px; + background-clip: padding-box; + } + &.chzn-container-single-nosearch .chzn-search { + position: absolute; + left: -9999px; + } +} +/* @end */ + +/* @group Multi Chosen */ +.chzn-container-multi{ + .chzn-choices { + position: relative; + overflow: hidden; + @include box-sizing(border-box); + margin: 0; + padding: 0; + width: 100%; + height: auto !important; + height: 1%; + border: 1px solid #aaa; + background-color: #fff; + @include background-image(linear-gradient(#eee 1%, #fff 15%)); + cursor: text; + } + .chzn-choices li { + float: left; + list-style: none; + &.search-field { + margin: 0; + padding: 0; + white-space: nowrap; + input { + margin: 1px 0; + padding: 5px; + height: 15px; + outline: 0; + border: 0 !important; + background: transparent !important; + box-shadow: none; + color: #666; + font-size: 100%; + font-family: sans-serif; + } + .default { + color: #999; + } + } + &.search-choice { + position: relative; + margin: 3px 0 3px 5px; + padding: 3px 20px 3px 5px; + border: 1px solid #aaa; + border-radius: 3px; + background-color: #e4e4e4; + @include background-image(linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%)); + background-clip: padding-box; + box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(#000,.05); + color: #333; + line-height: 13px; + cursor: default; + .search-choice-close { + position: absolute; + top: 4px; + right: 3px; + display: block; + width: 12px; + height: 12px; + background: $chosen-sprite -42px 1px no-repeat; + font-size: 1px; + &:hover { + background-position: -42px -10px; + } + } + } + &.search-choice-disabled { + padding-right: 5px; + border: 1px solid #ccc; + background-color: #e4e4e4; + @include background-image(linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%)); + color: #666; + } + &.search-choice-focus { + background: #d4d4d4; + .search-choice-close { + background-position: -42px -10px; + } + } + } + .chzn-results { + margin: 0; + padding: 0; + } + .chzn-drop .result-selected { + display: list-item; + color: #ccc; + cursor: default; + em { + background: transparent; + } + } +} +/* @end */ + +/* @group Results */ +.chzn-container .chzn-results { + position: relative; + overflow-x: hidden; + overflow-y: auto; + margin: 0 4px 4px 0; + padding: 0 0 0 4px; + max-height: 240px; + -webkit-overflow-scrolling: touch; + li { + display: none; + margin: 0; + padding: 5px 6px; + list-style: none; + line-height: 15px; + &.active-result { + display: list-item; + cursor: pointer; + } + &.disabled-result { + display: list-item; + color: #ccc; + cursor: default; + em { + background: transparent; + } + } + &.highlighted { + background-color: #3875d7; + @include background-image(linear-gradient(#3875d7 20%, #2a62bc 90%)); + color: #fff; + em { + background: transparent; + } + } + &.no-results { + display: list-item; + background: #f4f4f4; + } + &.group-result { + color: #999; + font-weight: bold; + cursor: default; + } + &.group-option { + padding-left: 15px; + } + em { + background: #feffde; + font-style: normal; + } + } +} +/* @end */ + +/* @group Active */ +.chzn-container-active{ + .chzn-single { + border: 1px solid #5897fb; + box-shadow: 0 0 5px rgba(#000,.3); + } + &.chzn-with-drop{ + .chzn-single { + border: 1px solid #aaa; + -moz-border-radius-bottomright: 0; + border-bottom-right-radius: 0; + -moz-border-radius-bottomleft: 0; + border-bottom-left-radius: 0; + @include background-image(linear-gradient(#eee 20%, #fff 80%)); + box-shadow: 0 1px 0 #fff inset; + } + .chzn-single div { + border-left: none; + background: transparent; + b { + background-position: -18px 2px; + } + } + } + .chzn-choices { + border: 1px solid #5897fb; + box-shadow: 0 0 5px rgba(#000,.3); + li.search-field input { + color: #111 !important; + } + } +} +/* @end */ + +/* @group Disabled Support */ +.chzn-disabled { + opacity: 0.5 !important; + cursor: default; + .chzn-single { + cursor: default; + } + .chzn-choices .search-choice .search-choice-close { + cursor: default; + } +} +/* @end */ + +/* @group Right to Left */ +.chzn-rtl { + text-align: right; + .chzn-single { + overflow: visible; + padding: 0 8px 0 0; + } + .chzn-single span { + margin-right: 0; + margin-left: 26px; + direction: rtl; + } + .chzn-single-with-deselect span { + margin-left: 38px; + } + .chzn-single div { + right: auto; + left: 3px; + } + .chzn-single abbr { + right: auto; + left: 26px; + } + .chzn-choices li { + float: right; + &.search-field input { + direction: rtl; + } + &.search-choice { + margin: 3px 5px 3px 0; + padding: 3px 5px 3px 19px; + .search-choice-close { + right: auto; + left: 4px; + } + } + } + &.chzn-container-single-nosearch .chzn-search, + .chzn-drop { + left: 9999px; + } + &.chzn-container-single .chzn-results { + margin: 0 0 4px 4px; + padding: 0 4px 0 0; + } + .chzn-results li.group-option { + padding-right: 15px; + padding-left: 0; + } + &.chzn-container-active.chzn-with-drop .chzn-single div { + border-right: none; + } + .chzn-search input { + padding: 4px 5px 4px 20px; + background: #fff $chosen-sprite no-repeat -30px -20px; + @include background($chosen-sprite no-repeat -30px -20px, linear-gradient(#eee 1%, #fff 15%)); + direction: rtl; + } + &.chzn-container-single{ + .chzn-single div b { + background-position: 6px 2px; + } + &.chzn-with-drop{ + .chzn-single div b { + background-position: -12px 2px; + } + } + } +} + +/* @end */ + +/* @group Retina compatibility */ +@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) { + .chzn-rtl .chzn-search input, + .chzn-container-single .chzn-single abbr, + .chzn-container-single .chzn-single div b, + .chzn-container-single .chzn-search input, + .chzn-container-multi .chzn-choices .search-choice .search-choice-close, + .chzn-container .chzn-results-scroll-down span, + .chzn-container .chzn-results-scroll-up span { + background-image: $chosen-sprite-retina !important; + background-size: 52px 37px !important; + background-repeat: no-repeat !important; + } +} +/* @end */