From 262a81f7d47769f85ceb7476ffe133a445395d46 Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Wed, 3 Jul 2013 01:12:40 +0200 Subject: [PATCH 1/8] added compass for sass compilation --- .gitignore | 3 +- Gruntfile.coffee | 12 ++- config.rb | 24 +++++ package.json | 1 + public/chosen.css => sass/chosen.scss | 139 +++++++------------------- 5 files changed, 71 insertions(+), 108 deletions(-) create mode 100644 config.rb rename public/chosen.css => sass/chosen.scss (58%) 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 8fe280a26af..fd867f9ed68 100644 --- a/Gruntfile.coffee +++ b/Gruntfile.coffee @@ -45,14 +45,21 @@ module.exports = (grunt) -> 'public/chosen.jquery.min.js': ['public/chosen.jquery.js'] 'public/chosen.proto.min.js': ['public/chosen.proto.js'] + compass: + chosen_css: + files: + 'public/chosen.css': '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 +95,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..89cf7de77ac --- /dev/null +++ b/config.rb @@ -0,0 +1,24 @@ +# Require any additional compass plugins here. + +# Set this to the root of your project when deployed: +http_path = "/" +css_dir = "public" +sass_dir = "sass" +images_dir = "public" +javascripts_dir = "public" + +# You can select your preferred output style here (can be overridden via the command line): +# output_style = :expanded or :nested or :compact or :compressed + +# To enable relative paths to assets via compass helper functions. Uncomment: +# relative_assets = true + +# To disable debugging comments that display the original location of your selectors. Uncomment: +line_comments = false + + +# If you prefer the indented syntax, you might want to regenerate this +# project again passing --syntax sass, or you can uncomment this: +# preferred_syntax = :sass +# and then run: +# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass diff --git a/package.json b/package.json index 474c422e3d5..1cbef997291 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/sass/chosen.scss similarity index 58% rename from public/chosen.css rename to sass/chosen.scss index e0267f0fe78..23f3b98b282 100644 --- a/public/chosen.css +++ b/sass/chosen.scss @@ -1,3 +1,10 @@ +@import "compass/css3/box-shadow"; +@import "compass/css3/box-sizing"; +@import "compass/css3/images"; +@import "compass/css3/border-radius"; +@import "compass/css3/background-clip"; +@import "compass/typography/text/ellipsis"; + /* @group Base */ .chzn-container { font-size: 13px; @@ -14,16 +21,10 @@ 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); + @include 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; + @include box-sizing(border-box); } .chzn-container.chzn-with-drop .chzn-drop { @@ -35,22 +36,12 @@ /* @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; + @include background(linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%)); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0 ); + @include border-radius(5px); + @include 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); + @include box-shadow(0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1)); display: block; overflow: hidden; white-space: nowrap; @@ -69,9 +60,7 @@ display: block; overflow: hidden; white-space: nowrap; - -o-text-overflow: ellipsis; - -ms-text-overflow: ellipsis; - text-overflow: ellipsis; + @include ellipsis; } .chzn-container-single .chzn-single-with-deselect span { margin-right: 38px; @@ -116,11 +105,7 @@ } .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%); + @include 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; @@ -128,20 +113,12 @@ 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; + @include 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; + @include border-radius(0 0 4px 4px); + @include background-clip(padding-box); } .chzn-container-single-nosearch .chzn-search { position: absolute; @@ -152,11 +129,7 @@ /* @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%); + @include background-image(linear-gradient(#eeeeee 1%, #ffffff 15%)); border: 1px solid #aaa; margin: 0; padding: 0; @@ -166,11 +139,7 @@ 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; + @include box-sizing(border-box); } .chzn-container-multi .chzn-choices li { float: left; @@ -191,30 +160,18 @@ padding: 5px; margin: 1px 0; outline: 0; - -webkit-box-shadow: none; - -moz-box-shadow : none; - box-shadow : none; + @include 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; + @include border-radius(3px); + @include 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); + @include background-image(linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%)); + @include 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; @@ -226,12 +183,7 @@ .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%); + @include background-image(linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%)); color: #666; border: 1px solid #cccccc; padding-right: 5px; @@ -294,11 +246,7 @@ .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%); + @include background-image(linear-gradient(#3875d7 20%, #2a62bc 90%)); color: #fff; } .chzn-container .chzn-results li em { @@ -356,29 +304,16 @@ /* @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); + @include 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; + @include 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; + @include background-image(linear-gradient(#eeeeee 20%, #ffffff 80%)); + @include border-bottom-radius(0); } .chzn-container-active.chzn-with-drop .chzn-single div { background: transparent; @@ -388,9 +323,7 @@ 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); + @include box-shadow(0 0 5px rgba(0,0,0,.3)); border: 1px solid #5897fb; } .chzn-container-active .chzn-choices .search-field input { @@ -432,11 +365,7 @@ .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%); + @include background(url('chosen-sprite.png') no-repeat -30px -20px, linear-gradient(#eeeeee 1%, #ffffff 15%)); padding: 4px 5px 4px 20px; direction: rtl; } From 8ffbc73456fb792afadbcda1dcf3de047d205a85 Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Fri, 5 Jul 2013 01:04:58 +0200 Subject: [PATCH 2/8] use border-radius, box-shadow, text-overflow, background-clip without prefix removed IE filter short color codes --- sass/chosen.scss | 62 ++++++++++++++++++++++-------------------------- 1 file changed, 28 insertions(+), 34 deletions(-) diff --git a/sass/chosen.scss b/sass/chosen.scss index 23f3b98b282..96b0d0e4c28 100644 --- a/sass/chosen.scss +++ b/sass/chosen.scss @@ -1,9 +1,8 @@ -@import "compass/css3/box-shadow"; @import "compass/css3/box-sizing"; @import "compass/css3/images"; @import "compass/css3/border-radius"; -@import "compass/css3/background-clip"; -@import "compass/typography/text/ellipsis"; + +$experimental-support-for-svg: true; /* @group Base */ .chzn-container { @@ -21,7 +20,7 @@ position: absolute; top: 100%; left: -9999px; - @include box-shadow(0 4px 5px rgba(0,0,0,.15)); + box-shadow: 0 4px 5px rgba(#000,.15); z-index: 1010; width: 100%; @include box-sizing(border-box); @@ -35,13 +34,12 @@ /* @group Single Chosen */ .chzn-container-single .chzn-single { - background-color: #ffffff; - @include background(linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%)); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0 ); - @include border-radius(5px); - @include background-clip(padding-box); - border: 1px solid #aaaaaa; - @include box-shadow(0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1)); + background-color: #fff; + @include background(linear-gradient(top, #fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%)); + border-radius: 5px; + background-clip: padding-box; + border: 1px solid #aaa; + box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(#000,.1); display: block; overflow: hidden; white-space: nowrap; @@ -49,7 +47,7 @@ height: 23px; line-height: 24px; padding: 0 0 0 8px; - color: #444444; + color: #444; text-decoration: none; } .chzn-container-single .chzn-default { @@ -60,7 +58,7 @@ display: block; overflow: hidden; white-space: nowrap; - @include ellipsis; + text-overflow: ellipsis; } .chzn-container-single .chzn-single-with-deselect span { margin-right: 38px; @@ -105,7 +103,7 @@ } .chzn-container-single .chzn-search input { background: #fff url('chosen-sprite.png') no-repeat 100% -20px; - @include background(url('chosen-sprite.png') no-repeat 100% -20px, linear-gradient(#eeeeee 1%, #ffffff 15%)); + @include background(url('chosen-sprite.png') no-repeat 100% -20px, linear-gradient(#eee 1%, #fff 15%)); margin: 1px 0; padding: 4px 20px 4px 5px; outline: 0; @@ -117,8 +115,8 @@ } .chzn-container-single .chzn-drop { margin-top: -1px; - @include border-radius(0 0 4px 4px); - @include background-clip(padding-box); + border-radius: 0 0 4px 4px; + background-clip: padding-box; } .chzn-container-single-nosearch .chzn-search { position: absolute; @@ -129,7 +127,7 @@ /* @group Multi Chosen */ .chzn-container-multi .chzn-choices { background-color: #fff; - @include background-image(linear-gradient(#eeeeee 1%, #ffffff 15%)); + @include background-image(linear-gradient(#eee 1%, #fff 15%)); border: 1px solid #aaa; margin: 0; padding: 0; @@ -160,20 +158,19 @@ padding: 5px; margin: 1px 0; outline: 0; - @include box-shadow(none); + box-shadow: none; } .chzn-container-multi .chzn-choices .search-field .default { color: #999; } .chzn-container-multi .chzn-choices .search-choice { - @include border-radius(3px); - @include background-clip(padding-box); + border-radius: 3px; + background-clip: padding-box; background-color: #e4e4e4; - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 ); - @include background-image(linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%)); - @include box-shadow(0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05)); + @include background-image(linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%)); + box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(#000,.05); color: #333; - border: 1px solid #aaaaaa; + border: 1px solid #aaa; line-height: 13px; padding: 3px 20px 3px 5px; margin: 3px 0 3px 5px; @@ -182,10 +179,9 @@ } .chzn-container-multi .chzn-choices .search-choice.search-choice-disabled { background-color: #e4e4e4; - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee', GradientType=0 ); - @include background-image(linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%)); + @include background-image(linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%)); color: #666; - border: 1px solid #cccccc; + border: 1px solid #ccc; padding-right: 5px; } .chzn-container-multi .chzn-choices .search-choice-focus { @@ -245,7 +241,6 @@ } .chzn-container .chzn-results .highlighted { background-color: #3875d7; - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3875d7', endColorstr='#2a62bc', GradientType=0 ); @include background-image(linear-gradient(#3875d7 20%, #2a62bc 90%)); color: #fff; } @@ -304,15 +299,14 @@ /* @group Active */ .chzn-container-active .chzn-single { - @include box-shadow(0 0 5px rgba(0,0,0,.3)); + box-shadow: 0 0 5px rgba(#000,.3); border: 1px solid #5897fb; } .chzn-container-active.chzn-with-drop .chzn-single { border: 1px solid #aaa; - @include 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 ); - @include background-image(linear-gradient(#eeeeee 20%, #ffffff 80%)); + @include background-image(linear-gradient(#eee 20%, #fff 80%)); @include border-bottom-radius(0); } .chzn-container-active.chzn-with-drop .chzn-single div { @@ -323,7 +317,7 @@ background-position: -18px 2px; } .chzn-container-active .chzn-choices { - @include box-shadow(0 0 5px rgba(0,0,0,.3)); + box-shadow: 0 0 5px rgba(#000,.3); border: 1px solid #5897fb; } .chzn-container-active .chzn-choices .search-field input { @@ -365,7 +359,7 @@ .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; - @include background(url('chosen-sprite.png') no-repeat -30px -20px, linear-gradient(#eeeeee 1%, #ffffff 15%)); + @include background(url('chosen-sprite.png') no-repeat -30px -20px, linear-gradient(#eee 1%, #fff 15%)); padding: 4px 5px 4px 20px; direction: rtl; } From 6a81248a6fd138631c5cef860bf364a046f55618 Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Fri, 5 Jul 2013 13:52:21 +0200 Subject: [PATCH 3/8] nesting of selectors --- sass/chosen.scss | 722 +++++++++++++++++++++++++---------------------- 1 file changed, 389 insertions(+), 333 deletions(-) diff --git a/sass/chosen.scss b/sass/chosen.scss index 96b0d0e4c28..f0b3fd065f6 100644 --- a/sass/chosen.scss +++ b/sass/chosen.scss @@ -1,6 +1,5 @@ @import "compass/css3/box-sizing"; @import "compass/css3/images"; -@import "compass/css3/border-radius"; $experimental-support-for-svg: true; @@ -12,371 +11,428 @@ $experimental-support-for-svg: true; vertical-align: middle; zoom: 1; *display: inline; + .chzn-drop { + background: #fff; + border: 1px solid #aaa; + border-top: 0; + position: absolute; + top: 100%; + left: -9999px; + box-shadow: 0 4px 5px rgba(#000,.15); + z-index: 1010; + width: 100%; + @include box-sizing(border-box); + } + &.chzn-with-drop .chzn-drop { + left: 0; + } } -.chzn-container .chzn-drop { - background: #fff; - border: 1px solid #aaa; - border-top: 0; - position: absolute; - top: 100%; - left: -9999px; - box-shadow: 0 4px 5px rgba(#000,.15); - z-index: 1010; - width: 100%; - @include box-sizing(border-box); -} - -.chzn-container.chzn-with-drop .chzn-drop { - left: 0; -} - /* @end */ /* @group Single Chosen */ -.chzn-container-single .chzn-single { - background-color: #fff; - @include background(linear-gradient(top, #fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%)); - border-radius: 5px; - background-clip: padding-box; - border: 1px solid #aaa; - box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(#000,.1); - display: block; - overflow: hidden; - white-space: nowrap; - position: relative; - height: 23px; - line-height: 24px; - padding: 0 0 0 8px; - color: #444; - 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; - 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; - @include background(url('chosen-sprite.png') no-repeat 100% -20px, linear-gradient(#eee 1%, #fff 15%)); - margin: 1px 0; - padding: 4px 20px 4px 5px; - outline: 0; - border: 1px solid #aaa; - font-family: sans-serif; - font-size: 1em; - width: 100%; - @include box-sizing(border-box); -} -.chzn-container-single .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; +.chzn-container-single{ + .chzn-single { + background-color: #fff; + @include background(linear-gradient(top, #fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%)); + border-radius: 5px; + background-clip: padding-box; + border: 1px solid #aaa; + box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(#000,.1); + display: block; + overflow: hidden; + white-space: nowrap; + position: relative; + height: 23px; + line-height: 24px; + padding: 0 0 0 8px; + color: #444; + text-decoration: none; + } + .chzn-default { + color: #999; + } + .chzn-single span { + margin-right: 26px; + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + .chzn-single-with-deselect span { + margin-right: 38px; + } + .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; + &:hover { + background-position: -42px -10px; + } + } + &.chzn-disabled .chzn-single abbr:hover { + background-position: -42px -10px; + } + .chzn-single div { + position: absolute; + right: 0; + top: 0; + display: block; + height: 100%; + width: 18px; + b { + background: url('chosen-sprite.png') no-repeat 0px 2px; + display: block; + width: 100%; + height: 100%; + } + } + .chzn-search { + padding: 3px 4px; + position: relative; + margin: 0; + white-space: nowrap; + z-index: 1010; + input { + background: #fff url('chosen-sprite.png') no-repeat 100% -20px; + @include background(url('chosen-sprite.png') no-repeat 100% -20px, linear-gradient(#eee 1%, #fff 15%)); + margin: 1px 0; + padding: 4px 20px 4px 5px; + outline: 0; + border: 1px solid #aaa; + font-family: sans-serif; + font-size: 1em; + width: 100%; + @include box-sizing(border-box); + } + } + .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 { - background-color: #fff; - @include background-image(linear-gradient(#eee 1%, #fff 15%)); - border: 1px solid #aaa; - margin: 0; - padding: 0; - cursor: text; - overflow: hidden; - height: auto !important; - height: 1%; - position: relative; - width: 100%; - @include 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; - box-shadow: none; -} -.chzn-container-multi .chzn-choices .search-field .default { - color: #999; -} -.chzn-container-multi .chzn-choices .search-choice { - border-radius: 3px; - background-clip: padding-box; - background-color: #e4e4e4; - @include background-image(linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%)); - box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(#000,.05); - color: #333; - border: 1px solid #aaa; - 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; - @include background-image(linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%)); - color: #666; - border: 1px solid #ccc; - 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; +.chzn-container-multi{ + .chzn-choices { + background-color: #fff; + @include background-image(linear-gradient(#eee 1%, #fff 15%)); + border: 1px solid #aaa; + margin: 0; + padding: 0; + cursor: text; + overflow: hidden; + height: auto !important; + height: 1%; + position: relative; + width: 100%; + @include box-sizing(border-box); + } + .chzn-choices li { + float: left; + list-style: none; + } + .chzn-choices .search-field { + white-space: nowrap; + margin: 0; + padding: 0; + 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; + box-shadow: none; + } + .default { + color: #999; + } + } + .chzn-choices .search-choice { + border-radius: 3px; + background-clip: padding-box; + background-color: #e4e4e4; + @include background-image(linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%)); + box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(#000,.05); + color: #333; + border: 1px solid #aaa; + line-height: 13px; + padding: 3px 20px 3px 5px; + margin: 3px 0 3px 5px; + position: relative; + cursor: default; + &.search-choice-disabled { + background-color: #e4e4e4; + @include background-image(linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%)); + color: #666; + border: 1px solid #ccc; + padding-right: 5px; + } + .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; + &:hover { + background-position: -42px -10px; + } + } + } + .chzn-choices .search-choice-focus { + background: #d4d4d4; + .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 { + 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-results li { + display: none; + line-height: 15px; + padding: 5px 6px; + margin: 0; + list-style: none; + } + .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; - @include 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-results .disabled-result { + color: #ccc; + cursor: default; + display: list-item; + em { + background: transparent; + } + } + .chzn-results .highlighted { + background-color: #3875d7; + @include background-image(linear-gradient(#3875d7 20%, #2a62bc 90%)); + color: #fff; + } + .chzn-results li em { + background: #feffde; + font-style: normal; + } + .chzn-results .highlighted em { + background: transparent; + } + .chzn-results .no-results { + background: #f4f4f4; + display: list-item; + } + .chzn-results .group-result { + cursor: default; + color: #999; + font-weight: bold; + } + .chzn-results .group-option { + padding-left: 15px; + } + .chzn-results-scroll { + background: #fff; + margin: 0 4px; + position: absolute; + text-align: center; + width: 321px; /* This should by dynamic with js */ + z-index: 1; + span { + display: inline-block; + height: 17px; + text-indent: -5000px; + width: 9px; + } + } + .chzn-results-scroll-down { + bottom: 0; + span { + background: url('chosen-sprite.png') no-repeat -4px -3px; + } + } + .chzn-results-scroll-up span { + background: url('chosen-sprite.png') no-repeat -22px -3px; + } } -.chzn-container .chzn-results-scroll-up span { - background: url('chosen-sprite.png') no-repeat -22px -3px; + +.chzn-container-multi{ + .chzn-results { + margin: 0; + padding: 0; + } + .chzn-drop .result-selected { + color: #ccc; + cursor: default; + display: list-item; + em { + background: transparent; + } + } } /* @end */ /* @group Active */ -.chzn-container-active .chzn-single { - box-shadow: 0 0 5px rgba(#000,.3); - border: 1px solid #5897fb; -} -.chzn-container-active.chzn-with-drop .chzn-single { - border: 1px solid #aaa; - box-shadow: 0 1px 0 #fff inset; - background-color: #eee; - @include background-image(linear-gradient(#eee 20%, #fff 80%)); - @include border-bottom-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 { - box-shadow: 0 0 5px rgba(#000,.3); - border: 1px solid #5897fb; -} -.chzn-container-active .chzn-choices .search-field input { - color: #111 !important; +.chzn-container-active{ + .chzn-single { + box-shadow: 0 0 5px rgba(#000,.3); + border: 1px solid #5897fb; + } + &.chzn-with-drop{ + .chzn-single { + border: 1px solid #aaa; + box-shadow: 0 1px 0 #fff inset; + background-color: #eee; + @include background-image(linear-gradient(#eee 20%, #fff 80%)); + -moz-border-radius-bottomleft: 0; + border-bottom-left-radius: 0; + -moz-border-radius-bottomright: 0; + border-bottom-right-radius: 0; + } + .chzn-single div { + background: transparent; + border-left: none; + b { + background-position: -18px 2px; + } + } + } + .chzn-choices { + box-shadow: 0 0 5px rgba(#000,.3); + border: 1px solid #5897fb; + .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; + opacity: 0.5 !important; + .chzn-single { + cursor: default; + } + .chzn-choices .search-choice .search-choice-close { + cursor: default; + } } +/* @end */ /* @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; - @include background(url('chosen-sprite.png') no-repeat -30px -20px, linear-gradient(#eee 1%, #fff 15%)); - padding: 4px 5px 4px 20px; - direction: rtl; -} -.chzn-container-single.chzn-rtl .chzn-single div b { - background-position: 6px 2px; +.chzn-rtl { + text-align: right; + .chzn-single { + padding: 0 8px 0 0; + overflow: visible; + } + .chzn-single span { + margin-left: 26px; + margin-right: 0; + direction: rtl; + } + .chzn-single-with-deselect span { + margin-left: 38px; + } + .chzn-single div { + left: 3px; + right: auto; + } + .chzn-single abbr { + left: 26px; + right: auto; + } + .chzn-choices .search-field input { + direction: rtl; + } + .chzn-choices li { + float: right; + } + .chzn-choices .search-choice { + padding: 3px 5px 3px 19px; + margin: 3px 5px 3px 0; + } + .chzn-choices .search-choice .search-choice-close { + left: 4px; + right: auto; + } + &.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 .group-option { + padding-left: 0; + padding-right: 15px; + } + &.chzn-container-active.chzn-with-drop .chzn-single div { + border-right: none; + } + .chzn-search input { + background: #fff url('chosen-sprite.png') no-repeat -30px -20px; + @include background(url('chosen-sprite.png') no-repeat -30px -20px, linear-gradient(#eee 1%, #fff 15%)); + padding: 4px 5px 4px 20px; + direction: rtl; + } } -.chzn-container-single.chzn-rtl.chzn-with-drop .chzn-single div b { - background-position: -12px 2px; + +.chzn-container-single.chzn-rtl{ + .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: url('chosen-sprite@2x.png') !important; - background-repeat: no-repeat !important; - background-size: 52px 37px !important; + .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 */ From 582460936bc4ff661d8462c399cd0349723574e7 Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Fri, 5 Jul 2013 14:41:47 +0200 Subject: [PATCH 4/8] class variants using parent references (&) --- sass/chosen.scss | 191 +++++++++++++++++++++++------------------------ 1 file changed, 95 insertions(+), 96 deletions(-) diff --git a/sass/chosen.scss b/sass/chosen.scss index f0b3fd065f6..4c7bedae2f6 100644 --- a/sass/chosen.scss +++ b/sass/chosen.scss @@ -141,40 +141,53 @@ $experimental-support-for-svg: true; .chzn-choices li { float: left; list-style: none; - } - .chzn-choices .search-field { - white-space: nowrap; - margin: 0; - padding: 0; - 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; - box-shadow: none; + &.search-field { + white-space: nowrap; + margin: 0; + padding: 0; + 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; + box-shadow: none; + } + .default { + color: #999; + } } - .default { - color: #999; + &.search-choice { + border-radius: 3px; + background-clip: padding-box; + background-color: #e4e4e4; + @include background-image(linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%)); + box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(#000,.05); + color: #333; + border: 1px solid #aaa; + line-height: 13px; + padding: 3px 20px 3px 5px; + margin: 3px 0 3px 5px; + position: relative; + cursor: default; + .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; + &:hover { + background-position: -42px -10px; + } + } } - } - .chzn-choices .search-choice { - border-radius: 3px; - background-clip: padding-box; - background-color: #e4e4e4; - @include background-image(linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%)); - box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(#000,.05); - color: #333; - border: 1px solid #aaa; - line-height: 13px; - padding: 3px 20px 3px 5px; - margin: 3px 0 3px 5px; - position: relative; - cursor: default; &.search-choice-disabled { background-color: #e4e4e4; @include background-image(linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%)); @@ -182,26 +195,13 @@ $experimental-support-for-svg: true; border: 1px solid #ccc; padding-right: 5px; } - .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; - &:hover { + &.search-choice-focus { + background: #d4d4d4; + .search-choice-close { background-position: -42px -10px; } } } - .chzn-choices .search-choice-focus { - background: #d4d4d4; - .search-choice-close { - background-position: -42px -10px; - } - } } /* @end */ @@ -222,44 +222,43 @@ $experimental-support-for-svg: true; padding: 5px 6px; margin: 0; list-style: none; - } - .chzn-results .active-result { - cursor: pointer; - display: list-item; - } - - .chzn-results .disabled-result { - color: #ccc; - cursor: default; - display: list-item; + &.active-result { + cursor: pointer; + display: list-item; + } + &.disabled-result { + color: #ccc; + cursor: default; + display: list-item; + em { + background: transparent; + } + } + &.highlighted { + background-color: #3875d7; + @include background-image(linear-gradient(#3875d7 20%, #2a62bc 90%)); + color: #fff; + em { + background: transparent; + } + } + &.no-results { + background: #f4f4f4; + display: list-item; + } + &.group-result { + cursor: default; + color: #999; + font-weight: bold; + } + &.group-option { + padding-left: 15px; + } em { - background: transparent; + background: #feffde; + font-style: normal; } } - .chzn-results .highlighted { - background-color: #3875d7; - @include background-image(linear-gradient(#3875d7 20%, #2a62bc 90%)); - color: #fff; - } - .chzn-results li em { - background: #feffde; - font-style: normal; - } - .chzn-results .highlighted em { - background: transparent; - } - .chzn-results .no-results { - background: #f4f4f4; - display: list-item; - } - .chzn-results .group-result { - cursor: default; - color: #999; - font-weight: bold; - } - .chzn-results .group-option { - padding-left: 15px; - } .chzn-results-scroll { background: #fff; margin: 0 4px; @@ -329,7 +328,7 @@ $experimental-support-for-svg: true; .chzn-choices { box-shadow: 0 0 5px rgba(#000,.3); border: 1px solid #5897fb; - .search-field input { + li.search-field input { color: #111 !important; } } @@ -372,19 +371,19 @@ $experimental-support-for-svg: true; left: 26px; right: auto; } - .chzn-choices .search-field input { - direction: rtl; - } .chzn-choices li { float: right; - } - .chzn-choices .search-choice { - padding: 3px 5px 3px 19px; - margin: 3px 5px 3px 0; - } - .chzn-choices .search-choice .search-choice-close { - left: 4px; - right: auto; + &.search-field input { + direction: rtl; + } + &.search-choice { + padding: 3px 5px 3px 19px; + margin: 3px 5px 3px 0; + .search-choice-close { + left: 4px; + right: auto; + } + } } &.chzn-container-single-nosearch .chzn-search, .chzn-drop { @@ -394,7 +393,7 @@ $experimental-support-for-svg: true; margin: 0 0 4px 4px; padding: 0 4px 0 0; } - .chzn-results .group-option { + .chzn-results li.group-option { padding-left: 0; padding-right: 15px; } From 380050473eef89dde66856d06e52bb2e26cedba5 Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Fri, 5 Jul 2013 15:13:45 +0200 Subject: [PATCH 5/8] removed unused chzn-results-scroll* classes --- sass/chosen.scss | 86 ++++++++++++++++-------------------------------- 1 file changed, 29 insertions(+), 57 deletions(-) diff --git a/sass/chosen.scss b/sass/chosen.scss index 4c7bedae2f6..391024ad125 100644 --- a/sass/chosen.scss +++ b/sass/chosen.scss @@ -202,21 +202,31 @@ $experimental-support-for-svg: true; } } } + .chzn-results { + margin: 0; + padding: 0; + } + .chzn-drop .result-selected { + color: #ccc; + cursor: default; + display: list-item; + em { + background: transparent; + } + } } /* @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-results li { +.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; + li { display: none; line-height: 15px; padding: 5px 6px; @@ -259,44 +269,6 @@ $experimental-support-for-svg: true; font-style: normal; } } - .chzn-results-scroll { - background: #fff; - margin: 0 4px; - position: absolute; - text-align: center; - width: 321px; /* This should by dynamic with js */ - z-index: 1; - span { - display: inline-block; - height: 17px; - text-indent: -5000px; - width: 9px; - } - } - .chzn-results-scroll-down { - bottom: 0; - span { - background: url('chosen-sprite.png') no-repeat -4px -3px; - } - } - .chzn-results-scroll-up span { - background: url('chosen-sprite.png') no-repeat -22px -3px; - } -} - -.chzn-container-multi{ - .chzn-results { - margin: 0; - padding: 0; - } - .chzn-drop .result-selected { - color: #ccc; - cursor: default; - display: list-item; - em { - background: transparent; - } - } } /* @end */ @@ -406,18 +378,18 @@ $experimental-support-for-svg: true; padding: 4px 5px 4px 20px; direction: rtl; } -} - -.chzn-container-single.chzn-rtl{ - .chzn-single div b { - background-position: 6px 2px; - } - &.chzn-with-drop{ + &.chzn-container-single{ .chzn-single div b { - background-position: -12px 2px; + background-position: 6px 2px; + } + &.chzn-with-drop{ + .chzn-single div b { + background-position: -12px 2px; + } } } } + /* @end */ /* @group Retina compatibility */ From d175c98060edd383dc0ef354e45c3a1c2d0913ff Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Fri, 5 Jul 2013 15:25:04 +0200 Subject: [PATCH 6/8] IE9 without gradients --- sass/chosen.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/sass/chosen.scss b/sass/chosen.scss index 391024ad125..9feb9b62ee8 100644 --- a/sass/chosen.scss +++ b/sass/chosen.scss @@ -1,8 +1,6 @@ @import "compass/css3/box-sizing"; @import "compass/css3/images"; -$experimental-support-for-svg: true; - /* @group Base */ .chzn-container { font-size: 13px; @@ -282,7 +280,6 @@ $experimental-support-for-svg: true; .chzn-single { border: 1px solid #aaa; box-shadow: 0 1px 0 #fff inset; - background-color: #eee; @include background-image(linear-gradient(#eee 20%, #fff 80%)); -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0; From 48828e64c2ce2bd92ab35a2d180d090e44ffe9ba Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Fri, 5 Jul 2013 15:33:12 +0200 Subject: [PATCH 7/8] sort properties using csscomb --- sass/chosen.scss | 168 +++++++++++++++++++++++------------------------ 1 file changed, 84 insertions(+), 84 deletions(-) diff --git a/sass/chosen.scss b/sass/chosen.scss index 9feb9b62ee8..9c52baa90a5 100644 --- a/sass/chosen.scss +++ b/sass/chosen.scss @@ -3,23 +3,23 @@ /* @group Base */ .chzn-container { - font-size: 13px; position: relative; display: inline-block; vertical-align: middle; + font-size: 13px; zoom: 1; *display: inline; .chzn-drop { - background: #fff; - border: 1px solid #aaa; - border-top: 0; position: absolute; top: 100%; left: -9999px; - box-shadow: 0 4px 5px rgba(#000,.15); z-index: 1010; - width: 100%; @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; @@ -30,44 +30,44 @@ /* @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%)); - border-radius: 5px; background-clip: padding-box; - border: 1px solid #aaa; box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(#000,.1); - display: block; - overflow: hidden; - white-space: nowrap; - position: relative; - height: 23px; - line-height: 24px; - padding: 0 0 0 8px; color: #444; text-decoration: none; + white-space: nowrap; + line-height: 24px; } .chzn-default { color: #999; } .chzn-single span { - margin-right: 26px; display: block; overflow: hidden; - white-space: nowrap; + margin-right: 26px; text-overflow: ellipsis; + white-space: nowrap; } .chzn-single-with-deselect span { margin-right: 38px; } .chzn-single abbr { - display: block; position: absolute; - right: 26px; top: 6px; + right: 26px; + display: block; width: 12px; height: 12px; - font-size: 1px; background: url('chosen-sprite.png') -42px 1px no-repeat; + font-size: 1px; &:hover { background-position: -42px -10px; } @@ -77,35 +77,35 @@ } .chzn-single div { position: absolute; - right: 0; top: 0; + right: 0; display: block; - height: 100%; width: 18px; + height: 100%; b { - background: url('chosen-sprite.png') no-repeat 0px 2px; display: block; width: 100%; height: 100%; + background: url('chosen-sprite.png') no-repeat 0px 2px; } } .chzn-search { - padding: 3px 4px; position: relative; + z-index: 1010; margin: 0; + padding: 3px 4px; white-space: nowrap; - z-index: 1010; input { - background: #fff url('chosen-sprite.png') no-repeat 100% -20px; - @include background(url('chosen-sprite.png') no-repeat 100% -20px, linear-gradient(#eee 1%, #fff 15%)); + @include box-sizing(border-box); margin: 1px 0; padding: 4px 20px 4px 5px; + width: 100%; outline: 0; border: 1px solid #aaa; - font-family: sans-serif; + background: #fff url('chosen-sprite.png') no-repeat 100% -20px; + @include background(url('chosen-sprite.png') no-repeat 100% -20px, linear-gradient(#eee 1%, #fff 15%)); font-size: 1em; - width: 100%; - @include box-sizing(border-box); + font-family: sans-serif; } } .chzn-drop { @@ -123,75 +123,75 @@ /* @group Multi Chosen */ .chzn-container-multi{ .chzn-choices { - background-color: #fff; - @include background-image(linear-gradient(#eee 1%, #fff 15%)); - border: 1px solid #aaa; + position: relative; + overflow: hidden; + @include box-sizing(border-box); margin: 0; padding: 0; - cursor: text; - overflow: hidden; + width: 100%; height: auto !important; height: 1%; - position: relative; - width: 100%; - @include box-sizing(border-box); + 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 { - white-space: nowrap; margin: 0; padding: 0; + white-space: nowrap; input { - color: #666; - background: transparent !important; - border: 0 !important; - font-family: sans-serif; - font-size: 100%; - height: 15px; - padding: 5px; 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-clip: padding-box; background-color: #e4e4e4; - @include background-image(linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%)); + @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; - border: 1px solid #aaa; line-height: 13px; - padding: 3px 20px 3px 5px; - margin: 3px 0 3px 5px; - position: relative; cursor: default; .search-choice-close { - display: block; position: absolute; - right: 3px; top: 4px; + right: 3px; + display: block; width: 12px; height: 12px; - font-size: 1px; background: url('chosen-sprite.png') -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; - border: 1px solid #ccc; - padding-right: 5px; } &.search-choice-focus { background: #d4d4d4; @@ -205,9 +205,9 @@ padding: 0; } .chzn-drop .result-selected { + display: list-item; color: #ccc; cursor: default; - display: list-item; em { background: transparent; } @@ -217,27 +217,27 @@ /* @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; + margin: 0 4px 4px 0; + padding: 0 0 0 4px; + max-height: 240px; -webkit-overflow-scrolling: touch; li { display: none; - line-height: 15px; - padding: 5px 6px; margin: 0; + padding: 5px 6px; list-style: none; + line-height: 15px; &.active-result { - cursor: pointer; display: list-item; + cursor: pointer; } &.disabled-result { + display: list-item; color: #ccc; cursor: default; - display: list-item; em { background: transparent; } @@ -251,13 +251,13 @@ } } &.no-results { - background: #f4f4f4; display: list-item; + background: #f4f4f4; } &.group-result { - cursor: default; color: #999; font-weight: bold; + cursor: default; } &.group-option { padding-left: 15px; @@ -273,30 +273,30 @@ /* @group Active */ .chzn-container-active{ .chzn-single { - box-shadow: 0 0 5px rgba(#000,.3); border: 1px solid #5897fb; + box-shadow: 0 0 5px rgba(#000,.3); } &.chzn-with-drop{ .chzn-single { border: 1px solid #aaa; - box-shadow: 0 1px 0 #fff inset; - @include background-image(linear-gradient(#eee 20%, #fff 80%)); - -moz-border-radius-bottomleft: 0; - border-bottom-left-radius: 0; -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 { - background: transparent; border-left: none; + background: transparent; b { background-position: -18px 2px; } } } .chzn-choices { - box-shadow: 0 0 5px rgba(#000,.3); border: 1px solid #5897fb; + box-shadow: 0 0 5px rgba(#000,.3); li.search-field input { color: #111 !important; } @@ -306,8 +306,8 @@ /* @group Disabled Support */ .chzn-disabled { - cursor: default; opacity: 0.5 !important; + cursor: default; .chzn-single { cursor: default; } @@ -321,24 +321,24 @@ .chzn-rtl { text-align: right; .chzn-single { - padding: 0 8px 0 0; overflow: visible; + padding: 0 8px 0 0; } .chzn-single span { - margin-left: 26px; margin-right: 0; + margin-left: 26px; direction: rtl; } .chzn-single-with-deselect span { margin-left: 38px; } .chzn-single div { - left: 3px; right: auto; + left: 3px; } .chzn-single abbr { - left: 26px; right: auto; + left: 26px; } .chzn-choices li { float: right; @@ -346,11 +346,11 @@ direction: rtl; } &.search-choice { - padding: 3px 5px 3px 19px; margin: 3px 5px 3px 0; + padding: 3px 5px 3px 19px; .search-choice-close { - left: 4px; right: auto; + left: 4px; } } } @@ -363,16 +363,16 @@ padding: 0 4px 0 0; } .chzn-results li.group-option { - padding-left: 0; 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 url('chosen-sprite.png') no-repeat -30px -20px; @include background(url('chosen-sprite.png') no-repeat -30px -20px, linear-gradient(#eee 1%, #fff 15%)); - padding: 4px 5px 4px 20px; direction: rtl; } &.chzn-container-single{ @@ -399,8 +399,8 @@ .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; + background-repeat: no-repeat !important; } } /* @end */ From d1856a40c808d9d9ee7f05980272904cdef3f288 Mon Sep 17 00:00:00 2001 From: Koen Punt Date: Fri, 5 Jul 2013 16:14:53 +0200 Subject: [PATCH 8/8] Make use of image-url helper Updated gruntfile and compass config --- Gruntfile.coffee | 5 +++-- config.rb | 20 ++------------------ sass/chosen.scss | 19 +++++++++++-------- 3 files changed, 16 insertions(+), 28 deletions(-) diff --git a/Gruntfile.coffee b/Gruntfile.coffee index fd867f9ed68..56a846817ca 100644 --- a/Gruntfile.coffee +++ b/Gruntfile.coffee @@ -47,8 +47,9 @@ module.exports = (grunt) -> compass: chosen_css: - files: - 'public/chosen.css': 'sass/chosen.scss' + options: + specify: + ['sass/chosen.scss'] cssmin: minified_chosen_css: diff --git a/config.rb b/config.rb index 89cf7de77ac..a9f6692151e 100644 --- a/config.rb +++ b/config.rb @@ -1,24 +1,8 @@ -# Require any additional compass plugins here. - -# Set this to the root of your project when deployed: http_path = "/" css_dir = "public" sass_dir = "sass" images_dir = "public" -javascripts_dir = "public" - -# You can select your preferred output style here (can be overridden via the command line): -# output_style = :expanded or :nested or :compact or :compressed - -# To enable relative paths to assets via compass helper functions. Uncomment: -# relative_assets = true -# To disable debugging comments that display the original location of your selectors. Uncomment: +relative_assets = true line_comments = false - - -# If you prefer the indented syntax, you might want to regenerate this -# project again passing --syntax sass, or you can uncomment this: -# preferred_syntax = :sass -# and then run: -# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass +asset_cache_buster :none \ No newline at end of file diff --git a/sass/chosen.scss b/sass/chosen.scss index 9c52baa90a5..068126ffb65 100644 --- a/sass/chosen.scss +++ b/sass/chosen.scss @@ -1,6 +1,9 @@ @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; @@ -66,7 +69,7 @@ display: block; width: 12px; height: 12px; - background: url('chosen-sprite.png') -42px 1px no-repeat; + background: $chosen-sprite -42px 1px no-repeat; font-size: 1px; &:hover { background-position: -42px -10px; @@ -86,7 +89,7 @@ display: block; width: 100%; height: 100%; - background: url('chosen-sprite.png') no-repeat 0px 2px; + background: $chosen-sprite no-repeat 0px 2px; } } .chzn-search { @@ -102,8 +105,8 @@ width: 100%; outline: 0; border: 1px solid #aaa; - background: #fff url('chosen-sprite.png') no-repeat 100% -20px; - @include background(url('chosen-sprite.png') no-repeat 100% -20px, linear-gradient(#eee 1%, #fff 15%)); + 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; } @@ -179,7 +182,7 @@ display: block; width: 12px; height: 12px; - background: url('chosen-sprite.png') -42px 1px no-repeat; + background: $chosen-sprite -42px 1px no-repeat; font-size: 1px; &:hover { background-position: -42px -10px; @@ -371,8 +374,8 @@ } .chzn-search input { padding: 4px 5px 4px 20px; - background: #fff url('chosen-sprite.png') no-repeat -30px -20px; - @include background(url('chosen-sprite.png') no-repeat -30px -20px, linear-gradient(#eee 1%, #fff 15%)); + 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{ @@ -398,7 +401,7 @@ .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-image: $chosen-sprite-retina !important; background-size: 52px 37px !important; background-repeat: no-repeat !important; }