├── docs ├── .gitignore ├── _sass │ ├── _variables.sass │ ├── _navbar.sass │ ├── _anchorjs.sass │ ├── _home.sass │ ├── _buttons.sass │ ├── _mixins.sass │ ├── _alert.sass │ ├── _common.sass │ ├── _footer.sass │ ├── _jumbotron.sass │ └── _select2-result-repository.sass ├── 4.0.0.html ├── 4.0.1.html ├── 4.0.2.html ├── 4.0.3.html ├── favicon.ico ├── images │ └── logo.png ├── _config.yml ├── _layouts │ ├── minimal.html │ └── default.html ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.ttf │ ├── glyphicons-halflings-regular.woff │ └── glyphicons-halflings-regular.woff2 ├── _includes │ ├── scripts.html │ ├── footer-links.html │ ├── footer.html │ ├── head.html │ ├── navbar.html │ └── select2-select.html ├── css │ ├── gh-pages.sass │ └── select2-bootstrap.css ├── index.html └── js │ ├── respond.min.js │ └── anchor.min.js ├── .gitignore ├── src ├── build.less ├── build.scss ├── select2-bootstrap.less └── select2-bootstrap.scss ├── tests ├── support │ ├── scss.patch │ └── less.patch ├── less_test.js └── scss_test.js ├── bower.json ├── LICENSE ├── package.json ├── Gruntfile.js ├── README.md └── dist ├── select2-bootstrap.min.css └── select2-bootstrap.css /docs/.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | dist 3 | -------------------------------------------------------------------------------- /docs/_sass/_variables.sass: -------------------------------------------------------------------------------- 1 | $lead-font-size: 20px 2 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | node_modules 3 | tmp 4 | .sass-cache 5 | .grunt 6 | .idea 7 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/select2/select2-bootstrap-theme/master/docs/favicon.ico -------------------------------------------------------------------------------- /docs/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/select2/select2-bootstrap-theme/master/docs/images/logo.png -------------------------------------------------------------------------------- /docs/_sass/_navbar.sass: -------------------------------------------------------------------------------- 1 | .navbar-default 2 | background: rgba(#fff,.95) 3 | border-width: 0 0 1px 4 | border-radius: 0 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/_layouts/minimal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {% include head.html %} 4 | 5 | {{ content }} 6 | 7 | 8 | -------------------------------------------------------------------------------- /docs/fonts/glyphicons-halflings-regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/select2/select2-bootstrap-theme/master/docs/fonts/glyphicons-halflings-regular.eot -------------------------------------------------------------------------------- /docs/fonts/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/select2/select2-bootstrap-theme/master/docs/fonts/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /docs/fonts/glyphicons-halflings-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/select2/select2-bootstrap-theme/master/docs/fonts/glyphicons-halflings-regular.woff -------------------------------------------------------------------------------- /docs/fonts/glyphicons-halflings-regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/select2/select2-bootstrap-theme/master/docs/fonts/glyphicons-halflings-regular.woff2 -------------------------------------------------------------------------------- /src/build.less: -------------------------------------------------------------------------------- 1 | @import "../node_modules/bootstrap/less/variables"; 2 | @import "../node_modules/bootstrap/less/mixins"; 3 | @import "select2-bootstrap.less"; 4 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /tests/support/scss.patch: -------------------------------------------------------------------------------- 1 | Index: select2-bootstrap.css 2 | =================================================================== 3 | --- select2-bootstrap.css 4 | +++ select2-bootstrap.css 5 | -------------------------------------------------------------------------------- /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/_includes/scripts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/build.scss: -------------------------------------------------------------------------------- 1 | @import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables"; 2 | @import "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins"; 3 | @import "select2-bootstrap.scss"; 4 | -------------------------------------------------------------------------------- /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/_includes/footer-links.html: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /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/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/_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/_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/_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/_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ site.title }} 6 | 7 | 8 | 9 | 10 | 14 | 15 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "select2-bootstrap-theme", 3 | "description": "A theme for Select2 v4 and Bootstrap 3.", 4 | "keywords": [ 5 | "bootstrap", 6 | "select2", 7 | "css", 8 | "sass", 9 | "less" 10 | ], 11 | "homepage": "https://select2.github.io/select2-bootstrap-theme", 12 | "main": [ 13 | "src/select2-bootstrap.scss", 14 | "src/select2-bootstrap.less" 15 | ], 16 | "license": "MIT", 17 | "ignore": [ 18 | "**/.*", 19 | "node_modules", 20 | "components" 21 | ], 22 | "dependencies": { 23 | "bootstrap": "^3.3.4", 24 | "select2": "^4.0.0" 25 | }, 26 | "repository": { 27 | "type": "git", 28 | "url": "git@github.com:select2/select2-bootstrap-theme.git" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/_includes/navbar.html: -------------------------------------------------------------------------------- 1 | 32 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "select2-bootstrap-theme", 3 | "version": "0.1.0-beta.10", 4 | "description": "A theme for Select2 v4 and Bootstrap 3.", 5 | "main": "", 6 | "style": "select2-bootstrap.css", 7 | "homepage": "https://select2.github.io/select2-bootstrap-theme", 8 | "directories": { 9 | "doc": "docs" 10 | }, 11 | "scripts": { 12 | "test": "grunt nodeunit" 13 | }, 14 | "repository": { 15 | "type": "git", 16 | "url": "git://github.com/select2/select2-bootstrap-theme.git" 17 | }, 18 | "bugs": { 19 | "url": "https://github.com/select2/select2-bootstrap-theme/issues" 20 | }, 21 | "keywords": [ 22 | "bootstrap", 23 | "select2", 24 | "css", 25 | "sass", 26 | "less" 27 | ], 28 | "author": "Florian Kissling", 29 | "license": "MIT", 30 | "readmeFilename": "README.md", 31 | "devDependencies": { 32 | "Respond.js": "github:scottjehl/Respond#1.4.2", 33 | "anchor-js": "^3.2.1", 34 | "autoprefixer": "^6.4.0", 35 | "bootstrap": "^3.3.7", 36 | "bootstrap-sass": "^3.3.7", 37 | "diff": "^2.2.3", 38 | "grunt": "^1.0.1", 39 | "grunt-browser-sync": "^2.2.0", 40 | "grunt-bump": "^0.8.0", 41 | "grunt-contrib-copy": "^1.0.0", 42 | "grunt-contrib-cssmin": "^1.0.1", 43 | "grunt-contrib-jshint": "^1.0.0", 44 | "grunt-contrib-less": "^1.4.0", 45 | "grunt-contrib-nodeunit": "^1.0.0", 46 | "grunt-contrib-watch": "^1.0.0", 47 | "grunt-gh-pages": "^1.2.0", 48 | "grunt-jekyll": "^0.4.4", 49 | "grunt-postcss": "^0.8.0", 50 | "grunt-sass": "^2.0.0", 51 | "grunt-scss2less": "0.0.1", 52 | "grunt-stamp": "^0.3.0", 53 | "matchdep": "^1.0.1" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: minimal 3 | version: 4.0.3 4 | --- 5 |
6 |
7 |
8 | 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/_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/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-1,t=A.lastChild&&(" "+A.lastChild.className+" ").indexOf(" anchorjs-link ")>-1;return e||t||!1}}return A}); 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 | -------------------------------------------------------------------------------- /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. 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 | @media (min-width: @screen-sm-min) { 823 | .form-inline .select2-container--bootstrap { 824 | display: inline-block; 825 | } 826 | } 827 | -------------------------------------------------------------------------------- /src/select2-bootstrap.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Variables 3 | // -------------------------------------------------- 4 | 5 | // Variables directly translating Bootstrap variables 6 | // ------------------------- 7 | 8 | $s2bs-border-radius-base: $border-radius-base !default; 9 | $s2bs-border-radius-large: $border-radius-large !default; 10 | $s2bs-border-radius-small: $border-radius-small !default; 11 | $s2bs-btn-default-bg: $btn-default-bg !default; 12 | $s2bs-btn-default-border: $btn-default-border !default; 13 | $s2bs-btn-default-color: $btn-default-color !default; 14 | $s2bs-caret-width-base: $caret-width-base !default; 15 | $s2bs-caret-width-large: $caret-width-large !default; 16 | $s2bs-cursor-disabled: $cursor-disabled !default; 17 | $s2bs-dropdown-header-color: $dropdown-header-color !default; 18 | $s2bs-dropdown-link-active-bg: $dropdown-link-active-bg !default; 19 | $s2bs-dropdown-link-active-color: $dropdown-link-active-color !default; 20 | $s2bs-dropdown-link-disabled-color: $dropdown-link-disabled-color !default; 21 | $s2bs-dropdown-link-hover-bg: $dropdown-link-hover-bg !default; 22 | $s2bs-dropdown-link-hover-color: $dropdown-link-hover-color !default; 23 | $s2bs-font-size-base: $font-size-base !default; 24 | $s2bs-font-size-large: $font-size-large !default; 25 | $s2bs-font-size-small: $font-size-small !default; 26 | $s2bs-padding-base-horizontal: $padding-base-horizontal !default; 27 | $s2bs-padding-large-horizontal: $padding-large-horizontal !default; 28 | $s2bs-padding-small-horizontal: $padding-small-horizontal !default; 29 | $s2bs-padding-base-vertical: $padding-base-vertical !default; 30 | $s2bs-padding-large-vertical: $padding-large-vertical !default; 31 | $s2bs-padding-small-vertical: $padding-small-vertical !default; 32 | $s2bs-line-height-base: $line-height-base !default; 33 | $s2bs-line-height-large: $line-height-large !default; 34 | $s2bs-line-height-small: $line-height-small !default; 35 | $s2bs-input-bg: $input-bg !default; 36 | $s2bs-input-bg-disabled: $input-bg-disabled !default; 37 | $s2bs-input-color: $input-color !default; 38 | $s2bs-input-color-placeholder: $input-color-placeholder !default; 39 | $s2bs-input-border: $input-border !default; 40 | $s2bs-input-border-focus: $input-border-focus !default; 41 | $s2bs-input-border-radius: $input-border-radius !default; 42 | $s2bs-input-height-base: $input-height-base !default; 43 | $s2bs-input-height-large: $input-height-large !default; 44 | $s2bs-input-height-small: $input-height-small !default; 45 | 46 | // Theme-specific variables 47 | // ------------------------- 48 | 49 | $s2bs-dropdown-arrow-color: $s2bs-input-color-placeholder !default; 50 | $s2bs-dropdown-box-shadow: 0 6px 12px rgba(0,0,0,.175) !default; 51 | $s2bs-dropdown-box-shadow-above: 0px -6px 12px rgba(0,0,0,.175) !default; 52 | $s2bs-clear-selection-color: $s2bs-dropdown-arrow-color !default; 53 | $s2bs-clear-selection-hover-color: $s2bs-btn-default-color !default; 54 | $s2bs-remove-choice-color: $s2bs-input-color-placeholder !default; 55 | $s2bs-remove-choice-hover-color: $s2bs-btn-default-color !default; 56 | $s2bs-selection-choice-border-radius: $s2bs-border-radius-base !default; 57 | $s2bs-dropdown-header-padding-vertical: $s2bs-padding-base-vertical !default; 58 | $s2bs-dropdown-header-font-size: $s2bs-font-size-small !default; 59 | 60 | 61 | // Bootstrap defaults not available as pre-defined variables 62 | // These should not be overridden. 63 | // ------------------------- 64 | 65 | // @see https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_forms.scss#L126 66 | $s2bs-form-control-default-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; 67 | 68 | // @see https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/mixins/_forms.scss#L60 69 | $s2bs-form-control-focus-box-shadow: $s2bs-form-control-default-box-shadow, 0 0 8px rgba($s2bs-input-border-focus, 0.6) !default; 70 | 71 | // @see https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_forms.scss#L127 72 | $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default; 73 | 74 | 75 | 76 | 77 | // 78 | // Mixins 79 | // -------------------------------------------------- 80 | 81 | // @see https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_forms.scss#L115 82 | @mixin bootstrap-input-defaults { 83 | @include box-shadow($s2bs-form-control-default-box-shadow); 84 | background-color: $s2bs-input-bg; 85 | border: 1px solid $s2bs-input-border; 86 | border-radius: $s2bs-input-border-radius; 87 | color: $s2bs-input-color; 88 | font-size: $s2bs-font-size-base; 89 | } 90 | 91 | // @see http://getbootstrap.com/css/#forms-control-validation 92 | // @see https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_forms.scss#L388 93 | @mixin validation-state-focus($color) { 94 | $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($color, 20%); 95 | 96 | .select2-dropdown, 97 | .select2-selection { 98 | border-color: $color; 99 | } 100 | 101 | .select2-container--focus .select2-selection, 102 | .select2-container--open .select2-selection { 103 | @include box-shadow($shadow); 104 | border-color: darken($color, 10%); 105 | } 106 | 107 | &.select2-drop-active { 108 | border-color: darken($color, 10%); 109 | 110 | &.select2-drop.select2-drop-above { 111 | border-top-color: darken($color, 10%); 112 | } 113 | } 114 | } 115 | 116 | // dropdown arrow when dropdown is open 117 | @mixin dropdown-arrow { 118 | .select2-selection--single { 119 | /** 120 | * Make the dropdown arrow point up while the dropdown is visible. 121 | */ 122 | 123 | .select2-selection__arrow b { 124 | border-color: transparent transparent $s2bs-dropdown-arrow-color transparent; 125 | border-width: 0 $s2bs-caret-width-large $s2bs-caret-width-large $s2bs-caret-width-large; 126 | } 127 | } 128 | } 129 | 130 | 131 | 132 | 133 | 134 | .select2-container--bootstrap { 135 | display: block; 136 | 137 | 138 | 139 | 140 | /*------------------------------------*\ 141 | #COMMON STYLES 142 | \*------------------------------------*/ 143 | 144 | .select2-selection { 145 | @include bootstrap-input-defaults; 146 | outline: 0; 147 | 148 | &.form-control { 149 | border-radius: $s2bs-border-radius-base; 150 | } 151 | } 152 | 153 | 154 | 155 | /** 156 | * Search field in the Select2 dropdown. 157 | */ 158 | 159 | .select2-search--dropdown { 160 | .select2-search__field { 161 | @include bootstrap-input-defaults; 162 | } 163 | } 164 | 165 | /** 166 | * No outline for all search fields - in the dropdown 167 | * and inline in multi Select2s. 168 | */ 169 | 170 | .select2-search__field { 171 | outline: 0; 172 | 173 | &::-webkit-input-placeholder { 174 | color: $s2bs-input-color-placeholder; 175 | } 176 | 177 | /* Firefox 18- */ 178 | &:-moz-placeholder { 179 | color: $s2bs-input-color-placeholder; 180 | } 181 | 182 | /** 183 | * Firefox 19+ 184 | * 185 | * @see http://stackoverflow.com/questions/24236240/color-for-styled-placeholder-text-is-muted-in-firefox 186 | */ 187 | &::-moz-placeholder { 188 | color: $s2bs-input-color-placeholder; 189 | opacity: 1; 190 | } 191 | 192 | &:-ms-input-placeholder { 193 | color: $s2bs-input-color-placeholder; 194 | } 195 | } 196 | 197 | /** 198 | * Adjust Select2's choices hover and selected styles to match 199 | * Bootstrap 3's default dropdown styles. 200 | * 201 | * @see http://getbootstrap.com/components/#dropdowns 202 | */ 203 | 204 | .select2-results__option { 205 | padding: $s2bs-padding-base-vertical $s2bs-padding-base-horizontal; 206 | 207 | &[role=group] { 208 | padding: 0; 209 | } 210 | 211 | /** 212 | * Disabled results. 213 | * 214 | * @see https://select2.github.io/examples.html#disabled-results 215 | */ 216 | 217 | &[aria-disabled=true] { 218 | color: $s2bs-dropdown-link-disabled-color; 219 | cursor: $s2bs-cursor-disabled; 220 | } 221 | 222 | /** 223 | * Hover state. 224 | */ 225 | 226 | &[aria-selected=true] { 227 | background-color: $s2bs-dropdown-link-hover-bg; 228 | color: $s2bs-dropdown-link-hover-color; 229 | } 230 | 231 | /** 232 | * Selected state. 233 | */ 234 | 235 | &--highlighted[aria-selected] { 236 | background-color: $s2bs-dropdown-link-active-bg; 237 | color: $s2bs-dropdown-link-active-color; 238 | } 239 | 240 | .select2-results__option { 241 | padding: $s2bs-padding-base-vertical $s2bs-padding-base-horizontal; 242 | 243 | .select2-results__group { 244 | padding-left: 0; 245 | } 246 | 247 | .select2-results__option { 248 | margin-left: -$s2bs-padding-base-horizontal; 249 | padding-left: $s2bs-padding-base-horizontal*2; 250 | 251 | .select2-results__option { 252 | margin-left: -$s2bs-padding-base-horizontal*2; 253 | padding-left: $s2bs-padding-base-horizontal*3; 254 | 255 | .select2-results__option { 256 | margin-left: -$s2bs-padding-base-horizontal*3; 257 | padding-left: $s2bs-padding-base-horizontal*4; 258 | 259 | .select2-results__option { 260 | margin-left: -$s2bs-padding-base-horizontal*4; 261 | padding-left: $s2bs-padding-base-horizontal*5; 262 | 263 | .select2-results__option { 264 | margin-left: -$s2bs-padding-base-horizontal*5; 265 | padding-left: $s2bs-padding-base-horizontal*6; 266 | } 267 | } 268 | } 269 | } 270 | } 271 | } 272 | } 273 | 274 | .select2-results__group { 275 | color: $s2bs-dropdown-header-color; 276 | display: block; 277 | padding: $s2bs-dropdown-header-padding-vertical $s2bs-padding-base-horizontal; 278 | font-size: $s2bs-dropdown-header-font-size; 279 | line-height: $s2bs-line-height-base; 280 | white-space: nowrap; 281 | } 282 | 283 | &.select2-container--focus, 284 | &.select2-container--open { 285 | .select2-selection { 286 | @include box-shadow($s2bs-form-control-focus-box-shadow); 287 | @include transition($s2bs-form-control-transition); 288 | border-color: $s2bs-input-border-focus; 289 | } 290 | } 291 | 292 | &.select2-container--open { 293 | /** 294 | * Make the dropdown arrow point up while the dropdown is visible. 295 | */ 296 | 297 | .select2-selection .select2-selection__arrow b { 298 | border-color: transparent transparent $s2bs-dropdown-arrow-color transparent; 299 | border-width: 0 $s2bs-caret-width-base $s2bs-caret-width-base $s2bs-caret-width-base; 300 | } 301 | 302 | /** 303 | * Handle border radii of the container when the dropdown is showing. 304 | */ 305 | 306 | &.select2-container--below { 307 | .select2-selection { 308 | @include border-bottom-radius(0); 309 | border-bottom-color: transparent; 310 | } 311 | } 312 | 313 | &.select2-container--above { 314 | .select2-selection { 315 | @include border-top-radius(0); 316 | border-top-color: transparent; 317 | } 318 | } 319 | } 320 | 321 | /** 322 | * Clear the selection. 323 | */ 324 | 325 | .select2-selection__clear { 326 | color: $s2bs-clear-selection-color; 327 | cursor: pointer; 328 | float: right; 329 | font-weight: bold; 330 | margin-right: 10px; 331 | 332 | &:hover { 333 | color: $s2bs-clear-selection-hover-color; 334 | } 335 | } 336 | 337 | /** 338 | * Address disabled Select2 styles. 339 | * 340 | * @see https://select2.github.io/examples.html#disabled 341 | * @see http://getbootstrap.com/css/#forms-control-disabled 342 | */ 343 | 344 | &.select2-container--disabled { 345 | .select2-selection { 346 | border-color: $s2bs-input-border; 347 | @include box-shadow(none); 348 | } 349 | 350 | .select2-selection, 351 | .select2-search__field { 352 | cursor: $s2bs-cursor-disabled; 353 | } 354 | 355 | .select2-selection, 356 | .select2-selection--multiple .select2-selection__choice { 357 | background-color: $s2bs-input-bg-disabled; 358 | } 359 | 360 | .select2-selection__clear, 361 | .select2-selection--multiple .select2-selection__choice__remove { 362 | display: none; 363 | } 364 | } 365 | 366 | 367 | 368 | 369 | 370 | /*------------------------------------*\ 371 | #DROPDOWN 372 | \*------------------------------------*/ 373 | 374 | /** 375 | * Dropdown border color and box-shadow. 376 | */ 377 | 378 | .select2-dropdown { 379 | @include box-shadow($s2bs-dropdown-box-shadow); 380 | border-color: $s2bs-input-border-focus; 381 | overflow-x: hidden; 382 | margin-top: -1px; 383 | 384 | &--above { 385 | @include box-shadow($s2bs-dropdown-box-shadow-above); 386 | margin-top: 1px; 387 | } 388 | } 389 | 390 | /** 391 | * Limit the dropdown height. 392 | */ 393 | 394 | .select2-results > .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 | @include dropdown-arrow; 634 | } 635 | 636 | .input-group-lg & .select2-selection { 637 | &.select2-container--open { 638 | @include 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 | @include validation-state-focus($state-warning-text); 728 | } 729 | 730 | .has-error { 731 | @include validation-state-focus($state-danger-text); 732 | } 733 | 734 | .has-success { 735 | @include 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 | @include 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 | @include 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. 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 | -------------------------------------------------------------------------------- /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 ` 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 | --------------------------------------------------------------------------------