From f2927a29d011cf373077c82888cea2106686b6a4 Mon Sep 17 00:00:00 2001 From: Ashok Fernandez Date: Fri, 12 Jun 2015 14:43:24 +0200 Subject: [PATCH] Added bootstrap styling --- Gruntfile.js | 47 +- README.md | 3 + angular-timezone-selector.js | 2 + bower.json | 9 +- build/angular-timezone-selector.js | 2 + package.json | 6 + styling/angular-timezone-selector.css | 390 +++++++++++ styling/angular-timezone-selector.min.css | 1 + styling/bootstrap-chosen-variables.less | 27 + styling/bootstrap-chosen.less | 473 ++++++++++++++ styling/chosen-sprite.png | Bin 0 -> 646 bytes styling/chosen-sprite@2x.png | Bin 0 -> 872 bytes styling/example.html | 758 ++++++++++++++++++++++ 13 files changed, 1715 insertions(+), 3 deletions(-) create mode 100644 styling/angular-timezone-selector.css create mode 100644 styling/angular-timezone-selector.min.css create mode 100755 styling/bootstrap-chosen-variables.less create mode 100755 styling/bootstrap-chosen.less create mode 100755 styling/chosen-sprite.png create mode 100755 styling/chosen-sprite@2x.png create mode 100755 styling/example.html diff --git a/Gruntfile.js b/Gruntfile.js index beb9c73..ca66509 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -31,10 +31,52 @@ module.exports = function (grunt) { } } }, + less: { + compileless: { + options: { + paths: ['./bower_components/bootstrap/less', './styling'] + }, + files: { + './styling/angular-timezone-selector.css': './styling/bootstrap-chosen.less' + } + } + }, + autoprefixer: { + options: { + browsers: ['last 3 versions', 'ie 8', 'ie 9', 'ie 10', 'ie 11'] + }, + prefix: { + files: { + './styling/angular-timezone-selector.css': './styling/angular-timezone-selector.css' + } + } + }, + cssmin: { + all: { + expand: true, + cwd: './styling/', + src: ['*.css', '!*.min.css'], + dest: './styling/', + ext: '.min.css' + } + }, + copy: { dist: { src: 'build/<%= pkg.name %>.js', dest: 'dist/<%= pkg.name %>.js' + }, + stylingCss: { + expand: true, + flatten: true, + src: 'styling/*.css', + dest: 'dist/' + }, + stylingSprites: { + expand: true, + flatten: true, + src: 'styling/*.png', + dest: 'dist/' } } }) @@ -42,5 +84,8 @@ module.exports = function (grunt) { grunt.loadNpmTasks('grunt-contrib-uglify') grunt.loadNpmTasks('grunt-contrib-copy') grunt.loadNpmTasks('grunt-string-replace') - grunt.registerTask('default', ['string-replace:inline', 'uglify:dist', 'copy:dist']) + grunt.loadNpmTasks('grunt-contrib-cssmin') + grunt.loadNpmTasks('grunt-contrib-less') + grunt.loadNpmTasks('grunt-autoprefixer') + grunt.registerTask('default', ['string-replace', 'uglify', 'less', 'autoprefixer', 'cssmin', 'copy']) } diff --git a/README.md b/README.md index f65469f..d5277b7 100644 --- a/README.md +++ b/README.md @@ -26,3 +26,6 @@ Then use directive `timezone-select`. Attribute `country` can be used to bind user's selected country. Value of selected country should be the [ISO 3166-1 alpha-2](http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) code, e.g. `CN`, `US`. See `example.html` for a simple example. + +# Thanks to +(alxlit's bootstrap-chosen)[https://github.com/alxlit/bootstrap-chosen] diff --git a/angular-timezone-selector.js b/angular-timezone-selector.js index b0cd999..f430772 100644 --- a/angular-timezone-selector.js +++ b/angular-timezone-selector.js @@ -76,6 +76,8 @@ angular.module('angular-timezone-selector', []) elem.append($optgroup) }) + elem.chosen() + // elem.select2({ // data: data, // theme: 'classic', diff --git a/bower.json b/bower.json index 6df5691..396d76d 100644 --- a/bower.json +++ b/bower.json @@ -6,7 +6,10 @@ "Ashok Fernandez " ], "description": "Timezone selector for Angular JS", - "main": "dist/angular-timezone-selector.js", + "main": [ + "dist/angular-timezone-selector.js", + "dist/angular-timezone-selector.css" + ], "keywords": [ "timezone", "select" @@ -24,6 +27,8 @@ "moment": "~2.10.3", "moment-timezone": "~0.4.0", "lodash": "~3.9.3", - "chosen": "~1.4.2" + "chosen": "~1.4.2", + "bootstrap": "~3.3.4", + "v1.0": "https://github.com/alxlit/bootstrap-chosen/releases/tag/v1.0.1" } } diff --git a/build/angular-timezone-selector.js b/build/angular-timezone-selector.js index 45e3f9d..2ab8e6b 100644 --- a/build/angular-timezone-selector.js +++ b/build/angular-timezone-selector.js @@ -76,6 +76,8 @@ angular.module('angular-timezone-selector', []) elem.append($optgroup) }) + elem.chosen() + // elem.select2({ // data: data, // theme: 'classic', diff --git a/package.json b/package.json index 76269a6..6dfaa5b 100644 --- a/package.json +++ b/package.json @@ -30,5 +30,11 @@ "grunt-string-replace": "~1.0.0", "csv": "^0.4.1", "csv-load-sync": "0.0.3" + }, + "dependencies": { + "grunt-autoprefixer": "^3.0.3", + "grunt-contrib-copy": "^0.8.0", + "grunt-contrib-cssmin": "^0.12.3", + "grunt-contrib-less": "^1.0.1" } } diff --git a/styling/angular-timezone-selector.css b/styling/angular-timezone-selector.css new file mode 100644 index 0000000..3316256 --- /dev/null +++ b/styling/angular-timezone-selector.css @@ -0,0 +1,390 @@ +.chosen-select { + width: 100%; +} +.chosen-select-deselect { + width: 100%; +} +.chosen-container { + display: inline-block; + font-size: 14px; + position: relative; + vertical-align: middle; +} +.chosen-container .chosen-drop { + background: #ffffff; + border: 1px solid #cccccc; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + box-shadow: 0 8px 8px rgba(0, 0, 0, .25); + margin-top: -1px; + position: absolute; + top: 100%; + left: -9000px; + z-index: 1060; +} +.chosen-container.chosen-with-drop .chosen-drop { + left: 0; + right: 0; +} +.chosen-container .chosen-results { + color: #555555; + 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; +} +.chosen-container .chosen-results li { + display: none; + line-height: 1.42857143; + list-style: none; + margin: 0; + padding: 5px 6px; +} +.chosen-container .chosen-results li em { + background: #feffde; + font-style: normal; +} +.chosen-container .chosen-results li.group-result { + display: list-item; + cursor: default; + color: #999; + font-weight: bold; +} +.chosen-container .chosen-results li.group-option { + padding-left: 15px; +} +.chosen-container .chosen-results li.active-result { + cursor: pointer; + display: list-item; +} +.chosen-container .chosen-results li.highlighted { + background-color: #337ab7; + background-image: none; + color: white; +} +.chosen-container .chosen-results li.highlighted em { + background: transparent; +} +.chosen-container .chosen-results li.disabled-result { + display: list-item; + color: #777777; +} +.chosen-container .chosen-results .no-results { + background: #eeeeee; + display: list-item; +} +.chosen-container .chosen-results-scroll { + background: white; + margin: 0 4px; + position: absolute; + text-align: center; + width: 321px; + z-index: 1; +} +.chosen-container .chosen-results-scroll span { + display: inline-block; + height: 1.42857143; + text-indent: -5000px; + width: 9px; +} +.chosen-container .chosen-results-scroll-down { + bottom: 0; +} +.chosen-container .chosen-results-scroll-down span { + background: url("chosen-sprite.png") no-repeat -4px -3px; +} +.chosen-container .chosen-results-scroll-up span { + background: url("chosen-sprite.png") no-repeat -22px -3px; +} +.chosen-container-single .chosen-single { + background-color: #ffffff; + background-clip: padding-box; + border: 1px solid #cccccc; + border-top-right-radius: 4px; + border-top-left-radius: 4px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + color: #555555; + display: block; + height: 34px; + overflow: hidden; + line-height: 34px; + padding: 0 0 0 8px; + position: relative; + text-decoration: none; + white-space: nowrap; +} +.chosen-container-single .chosen-single span { + display: block; + margin-right: 26px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.chosen-container-single .chosen-single abbr { + background: url("chosen-sprite.png") right top no-repeat; + display: block; + font-size: 1px; + height: 10px; + position: absolute; + right: 26px; + top: 12px; + width: 12px; +} +.chosen-container-single .chosen-single abbr:hover { + background-position: right -11px; +} +.chosen-container-single .chosen-single.chosen-disabled .chosen-single abbr:hover { + background-position: right 2px; +} +.chosen-container-single .chosen-single div { + display: block; + height: 100%; + position: absolute; + top: 0; + right: 0; + width: 18px; +} +.chosen-container-single .chosen-single div b { + background: url("chosen-sprite.png") no-repeat 0 7px; + display: block; + height: 100%; + width: 100%; +} +.chosen-container-single .chosen-default { + color: #777777; +} +.chosen-container-single .chosen-search { + margin: 0; + padding: 3px 4px; + position: relative; + white-space: nowrap; + z-index: 1000; +} +.chosen-container-single .chosen-search input[type="text"] { + background: url("chosen-sprite.png") no-repeat 100% -20px, #ffffff; + border: 1px solid #cccccc; + border-top-right-radius: 4px; + border-top-left-radius: 4px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + margin: 1px 0; + padding: 4px 20px 4px 4px; + width: 100%; +} +.chosen-container-single .chosen-drop { + margin-top: -1px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + background-clip: padding-box; +} +.chosen-container-single-nosearch .chosen-search input { + position: absolute; + left: -9000px; +} +.chosen-container-multi .chosen-choices { + background-color: #ffffff; + border: 1px solid #cccccc; + border-top-right-radius: 4px; + border-top-left-radius: 4px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + cursor: text; + height: auto !important; + height: 1%; + margin: 0; + overflow: hidden; + padding: 0; + position: relative; +} +.chosen-container-multi .chosen-choices li { + float: left; + list-style: none; +} +.chosen-container-multi .chosen-choices .search-field { + margin: 0; + padding: 0; + white-space: nowrap; +} +.chosen-container-multi .chosen-choices .search-field input[type="text"] { + background: transparent !important; + border: 0 !important; + box-shadow: none; + color: #555555; + height: 32px; + margin: 0; + padding: 4px; + outline: 0; +} +.chosen-container-multi .chosen-choices .search-field .default { + color: #999; +} +.chosen-container-multi .chosen-choices .search-choice { + background-clip: padding-box; + background-color: #eeeeee; + border: 1px solid #cccccc; + border-top-right-radius: 4px; + border-top-left-radius: 4px; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); + color: #333333; + cursor: default; + line-height: 13px; + margin: 6px 0 3px 5px; + padding: 3px 20px 3px 5px; + position: relative; +} +.chosen-container-multi .chosen-choices .search-choice .search-choice-close { + background: url("chosen-sprite.png") right top no-repeat; + display: block; + font-size: 1px; + height: 10px; + position: absolute; + right: 4px; + top: 5px; + width: 12px; + cursor: pointer; +} +.chosen-container-multi .chosen-choices .search-choice .search-choice-close:hover { + background-position: right -11px; +} +.chosen-container-multi .chosen-choices .search-choice-focus { + background: #d4d4d4; +} +.chosen-container-multi .chosen-choices .search-choice-focus .search-choice-close { + background-position: right -11px; +} +.chosen-container-multi .chosen-results { + margin: 0 0 0 0; + padding: 0; +} +.chosen-container-multi .chosen-drop .result-selected { + display: none; +} +.chosen-container-active .chosen-single { + border: 1px solid #66afe9; + box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6); + transition: border linear .2s, box-shadow linear .2s; +} +.chosen-container-active.chosen-with-drop .chosen-single { + background-color: #ffffff; + border: 1px solid #66afe9; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6); + transition: border linear .2s, box-shadow linear .2s; +} +.chosen-container-active.chosen-with-drop .chosen-single div { + background: transparent; + border-left: none; +} +.chosen-container-active.chosen-with-drop .chosen-single div b { + background-position: -18px 7px; +} +.chosen-container-active .chosen-choices { + border: 1px solid #66afe9; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6); + transition: border linear .2s, box-shadow linear .2s; +} +.chosen-container-active .chosen-choices .search-field input[type="text"] { + color: #111 !important; +} +.chosen-container-active.chosen-with-drop .chosen-choices { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +.chosen-disabled { + cursor: default; + opacity: 0.5 !important; +} +.chosen-disabled .chosen-single { + cursor: default; +} +.chosen-disabled .chosen-choices .search-choice .search-choice-close { + cursor: default; +} +.chosen-rtl { + text-align: right; +} +.chosen-rtl .chosen-single { + padding: 0 8px 0 0; + overflow: visible; +} +.chosen-rtl .chosen-single span { + margin-left: 26px; + margin-right: 0; + direction: rtl; +} +.chosen-rtl .chosen-single div { + left: 7px; + right: auto; +} +.chosen-rtl .chosen-single abbr { + left: 26px; + right: auto; +} +.chosen-rtl .chosen-choices .search-field input[type="text"] { + direction: rtl; +} +.chosen-rtl .chosen-choices li { + float: right; +} +.chosen-rtl .chosen-choices .search-choice { + margin: 6px 5px 3px 0; + padding: 3px 5px 3px 19px; +} +.chosen-rtl .chosen-choices .search-choice .search-choice-close { + background-position: right top; + left: 4px; + right: auto; +} +.chosen-rtl.chosen-container-single .chosen-results { + margin: 0 0 4px 4px; + padding: 0 4px 0 0; +} +.chosen-rtl .chosen-results .group-option { + padding-left: 0; + padding-right: 15px; +} +.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div { + border-right: none; +} +.chosen-rtl .chosen-search input[type="text"] { + background: url("chosen-sprite.png") no-repeat -28px -20px, #ffffff; + direction: rtl; + padding: 4px 5px 4px 20px; +} +.input-group .chosen-container:last-child .chosen-single, +.input-group .chosen-container:last-child .chosen-default, +.input-group .chosen-container:last-child .chosen-choices { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; +} +.input-group .chosen-container:not(:last-child) .chosen-single, +.input-group .chosen-container:not(:last-child) .chosen-default, +.input-group .chosen-container:not(:last-child) .chosen-choices { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; +} +@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, + .chosen-container-single .chosen-single div b, + .chosen-container-single .chosen-search input[type="text"], + .chosen-container-multi .chosen-choices .search-choice .search-choice-close, + .chosen-container .chosen-results-scroll-down span, + .chosen-container .chosen-results-scroll-up span { + background-image: url("chosen-sprite@2x.png") !important; + background-size: 52px 37px !important; + background-repeat: no-repeat !important; + } +} diff --git a/styling/angular-timezone-selector.min.css b/styling/angular-timezone-selector.min.css new file mode 100644 index 0000000..3ffcd0e --- /dev/null +++ b/styling/angular-timezone-selector.min.css @@ -0,0 +1 @@ +.chosen-select,.chosen-select-deselect{width:100%}.chosen-container{display:inline-block;font-size:14px;position:relative;vertical-align:middle}.chosen-container .chosen-drop{background:#fff;border:1px solid #ccc;border-bottom-right-radius:4px;border-bottom-left-radius:4px;box-shadow:0 8px 8px rgba(0,0,0,.25);margin-top:-1px;position:absolute;top:100%;left:-9000px;z-index:1060}.chosen-container.chosen-with-drop .chosen-drop{left:0;right:0}.chosen-container .chosen-results{color:#555;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}.chosen-container .chosen-results li{display:none;line-height:1.42857143;list-style:none;margin:0;padding:5px 6px}.chosen-container .chosen-results li em{background:#feffde;font-style:normal}.chosen-container .chosen-results li.group-result{display:list-item;cursor:default;color:#999;font-weight:700}.chosen-container .chosen-results li.group-option{padding-left:15px}.chosen-container .chosen-results li.active-result{cursor:pointer;display:list-item}.chosen-container .chosen-results li.highlighted{background-color:#337ab7;background-image:none;color:#fff}.chosen-container .chosen-results li.highlighted em{background:0 0}.chosen-container .chosen-results li.disabled-result{display:list-item;color:#777}.chosen-container .chosen-results .no-results{background:#eee;display:list-item}.chosen-container .chosen-results-scroll{background:#fff;margin:0 4px;position:absolute;text-align:center;width:321px;z-index:1}.chosen-container .chosen-results-scroll span{display:inline-block;height:1.42857143;text-indent:-5000px;width:9px}.chosen-container .chosen-results-scroll-down{bottom:0}.chosen-container .chosen-results-scroll-down span{background:url(chosen-sprite.png) -4px -3px no-repeat}.chosen-container .chosen-results-scroll-up span{background:url(chosen-sprite.png) -22px -3px no-repeat}.chosen-container-single .chosen-single{background-color:#fff;background-clip:padding-box;border:1px solid #ccc;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);color:#555;display:block;height:34px;overflow:hidden;line-height:34px;padding:0 0 0 8px;position:relative;text-decoration:none;white-space:nowrap;border-radius:4px}.chosen-container-single .chosen-single span{display:block;margin-right:26px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chosen-container-single .chosen-single abbr{background:url(chosen-sprite.png) right top no-repeat;display:block;font-size:1px;height:10px;position:absolute;right:26px;top:12px;width:12px}.chosen-container-single .chosen-single abbr:hover{background-position:right -11px}.chosen-container-single .chosen-single.chosen-disabled .chosen-single abbr:hover{background-position:right 2px}.chosen-container-single .chosen-single div{display:block;height:100%;position:absolute;top:0;right:0;width:18px}.chosen-container-single .chosen-single div b{background:url(chosen-sprite.png) 0 7px no-repeat;display:block;height:100%;width:100%}.chosen-container-single .chosen-default{color:#777}.chosen-container-single .chosen-search{margin:0;padding:3px 4px;position:relative;white-space:nowrap;z-index:1000}.chosen-container-single .chosen-search input[type=text]{background:url(chosen-sprite.png) 100% -20px no-repeat,#fff;border:1px solid #ccc;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);margin:1px 0;padding:4px 20px 4px 4px;width:100%;border-radius:4px}.chosen-container-single .chosen-drop{margin-top:-1px;border-bottom-right-radius:4px;border-bottom-left-radius:4px;background-clip:padding-box}.chosen-container-single-nosearch .chosen-search input{position:absolute;left:-9000px}.chosen-container-multi .chosen-choices{background-color:#fff;border:1px solid #ccc;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);cursor:text;height:auto!important;height:1%;margin:0;overflow:hidden;padding:0;position:relative;border-radius:4px}.chosen-container-multi .chosen-choices li{float:left;list-style:none}.chosen-container-multi .chosen-choices .search-field{margin:0;padding:0;white-space:nowrap}.chosen-container-multi .chosen-choices .search-field input[type=text]{background:0 0!important;border:0!important;box-shadow:none;color:#555;height:32px;margin:0;padding:4px;outline:0}.chosen-container-multi .chosen-choices .search-field .default{color:#999}.chosen-container-multi .chosen-choices .search-choice{background-clip:padding-box;background-color:#eee;border:1px solid #ccc;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);color:#333;cursor:default;line-height:13px;margin:6px 0 3px 5px;padding:3px 20px 3px 5px;position:relative;border-radius:4px}.chosen-container-active .chosen-single,.chosen-container-active.chosen-with-drop .chosen-single{box-shadow:0 1px 1px rgba(0,0,0,.075) inset,0 0 8px rgba(82,168,236,.6);transition:border linear .2s,box-shadow linear .2s;border:1px solid #66afe9}.chosen-container-multi .chosen-choices .search-choice .search-choice-close{background:url(chosen-sprite.png) right top no-repeat;display:block;font-size:1px;height:10px;position:absolute;right:4px;top:5px;width:12px;cursor:pointer}.chosen-container-multi .chosen-choices .search-choice .search-choice-close:hover{background-position:right -11px}.chosen-container-multi .chosen-choices .search-choice-focus{background:#d4d4d4}.chosen-container-multi .chosen-choices .search-choice-focus .search-choice-close{background-position:right -11px}.chosen-container-multi .chosen-results{margin:0;padding:0}.chosen-container-multi .chosen-drop .result-selected{display:none}.chosen-container-active.chosen-with-drop .chosen-single{background-color:#fff;border-bottom-right-radius:0;border-bottom-left-radius:0}.chosen-container-active.chosen-with-drop .chosen-single div{background:0 0;border-left:none}.chosen-container-active.chosen-with-drop .chosen-single div b{background-position:-18px 7px}.chosen-container-active .chosen-choices{border:1px solid #66afe9;border-bottom-right-radius:0;border-bottom-left-radius:0;box-shadow:0 1px 1px rgba(0,0,0,.075) inset,0 0 8px rgba(82,168,236,.6);transition:border linear .2s,box-shadow linear .2s}.chosen-container-active .chosen-choices .search-field input[type=text]{color:#111!important}.chosen-container-active.chosen-with-drop .chosen-choices{border-bottom-right-radius:0;border-bottom-left-radius:0}.chosen-disabled{cursor:default;opacity:.5!important}.chosen-disabled .chosen-choices .search-choice .search-choice-close,.chosen-disabled .chosen-single{cursor:default}.chosen-rtl{text-align:right}.chosen-rtl .chosen-single{padding:0 8px 0 0;overflow:visible}.chosen-rtl .chosen-single span{margin-left:26px;margin-right:0;direction:rtl}.chosen-rtl .chosen-single div{left:7px;right:auto}.chosen-rtl .chosen-single abbr{left:26px;right:auto}.chosen-rtl .chosen-choices .search-field input[type=text]{direction:rtl}.chosen-rtl .chosen-choices li{float:right}.chosen-rtl .chosen-choices .search-choice{margin:6px 5px 3px 0;padding:3px 5px 3px 19px}.chosen-rtl .chosen-choices .search-choice .search-choice-close{background-position:right top;left:4px;right:auto}.chosen-rtl.chosen-container-single .chosen-results{margin:0 0 4px 4px;padding:0 4px 0 0}.chosen-rtl .chosen-results .group-option{padding-left:0;padding-right:15px}.chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div{border-right:none}.chosen-rtl .chosen-search input[type=text]{background:url(chosen-sprite.png) -28px -20px no-repeat,#fff;direction:rtl;padding:4px 5px 4px 20px}.input-group .chosen-container:last-child .chosen-choices,.input-group .chosen-container:last-child .chosen-default,.input-group .chosen-container:last-child .chosen-single{border-top-left-radius:0;border-bottom-left-radius:0}.input-group .chosen-container:not(:last-child) .chosen-choices,.input-group .chosen-container:not(:last-child) .chosen-default,.input-group .chosen-container:not(:last-child) .chosen-single{border-top-right-radius:0;border-bottom-right-radius:0}@media only screen and (-webkit-min-device-pixel-ratio:2),only screen and (min-resolution:2dppx){.chosen-container .chosen-results-scroll-down span,.chosen-container .chosen-results-scroll-up span,.chosen-container-multi .chosen-choices .search-choice .search-choice-close,.chosen-container-single .chosen-search input[type=text],.chosen-container-single .chosen-single abbr,.chosen-container-single .chosen-single div b,.chosen-rtl .chosen-search input[type=text]{background-image:url(chosen-sprite@2x.png)!important;background-size:52px 37px!important;background-repeat:no-repeat!important}} \ No newline at end of file diff --git a/styling/bootstrap-chosen-variables.less b/styling/bootstrap-chosen-variables.less new file mode 100755 index 0000000..cc850ee --- /dev/null +++ b/styling/bootstrap-chosen-variables.less @@ -0,0 +1,27 @@ +// +// bootstrap-chosen-variables.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 +// + +@import "variables.less"; +@import "mixins.less"; + +@chosen-background: @input-bg; +@chosen-border: 1px solid @input-border; +@chosen-border-radius: @input-border-radius; +@chosen-multi-border-radius: @chosen-border-radius; +@chosen-box-shadow: ~"inset 0 1px 1px rgba(0, 0, 0, .075)"; +@chosen-drop-border: @input-border; +@chosen-drop-box-shadow: ~"0 8px 8px rgba(0, 0, 0, .25)"; +@chosen-drop-zindex: 1060; +@chosen-focus-border: 1px solid @input-border-focus; +@chosen-focus-box-shadow: ~"0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px rgba(82, 168, 236, .6)"; +@chosen-focus-transition: ~"border linear .2s, box-shadow linear .2s"; +@chosen-height: @input-height-base; +@chosen-multi-height: @input-height-base + 6px; +@chosen-sprite-path: "chosen-sprite.png"; +@chosen-sprite-retina-path: "chosen-sprite@2x.png"; diff --git a/styling/bootstrap-chosen.less b/styling/bootstrap-chosen.less new file mode 100755 index 0000000..7d6cf60 --- /dev/null +++ b/styling/bootstrap-chosen.less @@ -0,0 +1,473 @@ +// +// bootstrap-chosen.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 +// + +@import "bootstrap-chosen-variables.less"; + +.chosen-select { width: 100%; } +.chosen-select-deselect { width: 100%; } + +.chosen-container { + display: inline-block; + font-size: @font-size-base; + position: relative; + vertical-align: middle; + + .chosen-drop { + background: @chosen-background; + border: 1px solid @chosen-drop-border; + .border-bottom-radius(@chosen-border-radius); + .box-shadow(@chosen-drop-box-shadow); + margin-top: -1px; + position: absolute; + top: 100%; + left: -9000px; + z-index: @chosen-drop-zindex; + } + + &.chosen-with-drop .chosen-drop { + left: 0; + right: 0; + } + + .chosen-results { + color: @gray; + 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: @line-height-base; // 15px; + list-style: none; + margin: 0; + padding: 5px 6px; + + em { + background: #feffde; + font-style: normal; + } + + &.group-result { + display: list-item; + cursor: default; + color: #999; + font-weight: bold; + } + + &.group-option { + padding-left: 15px; + } + + &.active-result { + cursor: pointer; + display: list-item; + } + + &.highlighted { + background-color: @link-color; + background-image: none; + color: white; + + em { + background: transparent; + } + } + + &.disabled-result { + display: list-item; + color: @gray-light; + } + } + + .no-results { + background: @gray-lighter; + display: list-item; + } + } + + .chosen-results-scroll { + background: white; + margin: 0 4px; + position: absolute; + text-align: center; + width: 321px; + z-index: 1; + + span { + display: inline-block; + height: @line-height-base; // 17px; + text-indent: -5000px; + width: 9px; + } + } + + .chosen-results-scroll-down { + bottom: 0; + + span { + background: url("@{chosen-sprite-path}") no-repeat -4px -3px; + } + } + + .chosen-results-scroll-up { + span { + background: url("@{chosen-sprite-path}") no-repeat -22px -3px; + } + } +} + +.chosen-container-single { + .chosen-single { + background-color: @chosen-background; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + border: @chosen-border; + .border-top-radius(@chosen-border-radius); + .border-bottom-radius(@chosen-border-radius); + .box-shadow(@chosen-box-shadow); + color: @gray; + display: block; + height: @chosen-height; + overflow: hidden; + line-height: @chosen-height; + padding: 0 0 0 8px; + position: relative; + text-decoration: none; + white-space: nowrap; + + span { + display: block; + margin-right: 26px; + .text-overflow(); + } + + abbr { + background: url("@{chosen-sprite-path}") right top no-repeat; + display: block; + font-size: 1px; + height: 10px; + position: absolute; + right: 26px; + top: ((@chosen-height - 10px) / 2); + width: 12px; + + &:hover { + background-position: right -11px; + } + } + + &.chosen-disabled .chosen-single abbr:hover { + background-position: right 2px; + } + + div { + display: block; + height: 100%; + position: absolute; + top: 0; + right: 0; + width: 18px; + + b { + background: url("@{chosen-sprite-path}") no-repeat 0 7px; + display: block; + height: 100%; + width: 100%; + } + } + } + + .chosen-default { + color: @gray-light; + } + + .chosen-search { + margin: 0; + padding: 3px 4px; + position: relative; + white-space: nowrap; + z-index: @zindex-dropdown; + + input[type="text"] { + background: url("@{chosen-sprite-path}") no-repeat 100% -20px, @chosen-background; + border: @chosen-border; + .border-top-radius(@chosen-border-radius); + .border-bottom-radius(@chosen-border-radius); + .box-shadow(@chosen-box-shadow); + margin: 1px 0; + padding: 4px 20px 4px 4px; + width: 100%; + } + } + + .chosen-drop { + margin-top: -1px; + .border-bottom-radius(@chosen-border-radius); + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + } +} + +.chosen-container-single-nosearch { + .chosen-search { + input { + position: absolute; + left: -9000px; + } + } +} + +.chosen-container-multi { + .chosen-choices { + background-color: @chosen-background; + border: @chosen-border; + .border-top-radius(@chosen-multi-border-radius); + .border-bottom-radius(@chosen-multi-border-radius); + .box-shadow(@chosen-box-shadow); + cursor: text; + height: auto !important; + height: 1%; + margin: 0; + overflow: hidden; + padding: 0; + position: relative; + + li { + float: left; + list-style: none; + } + + .search-field { + margin: 0; + padding: 0; + white-space: nowrap; + + input[type="text"] { + background: transparent !important; + border: 0 !important; + .box-shadow(none); + color: @gray; + height: @chosen-multi-height - 8px; + margin: 0; + padding: 4px; + outline: 0; + } + + .default { + color: #999; + } + } + + .search-choice { + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + background-color: @gray-lighter; + border: @chosen-border; + .border-top-radius(@chosen-border-radius); + .border-bottom-radius(@chosen-border-radius); + .box-shadow(@chosen-box-shadow); + color: @gray-dark; + cursor: default; + line-height: 13px; + margin: 6px 0 3px 5px; + padding: 3px 20px 3px 5px; + position: relative; + + .search-choice-close { + background: url("@{chosen-sprite-path}") right top no-repeat; + display: block; + font-size: 1px; + height: 10px; + position: absolute; + right: 4px; + top: 5px; + width: 12px; + cursor: pointer; + + &:hover { + background-position: right -11px; + } + } + } + + .search-choice-focus { + background: #d4d4d4; + + .search-choice-close { + background-position: right -11px; + } + } + } + + .chosen-results { + margin: 0 0 0 0; + padding: 0; + } + + .chosen-drop { + .result-selected { + display: none; + } + } +} + +.chosen-container-active { + .chosen-single { + border: @chosen-focus-border; + .box-shadow(@chosen-focus-box-shadow); + .transition(@chosen-focus-transition); + } + + &.chosen-with-drop .chosen-single { + background-color: @input-bg; + border: @chosen-focus-border; + .border-bottom-radius(0); + .box-shadow(@chosen-focus-box-shadow); + .transition(@chosen-focus-transition); + + div { + background: transparent; + border-left: none; + + b { + background-position: -18px 7px; + } + } + } + + .chosen-choices { + border: @chosen-focus-border; + .border-bottom-radius(0); + .box-shadow(@chosen-focus-box-shadow); + .transition(@chosen-focus-transition); + + .search-field input[type="text"] { + color: #111 !important; + } + } + + &.chosen-with-drop .chosen-choices { + .border-bottom-radius(0); + } +} + +.chosen-disabled { + cursor: default; + opacity: 0.5 !important; + + .chosen-single { + cursor: default; + } + + .chosen-choices .search-choice .search-choice-close { + cursor: default; + } +} + +.chosen-rtl { + text-align: right; + + .chosen-single { + padding: 0 8px 0 0; + overflow: visible; + + span { + margin-left: 26px; + margin-right: 0; + direction: rtl; + } + + div { + left: 7px; + right: auto; + } + + abbr { + left: 26px; + right: auto; + } + } + + .chosen-choices { + .search-field input[type="text"] { + direction: rtl; + } + + li { + float: right; + } + + .search-choice { + margin: 6px 5px 3px 0; + padding: 3px 5px 3px 19px; + + .search-choice-close { + background-position: right top; + left: 4px; + right: auto; + } + } + } + + &.chosen-container-single .chosen-results { + margin: 0 0 4px 4px; + padding: 0 4px 0 0; + } + + .chosen-results .group-option { + padding-left: 0; + padding-right: 15px; + } + + &.chosen-container-active.chosen-with-drop .chosen-single div { + border-right: none; + } + + .chosen-search input[type="text"] { + background: url("@{chosen-sprite-path}") no-repeat -28px -20px, @chosen-background; + direction: rtl; + padding: 4px 5px 4px 20px; + } +} + +.input-group { + .chosen-container:last-child { + .chosen-single, .chosen-default, .chosen-choices { + border-top-left-radius: 0px; + border-bottom-left-radius: 0px; + } + } + .chosen-container:not(:last-child) { + .chosen-single, .chosen-default, .chosen-choices { + border-top-right-radius: 0px; + border-bottom-right-radius: 0px; + } + } +} + +@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, + .chosen-container-single .chosen-single div b, + .chosen-container-single .chosen-search input[type="text"], + .chosen-container-multi .chosen-choices .search-choice .search-choice-close, + .chosen-container .chosen-results-scroll-down span, + .chosen-container .chosen-results-scroll-up span { + background-image: url("@{chosen-sprite-retina-path}") !important; + background-size: 52px 37px !important; + background-repeat: no-repeat !important; + } +} diff --git a/styling/chosen-sprite.png b/styling/chosen-sprite.png new file mode 100755 index 0000000000000000000000000000000000000000..3611ae4ace1c4b1cbeacd6145b5a79cbc72e0bdc GIT binary patch literal 646 zcmV;10(t$3P)0006_Nkl&pbAC0n?)s%2x5M$#UgGxI1~gymp~v; zh<`zGaTJP5BybQY4tlRo;SIcmE0t>ueW3>*u6N;@_u;;|BoL8PuhZ#FWY9$(flan1oVvxDBL8~}0Q5z;^2p>Ov z7}Q$E7=l>$BZLUt1*uKMCaQwKYf$lsJCyerWMd+%BeGH6f_f&Vpy%=$BN%uK%Ahxi zF+%Jj=Pc-WXF;djSiJw|m4>cN%^Fi|FBZ!E{_yJLS?RI<3U696XLkQSs z{{&kQJ$K(#5CgC1;GbA>mjm56zJZ^-Hg2_ASKI_K@CybPh7Rq}8ud``)NM~eZx}qT z)oK?Lf>t!B;%Uh}*P+)Ef?jbx#w|BNEVb(l{2LK}m#fw4xx>ddF;&j}!S{N-e!<&Q z?kvzyI_AT@H-u4tUz1h&GCh8>?TnA~?BZ7WGP<9`r gQ6DuZO!_~60ju@{TzXF%TmS$707*qoM6N<$g2#CqL;wH) literal 0 HcmV?d00001 diff --git a/styling/chosen-sprite@2x.png b/styling/chosen-sprite@2x.png new file mode 100755 index 0000000000000000000000000000000000000000..ffe4d7d1121ca45cd35783696940050c690a8676 GIT binary patch literal 872 zcmeAS@N?(olHy`uVBq!ia0vp^89?mC!3-o5mOWetq|OBRgt-3y{~yTgfB`oc01C8& zL0el}Lqh|Q1oD8A5J8A6G6@lfkU;ftMr&&;+$f+RkloVK0wm!8C|FWb0x`e2xj8g6 z6i7l;BAWwL4-tfu5G@ccP!{MmqnYOy06pVW666=m!0_*bfx(A_gav;C1PU5HKT!C5 z;g7@l4POuZ{>hQBP{j4uqq`I2WP9&Sn{}I8xJi*&v*QL&+Dw-Bf-CQLyLk0Ht2-;T zynum$iPO`?F{C2y?bYjfj|~J`6Xz~`vM4Ef+U{Vpli%)D%kKSey_RG0Bi9Xw4jtOb z@!)?~_%DVelO793W#Pl3vjdNCDTnGGb(^YY+BbF2;mJK!nq}@nBGoHxCn#7X*gdxr z+~ZQF6rpL6;MDP)JzehcJBL53AM-QU?@65Plc4-}1EW@`H@EEGrnFmTubZ~5iUzVn zrZYyBIm|RmW$3F@+wkq2)c>|mGh5Rv3%(p~zjStyruBl(TP2_51LpTH2noN*e&}J; z1;$+4EpJ(Mb+^1}Fv>ms%b`r}+KYy~zf5x(4?8l28%eNnEHzx({;NGP)_hX&tEw9t zSKv=Qjt(d#~b;F7hbDdUu$OUK8iumkkl&-=~$APCd2zdqHg6@=Z#Pt*5RY_s@Hw*YS9+ z^u)7AmzM6Ux!dus_!gJY)Vtf?+t>a3wO2S)_Vct=T}#@RuG(h!d8WYZS9Tst+VfKv zt~zntPsvfyqLY`klZSPslCz_dlcSRJLa$Px)_+W2Y&u!?oJrIMCNTz2S3j3^P6 + + + + Bootstrap + Chosen + + + + + + + + Fork me on GitHub + +
+
+

Bootstrap + Chosen

+
+ +
+

Standard Select

+
+ +
+
+ +
+
+ +
+
+ +
+

Multiple Select

+
+ +
+
+
+ +
+
+
+ +
+
+ +
+

<optgroup> Support

+
+ +
+
+

Single Select with Groups

+ +
+ +
+

Multiple Select with Groups

+ +
+
+ +
+

Selected and Disabled Support

+
+ +
+
+

Single Select

+ +
+ +
+

Multiple Select

+ +
+
+ +
+

Allow Deselect on Single Selects

+
+ +
+
+ +
+
+ +
+

Right to Left

+
+ +
+
+

Single Select

+ +
+ +
+

Multiple Select

+ +
+
+
+ +