├── .gitignore ├── Gruntfile.js ├── LICENSE ├── README.md ├── bower.json ├── dist ├── select2-bootstrap.css └── select2-bootstrap.min.css ├── docs ├── .gitignore ├── 4.0.0.html ├── 4.0.1.html ├── 4.0.2.html ├── 4.0.3.html ├── _config.yml ├── _includes │ ├── footer-links.html │ ├── footer.html │ ├── head.html │ ├── navbar.html │ ├── scripts.html │ └── select2-select.html ├── _layouts │ ├── default.html │ └── minimal.html ├── _sass │ ├── _alert.sass │ ├── _anchorjs.sass │ ├── _buttons.sass │ ├── _common.sass │ ├── _extends.sass │ ├── _footer.sass │ ├── _home.sass │ ├── _jumbotron.sass │ ├── _mixins.sass │ ├── _navbar.sass │ ├── _select2-result-repository.sass │ └── _variables.sass ├── css │ ├── bootstrap.min.css │ ├── gh-pages.sass │ └── select2-bootstrap.css ├── favicon.ico ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 ├── images │ └── logo.png ├── index.html └── js │ ├── anchor.min.js │ ├── bootstrap.min.js │ └── respond.min.js ├── package.json ├── src ├── build.less ├── build.scss ├── select2-bootstrap.less └── select2-bootstrap.scss └── tests ├── less_test.js ├── scss_test.js └── support ├── less.patch └── scss.patch /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | node_modules 3 | tmp 4 | .sass-cache 5 | .grunt 6 | .idea 7 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | // Load all grunt tasks. 3 | require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); 4 | 5 | // Project configuration. 6 | grunt.initConfig({ 7 | package: grunt.file.readJSON('package.json'), 8 | nodeunit: { 9 | all: ['tests/*_test.js'] 10 | }, 11 | 12 | sass: { 13 | options: { 14 | outputStyle: 'expanded', 15 | sourcemap: 'none', 16 | // Increase Sass' number "precision" to 8 to match Less output. 17 | // 18 | // @see https://github.com/twbs/bootstrap-sass#sass-number-precision 19 | // @see https://github.com/sass/node-sass/issues/673#issue-57581701 20 | // @see https://github.com/sass/sass/issues/1122 21 | precision: 8 22 | }, 23 | dist: { 24 | files: { 25 | 'dist/select2-bootstrap.css': 'src/build.scss' 26 | } 27 | }, 28 | test: { 29 | files: { 30 | 'tmp/select2-bootstrap.css': 'src/build.scss' 31 | } 32 | } 33 | }, 34 | 35 | cssmin: { 36 | target: { 37 | files: { 38 | 'dist/select2-bootstrap.min.css': 'dist/select2-bootstrap.css' 39 | } 40 | } 41 | }, 42 | 43 | jshint: { 44 | all: ['Gruntfile.js', '*.json'] 45 | }, 46 | 47 | bump: { 48 | options: { 49 | files: [ 50 | 'package.json' 51 | ], 52 | push: false, 53 | createTag: false, 54 | commit: false 55 | } 56 | }, 57 | 58 | copy: { 59 | main: { 60 | files: [ 61 | { 62 | src: 'node_modules/bootstrap/dist/css/bootstrap.min.css', 63 | dest: 'docs/css/bootstrap.min.css' 64 | }, 65 | { 66 | src: 'node_modules/bootstrap/dist/js/bootstrap.min.js', 67 | dest: 'docs/js/bootstrap.min.js' 68 | }, 69 | { 70 | expand: true, 71 | cwd: 'node_modules/bootstrap/dist/fonts', 72 | src: ['**/*'], 73 | dest: 'docs/fonts' 74 | }, 75 | { 76 | src: 'node_modules/Respond.js/dest/respond.min.js', 77 | dest: 'docs/js/respond.min.js' 78 | }, 79 | { 80 | src: 'node_modules/anchor-js/anchor.min.js', 81 | dest: 'docs/js/anchor.min.js' 82 | }, 83 | { 84 | src: 'dist/select2-bootstrap.css', 85 | dest: 'tmp/select2-bootstrap.css' 86 | }, 87 | { 88 | src: 'dist/select2-bootstrap.css', 89 | dest: 'docs/css/select2-bootstrap.css' 90 | }, 91 | { 92 | src: 'dist/select2-bootstrap.css', 93 | dest: 'docs/_site/css/select2-bootstrap.css' 94 | } 95 | ] 96 | } 97 | }, 98 | 99 | 'gh-pages': { 100 | options: { 101 | base: 'docs/_site', 102 | message: 'Update gh-pages.' 103 | }, 104 | src: ['**/*'] 105 | }, 106 | 107 | jekyll: { 108 | options: { 109 | src: 'docs', 110 | dest: 'docs/_site', 111 | sourcemaps: false 112 | }, 113 | build: { 114 | d: null 115 | } 116 | }, 117 | 118 | watch: { 119 | sass: { 120 | files: 'src/select2-bootstrap.scss', 121 | tasks: ['buildTheme'] 122 | }, 123 | jekyll: { 124 | files: ['docs/_layouts/*.html', 'docs/_includes/*.html', '*.html'], 125 | tasks: ['jekyll'] 126 | } 127 | }, 128 | 129 | browserSync: { 130 | files: { 131 | src : ['docs/_site/css/*.css'] 132 | }, 133 | options: { 134 | watchTask: true, 135 | ghostMode: { 136 | clicks: true, 137 | scroll: true, 138 | links: true, 139 | forms: true 140 | }, 141 | server: { 142 | baseDir: 'docs/_site' 143 | } 144 | } 145 | }, 146 | 147 | postcss: { 148 | options: { 149 | map: false, 150 | processors: [ 151 | // Autoprefixer browser settings as required by Bootstrap 152 | // 153 | // @see https://github.com/twbs/bootstrap-sass#sass-autoprefixer 154 | require('autoprefixer')({browsers: [ 155 | "Android 2.3", 156 | "Android >= 4", 157 | "Chrome >= 20", 158 | "Firefox >= 24", 159 | "Explorer >= 8", 160 | "iOS >= 6", 161 | "Opera >= 12", 162 | "Safari >= 6" 163 | ]}) 164 | ] 165 | }, 166 | dist: { 167 | src: [ 168 | 'dist/select2-bootstrap.css' 169 | ] 170 | }, 171 | test: { 172 | src: [ 173 | 'tmp/select2-bootstrap.css' 174 | ] 175 | } 176 | }, 177 | 178 | scss2less: { 179 | convert: { 180 | files: [{ 181 | src: 'src/select2-bootstrap.scss', 182 | dest: 'src/select2-bootstrap.less' 183 | }] 184 | } 185 | }, 186 | 187 | // Only used to generate CSS for the tests. 188 | less: { 189 | test: { 190 | options: { 191 | sourceMap: false 192 | }, 193 | src: 'src/build.less', 194 | dest: 'tmp/select2-bootstrap.css' 195 | } 196 | }, 197 | 198 | stamp: { 199 | options: { 200 | banner: '/*!\n' + 201 | ' * Select2 Bootstrap Theme v<%= package.version %> (<%= package.homepage %>)\n' + 202 | ' * Copyright 2015-<%= grunt.template.today("yyyy") %> <%= package.author %> and contributors (https://github.com/select2/select2-bootstrap-theme/graphs/contributors)\n' + 203 | ' * Licensed under MIT (https://github.com/select2/select2-bootstrap-theme/blob/master/LICENSE)\n' + 204 | ' */\n' 205 | }, 206 | dist: { 207 | files: { 208 | src: 'dist/*' 209 | } 210 | }, 211 | test: { 212 | files: { 213 | src: 'tmp/*' 214 | } 215 | } 216 | } 217 | 218 | }); 219 | 220 | // Default tasks. 221 | grunt.registerTask('buildTheme', ['sass', 'postcss', 'cssmin', 'stamp', 'copy']) 222 | grunt.registerTask('build', ['buildTheme', 'jekyll:build']); 223 | grunt.registerTask('serve', ['buildTheme', 'build', 'browserSync', 'watch']); 224 | }; 225 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2012-2016 Florian Kissling and contributors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | A [Select2](https://select2.github.io/) v4 [Theme](https://select2.github.io/examples.html#themes) for Bootstrap 3 2 | ![select2-bootstrap-theme version](https://img.shields.io/badge/select2--bootstrap--theme-v0.1.0--beta.10-brightgreen.svg) 3 | [![License](http://img.shields.io/badge/License-MIT-blue.svg)](http://opensource.org/licenses/MIT) 4 | 5 | Demonstrations available at 6 | [select2.github.io/select2-bootstrap-theme](http://select2.github.io/select2-bootstrap-theme/) 7 | 8 | #### Compatibility 9 | 10 | Built and tested with Bootstrap v3.3.7 and Select2 v4.0.3 in latest Chrome, Firefox and Safari (Mac) and Internet Explorer 11, 10 and 9 (should work in IE8). 11 | 12 | #### Installation 13 | 14 | You can [download select2-bootstrap-theme from this GitHub repo](https://github.com/select2/select2-bootstrap-theme/releases), install it using Bower or npm – required if you want to integrate the Sass or Less sources in your build process – or source the compiled CSS directly from CDNJS or jsDelivr. 15 | 16 | ##### Install using Bower or npm/yarn 17 | 18 | You may install select2-bootstrap-theme with [Bower](https://bower.io/), [npm](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com/): 19 | 20 | ```shell 21 | // Bower 22 | bower install select2-bootstrap-theme 23 | 24 | // npm 25 | npm install select2-bootstrap-theme 26 | 27 | // yarn 28 | yarn add select2-bootstrap-theme 29 | ``` 30 | 31 | ##### Source select2-bootstrap-theme from CDNJS or jsDelivr 32 | 33 | select2-bootstrap-theme [is also available on CDNJS](https://cdnjs.com/libraries/select2-bootstrap-theme/) and [jsDelivr](http://www.jsdelivr.com/projects/select2-bootstrap-theme). 34 | 35 | #### Usage 36 | 37 | select2-bootstrap-theme only works with Select2 v4.x. Applying the theme requires `select2-bootstrap.css` referenced after the default `select2.css` that comes with Select2: 38 | 39 | ```html 40 | 41 | 42 | ``` 43 | 44 | To apply the theme, tell Select2 to do so by passing `bootstrap` to the [`theme`](https://select2.github.io/examples.html#themes) option when initializing Select2: 45 | 46 | ```js 47 | $( "#dropdown" ).select2({ 48 | theme: "bootstrap" 49 | }); 50 | ``` 51 | 52 | You may also set it as the default theme for all Select2 widgets like so: 53 | 54 | ```js 55 | $.fn.select2.defaults.set( "theme", "bootstrap" ); 56 | ``` 57 | 58 | #### Changelog 59 | 60 | ##### 0.1.0-beta.10 61 | 62 | * Compiled with grunt-sass v2.0.0 (was v1.2.1). 63 | * Merged pull request [#54](https://github.com/select2/select2-bootstrap-theme/pull/54) by @odahcam (and fixed it: `:first-child/:not(:first-child)/:last-child` for `.select2-container--bootstrap` won’t play nice in our case; we have to take the original `` element to hide it. 705 | * 706 | * @see https://github.com/select2/select2/pull/3301 707 | * @see https://github.com/fk/select2/commit/31830c7b32cb3d8e1b12d5b434dee40a6e753ada 708 | */ 709 | .form-control.select2-hidden-accessible { 710 | position: absolute !important; 711 | width: 1px !important; 712 | } 713 | 714 | /** 715 | * Display override for inline forms 716 | */ 717 | @media (min-width: 768px) { 718 | .form-inline .select2-container--bootstrap { 719 | display: inline-block; 720 | } 721 | } 722 | -------------------------------------------------------------------------------- /dist/select2-bootstrap.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Select2 Bootstrap Theme v0.1.0-beta.10 (https://select2.github.io/select2-bootstrap-theme) 3 | * Copyright 2015-2017 Florian Kissling and contributors (https://github.com/select2/select2-bootstrap-theme/graphs/contributors) 4 | * Licensed under MIT (https://github.com/select2/select2-bootstrap-theme/blob/master/LICENSE) 5 | */ 6 | 7 | .select2-container--bootstrap{display:block}.select2-container--bootstrap .select2-selection{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);background-color:#fff;border:1px solid #ccc;border-radius:4px;color:#555;font-size:14px;outline:0}.select2-container--bootstrap .select2-selection.form-control{border-radius:4px}.select2-container--bootstrap .select2-search--dropdown .select2-search__field{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);background-color:#fff;border:1px solid #ccc;border-radius:4px;color:#555;font-size:14px}.select2-container--bootstrap .select2-search__field{outline:0}.select2-container--bootstrap .select2-search__field::-webkit-input-placeholder{color:#999}.select2-container--bootstrap .select2-search__field:-moz-placeholder{color:#999}.select2-container--bootstrap .select2-search__field::-moz-placeholder{color:#999;opacity:1}.select2-container--bootstrap .select2-search__field:-ms-input-placeholder{color:#999}.select2-container--bootstrap .select2-results__option{padding:6px 12px}.select2-container--bootstrap .select2-results__option[role=group]{padding:0}.select2-container--bootstrap .select2-results__option[aria-disabled=true]{color:#777;cursor:not-allowed}.select2-container--bootstrap .select2-results__option[aria-selected=true]{background-color:#f5f5f5;color:#262626}.select2-container--bootstrap .select2-results__option--highlighted[aria-selected]{background-color:#337ab7;color:#fff}.select2-container--bootstrap .select2-results__option .select2-results__option{padding:6px 12px}.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option{margin-left:-12px;padding-left:24px}.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-24px;padding-left:36px}.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-36px;padding-left:48px}.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-48px;padding-left:60px}.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-60px;padding-left:72px}.select2-container--bootstrap .select2-results__group{color:#777;display:block;padding:6px 12px;font-size:12px;line-height:1.42857143;white-space:nowrap}.select2-container--bootstrap.select2-container--focus .select2-selection,.select2-container--bootstrap.select2-container--open .select2-selection{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;border-color:#66afe9}.select2-container--bootstrap.select2-container--open .select2-selection .select2-selection__arrow b{border-color:transparent transparent #999;border-width:0 4px 4px}.select2-container--bootstrap.select2-container--open.select2-container--below .select2-selection{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom-color:transparent}.select2-container--bootstrap.select2-container--open.select2-container--above .select2-selection{border-top-right-radius:0;border-top-left-radius:0;border-top-color:transparent}.select2-container--bootstrap .select2-selection__clear{color:#999;cursor:pointer;float:right;font-weight:700;margin-right:10px}.select2-container--bootstrap .select2-selection__clear:hover{color:#333}.select2-container--bootstrap.select2-container--disabled .select2-selection{border-color:#ccc;-webkit-box-shadow:none;box-shadow:none}.select2-container--bootstrap.select2-container--disabled .select2-search__field,.select2-container--bootstrap.select2-container--disabled .select2-selection{cursor:not-allowed}.select2-container--bootstrap.select2-container--disabled .select2-selection,.select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice{background-color:#eee}.select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice__remove,.select2-container--bootstrap.select2-container--disabled .select2-selection__clear{display:none}.select2-container--bootstrap .select2-dropdown{-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175);border-color:#66afe9;overflow-x:hidden;margin-top:-1px}.select2-container--bootstrap .select2-dropdown--above{-webkit-box-shadow:0 -6px 12px rgba(0,0,0,.175);box-shadow:0 -6px 12px rgba(0,0,0,.175);margin-top:1px}.select2-container--bootstrap .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--bootstrap .select2-selection--single{height:34px;line-height:1.42857143;padding:6px 24px 6px 12px}.select2-container--bootstrap .select2-selection--single .select2-selection__arrow{position:absolute;bottom:0;right:12px;top:0;width:4px}.select2-container--bootstrap .select2-selection--single .select2-selection__arrow b{border-color:#999 transparent transparent;border-style:solid;border-width:4px 4px 0;height:0;left:0;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--bootstrap .select2-selection--single .select2-selection__rendered{color:#555;padding:0}.select2-container--bootstrap .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--bootstrap .select2-selection--multiple{min-height:34px;padding:0;height:auto}.select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;line-height:1.42857143;list-style:none;margin:0;overflow:hidden;padding:0;width:100%;text-overflow:ellipsis;white-space:nowrap}.select2-container--bootstrap .select2-selection--multiple .select2-selection__placeholder{color:#999;float:left;margin-top:5px}.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice{color:#555;background:#fff;border:1px solid #ccc;border-radius:4px;cursor:default;float:left;margin:5px 0 0 6px;padding:0 6px}.select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field{background:0 0;padding:0 12px;height:32px;line-height:1.42857143;margin-top:0;min-width:5em}.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:700;margin-right:3px}.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333}.select2-container--bootstrap .select2-selection--multiple .select2-selection__clear{margin-top:6px}.form-group-sm .select2-container--bootstrap .select2-selection--single,.input-group-sm .select2-container--bootstrap .select2-selection--single,.select2-container--bootstrap .select2-selection--single.input-sm{border-radius:3px;font-size:12px;height:30px;line-height:1.5;padding:5px 22px 5px 10px}.form-group-sm .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b,.input-group-sm .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b,.select2-container--bootstrap .select2-selection--single.input-sm .select2-selection__arrow b{margin-left:-5px}.form-group-sm .select2-container--bootstrap .select2-selection--multiple,.input-group-sm .select2-container--bootstrap .select2-selection--multiple,.select2-container--bootstrap .select2-selection--multiple.input-sm{min-height:30px;border-radius:3px}.form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice,.input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice,.select2-container--bootstrap .select2-selection--multiple.input-sm .select2-selection__choice{font-size:12px;line-height:1.5;margin:4px 0 0 5px;padding:0 5px}.form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field,.input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field,.select2-container--bootstrap .select2-selection--multiple.input-sm .select2-search--inline .select2-search__field{padding:0 10px;font-size:12px;height:28px;line-height:1.5}.form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear,.input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear,.select2-container--bootstrap .select2-selection--multiple.input-sm .select2-selection__clear{margin-top:5px}.form-group-lg .select2-container--bootstrap .select2-selection--single,.input-group-lg .select2-container--bootstrap .select2-selection--single,.select2-container--bootstrap .select2-selection--single.input-lg{border-radius:6px;font-size:18px;height:46px;line-height:1.3333333;padding:10px 31px 10px 16px}.form-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow,.input-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow,.select2-container--bootstrap .select2-selection--single.input-lg .select2-selection__arrow{width:5px}.form-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b,.input-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b,.select2-container--bootstrap .select2-selection--single.input-lg .select2-selection__arrow b{border-width:5px 5px 0;margin-left:-10px;margin-top:-2.5px}.form-group-lg .select2-container--bootstrap .select2-selection--multiple,.input-group-lg .select2-container--bootstrap .select2-selection--multiple,.select2-container--bootstrap .select2-selection--multiple.input-lg{min-height:46px;border-radius:6px}.form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice,.input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice,.select2-container--bootstrap .select2-selection--multiple.input-lg .select2-selection__choice{font-size:18px;line-height:1.3333333;border-radius:4px;margin:9px 0 0 8px;padding:0 10px}.form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field,.input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field,.select2-container--bootstrap .select2-selection--multiple.input-lg .select2-search--inline .select2-search__field{padding:0 16px;font-size:18px;height:44px;line-height:1.3333333}.form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear,.input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear,.select2-container--bootstrap .select2-selection--multiple.input-lg .select2-selection__clear{margin-top:10px}.input-group-lg .select2-container--bootstrap .select2-selection.select2-container--open .select2-selection--single .select2-selection__arrow b,.select2-container--bootstrap .select2-selection.input-lg.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #999;border-width:0 5px 5px}.select2-container--bootstrap[dir=rtl] .select2-selection--single{padding-left:24px;padding-right:12px}.select2-container--bootstrap[dir=rtl] .select2-selection--single .select2-selection__rendered{padding-right:0;padding-left:0;text-align:right}.select2-container--bootstrap[dir=rtl] .select2-selection--single .select2-selection__clear{float:left}.select2-container--bootstrap[dir=rtl] .select2-selection--single .select2-selection__arrow{left:12px;right:auto}.select2-container--bootstrap[dir=rtl] .select2-selection--single .select2-selection__arrow b{margin-left:0}.select2-container--bootstrap[dir=rtl] .select2-selection--multiple .select2-search--inline,.select2-container--bootstrap[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--bootstrap[dir=rtl] .select2-selection--multiple .select2-selection__placeholder{float:right}.select2-container--bootstrap[dir=rtl] .select2-selection--multiple .select2-selection__choice{margin-left:0;margin-right:6px}.select2-container--bootstrap[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.has-warning .select2-dropdown,.has-warning .select2-selection{border-color:#8a6d3b}.has-warning .select2-container--focus .select2-selection,.has-warning .select2-container--open .select2-selection{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;border-color:#66512c}.has-warning.select2-drop-active{border-color:#66512c}.has-warning.select2-drop-active.select2-drop.select2-drop-above{border-top-color:#66512c}.has-error .select2-dropdown,.has-error .select2-selection{border-color:#a94442}.has-error .select2-container--focus .select2-selection,.has-error .select2-container--open .select2-selection{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;border-color:#843534}.has-error.select2-drop-active{border-color:#843534}.has-error.select2-drop-active.select2-drop.select2-drop-above{border-top-color:#843534}.has-success .select2-dropdown,.has-success .select2-selection{border-color:#3c763d}.has-success .select2-container--focus .select2-selection,.has-success .select2-container--open .select2-selection{-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;border-color:#2b542c}.has-success.select2-drop-active{border-color:#2b542c}.has-success.select2-drop-active.select2-drop.select2-drop-above{border-top-color:#2b542c}.input-group>.select2-hidden-accessible:first-child+.select2-container--bootstrap>.selection>.select2-selection,.input-group>.select2-hidden-accessible:first-child+.select2-container--bootstrap>.selection>.select2-selection.form-control{border-bottom-right-radius:0;border-top-right-radius:0}.input-group>.select2-hidden-accessible:not(:first-child)+.select2-container--bootstrap:not(:last-child)>.selection>.select2-selection,.input-group>.select2-hidden-accessible:not(:first-child)+.select2-container--bootstrap:not(:last-child)>.selection>.select2-selection.form-control{border-radius:0}.input-group>.select2-hidden-accessible:not(:first-child):not(:last-child)+.select2-container--bootstrap:last-child>.selection>.select2-selection,.input-group>.select2-hidden-accessible:not(:first-child):not(:last-child)+.select2-container--bootstrap:last-child>.selection>.select2-selection.form-control{border-bottom-left-radius:0;border-top-left-radius:0}.input-group>.select2-container--bootstrap{display:table;table-layout:fixed;position:relative;z-index:2;width:100%;margin-bottom:0}.input-group>.select2-container--bootstrap>.selection>.select2-selection.form-control{float:none}.input-group>.select2-container--bootstrap.select2-container--focus,.input-group>.select2-container--bootstrap.select2-container--open{z-index:3}.input-group>.select2-container--bootstrap,.input-group>.select2-container--bootstrap .input-group-btn,.input-group>.select2-container--bootstrap .input-group-btn .btn{vertical-align:top}.form-control.select2-hidden-accessible{position:absolute!important;width:1px!important}@media (min-width:768px){.form-inline .select2-container--bootstrap{display:inline-block}} 8 | -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | dist 3 | -------------------------------------------------------------------------------- /docs/4.0.0.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | version: 4.0.0 4 | --- 5 | -------------------------------------------------------------------------------- /docs/4.0.1.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | version: 4.0.1 4 | --- 5 | -------------------------------------------------------------------------------- /docs/4.0.2.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | version: 4.0.2 4 | --- 5 | -------------------------------------------------------------------------------- /docs/4.0.3.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | version: 4.0.3 4 | --- 5 | -------------------------------------------------------------------------------- /docs/_config.yml: -------------------------------------------------------------------------------- 1 | versions: 2 | - 4.0.0 3 | - 4.0.1 4 | - 4.0.2 5 | - 4.0.3 6 | 7 | title: 8 | select2-bootstrap-theme 9 | -------------------------------------------------------------------------------- /docs/_includes/footer-links.html: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /docs/_includes/footer.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | {% include footer-links.html %} 4 | 5 | 6 | Bootstrap is a front-end framework for fast, sleek, and mobile-first web development.
7 | Select2 is a jQuery based replacement for select boxes. 8 | 9 |
10 |
11 | -------------------------------------------------------------------------------- /docs/_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ site.title }} 6 | 7 | 8 | 9 | 10 | 14 | 15 | -------------------------------------------------------------------------------- /docs/_includes/navbar.html: -------------------------------------------------------------------------------- 1 | 32 | -------------------------------------------------------------------------------- /docs/_includes/scripts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/_includes/select2-select.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /docs/_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {% include head.html %} 4 | 5 | {% include navbar.html %} 6 | 7 |
8 | 9 |
10 | 11 | 12 |
13 | 14 |
15 | 16 | 20 |
21 | 22 |
23 | 24 | 27 |
28 | 29 |
30 |

Input Groups

31 |
32 | 33 |
34 | 35 |
36 | 37 | 38 | 39 | 43 |
44 |
45 | 46 |
47 | 48 |
49 | 50 | 51 | 52 | 55 |
56 |
57 | 58 |
59 | 60 |
61 | 65 | 66 | 69 | 70 |
71 |
72 | 73 |
74 | 75 |
76 | 77 | 80 | 81 | 87 |
88 |
89 | 90 |
91 | 92 |
93 | 99 | 100 | 103 | 104 |
105 |
106 | 107 |
108 | 109 |
110 | 111 | 114 | 115 | 119 |
120 |
121 | 122 |
123 | 124 |
125 | 126 | 129 | 130 | 134 | … is my favorite! 135 |
136 |
137 | 138 |
139 |

140 | RTL Support and Bootstrap Control Sizing 141 |

142 |
143 | 144 |

The theme offers styles to display "small" and "large" Select2 widgets in Bootstrap Input Groups with Bootstrap Control Sizing classes applied (e. g. Select2 in .input-group.input-group-sm or .input-group.input-group-lg). You may also apply the Bootstrap Control Sizing classes directly to the .select2-container to alter its appearance.

145 | 146 | 150 | 151 |
152 |
153 | 154 | 157 |

RTL support via dir="rtl"

158 |
159 |
160 | 161 | 164 |
165 |
166 | 167 | 168 |
169 |
170 |
171 | 172 |
173 | 174 | 175 | 176 | 180 |
181 |
182 |
183 |
184 | 185 | 186 | 187 |
188 |
189 | 190 | 193 |

Example block-level help text.

194 |
195 |
196 | 197 | 200 |
201 |
202 | 203 | 204 |
205 |
206 |
207 | 208 |
209 | 210 | 211 | 212 | 216 |
217 |
218 |
219 |
220 | 221 | 222 | 223 |
224 |
225 | 226 | 229 |
230 |
231 | 232 | 235 |
236 |
237 | 238 | 239 |
240 |
241 |
242 | 243 |
244 | 245 | 246 | 247 | 251 |
252 |
253 |
254 |
255 | 256 |

257 | Horizontal form group sizes 258 |

259 | 260 |

The theme's styles work in Bootstrap's Horizontal Forms and offers support for Horizontal Form Group Sizes, too.

261 | 262 |
263 |
264 | 265 | 266 |
267 | 268 |
269 | 270 |
271 | 274 |
275 |
276 | 277 |
278 | 279 | 280 |
281 | 282 |
283 | 284 |
285 | 288 |
289 |
290 | 291 |
292 | 293 |
294 | 298 |
299 |
300 | 301 |
302 | 303 | 304 |
305 | 306 |
307 |
308 | 309 |
310 |
311 |
312 | 315 |
316 |
317 |
318 | 319 |
320 |
321 | 322 |
323 |
324 |
325 | 326 |
327 |

328 | Inline Forms 329 |

330 |
331 | 332 |
333 |
334 |
335 |
336 | 337 |
338 |
$
339 | 343 |
.00
344 |
345 |
346 | 347 |
348 |
349 |
350 | 351 |
352 |
353 |
354 |
355 | 356 | 357 |
358 |
359 | 360 | 361 |
362 | 366 |
367 | 370 |
371 | 372 |
373 |
374 |
375 | 376 |
377 |

378 | Button Addons 379 |

380 |
381 | 382 |

Tests for Select2 widgets used in context with Bootstrap's Button Addons.

383 | 384 |
385 |
386 | 387 |
388 |
389 | 392 |
393 | 396 |
397 |
398 |
399 | 400 |
401 | 402 | 405 | 406 | 409 |
410 |
411 |
412 | 413 | 414 | 415 |
416 |
417 | 418 |
419 |
420 | 423 | 430 |
431 | 434 |
435 |
436 |
437 | 438 |
439 | 440 | 443 | 444 | 447 |
448 |
449 |
450 | 451 | 452 | 453 |
454 |
455 | 456 |
457 | 461 | 462 | 465 | 466 |
467 |
468 |
469 | 470 |
471 | 472 | 475 | 476 | 479 |
480 |
481 |
482 | 483 |
484 |

Disabled inputs and options

485 |
486 | 487 |

The theme applies Bootstrap's styles for disabled input elements and for disabled dropdown options to the Select2 widgets and its options. Also see Select2's documentation on its "Disabled mode".

488 | 489 |
490 |
491 |
492 | 493 |
494 | 495 | 496 | 497 | 501 |
502 |
503 |
504 |
505 |
506 | 507 |
508 | 509 | 510 | 511 | 515 |
516 |
517 |
518 |
519 | 520 |
521 | 522 | {% include footer.html %} 523 | 524 | {% include scripts.html %} 525 | 526 | 527 | 640 | 641 | 642 | -------------------------------------------------------------------------------- /docs/_layouts/minimal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {% include head.html %} 4 | 5 | {{ content }} 6 | 7 | 8 | -------------------------------------------------------------------------------- /docs/_sass/_alert.sass: -------------------------------------------------------------------------------- 1 | .alert 2 | padding: 20px 3 | margin: 20px 0 4 | border: 1px solid #EEE 5 | border-left-width: 5px 6 | border-radius: 3px 7 | .btn-set-scaling-classes 8 | margin-top: 5px 9 | &-info 10 | border-left-color: #CE4844 11 | background: white 12 | color: #333 13 | h4 14 | color: #CE4844 15 | margin-top: 0 16 | margin-bottom: 5px 17 | font-size: 18px 18 | -------------------------------------------------------------------------------- /docs/_sass/_anchorjs.sass: -------------------------------------------------------------------------------- 1 | .anchorjs-link 2 | color: inherit 3 | transition: all .25s linear 4 | 5 | *:hover > .anchorjs-link 6 | margin-left: -1.125em !important 7 | -------------------------------------------------------------------------------- /docs/_sass/_buttons.sass: -------------------------------------------------------------------------------- 1 | .btn-outline 2 | border-color: $component-active-bg 3 | color: $component-active-bg 4 | background-color: transparent 5 | &:hover, 6 | &:active 7 | color: $component-active-color 8 | background-color: $component-active-bg 9 | -------------------------------------------------------------------------------- /docs/_sass/_common.sass: -------------------------------------------------------------------------------- 1 | a 2 | &:hover, 3 | &:focus 4 | text-decoration: none 5 | 6 | h1[id] 7 | padding-top: 20px 8 | margin-top: 0 9 | 10 | .row 11 | padding-bottom: 20px 12 | 13 | @media (min-width: $screen-sm) 14 | .jumbotron 15 | padding-top: 60px 16 | padding-bottom: 60px 17 | font-size: $lead-font-size 18 | h1 19 | font-size: 32px 20 | .lead 21 | font-size: $lead-font-size 22 | .btn-lg 23 | margin: 20px 0 24 | padding: 18px 24px 25 | font-size: $lead-font-size 26 | -------------------------------------------------------------------------------- /docs/_sass/_footer.sass: -------------------------------------------------------------------------------- 1 | .footer 2 | text-align: center 3 | color: #ccc 4 | a 5 | +link 6 | small a 7 | color: #999 8 | border-bottom: 0 9 | &-links 10 | margin-top: $padding-large-horizontal 11 | margin-bottom: 0 12 | padding-bottom: $padding-large-horizontal 13 | padding-left: 0 14 | list-style: none 15 | font-size: 14px 16 | li 17 | display: inline 18 | margin-left: 2px 19 | margin-right: 2px 20 | .demo & 21 | padding-top: 200px 22 | padding-bottom: 80px 23 | @extend %background-image 24 | img 25 | height: 16px 26 | width: auto 27 | margin-right: 4px 28 | -------------------------------------------------------------------------------- /docs/_sass/_home.sass: -------------------------------------------------------------------------------- 1 | .home 2 | padding-bottom: 30px 3 | @extend %background-image 4 | background-position: 50% 50% 5 | body 6 | background-color: transparent 7 | .container 8 | max-width: 700px 9 | -------------------------------------------------------------------------------- /docs/_sass/_jumbotron.sass: -------------------------------------------------------------------------------- 1 | .jumbotron 2 | background-color: transparent 3 | text-align: center 4 | font-weight: normal 5 | &-title 6 | margin-top: 40px 7 | font-size: 28px 8 | h2 9 | text-align: center 10 | font-size: 16px 11 | hr 12 | border-color: #eee 13 | width: 100px 14 | .lead 15 | font-size: 16px 16 | a 17 | +link 18 | .form-group 19 | background: none 20 | .select2-wrapper 21 | width: 300px 22 | text-align: left 23 | margin: 0 auto $padding-large-horizontal 24 | transition: all .1s ease-in-out 25 | .btn 26 | &-outline 27 | padding: 18px 24px 28 | transition: all .1s ease-in-out 29 | &-lg 30 | padding: 10px 16px 31 | font-size: 18px 32 | line-height: 1.33 33 | border-radius: 6px 34 | margin-top: 15px 35 | margin-bottom: 15px 36 | margin-left: 0 37 | -------------------------------------------------------------------------------- /docs/_sass/_mixins.sass: -------------------------------------------------------------------------------- 1 | =link($color: $link-color, $hover-color: $link-hover-color, $border-width: 1px, $font-weight: normal) 2 | border-bottom: $border-width solid transparent 3 | color: $color 4 | font-weight: $font-weight 5 | transition: all .1s ease-in-out 6 | &:hover 7 | border-color: $hover-color 8 | border-width: $border-width 9 | color: $hover-color 10 | -------------------------------------------------------------------------------- /docs/_sass/_navbar.sass: -------------------------------------------------------------------------------- 1 | .navbar-default 2 | background: rgba(#fff,.95) 3 | border-width: 0 0 1px 4 | border-radius: 0 5 | -------------------------------------------------------------------------------- /docs/_sass/_select2-result-repository.sass: -------------------------------------------------------------------------------- 1 | .select2-result-repository 2 | padding-top: 4px 3 | padding-bottom: 3px 4 | &__avatar 5 | float: left 6 | width: 60px 7 | margin-right: 10px 8 | img 9 | width: 100% 10 | height: auto 11 | border-radius: 2px 12 | &__meta 13 | margin-left: 70px 14 | &__title 15 | color: black 16 | font-weight: bold 17 | word-wrap: break-word 18 | line-height: 1.1 19 | margin-bottom: 4px 20 | &__forks, 21 | &__stargazers 22 | margin-right: 1em 23 | &__forks, 24 | &__stargazers, 25 | &__watchers 26 | display: inline-block 27 | color: #aaa 28 | font-size: 11px 29 | &__description 30 | font-size: 13px 31 | color: #777 32 | margin-top: 4px 33 | .select2-results__option--highlighted & 34 | &__title 35 | color: white 36 | &__forks, 37 | &__stargazers, 38 | &__description, 39 | &__watchers 40 | color: mix($link-color, white, 30%) 41 | -------------------------------------------------------------------------------- /docs/_sass/_variables.sass: -------------------------------------------------------------------------------- 1 | $lead-font-size: 20px 2 | -------------------------------------------------------------------------------- /docs/css/gh-pages.sass: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | @import ../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables 4 | @import variables 5 | @import extends 6 | @import mixins 7 | 8 | @import alert 9 | @import anchorjs 10 | @import buttons 11 | @import common 12 | @import footer 13 | @import home 14 | @import jumbotron 15 | @import navbar 16 | @import select2-result-repository 17 | -------------------------------------------------------------------------------- /docs/css/select2-bootstrap.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Select2 Bootstrap Theme v0.1.0-beta.10 (https://select2.github.io/select2-bootstrap-theme) 3 | * Copyright 2015-2017 Florian Kissling and contributors (https://github.com/select2/select2-bootstrap-theme/graphs/contributors) 4 | * Licensed under MIT (https://github.com/select2/select2-bootstrap-theme/blob/master/LICENSE) 5 | */ 6 | 7 | .select2-container--bootstrap { 8 | display: block; 9 | /*------------------------------------* #COMMON STYLES 10 | \*------------------------------------*/ 11 | /** 12 | * Search field in the Select2 dropdown. 13 | */ 14 | /** 15 | * No outline for all search fields - in the dropdown 16 | * and inline in multi Select2s. 17 | */ 18 | /** 19 | * Adjust Select2's choices hover and selected styles to match 20 | * Bootstrap 3's default dropdown styles. 21 | * 22 | * @see http://getbootstrap.com/components/#dropdowns 23 | */ 24 | /** 25 | * Clear the selection. 26 | */ 27 | /** 28 | * Address disabled Select2 styles. 29 | * 30 | * @see https://select2.github.io/examples.html#disabled 31 | * @see http://getbootstrap.com/css/#forms-control-disabled 32 | */ 33 | /*------------------------------------* #DROPDOWN 34 | \*------------------------------------*/ 35 | /** 36 | * Dropdown border color and box-shadow. 37 | */ 38 | /** 39 | * Limit the dropdown height. 40 | */ 41 | /*------------------------------------* #SINGLE SELECT2 42 | \*------------------------------------*/ 43 | /*------------------------------------* #MULTIPLE SELECT2 44 | \*------------------------------------*/ 45 | /** 46 | * Address Bootstrap control sizing classes 47 | * 48 | * 1. Reset Bootstrap defaults. 49 | * 2. Adjust the dropdown arrow button icon position. 50 | * 51 | * @see http://getbootstrap.com/css/#forms-control-sizes 52 | */ 53 | /* 1 */ 54 | /*------------------------------------* #RTL SUPPORT 55 | \*------------------------------------*/ 56 | } 57 | 58 | .select2-container--bootstrap .select2-selection { 59 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 60 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 61 | background-color: #fff; 62 | border: 1px solid #ccc; 63 | border-radius: 4px; 64 | color: #555555; 65 | font-size: 14px; 66 | outline: 0; 67 | } 68 | 69 | .select2-container--bootstrap .select2-selection.form-control { 70 | border-radius: 4px; 71 | } 72 | 73 | .select2-container--bootstrap .select2-search--dropdown .select2-search__field { 74 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 75 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 76 | background-color: #fff; 77 | border: 1px solid #ccc; 78 | border-radius: 4px; 79 | color: #555555; 80 | font-size: 14px; 81 | } 82 | 83 | .select2-container--bootstrap .select2-search__field { 84 | outline: 0; 85 | /* Firefox 18- */ 86 | /** 87 | * Firefox 19+ 88 | * 89 | * @see http://stackoverflow.com/questions/24236240/color-for-styled-placeholder-text-is-muted-in-firefox 90 | */ 91 | } 92 | 93 | .select2-container--bootstrap .select2-search__field::-webkit-input-placeholder { 94 | color: #999; 95 | } 96 | 97 | .select2-container--bootstrap .select2-search__field:-moz-placeholder { 98 | color: #999; 99 | } 100 | 101 | .select2-container--bootstrap .select2-search__field::-moz-placeholder { 102 | color: #999; 103 | opacity: 1; 104 | } 105 | 106 | .select2-container--bootstrap .select2-search__field:-ms-input-placeholder { 107 | color: #999; 108 | } 109 | 110 | .select2-container--bootstrap .select2-results__option { 111 | padding: 6px 12px; 112 | /** 113 | * Disabled results. 114 | * 115 | * @see https://select2.github.io/examples.html#disabled-results 116 | */ 117 | /** 118 | * Hover state. 119 | */ 120 | /** 121 | * Selected state. 122 | */ 123 | } 124 | 125 | .select2-container--bootstrap .select2-results__option[role=group] { 126 | padding: 0; 127 | } 128 | 129 | .select2-container--bootstrap .select2-results__option[aria-disabled=true] { 130 | color: #777777; 131 | cursor: not-allowed; 132 | } 133 | 134 | .select2-container--bootstrap .select2-results__option[aria-selected=true] { 135 | background-color: #f5f5f5; 136 | color: #262626; 137 | } 138 | 139 | .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] { 140 | background-color: #337ab7; 141 | color: #fff; 142 | } 143 | 144 | .select2-container--bootstrap .select2-results__option .select2-results__option { 145 | padding: 6px 12px; 146 | } 147 | 148 | .select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__group { 149 | padding-left: 0; 150 | } 151 | 152 | .select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option { 153 | margin-left: -12px; 154 | padding-left: 24px; 155 | } 156 | 157 | .select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option { 158 | margin-left: -24px; 159 | padding-left: 36px; 160 | } 161 | 162 | .select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { 163 | margin-left: -36px; 164 | padding-left: 48px; 165 | } 166 | 167 | .select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { 168 | margin-left: -48px; 169 | padding-left: 60px; 170 | } 171 | 172 | .select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { 173 | margin-left: -60px; 174 | padding-left: 72px; 175 | } 176 | 177 | .select2-container--bootstrap .select2-results__group { 178 | color: #777777; 179 | display: block; 180 | padding: 6px 12px; 181 | font-size: 12px; 182 | line-height: 1.42857143; 183 | white-space: nowrap; 184 | } 185 | 186 | .select2-container--bootstrap.select2-container--focus .select2-selection, .select2-container--bootstrap.select2-container--open .select2-selection { 187 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 188 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 189 | -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 190 | -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 191 | -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s; 192 | transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s; 193 | transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 194 | transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s; 195 | border-color: #66afe9; 196 | } 197 | 198 | .select2-container--bootstrap.select2-container--open { 199 | /** 200 | * Make the dropdown arrow point up while the dropdown is visible. 201 | */ 202 | /** 203 | * Handle border radii of the container when the dropdown is showing. 204 | */ 205 | } 206 | 207 | .select2-container--bootstrap.select2-container--open .select2-selection .select2-selection__arrow b { 208 | border-color: transparent transparent #999 transparent; 209 | border-width: 0 4px 4px 4px; 210 | } 211 | 212 | .select2-container--bootstrap.select2-container--open.select2-container--below .select2-selection { 213 | border-bottom-right-radius: 0; 214 | border-bottom-left-radius: 0; 215 | border-bottom-color: transparent; 216 | } 217 | 218 | .select2-container--bootstrap.select2-container--open.select2-container--above .select2-selection { 219 | border-top-right-radius: 0; 220 | border-top-left-radius: 0; 221 | border-top-color: transparent; 222 | } 223 | 224 | .select2-container--bootstrap .select2-selection__clear { 225 | color: #999; 226 | cursor: pointer; 227 | float: right; 228 | font-weight: bold; 229 | margin-right: 10px; 230 | } 231 | 232 | .select2-container--bootstrap .select2-selection__clear:hover { 233 | color: #333; 234 | } 235 | 236 | .select2-container--bootstrap.select2-container--disabled .select2-selection { 237 | border-color: #ccc; 238 | -webkit-box-shadow: none; 239 | box-shadow: none; 240 | } 241 | 242 | .select2-container--bootstrap.select2-container--disabled .select2-selection, 243 | .select2-container--bootstrap.select2-container--disabled .select2-search__field { 244 | cursor: not-allowed; 245 | } 246 | 247 | .select2-container--bootstrap.select2-container--disabled .select2-selection, 248 | .select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice { 249 | background-color: #eeeeee; 250 | } 251 | 252 | .select2-container--bootstrap.select2-container--disabled .select2-selection__clear, 253 | .select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice__remove { 254 | display: none; 255 | } 256 | 257 | .select2-container--bootstrap .select2-dropdown { 258 | -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); 259 | box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); 260 | border-color: #66afe9; 261 | overflow-x: hidden; 262 | margin-top: -1px; 263 | } 264 | 265 | .select2-container--bootstrap .select2-dropdown--above { 266 | -webkit-box-shadow: 0px -6px 12px rgba(0, 0, 0, 0.175); 267 | box-shadow: 0px -6px 12px rgba(0, 0, 0, 0.175); 268 | margin-top: 1px; 269 | } 270 | 271 | .select2-container--bootstrap .select2-results > .select2-results__options { 272 | max-height: 200px; 273 | overflow-y: auto; 274 | } 275 | 276 | .select2-container--bootstrap .select2-selection--single { 277 | height: 34px; 278 | line-height: 1.42857143; 279 | padding: 6px 24px 6px 12px; 280 | /** 281 | * Adjust the single Select2's dropdown arrow button appearance. 282 | */ 283 | } 284 | 285 | .select2-container--bootstrap .select2-selection--single .select2-selection__arrow { 286 | position: absolute; 287 | bottom: 0; 288 | right: 12px; 289 | top: 0; 290 | width: 4px; 291 | } 292 | 293 | .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b { 294 | border-color: #999 transparent transparent transparent; 295 | border-style: solid; 296 | border-width: 4px 4px 0 4px; 297 | height: 0; 298 | left: 0; 299 | margin-left: -4px; 300 | margin-top: -2px; 301 | position: absolute; 302 | top: 50%; 303 | width: 0; 304 | } 305 | 306 | .select2-container--bootstrap .select2-selection--single .select2-selection__rendered { 307 | color: #555555; 308 | padding: 0; 309 | } 310 | 311 | .select2-container--bootstrap .select2-selection--single .select2-selection__placeholder { 312 | color: #999; 313 | } 314 | 315 | .select2-container--bootstrap .select2-selection--multiple { 316 | min-height: 34px; 317 | padding: 0; 318 | height: auto; 319 | /** 320 | * Make Multi Select2's choices match Bootstrap 3's default button styles. 321 | */ 322 | /** 323 | * Minus 2px borders. 324 | */ 325 | /** 326 | * Clear the selection. 327 | */ 328 | } 329 | 330 | .select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered { 331 | -webkit-box-sizing: border-box; 332 | -moz-box-sizing: border-box; 333 | box-sizing: border-box; 334 | display: block; 335 | line-height: 1.42857143; 336 | list-style: none; 337 | margin: 0; 338 | overflow: hidden; 339 | padding: 0; 340 | width: 100%; 341 | text-overflow: ellipsis; 342 | white-space: nowrap; 343 | } 344 | 345 | .select2-container--bootstrap .select2-selection--multiple .select2-selection__placeholder { 346 | color: #999; 347 | float: left; 348 | margin-top: 5px; 349 | } 350 | 351 | .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice { 352 | color: #555555; 353 | background: #fff; 354 | border: 1px solid #ccc; 355 | border-radius: 4px; 356 | cursor: default; 357 | float: left; 358 | margin: 5px 0 0 6px; 359 | padding: 0 6px; 360 | } 361 | 362 | .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field { 363 | background: transparent; 364 | padding: 0 12px; 365 | height: 32px; 366 | line-height: 1.42857143; 367 | margin-top: 0; 368 | min-width: 5em; 369 | } 370 | 371 | .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove { 372 | color: #999; 373 | cursor: pointer; 374 | display: inline-block; 375 | font-weight: bold; 376 | margin-right: 3px; 377 | } 378 | 379 | .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove:hover { 380 | color: #333; 381 | } 382 | 383 | .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear { 384 | margin-top: 6px; 385 | } 386 | 387 | .select2-container--bootstrap .select2-selection--single.input-sm, 388 | .input-group-sm .select2-container--bootstrap .select2-selection--single, 389 | .form-group-sm .select2-container--bootstrap .select2-selection--single { 390 | border-radius: 3px; 391 | font-size: 12px; 392 | height: 30px; 393 | line-height: 1.5; 394 | padding: 5px 22px 5px 10px; 395 | /* 2 */ 396 | } 397 | 398 | .select2-container--bootstrap .select2-selection--single.input-sm .select2-selection__arrow b, 399 | .input-group-sm .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b, 400 | .form-group-sm .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b { 401 | margin-left: -5px; 402 | } 403 | 404 | .select2-container--bootstrap .select2-selection--multiple.input-sm, 405 | .input-group-sm .select2-container--bootstrap .select2-selection--multiple, 406 | .form-group-sm .select2-container--bootstrap .select2-selection--multiple { 407 | min-height: 30px; 408 | border-radius: 3px; 409 | } 410 | 411 | .select2-container--bootstrap .select2-selection--multiple.input-sm .select2-selection__choice, 412 | .input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice, 413 | .form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice { 414 | font-size: 12px; 415 | line-height: 1.5; 416 | margin: 4px 0 0 5px; 417 | padding: 0 5px; 418 | } 419 | 420 | .select2-container--bootstrap .select2-selection--multiple.input-sm .select2-search--inline .select2-search__field, 421 | .input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field, 422 | .form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field { 423 | padding: 0 10px; 424 | font-size: 12px; 425 | height: 28px; 426 | line-height: 1.5; 427 | } 428 | 429 | .select2-container--bootstrap .select2-selection--multiple.input-sm .select2-selection__clear, 430 | .input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear, 431 | .form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear { 432 | margin-top: 5px; 433 | } 434 | 435 | .select2-container--bootstrap .select2-selection--single.input-lg, 436 | .input-group-lg .select2-container--bootstrap .select2-selection--single, 437 | .form-group-lg .select2-container--bootstrap .select2-selection--single { 438 | border-radius: 6px; 439 | font-size: 18px; 440 | height: 46px; 441 | line-height: 1.3333333; 442 | padding: 10px 31px 10px 16px; 443 | /* 1 */ 444 | } 445 | 446 | .select2-container--bootstrap .select2-selection--single.input-lg .select2-selection__arrow, 447 | .input-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow, 448 | .form-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow { 449 | width: 5px; 450 | } 451 | 452 | .select2-container--bootstrap .select2-selection--single.input-lg .select2-selection__arrow b, 453 | .input-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b, 454 | .form-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b { 455 | border-width: 5px 5px 0 5px; 456 | margin-left: -5px; 457 | margin-left: -10px; 458 | margin-top: -2.5px; 459 | } 460 | 461 | .select2-container--bootstrap .select2-selection--multiple.input-lg, 462 | .input-group-lg .select2-container--bootstrap .select2-selection--multiple, 463 | .form-group-lg .select2-container--bootstrap .select2-selection--multiple { 464 | min-height: 46px; 465 | border-radius: 6px; 466 | } 467 | 468 | .select2-container--bootstrap .select2-selection--multiple.input-lg .select2-selection__choice, 469 | .input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice, 470 | .form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice { 471 | font-size: 18px; 472 | line-height: 1.3333333; 473 | border-radius: 4px; 474 | margin: 9px 0 0 8px; 475 | padding: 0 10px; 476 | } 477 | 478 | .select2-container--bootstrap .select2-selection--multiple.input-lg .select2-search--inline .select2-search__field, 479 | .input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field, 480 | .form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field { 481 | padding: 0 16px; 482 | font-size: 18px; 483 | height: 44px; 484 | line-height: 1.3333333; 485 | } 486 | 487 | .select2-container--bootstrap .select2-selection--multiple.input-lg .select2-selection__clear, 488 | .input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear, 489 | .form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear { 490 | margin-top: 10px; 491 | } 492 | 493 | .select2-container--bootstrap .select2-selection.input-lg.select2-container--open .select2-selection--single { 494 | /** 495 | * Make the dropdown arrow point up while the dropdown is visible. 496 | */ 497 | } 498 | 499 | .select2-container--bootstrap .select2-selection.input-lg.select2-container--open .select2-selection--single .select2-selection__arrow b { 500 | border-color: transparent transparent #999 transparent; 501 | border-width: 0 5px 5px 5px; 502 | } 503 | 504 | .input-group-lg .select2-container--bootstrap .select2-selection.select2-container--open .select2-selection--single { 505 | /** 506 | * Make the dropdown arrow point up while the dropdown is visible. 507 | */ 508 | } 509 | 510 | .input-group-lg .select2-container--bootstrap .select2-selection.select2-container--open .select2-selection--single .select2-selection__arrow b { 511 | border-color: transparent transparent #999 transparent; 512 | border-width: 0 5px 5px 5px; 513 | } 514 | 515 | .select2-container--bootstrap[dir="rtl"] { 516 | /** 517 | * Single Select2 518 | * 519 | * 1. Makes sure that .select2-selection__placeholder is positioned 520 | * correctly. 521 | */ 522 | /** 523 | * Multiple Select2 524 | */ 525 | } 526 | 527 | .select2-container--bootstrap[dir="rtl"] .select2-selection--single { 528 | padding-left: 24px; 529 | padding-right: 12px; 530 | } 531 | 532 | .select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__rendered { 533 | padding-right: 0; 534 | padding-left: 0; 535 | text-align: right; 536 | /* 1 */ 537 | } 538 | 539 | .select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__clear { 540 | float: left; 541 | } 542 | 543 | .select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__arrow { 544 | left: 12px; 545 | right: auto; 546 | } 547 | 548 | .select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__arrow b { 549 | margin-left: 0; 550 | } 551 | 552 | .select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__choice, 553 | .select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, 554 | .select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-search--inline { 555 | float: right; 556 | } 557 | 558 | .select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__choice { 559 | margin-left: 0; 560 | margin-right: 6px; 561 | } 562 | 563 | .select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { 564 | margin-left: 2px; 565 | margin-right: auto; 566 | } 567 | 568 | /*------------------------------------* #ADDITIONAL GOODIES 569 | \*------------------------------------*/ 570 | /** 571 | * Address Bootstrap's validation states 572 | * 573 | * If a Select2 widget parent has one of Bootstrap's validation state modifier 574 | * classes, adjust Select2's border colors and focus states accordingly. 575 | * You may apply said classes to the Select2 dropdown (body > .select2-container) 576 | * via JavaScript match Bootstraps' to make its styles match. 577 | * 578 | * @see http://getbootstrap.com/css/#forms-control-validation 579 | */ 580 | .has-warning .select2-dropdown, 581 | .has-warning .select2-selection { 582 | border-color: #8a6d3b; 583 | } 584 | 585 | .has-warning .select2-container--focus .select2-selection, 586 | .has-warning .select2-container--open .select2-selection { 587 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; 588 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; 589 | border-color: #66512c; 590 | } 591 | 592 | .has-warning.select2-drop-active { 593 | border-color: #66512c; 594 | } 595 | 596 | .has-warning.select2-drop-active.select2-drop.select2-drop-above { 597 | border-top-color: #66512c; 598 | } 599 | 600 | .has-error .select2-dropdown, 601 | .has-error .select2-selection { 602 | border-color: #a94442; 603 | } 604 | 605 | .has-error .select2-container--focus .select2-selection, 606 | .has-error .select2-container--open .select2-selection { 607 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; 608 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; 609 | border-color: #843534; 610 | } 611 | 612 | .has-error.select2-drop-active { 613 | border-color: #843534; 614 | } 615 | 616 | .has-error.select2-drop-active.select2-drop.select2-drop-above { 617 | border-top-color: #843534; 618 | } 619 | 620 | .has-success .select2-dropdown, 621 | .has-success .select2-selection { 622 | border-color: #3c763d; 623 | } 624 | 625 | .has-success .select2-container--focus .select2-selection, 626 | .has-success .select2-container--open .select2-selection { 627 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; 628 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; 629 | border-color: #2b542c; 630 | } 631 | 632 | .has-success.select2-drop-active { 633 | border-color: #2b542c; 634 | } 635 | 636 | .has-success.select2-drop-active.select2-drop.select2-drop-above { 637 | border-top-color: #2b542c; 638 | } 639 | 640 | /** 641 | * Select2 widgets in Bootstrap Input Groups 642 | * 643 | * @see http://getbootstrap.com/components/#input-groups 644 | * @see https://github.com/twbs/bootstrap/blob/master/less/input-groups.less 645 | */ 646 | /** 647 | * Reset rounded corners 648 | */ 649 | .input-group > .select2-hidden-accessible:first-child + .select2-container--bootstrap > .selection > .select2-selection, 650 | .input-group > .select2-hidden-accessible:first-child + .select2-container--bootstrap > .selection > .select2-selection.form-control { 651 | border-bottom-right-radius: 0; 652 | border-top-right-radius: 0; 653 | } 654 | 655 | .input-group > .select2-hidden-accessible:not(:first-child) + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection, 656 | .input-group > .select2-hidden-accessible:not(:first-child) + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection.form-control { 657 | border-radius: 0; 658 | } 659 | 660 | .input-group > .select2-hidden-accessible:not(:first-child):not(:last-child) + .select2-container--bootstrap:last-child > .selection > .select2-selection, 661 | .input-group > .select2-hidden-accessible:not(:first-child):not(:last-child) + .select2-container--bootstrap:last-child > .selection > .select2-selection.form-control { 662 | border-bottom-left-radius: 0; 663 | border-top-left-radius: 0; 664 | } 665 | 666 | .input-group > .select2-container--bootstrap { 667 | display: table; 668 | table-layout: fixed; 669 | position: relative; 670 | z-index: 2; 671 | width: 100%; 672 | margin-bottom: 0; 673 | /** 674 | * Adjust z-index like Bootstrap does to show the focus-box-shadow 675 | * above appended buttons in .input-group and .form-group. 676 | */ 677 | /** 678 | * Adjust alignment of Bootstrap buttons in Bootstrap Input Groups to address 679 | * Multi Select2's height which - depending on how many elements have been selected - 680 | * may grow taller than its initial size. 681 | * 682 | * @see http://getbootstrap.com/components/#input-groups 683 | */ 684 | } 685 | 686 | .input-group > .select2-container--bootstrap > .selection > .select2-selection.form-control { 687 | float: none; 688 | } 689 | 690 | .input-group > .select2-container--bootstrap.select2-container--open, .input-group > .select2-container--bootstrap.select2-container--focus { 691 | z-index: 3; 692 | } 693 | 694 | .input-group > .select2-container--bootstrap, 695 | .input-group > .select2-container--bootstrap .input-group-btn, 696 | .input-group > .select2-container--bootstrap .input-group-btn .btn { 697 | vertical-align: top; 698 | } 699 | 700 | /** 701 | * Temporary fix for https://github.com/select2/select2-bootstrap-theme/issues/9 702 | * 703 | * Provides `!important` for certain properties of the class applied to the 704 | * original ` 9 | 10 | {% include select2-select.html %} 11 | 12 | 13 |
14 | 18 |
19 |
20 |
21 |
22 | 23 | 24 | 25 | 29 |
30 |
31 |
32 | 33 |

Select2 Bootstrap Theme

34 | 35 |

A Select2 v4 theme built with Bootstrap 3 variables and mixins.

36 | 37 | Demonstrations 38 | 39 | 40 | 41 | {% include footer.html %} 42 | 43 | {% include scripts.html %} 44 | 56 | -------------------------------------------------------------------------------- /docs/js/anchor.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * AnchorJS - v3.2.2 - 2016-10-05 3 | * https://github.com/bryanbraun/anchorjs 4 | * Copyright (c) 2016 Bryan Braun; Licensed MIT 5 | */ 6 | !function(A,e){"use strict";"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&module.exports?module.exports=e():(A.AnchorJS=e(),A.anchors=new A.AnchorJS)}(this,function(){"use strict";function A(A){function e(A){A.icon=A.hasOwnProperty("icon")?A.icon:"",A.visible=A.hasOwnProperty("visible")?A.visible:"hover",A.placement=A.hasOwnProperty("placement")?A.placement:"right",A.class=A.hasOwnProperty("class")?A.class:"",A.truncate=A.hasOwnProperty("truncate")?Math.floor(A.truncate):64}function t(A){var e;if("string"==typeof A||A instanceof String)e=[].slice.call(document.querySelectorAll(A));else{if(!(Array.isArray(A)||A instanceof NodeList))throw new Error("The selector provided to AnchorJS was invalid.");e=[].slice.call(A)}return e}function n(){if(null===document.head.querySelector("style.anchorjs")){var A,e=document.createElement("style"),t=" .anchorjs-link { opacity: 0; text-decoration: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }",n=" *:hover > .anchorjs-link, .anchorjs-link:focus { opacity: 1; }",i=' @font-face { font-family: "anchorjs-icons"; src: url(data:n/a;base64,AAEAAAALAIAAAwAwT1MvMg8yG2cAAAE4AAAAYGNtYXDp3gC3AAABpAAAAExnYXNwAAAAEAAAA9wAAAAIZ2x5ZlQCcfwAAAH4AAABCGhlYWQHFvHyAAAAvAAAADZoaGVhBnACFwAAAPQAAAAkaG10eASAADEAAAGYAAAADGxvY2EACACEAAAB8AAAAAhtYXhwAAYAVwAAARgAAAAgbmFtZQGOH9cAAAMAAAAAunBvc3QAAwAAAAADvAAAACAAAQAAAAEAAHzE2p9fDzz1AAkEAAAAAADRecUWAAAAANQA6R8AAAAAAoACwAAAAAgAAgAAAAAAAAABAAADwP/AAAACgAAA/9MCrQABAAAAAAAAAAAAAAAAAAAAAwABAAAAAwBVAAIAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAMCQAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAg//0DwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAAIAAAACgAAxAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADAAAAAIAAgAAgAAACDpy//9//8AAAAg6cv//f///+EWNwADAAEAAAAAAAAAAAAAAAAACACEAAEAAAAAAAAAAAAAAAAxAAACAAQARAKAAsAAKwBUAAABIiYnJjQ3NzY2MzIWFxYUBwcGIicmNDc3NjQnJiYjIgYHBwYUFxYUBwYGIwciJicmNDc3NjIXFhQHBwYUFxYWMzI2Nzc2NCcmNDc2MhcWFAcHBgYjARQGDAUtLXoWOR8fORYtLTgKGwoKCjgaGg0gEhIgDXoaGgkJBQwHdR85Fi0tOAobCgoKOBoaDSASEiANehoaCQkKGwotLXoWOR8BMwUFLYEuehYXFxYugC44CQkKGwo4GkoaDQ0NDXoaShoKGwoFBe8XFi6ALjgJCQobCjgaShoNDQ0NehpKGgobCgoKLYEuehYXAAAADACWAAEAAAAAAAEACAAAAAEAAAAAAAIAAwAIAAEAAAAAAAMACAAAAAEAAAAAAAQACAAAAAEAAAAAAAUAAQALAAEAAAAAAAYACAAAAAMAAQQJAAEAEAAMAAMAAQQJAAIABgAcAAMAAQQJAAMAEAAMAAMAAQQJAAQAEAAMAAMAAQQJAAUAAgAiAAMAAQQJAAYAEAAMYW5jaG9yanM0MDBAAGEAbgBjAGgAbwByAGoAcwA0ADAAMABAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAH//wAP) format("truetype"); }',o=" [data-anchorjs-icon]::after { content: attr(data-anchorjs-icon); }";e.className="anchorjs",e.appendChild(document.createTextNode("")),A=document.head.querySelector('[rel="stylesheet"], style'),void 0===A?document.head.appendChild(e):document.head.insertBefore(e,A),e.sheet.insertRule(t,e.sheet.cssRules.length),e.sheet.insertRule(n,e.sheet.cssRules.length),e.sheet.insertRule(o,e.sheet.cssRules.length),e.sheet.insertRule(i,e.sheet.cssRules.length)}}this.options=A||{},this.elements=[],e(this.options),this.isTouchDevice=function(){return!!("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch)},this.add=function(A){var i,o,s,c,r,a,h,l,u,d,f,p,w=[];if(e(this.options),p=this.options.visible,"touch"===p&&(p=this.isTouchDevice()?"always":"hover"),A||(A="h1, h2, h3, h4, h5, h6"),i=t(A),0===i.length)return!1;for(n(),o=document.querySelectorAll("[id]"),s=[].map.call(o,function(A){return A.id}),r=0;r-1,t=A.lastChild&&(" "+A.lastChild.className+" ").indexOf(" anchorjs-link ")>-1;return e||t||!1}}return A}); 7 | -------------------------------------------------------------------------------- /docs/js/respond.min.js: -------------------------------------------------------------------------------- 1 | /*! Respond.js v1.4.2: min/max-width media query polyfill * Copyright 2013 Scott Jehl 2 | * Licensed under https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT 3 | * */ 4 | 5 | !function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='­',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){u(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))};if(c.ajax=f,c.queue=d,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={},p=30,q=j.getElementsByTagName("head")[0]||k,r=j.getElementsByTagName("base")[0],s=q.getElementsByTagName("link"),t=function(){var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)},u=function(b){var c="clientWidth",d=k[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={},o=s[s.length-1],r=(new Date).getTime();if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;g=r;for(var v in l)if(l.hasOwnProperty(v)){var w=l[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);n.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}},v=function(a,b,d){var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var g=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},h=!f&&d;b.length&&(b+="/"),h&&(f=1);for(var i=0;f>i;i++){var j,k,n,o;h?(j=d,m.push(g(a))):(j=e[i].match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;for(var p=0;o>p;p++)k=n[p],l.push({media:k.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},w=function(){if(d.length){var b=d.shift();f(b.href,function(c){v(c,b.href,b.media),o[b.href]=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b .select2-results__options { 395 | max-height: 200px; 396 | overflow-y: auto; 397 | } 398 | 399 | 400 | 401 | 402 | 403 | /*------------------------------------*\ 404 | #SINGLE SELECT2 405 | \*------------------------------------*/ 406 | 407 | .select2-selection--single { 408 | height: @s2bs-input-height-base; 409 | line-height: @s2bs-line-height-base; 410 | padding: @s2bs-padding-base-vertical (@s2bs-padding-base-horizontal + @s2bs-caret-width-base*3) @s2bs-padding-base-vertical @s2bs-padding-base-horizontal; 411 | 412 | /** 413 | * Adjust the single Select2's dropdown arrow button appearance. 414 | */ 415 | 416 | .select2-selection__arrow { 417 | position: absolute; 418 | bottom: 0; 419 | right: @s2bs-padding-base-horizontal; 420 | top: 0; 421 | width: @s2bs-caret-width-base; 422 | 423 | b { 424 | border-color: @s2bs-dropdown-arrow-color transparent transparent transparent; 425 | border-style: solid; 426 | border-width: @s2bs-caret-width-base @s2bs-caret-width-base 0 @s2bs-caret-width-base; 427 | height: 0; 428 | left: 0; 429 | margin-left: -@s2bs-caret-width-base; 430 | margin-top: -@s2bs-caret-width-base/2; 431 | position: absolute; 432 | top: 50%; 433 | width: 0; 434 | } 435 | } 436 | 437 | .select2-selection__rendered { 438 | color: @s2bs-input-color; 439 | padding: 0; 440 | } 441 | 442 | .select2-selection__placeholder { 443 | color: @s2bs-input-color-placeholder; 444 | } 445 | } 446 | 447 | 448 | 449 | 450 | 451 | /*------------------------------------*\ 452 | #MULTIPLE SELECT2 453 | \*------------------------------------*/ 454 | 455 | .select2-selection--multiple { 456 | min-height: @s2bs-input-height-base; 457 | padding: 0; 458 | height: auto; 459 | 460 | .select2-selection__rendered { 461 | box-sizing: border-box; 462 | display: block; 463 | line-height: @s2bs-line-height-base; 464 | list-style: none; 465 | margin: 0; 466 | overflow: hidden; 467 | padding: 0; 468 | width: 100%; 469 | text-overflow: ellipsis; 470 | white-space: nowrap; 471 | } 472 | 473 | .select2-selection__placeholder { 474 | color: @s2bs-input-color-placeholder; 475 | float: left; 476 | margin-top: 5px; 477 | } 478 | 479 | /** 480 | * Make Multi Select2's choices match Bootstrap 3's default button styles. 481 | */ 482 | 483 | .select2-selection__choice { 484 | color: @s2bs-input-color; 485 | background: @s2bs-btn-default-bg; 486 | border: 1px solid @s2bs-btn-default-border; 487 | border-radius: @s2bs-selection-choice-border-radius; 488 | cursor: default; 489 | float: left; 490 | margin: (@s2bs-padding-base-vertical - 1) 0 0 @s2bs-padding-base-horizontal/2; 491 | padding: 0 @s2bs-padding-base-vertical; 492 | } 493 | 494 | /** 495 | * Minus 2px borders. 496 | */ 497 | 498 | .select2-search--inline { 499 | .select2-search__field { 500 | background: transparent; 501 | padding: 0 @s2bs-padding-base-horizontal; 502 | height: @s2bs-input-height-base - 2; 503 | line-height: @s2bs-line-height-base; 504 | margin-top: 0; 505 | min-width: 5em; 506 | } 507 | } 508 | 509 | .select2-selection__choice__remove { 510 | color: @s2bs-remove-choice-color; 511 | cursor: pointer; 512 | display: inline-block; 513 | font-weight: bold; 514 | margin-right: @s2bs-padding-base-vertical / 2; 515 | 516 | &:hover { 517 | color: @s2bs-remove-choice-hover-color; 518 | } 519 | } 520 | 521 | /** 522 | * Clear the selection. 523 | */ 524 | 525 | .select2-selection__clear { 526 | margin-top: @s2bs-padding-base-vertical; 527 | } 528 | } 529 | 530 | 531 | 532 | 533 | 534 | /** 535 | * Address Bootstrap control sizing classes 536 | * 537 | * 1. Reset Bootstrap defaults. 538 | * 2. Adjust the dropdown arrow button icon position. 539 | * 540 | * @see http://getbootstrap.com/css/#forms-control-sizes 541 | */ 542 | 543 | /* 1 */ 544 | .select2-selection--single.input-sm, 545 | .input-group-sm & .select2-selection--single, 546 | .form-group-sm & .select2-selection--single { 547 | border-radius: @s2bs-border-radius-small; 548 | font-size: @s2bs-font-size-small; 549 | height: @s2bs-input-height-small; 550 | line-height: @s2bs-line-height-small; 551 | padding: @s2bs-padding-small-vertical @s2bs-padding-small-horizontal + @s2bs-caret-width-base*3 @s2bs-padding-small-vertical @s2bs-padding-small-horizontal; 552 | 553 | /* 2 */ 554 | .select2-selection__arrow b { 555 | margin-left: -@s2bs-padding-small-vertical; 556 | } 557 | } 558 | 559 | .select2-selection--multiple.input-sm, 560 | .input-group-sm & .select2-selection--multiple, 561 | .form-group-sm & .select2-selection--multiple { 562 | min-height: @s2bs-input-height-small; 563 | border-radius: @s2bs-border-radius-small; 564 | 565 | .select2-selection__choice { 566 | font-size: @s2bs-font-size-small; 567 | line-height: @s2bs-line-height-small; 568 | margin: (@s2bs-padding-small-vertical - 1) 0 0 @s2bs-padding-small-horizontal/2; 569 | padding: 0 @s2bs-padding-small-vertical; 570 | } 571 | 572 | .select2-search--inline .select2-search__field { 573 | padding: 0 @s2bs-padding-small-horizontal; 574 | font-size: @s2bs-font-size-small; 575 | height: @s2bs-input-height-small - 2; 576 | line-height: @s2bs-line-height-small; 577 | } 578 | 579 | .select2-selection__clear { 580 | margin-top: @s2bs-padding-small-vertical; 581 | } 582 | } 583 | 584 | .select2-selection--single.input-lg, 585 | .input-group-lg & .select2-selection--single, 586 | .form-group-lg & .select2-selection--single { 587 | border-radius: @s2bs-border-radius-large; 588 | font-size: @s2bs-font-size-large; 589 | height: @s2bs-input-height-large; 590 | line-height: @s2bs-line-height-large; 591 | padding: @s2bs-padding-large-vertical @s2bs-padding-large-horizontal + @s2bs-caret-width-large*3 @s2bs-padding-large-vertical @s2bs-padding-large-horizontal; 592 | 593 | /* 1 */ 594 | .select2-selection__arrow { 595 | width: @s2bs-caret-width-large; 596 | 597 | b { 598 | border-width: @s2bs-caret-width-large @s2bs-caret-width-large 0 @s2bs-caret-width-large; 599 | margin-left: -@s2bs-caret-width-large; 600 | margin-left: -@s2bs-padding-large-vertical; 601 | margin-top: -@s2bs-caret-width-large/2; 602 | } 603 | } 604 | } 605 | 606 | .select2-selection--multiple.input-lg, 607 | .input-group-lg & .select2-selection--multiple, 608 | .form-group-lg & .select2-selection--multiple { 609 | min-height: @s2bs-input-height-large; 610 | border-radius: @s2bs-border-radius-large; 611 | 612 | .select2-selection__choice { 613 | font-size: @s2bs-font-size-large; 614 | line-height: @s2bs-line-height-large; 615 | border-radius: @s2bs-selection-choice-border-radius; 616 | margin: (@s2bs-padding-large-vertical - 1) 0 0 @s2bs-padding-large-horizontal/2; 617 | padding: 0 @s2bs-padding-large-vertical; 618 | } 619 | 620 | .select2-search--inline .select2-search__field { 621 | padding: 0 @s2bs-padding-large-horizontal; 622 | font-size: @s2bs-font-size-large; 623 | height: @s2bs-input-height-large - 2; 624 | line-height: @s2bs-line-height-large; 625 | } 626 | 627 | .select2-selection__clear { 628 | margin-top: @s2bs-padding-large-vertical; 629 | } 630 | } 631 | 632 | .select2-selection.input-lg.select2-container--open { 633 | .dropdown-arrow; 634 | } 635 | 636 | .input-group-lg & .select2-selection { 637 | &.select2-container--open { 638 | .dropdown-arrow; 639 | } 640 | } 641 | 642 | 643 | 644 | 645 | 646 | /*------------------------------------*\ 647 | #RTL SUPPORT 648 | \*------------------------------------*/ 649 | 650 | &[dir="rtl"] { 651 | 652 | /** 653 | * Single Select2 654 | * 655 | * 1. Makes sure that .select2-selection__placeholder is positioned 656 | * correctly. 657 | */ 658 | 659 | .select2-selection--single { 660 | padding-left: @s2bs-padding-base-horizontal + @s2bs-caret-width-base*3; 661 | padding-right: @s2bs-padding-base-horizontal; 662 | 663 | .select2-selection__rendered { 664 | padding-right: 0; 665 | padding-left: 0; 666 | text-align: right; /* 1 */ 667 | } 668 | 669 | .select2-selection__clear { 670 | float: left; 671 | } 672 | 673 | .select2-selection__arrow { 674 | left: @s2bs-padding-base-horizontal; 675 | right: auto; 676 | 677 | b { 678 | margin-left: 0; 679 | } 680 | } 681 | } 682 | 683 | /** 684 | * Multiple Select2 685 | */ 686 | 687 | .select2-selection--multiple { 688 | .select2-selection__choice, 689 | .select2-selection__placeholder, 690 | .select2-search--inline { 691 | float: right; 692 | } 693 | 694 | .select2-selection__choice { 695 | margin-left: 0; 696 | margin-right: @s2bs-padding-base-horizontal/2; 697 | } 698 | 699 | .select2-selection__choice__remove { 700 | margin-left: 2px; 701 | margin-right: auto; 702 | } 703 | } 704 | } 705 | } 706 | 707 | 708 | 709 | 710 | 711 | /*------------------------------------*\ 712 | #ADDITIONAL GOODIES 713 | \*------------------------------------*/ 714 | 715 | /** 716 | * Address Bootstrap's validation states 717 | * 718 | * If a Select2 widget parent has one of Bootstrap's validation state modifier 719 | * classes, adjust Select2's border colors and focus states accordingly. 720 | * You may apply said classes to the Select2 dropdown (body > .select2-container) 721 | * via JavaScript match Bootstraps' to make its styles match. 722 | * 723 | * @see http://getbootstrap.com/css/#forms-control-validation 724 | */ 725 | 726 | .has-warning { 727 | .validation-state-focus(@state-warning-text); 728 | } 729 | 730 | .has-error { 731 | .validation-state-focus(@state-danger-text); 732 | } 733 | 734 | .has-success { 735 | .validation-state-focus(@state-success-text); 736 | } 737 | 738 | /** 739 | * Select2 widgets in Bootstrap Input Groups 740 | * 741 | * @see http://getbootstrap.com/components/#input-groups 742 | * @see https://github.com/twbs/bootstrap/blob/master/less/input-groups.less 743 | */ 744 | 745 | /** 746 | * Reset rounded corners 747 | */ 748 | 749 | .input-group > .select2-hidden-accessible { 750 | &:first-child + .select2-container--bootstrap > .selection > .select2-selection, 751 | &:first-child + .select2-container--bootstrap > .selection > .select2-selection.form-control { 752 | .border-right-radius(0); 753 | } 754 | 755 | &:not(:first-child) + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection, 756 | &:not(:first-child) + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection.form-control { 757 | border-radius: 0; 758 | } 759 | 760 | &:not(:first-child):not(:last-child) + .select2-container--bootstrap:last-child > .selection > .select2-selection, 761 | &:not(:first-child):not(:last-child) + .select2-container--bootstrap:last-child > .selection > .select2-selection.form-control { 762 | .border-left-radius(0); 763 | } 764 | } 765 | 766 | .input-group > .select2-container--bootstrap { 767 | display: table; 768 | table-layout: fixed; 769 | position: relative; 770 | z-index: 2; 771 | width: 100%; 772 | margin-bottom: 0; 773 | 774 | > .selection > .select2-selection.form-control { 775 | float: none; 776 | } 777 | 778 | /** 779 | * Adjust z-index like Bootstrap does to show the focus-box-shadow 780 | * above appended buttons in .input-group and .form-group. 781 | */ 782 | 783 | &.select2-container--open, /* .form-group */ 784 | &.select2-container--focus /* .input-group */ { 785 | z-index: 3; 786 | } 787 | 788 | /** 789 | * Adjust alignment of Bootstrap buttons in Bootstrap Input Groups to address 790 | * Multi Select2's height which - depending on how many elements have been selected - 791 | * may grow taller than its initial size. 792 | * 793 | * @see http://getbootstrap.com/components/#input-groups 794 | */ 795 | 796 | &, 797 | .input-group-btn, 798 | .input-group-btn .btn { 799 | vertical-align: top; 800 | } 801 | } 802 | 803 | /** 804 | * Temporary fix for https://github.com/select2/select2-bootstrap-theme/issues/9 805 | * 806 | * Provides `!important` for certain properties of the class applied to the 807 | * original `` element to hide it. 808 | * 809 | * @see https://github.com/select2/select2/pull/3301 810 | * @see https://github.com/fk/select2/commit/31830c7b32cb3d8e1b12d5b434dee40a6e753ada 811 | */ 812 | 813 | .form-control.select2-hidden-accessible { 814 | position: absolute !important; 815 | width: 1px !important; 816 | } 817 | 818 | /** 819 | * Display override for inline forms 820 | */ 821 | 822 | .form-inline .select2-container--bootstrap { 823 | @media (min-width: $screen-sm-min) { 824 | display: inline-block; 825 | } 826 | } 827 | -------------------------------------------------------------------------------- /tests/less_test.js: -------------------------------------------------------------------------------- 1 | exports.compileLess = function(test){ 2 | var grunt = require('grunt'), 3 | fs = require('fs'), 4 | jsdiff = require('diff'), 5 | t = test, 6 | filename = 'select2-bootstrap.css', 7 | patchfile = 'tests/support/less.patch', 8 | 9 | child = grunt.util.spawn({ 10 | cmd: 'grunt', 11 | args: ['less:test', 'postcss:test', 'stamp:test'] 12 | }, function() { 13 | var readFile = function(name) { return fs.readFileSync(name, {encoding: 'utf8'}) }, 14 | orig = readFile('dist/'+filename), 15 | generated = readFile('tmp/'+filename), 16 | patch = readFile(patchfile), 17 | diff = jsdiff.createPatch(filename, orig, generated); 18 | 19 | // Save the output for future tests. 20 | // fs.writeFileSync(patchfile, diff); 21 | 22 | t.equal(patch, diff); 23 | t.done(); 24 | }); 25 | }; 26 | -------------------------------------------------------------------------------- /tests/scss_test.js: -------------------------------------------------------------------------------- 1 | exports.compileScss = function(test){ 2 | var grunt = require('grunt'), 3 | fs = require('fs'), 4 | jsdiff = require('diff'), 5 | t = test, 6 | filename = 'select2-bootstrap.css', 7 | patchfile = 'tests/support/scss.patch', 8 | 9 | child = grunt.util.spawn({ 10 | cmd: 'grunt', 11 | args: ['sass:test', 'postcss:test', 'stamp:test'] 12 | }, function() { 13 | var readFile = function(name) { return fs.readFileSync(name, {encoding: 'utf8'}) }, 14 | orig = readFile('dist/'+filename), 15 | generated = readFile('tmp/'+filename), 16 | patch = readFile(patchfile), 17 | diff = jsdiff.createPatch(filename, orig, generated); 18 | 19 | // Save the output for future tests. 20 | // fs.writeFileSync(patchfile, diff); 21 | 22 | t.equal(patch, diff); 23 | t.done(); 24 | }); 25 | }; 26 | -------------------------------------------------------------------------------- /tests/support/less.patch: -------------------------------------------------------------------------------- 1 | Index: select2-bootstrap.css 2 | =================================================================== 3 | --- select2-bootstrap.css 4 | +++ select2-bootstrap.css 5 | @@ -5,9 +5,10 @@ 6 | */ 7 | 8 | .select2-container--bootstrap { 9 | display: block; 10 | - /*------------------------------------* #COMMON STYLES 11 | + /*------------------------------------*\ 12 | + #COMMON STYLES 13 | \*------------------------------------*/ 14 | /** 15 | * Search field in the Select2 dropdown. 16 | */ 17 | @@ -29,19 +30,22 @@ 18 | * 19 | * @see https://select2.github.io/examples.html#disabled 20 | * @see http://getbootstrap.com/css/#forms-control-disabled 21 | */ 22 | - /*------------------------------------* #DROPDOWN 23 | + /*------------------------------------*\ 24 | + #DROPDOWN 25 | \*------------------------------------*/ 26 | /** 27 | * Dropdown border color and box-shadow. 28 | */ 29 | /** 30 | * Limit the dropdown height. 31 | */ 32 | - /*------------------------------------* #SINGLE SELECT2 33 | + /*------------------------------------*\ 34 | + #SINGLE SELECT2 35 | \*------------------------------------*/ 36 | - /*------------------------------------* #MULTIPLE SELECT2 37 | + /*------------------------------------*\ 38 | + #MULTIPLE SELECT2 39 | \*------------------------------------*/ 40 | /** 41 | * Address Bootstrap control sizing classes 42 | * 43 | @@ -50,12 +54,12 @@ 44 | * 45 | * @see http://getbootstrap.com/css/#forms-control-sizes 46 | */ 47 | /* 1 */ 48 | - /*------------------------------------* #RTL SUPPORT 49 | + /*------------------------------------*\ 50 | + #RTL SUPPORT 51 | \*------------------------------------*/ 52 | } 53 | - 54 | .select2-container--bootstrap .select2-selection { 55 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 56 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 57 | background-color: #fff; 58 | @@ -64,13 +68,11 @@ 59 | color: #555555; 60 | font-size: 14px; 61 | outline: 0; 62 | } 63 | - 64 | .select2-container--bootstrap .select2-selection.form-control { 65 | border-radius: 4px; 66 | } 67 | - 68 | .select2-container--bootstrap .select2-search--dropdown .select2-search__field { 69 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 70 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 71 | background-color: #fff; 72 | @@ -78,9 +80,8 @@ 73 | border-radius: 4px; 74 | color: #555555; 75 | font-size: 14px; 76 | } 77 | - 78 | .select2-container--bootstrap .select2-search__field { 79 | outline: 0; 80 | /* Firefox 18- */ 81 | /** 82 | @@ -88,26 +89,21 @@ 83 | * 84 | * @see http://stackoverflow.com/questions/24236240/color-for-styled-placeholder-text-is-muted-in-firefox 85 | */ 86 | } 87 | - 88 | .select2-container--bootstrap .select2-search__field::-webkit-input-placeholder { 89 | color: #999; 90 | } 91 | - 92 | .select2-container--bootstrap .select2-search__field:-moz-placeholder { 93 | color: #999; 94 | } 95 | - 96 | .select2-container--bootstrap .select2-search__field::-moz-placeholder { 97 | color: #999; 98 | opacity: 1; 99 | } 100 | - 101 | .select2-container--bootstrap .select2-search__field:-ms-input-placeholder { 102 | color: #999; 103 | } 104 | - 105 | .select2-container--bootstrap .select2-results__option { 106 | padding: 6px 12px; 107 | /** 108 | * Disabled results. 109 | @@ -120,71 +116,59 @@ 110 | /** 111 | * Selected state. 112 | */ 113 | } 114 | - 115 | .select2-container--bootstrap .select2-results__option[role=group] { 116 | padding: 0; 117 | } 118 | - 119 | .select2-container--bootstrap .select2-results__option[aria-disabled=true] { 120 | color: #777777; 121 | cursor: not-allowed; 122 | } 123 | - 124 | .select2-container--bootstrap .select2-results__option[aria-selected=true] { 125 | background-color: #f5f5f5; 126 | color: #262626; 127 | } 128 | - 129 | .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] { 130 | background-color: #337ab7; 131 | color: #fff; 132 | } 133 | - 134 | .select2-container--bootstrap .select2-results__option .select2-results__option { 135 | padding: 6px 12px; 136 | } 137 | - 138 | .select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__group { 139 | padding-left: 0; 140 | } 141 | - 142 | .select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option { 143 | margin-left: -12px; 144 | padding-left: 24px; 145 | } 146 | - 147 | .select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option { 148 | margin-left: -24px; 149 | padding-left: 36px; 150 | } 151 | - 152 | .select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { 153 | margin-left: -36px; 154 | padding-left: 48px; 155 | } 156 | - 157 | .select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { 158 | margin-left: -48px; 159 | padding-left: 60px; 160 | } 161 | - 162 | .select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { 163 | margin-left: -60px; 164 | padding-left: 72px; 165 | } 166 | - 167 | .select2-container--bootstrap .select2-results__group { 168 | color: #777777; 169 | display: block; 170 | padding: 6px 12px; 171 | font-size: 12px; 172 | line-height: 1.42857143; 173 | white-space: nowrap; 174 | } 175 | - 176 | -.select2-container--bootstrap.select2-container--focus .select2-selection, .select2-container--bootstrap.select2-container--open .select2-selection { 177 | +.select2-container--bootstrap.select2-container--focus .select2-selection, 178 | +.select2-container--bootstrap.select2-container--open .select2-selection { 179 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 180 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); 181 | -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 182 | -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 183 | @@ -193,104 +177,88 @@ 184 | transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; 185 | transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s; 186 | border-color: #66afe9; 187 | } 188 | - 189 | .select2-container--bootstrap.select2-container--open { 190 | /** 191 | * Make the dropdown arrow point up while the dropdown is visible. 192 | */ 193 | /** 194 | * Handle border radii of the container when the dropdown is showing. 195 | */ 196 | } 197 | - 198 | .select2-container--bootstrap.select2-container--open .select2-selection .select2-selection__arrow b { 199 | border-color: transparent transparent #999 transparent; 200 | border-width: 0 4px 4px 4px; 201 | } 202 | - 203 | .select2-container--bootstrap.select2-container--open.select2-container--below .select2-selection { 204 | border-bottom-right-radius: 0; 205 | border-bottom-left-radius: 0; 206 | border-bottom-color: transparent; 207 | } 208 | - 209 | .select2-container--bootstrap.select2-container--open.select2-container--above .select2-selection { 210 | border-top-right-radius: 0; 211 | border-top-left-radius: 0; 212 | border-top-color: transparent; 213 | } 214 | - 215 | .select2-container--bootstrap .select2-selection__clear { 216 | color: #999; 217 | cursor: pointer; 218 | float: right; 219 | font-weight: bold; 220 | margin-right: 10px; 221 | } 222 | - 223 | .select2-container--bootstrap .select2-selection__clear:hover { 224 | color: #333; 225 | } 226 | - 227 | .select2-container--bootstrap.select2-container--disabled .select2-selection { 228 | border-color: #ccc; 229 | -webkit-box-shadow: none; 230 | box-shadow: none; 231 | } 232 | - 233 | .select2-container--bootstrap.select2-container--disabled .select2-selection, 234 | .select2-container--bootstrap.select2-container--disabled .select2-search__field { 235 | cursor: not-allowed; 236 | } 237 | - 238 | .select2-container--bootstrap.select2-container--disabled .select2-selection, 239 | .select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice { 240 | background-color: #eeeeee; 241 | } 242 | - 243 | .select2-container--bootstrap.select2-container--disabled .select2-selection__clear, 244 | .select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice__remove { 245 | display: none; 246 | } 247 | - 248 | .select2-container--bootstrap .select2-dropdown { 249 | -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); 250 | box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); 251 | border-color: #66afe9; 252 | overflow-x: hidden; 253 | margin-top: -1px; 254 | } 255 | - 256 | .select2-container--bootstrap .select2-dropdown--above { 257 | -webkit-box-shadow: 0px -6px 12px rgba(0, 0, 0, 0.175); 258 | box-shadow: 0px -6px 12px rgba(0, 0, 0, 0.175); 259 | margin-top: 1px; 260 | } 261 | - 262 | .select2-container--bootstrap .select2-results > .select2-results__options { 263 | max-height: 200px; 264 | overflow-y: auto; 265 | } 266 | - 267 | .select2-container--bootstrap .select2-selection--single { 268 | height: 34px; 269 | line-height: 1.42857143; 270 | padding: 6px 24px 6px 12px; 271 | /** 272 | * Adjust the single Select2's dropdown arrow button appearance. 273 | */ 274 | } 275 | - 276 | .select2-container--bootstrap .select2-selection--single .select2-selection__arrow { 277 | position: absolute; 278 | bottom: 0; 279 | right: 12px; 280 | top: 0; 281 | width: 4px; 282 | } 283 | - 284 | .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b { 285 | border-color: #999 transparent transparent transparent; 286 | border-style: solid; 287 | border-width: 4px 4px 0 4px; 288 | @@ -301,18 +269,15 @@ 289 | position: absolute; 290 | top: 50%; 291 | width: 0; 292 | } 293 | - 294 | .select2-container--bootstrap .select2-selection--single .select2-selection__rendered { 295 | color: #555555; 296 | padding: 0; 297 | } 298 | - 299 | .select2-container--bootstrap .select2-selection--single .select2-selection__placeholder { 300 | color: #999; 301 | } 302 | - 303 | .select2-container--bootstrap .select2-selection--multiple { 304 | min-height: 34px; 305 | padding: 0; 306 | height: auto; 307 | @@ -325,9 +290,8 @@ 308 | /** 309 | * Clear the selection. 310 | */ 311 | } 312 | - 313 | .select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered { 314 | -webkit-box-sizing: border-box; 315 | -moz-box-sizing: border-box; 316 | box-sizing: border-box; 317 | @@ -340,15 +304,13 @@ 318 | width: 100%; 319 | text-overflow: ellipsis; 320 | white-space: nowrap; 321 | } 322 | - 323 | .select2-container--bootstrap .select2-selection--multiple .select2-selection__placeholder { 324 | color: #999; 325 | float: left; 326 | margin-top: 5px; 327 | } 328 | - 329 | .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice { 330 | color: #555555; 331 | background: #fff; 332 | border: 1px solid #ccc; 333 | @@ -357,34 +319,29 @@ 334 | float: left; 335 | margin: 5px 0 0 6px; 336 | padding: 0 6px; 337 | } 338 | - 339 | .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field { 340 | background: transparent; 341 | padding: 0 12px; 342 | height: 32px; 343 | line-height: 1.42857143; 344 | margin-top: 0; 345 | min-width: 5em; 346 | } 347 | - 348 | .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove { 349 | color: #999; 350 | cursor: pointer; 351 | display: inline-block; 352 | font-weight: bold; 353 | margin-right: 3px; 354 | } 355 | - 356 | .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove:hover { 357 | color: #333; 358 | } 359 | - 360 | .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear { 361 | margin-top: 6px; 362 | } 363 | - 364 | .select2-container--bootstrap .select2-selection--single.input-sm, 365 | .input-group-sm .select2-container--bootstrap .select2-selection--single, 366 | .form-group-sm .select2-container--bootstrap .select2-selection--single { 367 | border-radius: 3px; 368 | @@ -393,46 +350,40 @@ 369 | line-height: 1.5; 370 | padding: 5px 22px 5px 10px; 371 | /* 2 */ 372 | } 373 | - 374 | .select2-container--bootstrap .select2-selection--single.input-sm .select2-selection__arrow b, 375 | .input-group-sm .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b, 376 | .form-group-sm .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b { 377 | margin-left: -5px; 378 | } 379 | - 380 | .select2-container--bootstrap .select2-selection--multiple.input-sm, 381 | .input-group-sm .select2-container--bootstrap .select2-selection--multiple, 382 | .form-group-sm .select2-container--bootstrap .select2-selection--multiple { 383 | min-height: 30px; 384 | border-radius: 3px; 385 | } 386 | - 387 | .select2-container--bootstrap .select2-selection--multiple.input-sm .select2-selection__choice, 388 | .input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice, 389 | .form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice { 390 | font-size: 12px; 391 | line-height: 1.5; 392 | margin: 4px 0 0 5px; 393 | padding: 0 5px; 394 | } 395 | - 396 | .select2-container--bootstrap .select2-selection--multiple.input-sm .select2-search--inline .select2-search__field, 397 | .input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field, 398 | .form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field { 399 | padding: 0 10px; 400 | font-size: 12px; 401 | height: 28px; 402 | line-height: 1.5; 403 | } 404 | - 405 | .select2-container--bootstrap .select2-selection--multiple.input-sm .select2-selection__clear, 406 | .input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear, 407 | .form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear { 408 | margin-top: 5px; 409 | } 410 | - 411 | .select2-container--bootstrap .select2-selection--single.input-lg, 412 | .input-group-lg .select2-container--bootstrap .select2-selection--single, 413 | .form-group-lg .select2-container--bootstrap .select2-selection--single { 414 | border-radius: 6px; 415 | @@ -441,31 +392,27 @@ 416 | line-height: 1.3333333; 417 | padding: 10px 31px 10px 16px; 418 | /* 1 */ 419 | } 420 | - 421 | .select2-container--bootstrap .select2-selection--single.input-lg .select2-selection__arrow, 422 | .input-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow, 423 | .form-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow { 424 | width: 5px; 425 | } 426 | - 427 | .select2-container--bootstrap .select2-selection--single.input-lg .select2-selection__arrow b, 428 | .input-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b, 429 | .form-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b { 430 | border-width: 5px 5px 0 5px; 431 | margin-left: -5px; 432 | margin-left: -10px; 433 | margin-top: -2.5px; 434 | } 435 | - 436 | .select2-container--bootstrap .select2-selection--multiple.input-lg, 437 | .input-group-lg .select2-container--bootstrap .select2-selection--multiple, 438 | .form-group-lg .select2-container--bootstrap .select2-selection--multiple { 439 | min-height: 46px; 440 | border-radius: 6px; 441 | } 442 | - 443 | .select2-container--bootstrap .select2-selection--multiple.input-lg .select2-selection__choice, 444 | .input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice, 445 | .form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice { 446 | font-size: 18px; 447 | @@ -473,46 +420,39 @@ 448 | border-radius: 4px; 449 | margin: 9px 0 0 8px; 450 | padding: 0 10px; 451 | } 452 | - 453 | .select2-container--bootstrap .select2-selection--multiple.input-lg .select2-search--inline .select2-search__field, 454 | .input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field, 455 | .form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field { 456 | padding: 0 16px; 457 | font-size: 18px; 458 | height: 44px; 459 | line-height: 1.3333333; 460 | } 461 | - 462 | .select2-container--bootstrap .select2-selection--multiple.input-lg .select2-selection__clear, 463 | .input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear, 464 | .form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__clear { 465 | margin-top: 10px; 466 | } 467 | - 468 | .select2-container--bootstrap .select2-selection.input-lg.select2-container--open .select2-selection--single { 469 | /** 470 | * Make the dropdown arrow point up while the dropdown is visible. 471 | */ 472 | } 473 | - 474 | .select2-container--bootstrap .select2-selection.input-lg.select2-container--open .select2-selection--single .select2-selection__arrow b { 475 | border-color: transparent transparent #999 transparent; 476 | border-width: 0 5px 5px 5px; 477 | } 478 | - 479 | .input-group-lg .select2-container--bootstrap .select2-selection.select2-container--open .select2-selection--single { 480 | /** 481 | * Make the dropdown arrow point up while the dropdown is visible. 482 | */ 483 | } 484 | - 485 | .input-group-lg .select2-container--bootstrap .select2-selection.select2-container--open .select2-selection--single .select2-selection__arrow b { 486 | border-color: transparent transparent #999 transparent; 487 | border-width: 0 5px 5px 5px; 488 | } 489 | - 490 | .select2-container--bootstrap[dir="rtl"] { 491 | /** 492 | * Single Select2 493 | * 494 | @@ -522,51 +462,43 @@ 495 | /** 496 | * Multiple Select2 497 | */ 498 | } 499 | - 500 | .select2-container--bootstrap[dir="rtl"] .select2-selection--single { 501 | padding-left: 24px; 502 | padding-right: 12px; 503 | } 504 | - 505 | .select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__rendered { 506 | padding-right: 0; 507 | padding-left: 0; 508 | text-align: right; 509 | /* 1 */ 510 | } 511 | - 512 | .select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__clear { 513 | float: left; 514 | } 515 | - 516 | .select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__arrow { 517 | left: 12px; 518 | right: auto; 519 | } 520 | - 521 | .select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__arrow b { 522 | margin-left: 0; 523 | } 524 | - 525 | .select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__choice, 526 | .select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, 527 | .select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-search--inline { 528 | float: right; 529 | } 530 | - 531 | .select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__choice { 532 | margin-left: 0; 533 | margin-right: 6px; 534 | } 535 | - 536 | .select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { 537 | margin-left: 2px; 538 | margin-right: auto; 539 | } 540 | - 541 | -/*------------------------------------* #ADDITIONAL GOODIES 542 | +/*------------------------------------*\ 543 | + #ADDITIONAL GOODIES 544 | \*------------------------------------*/ 545 | /** 546 | * Address Bootstrap's validation states 547 | * 548 | @@ -580,64 +512,52 @@ 549 | .has-warning .select2-dropdown, 550 | .has-warning .select2-selection { 551 | border-color: #8a6d3b; 552 | } 553 | - 554 | .has-warning .select2-container--focus .select2-selection, 555 | .has-warning .select2-container--open .select2-selection { 556 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; 557 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b; 558 | border-color: #66512c; 559 | } 560 | - 561 | .has-warning.select2-drop-active { 562 | border-color: #66512c; 563 | } 564 | - 565 | .has-warning.select2-drop-active.select2-drop.select2-drop-above { 566 | border-top-color: #66512c; 567 | } 568 | - 569 | .has-error .select2-dropdown, 570 | .has-error .select2-selection { 571 | border-color: #a94442; 572 | } 573 | - 574 | .has-error .select2-container--focus .select2-selection, 575 | .has-error .select2-container--open .select2-selection { 576 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; 577 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483; 578 | border-color: #843534; 579 | } 580 | - 581 | .has-error.select2-drop-active { 582 | border-color: #843534; 583 | } 584 | - 585 | .has-error.select2-drop-active.select2-drop.select2-drop-above { 586 | border-top-color: #843534; 587 | } 588 | - 589 | .has-success .select2-dropdown, 590 | .has-success .select2-selection { 591 | border-color: #3c763d; 592 | } 593 | - 594 | .has-success .select2-container--focus .select2-selection, 595 | .has-success .select2-container--open .select2-selection { 596 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; 597 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168; 598 | border-color: #2b542c; 599 | } 600 | - 601 | .has-success.select2-drop-active { 602 | border-color: #2b542c; 603 | } 604 | - 605 | .has-success.select2-drop-active.select2-drop.select2-drop-above { 606 | border-top-color: #2b542c; 607 | } 608 | - 609 | /** 610 | * Select2 widgets in Bootstrap Input Groups 611 | * 612 | * @see http://getbootstrap.com/components/#input-groups 613 | @@ -650,20 +570,17 @@ 614 | .input-group > .select2-hidden-accessible:first-child + .select2-container--bootstrap > .selection > .select2-selection.form-control { 615 | border-bottom-right-radius: 0; 616 | border-top-right-radius: 0; 617 | } 618 | - 619 | .input-group > .select2-hidden-accessible:not(:first-child) + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection, 620 | .input-group > .select2-hidden-accessible:not(:first-child) + .select2-container--bootstrap:not(:last-child) > .selection > .select2-selection.form-control { 621 | border-radius: 0; 622 | } 623 | - 624 | .input-group > .select2-hidden-accessible:not(:first-child):not(:last-child) + .select2-container--bootstrap:last-child > .selection > .select2-selection, 625 | .input-group > .select2-hidden-accessible:not(:first-child):not(:last-child) + .select2-container--bootstrap:last-child > .selection > .select2-selection.form-control { 626 | border-bottom-left-radius: 0; 627 | border-top-left-radius: 0; 628 | } 629 | - 630 | .input-group > .select2-container--bootstrap { 631 | display: table; 632 | table-layout: fixed; 633 | position: relative; 634 | @@ -681,23 +598,20 @@ 635 | * 636 | * @see http://getbootstrap.com/components/#input-groups 637 | */ 638 | } 639 | - 640 | .input-group > .select2-container--bootstrap > .selection > .select2-selection.form-control { 641 | float: none; 642 | } 643 | - 644 | -.input-group > .select2-container--bootstrap.select2-container--open, .input-group > .select2-container--bootstrap.select2-container--focus { 645 | +.input-group > .select2-container--bootstrap.select2-container--open, 646 | +.input-group > .select2-container--bootstrap.select2-container--focus { 647 | z-index: 3; 648 | } 649 | - 650 | .input-group > .select2-container--bootstrap, 651 | .input-group > .select2-container--bootstrap .input-group-btn, 652 | .input-group > .select2-container--bootstrap .input-group-btn .btn { 653 | vertical-align: top; 654 | } 655 | - 656 | /** 657 | * Temporary fix for https://github.com/select2/select2-bootstrap-theme/issues/9 658 | * 659 | * Provides `!important` for certain properties of the class applied to the 660 | @@ -709,9 +623,8 @@ 661 | .form-control.select2-hidden-accessible { 662 | position: absolute !important; 663 | width: 1px !important; 664 | } 665 | - 666 | /** 667 | * Display override for inline forms 668 | */ 669 | @media (min-width: 768px) { 670 | -------------------------------------------------------------------------------- /tests/support/scss.patch: -------------------------------------------------------------------------------- 1 | Index: select2-bootstrap.css 2 | =================================================================== 3 | --- select2-bootstrap.css 4 | +++ select2-bootstrap.css 5 | --------------------------------------------------------------------------------