diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..2a7940f --- /dev/null +++ b/.gitignore @@ -0,0 +1,8 @@ +build +bower_components +node_modules +.sass-cache +gh-pages +tmp +Gemfile.lock +.ruby-version diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..896d547 --- /dev/null +++ b/Gemfile @@ -0,0 +1,3 @@ +source "https://rubygems.org" + +gemspec \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..e77e85b --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,43 @@ +module.exports = function(grunt) { + // load all grunt tasks + require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); + + // Project configuration. + grunt.initConfig({ + nodeunit: { + all: ['test/*_test.js'] + }, + + sass: { + options: { + style: 'expanded', + sourcemap: 'none' + }, + dist: { + files: { + '_jekyll/select2-bootstrap.css': 'lib/build.scss', + 'docs/select2-bootstrap.css': 'lib/build.scss', + 'select2-bootstrap.css': 'lib/build.scss' + } + }, + test: { + files: { + 'tmp/select2-bootstrap.css': 'lib/build.scss' + } + } + }, + + jshint: { + all: ['Gruntfile.js', '*.json'] + }, + + bump: { + options: { + files: ['package.json', 'bower.json', 'lib/select2-bootstrap/version.rb'], + push: false + } + } + + }); + +}; diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..45f7a42 --- /dev/null +++ b/Makefile @@ -0,0 +1,20 @@ +serve_docs: + jekyll serve --watch -s _jekyll/ -d docs/ + +build_docs: + jekyll build -s _jekyll/ -d docs/ + +pages: + cd gh-pages; git pull origin gh-pages + rsync --exclude .git --delete -rv _jekyll/ gh-pages/ + cd gh-pages; git add -u . + cd gh-pages; git add . + cd gh-pages; git commit -m "Updated gh-pages." + cd gh-pages; git push origin gh-pages + +pages_setup: + mkdir gh-pages + git init gh-pages + cd gh-pages; git remote add origin git@github.com:t0m/select2-bootstrap-css.git + cd gh-pages; git fetch + cd gh-pages; git checkout gh-pages diff --git a/README.md b/README.md index 12fb329..63e4837 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,43 @@ -This is a bare bones stylesheet for making select2 fit in with bootstrap a bit better. -If I have some down time I'll make this into a less file so any custom settings will -carry over but for now it's targeted at the default bootstrap style. +# Select2 Bootstrap CSS - +Simple CSS to make Select2 widgets fit in with Bootstrap. -Demo link: +* NOTE: This is the legacy repo. You probably want the official one here: https://github.com/select2/select2-bootstrap-theme -http://t0m.github.com/select2-bootstrap-css/demo/ +-------------------------------------------------- + + + +* This branch (`master`) contains the legacy version for Bootstrap 2. +* The legacy bootstrap 3 branch is here: [`bootstrap3` branch](https://github.com/t0m/select2-bootstrap-css/tree/bootstrap3).* + +The LESS file is located at lib/select2-bootstrap.less, and the SCSS file is located at lib/select2-bootstrap.scss. + +Tests are included to verify that LESS and SCSS compile down to the target CSS. To run the tests, you'll need to install [node.js](http://nodejs.org/), [Less](http://lesscss.org/), and [SASS](http://sass-lang.com/). Then you can run: + + npm install && bower install + npm test + +## Notable Changes + +Versions prior to 1.2.0 included a default width for select2 containers. Applying the class "input-default" to your select will line the select2 container up with a default bootstrap text input. + +## Compass + +This library can also be used as a [Compass](http://compass-style.org/) plugin. + +Gemfile: + + gem 'select2-bootstrap-css' + +compass.rb: + + require 'select2-bootstrap-css' + +Your scss file: + + @import 'select2-bootstrap'; + +## Demos + +http://t0m.github.io/select2-bootstrap-css/ diff --git a/_jekyll/3.3.2.html b/_jekyll/3.3.2.html new file mode 100644 index 0000000..5b3af49 --- /dev/null +++ b/_jekyll/3.3.2.html @@ -0,0 +1,4 @@ +--- +layout: default +version: 3.3.2 +--- diff --git a/_jekyll/3.4.1.html b/_jekyll/3.4.1.html new file mode 100644 index 0000000..ed44244 --- /dev/null +++ b/_jekyll/3.4.1.html @@ -0,0 +1,4 @@ +--- +layout: default +version: 3.4.1 +--- diff --git a/_jekyll/_config.yml b/_jekyll/_config.yml new file mode 100644 index 0000000..033ea04 --- /dev/null +++ b/_jekyll/_config.yml @@ -0,0 +1,3 @@ +versions: + - 3.3.2 + - 3.4.1 \ No newline at end of file diff --git a/_jekyll/_layouts/default.html b/_jekyll/_layouts/default.html new file mode 100644 index 0000000..401d634 --- /dev/null +++ b/_jekyll/_layouts/default.html @@ -0,0 +1,194 @@ + + + +
+ + +
+
+
+ + +
Select2 version {{ page.version }}
+ +
+ {% for version in site.versions %} +
{{ version }}
+ {% endfor %} +
+
+
+
+
Default textbox
+
+
+
+
+ +
+
Select2 single select
+
+
+
+
A
+
B
+
C
+
+
+
+ +
+
Select2 multi select
+
+
+
+
A
+
B
+
C
+
+
+
+ +
+
Select2 append
+
+
+
+
+
A
+
B
+
C
+
+
+
+
+
+
+
+ +
+
Select2 prepend
+
+
+
+
+
+
+
+
A
+
B
+
C
+
+
+
+
+ +
+
Select2 multi append
+
+
+
+
+
A
+
B
+
C
+
+
+
+
+
+
+
+ +
+
Select2 multi prepend
+
+
+
+
+
+
+
+
A
+
B
+
C
+
+
+
+
+ +
+
Select2 custom data load
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
Select2 single select sizes
+
+
+
+
A
+
B
+
C
+
+
+
+
A
+
B
+
C
+
+
+
+
A
+
B
+
C
+
+
+
+ +
+
Select2 single select spans
+
+
+
+
A
+
B
+
C
+
+
+
+
A
+
B
+
C
+
+
+
+
A
+
B
+
C
+
+
+
+
+ + + + diff --git a/_jekyll/_layouts/minimal.html b/_jekyll/_layouts/minimal.html new file mode 100644 index 0000000..03cf06c --- /dev/null +++ b/_jekyll/_layouts/minimal.html @@ -0,0 +1,18 @@ + + + +
+ + +
+
+
+ + + +
Select2 Bootstrap CSS
+ + {{ content }} + + + diff --git a/_jekyll/css/select2-spinner.gif b/_jekyll/css/select2-spinner.gif new file mode 100644 index 0000000..5b33f7e Binary files /dev/null and b/_jekyll/css/select2-spinner.gif differ diff --git a/_jekyll/css/select2.css b/_jekyll/css/select2.css new file mode 100644 index 0000000..36324d6 --- /dev/null +++ b/_jekyll/css/select2.css @@ -0,0 +1,615 @@ +/* +Version: 3.3.2 Timestamp: Mon Mar 25 12:14:18 PDT 2013 +*/ +.select2-container { + position: relative; + display: inline-block; + /* inline-block for ie7 */ + zoom: 1; + *display: inline; + vertical-align: middle; +} + +.select2-container, +.select2-drop, +.select2-search, +.select2-search input{ + /* + Force border-box so that % widths fit the parent + container without overlap because of margin/padding. + + More Info : http://www.quirksmode.org/css/box.html + */ + -webkit-box-sizing: border-box; /* webkit */ + -khtml-box-sizing: border-box; /* konqueror */ + -moz-box-sizing: border-box; /* firefox */ + -ms-box-sizing: border-box; /* ie */ + box-sizing: border-box; /* css3 */ +} + +.select2-container .select2-choice { + display: block; + height: 26px; + padding: 0 0 0 8px; + overflow: hidden; + position: relative; + + border: 1px solid #aaa; + white-space: nowrap; + line-height: 26px; + color: #444; + text-decoration: none; + + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + background-color: #fff; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white)); + background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%); + background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%); + background-image: -o-linear-gradient(bottom, #eeeeee 0%, #ffffff 50%); + background-image: -ms-linear-gradient(top, #ffffff 0%, #eeeeee 50%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0); + background-image: linear-gradient(top, #ffffff 0%, #eeeeee 50%); +} + +.select2-container.select2-drop-above .select2-choice { + border-bottom-color: #aaa; + + -webkit-border-radius:0 0 4px 4px; + -moz-border-radius:0 0 4px 4px; + border-radius:0 0 4px 4px; + + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.9, white)); + background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 90%); + background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 90%); + background-image: -o-linear-gradient(bottom, #eeeeee 0%, white 90%); + background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 90%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); + background-image: linear-gradient(top, #eeeeee 0%,#ffffff 90%); +} + +.select2-container .select2-choice span { + margin-right: 26px; + display: block; + overflow: hidden; + + white-space: nowrap; + + -ms-text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; +} + +.select2-container .select2-choice abbr { + display: block; + width: 12px; + height: 12px; + position: absolute; + right: 26px; + top: 8px; + + font-size: 1px; + text-decoration: none; + + border: 0; + background: url('select2.png') right top no-repeat; + cursor: pointer; + outline: 0; +} +.select2-container .select2-choice abbr:hover { + background-position: right -11px; + cursor: pointer; +} + +.select2-drop-mask { + position: absolute; + left: 0; + top: 0; + z-index: 9998; + background-color: #fff; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* works in IE 8 */ + filter: "alpha(opacity=0)"; /* expected to work in IE 8 */ + filter: alpha(opacity=0); /* IE 4-7 */ +} + +.select2-drop { + width: 100%; + margin-top:-1px; + position: absolute; + z-index: 9999; + top: 100%; + + background: #fff; + color: #000; + border: 1px solid #aaa; + border-top: 0; + + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; + + -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); + -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); + box-shadow: 0 4px 5px rgba(0, 0, 0, .15); +} + +.select2-drop.select2-drop-above { + margin-top: 1px; + border-top: 1px solid #aaa; + border-bottom: 0; + + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; + + -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); + -moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); + box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); +} + +.select2-container .select2-choice div { + display: block; + width: 18px; + height: 100%; + position: absolute; + right: 0; + top: 0; + + border-left: 1px solid #aaa; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; + + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + + background: #ccc; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee)); + background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%); + background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%); + background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%); + background-image: -ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0); + background-image: linear-gradient(top, #cccccc 0%, #eeeeee 60%); +} + +.select2-container .select2-choice div b { + display: block; + width: 100%; + height: 100%; + background: url('select2.png') no-repeat 0 1px; +} + +.select2-search { + display: inline-block; + width: 100%; + min-height: 26px; + margin: 0; + padding-left: 4px; + padding-right: 4px; + + position: relative; + z-index: 10000; + + white-space: nowrap; +} + +.select2-search-hidden { + display: block; + position: absolute; + left: -10000px; +} + +.select2-search input { + width: 100%; + height: auto !important; + min-height: 26px; + padding: 4px 20px 4px 5px; + margin: 0; + + outline: 0; + font-family: sans-serif; + font-size: 1em; + + border: 1px solid #aaa; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + + background: #fff url('select2.png') no-repeat 100% -22px; + background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('select2.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); + background: url('select2.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%); + background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%); +} + +.select2-drop.select2-drop-above .select2-search input { + margin-top: 4px; +} + +.select2-search input.select2-active { + background: #fff url('select2-spinner.gif') no-repeat 100%; + background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('select2-spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); + background: url('select2-spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%); + background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%); +} + +.select2-container-active .select2-choice, +.select2-container-active .select2-choices { + border: 1px solid #5897fb; + outline: none; + + -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3); + -moz-box-shadow: 0 0 5px rgba(0,0,0,.3); + box-shadow: 0 0 5px rgba(0,0,0,.3); +} + +.select2-dropdown-open .select2-choice { + border-bottom-color: transparent; + -webkit-box-shadow: 0 1px 0 #fff inset; + -moz-box-shadow: 0 1px 0 #fff inset; + box-shadow: 0 1px 0 #fff inset; + + -webkit-border-bottom-left-radius: 0; + -moz-border-radius-bottomleft: 0; + border-bottom-left-radius: 0; + + -webkit-border-bottom-right-radius: 0; + -moz-border-radius-bottomright: 0; + border-bottom-right-radius: 0; + + background-color: #eee; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee)); + background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%); + background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%); + background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%); + background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); + background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%); +} + +.select2-dropdown-open .select2-choice div { + background: transparent; + border-left: none; + filter: none; +} +.select2-dropdown-open .select2-choice div b { + background-position: -18px 1px; +} + +/* results */ +.select2-results { + max-height: 200px; + padding: 0 0 0 4px; + margin: 4px 4px 4px 0; + position: relative; + overflow-x: hidden; + overflow-y: auto; + -webkit-tap-highlight-color: rgba(0,0,0,0); +} + +.select2-results ul.select2-result-sub { + margin: 0; +} + +.select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px } +.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px } +.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px } +.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px } +.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px } +.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px } +.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px } + +.select2-results li { + list-style: none; + display: list-item; + background-image: none; +} + +.select2-results li.select2-result-with-children > .select2-result-label { + font-weight: bold; +} + +.select2-results .select2-result-label { + padding: 3px 7px 4px; + margin: 0; + cursor: pointer; + + min-height: 1em; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.select2-results .select2-highlighted { + background: #3875d7; + color: #fff; +} + +.select2-results li em { + background: #feffde; + font-style: normal; +} + +.select2-results .select2-highlighted em { + background: transparent; +} + +.select2-results .select2-highlighted ul { + background: white; + color: #000; +} + + +.select2-results .select2-no-results, +.select2-results .select2-searching, +.select2-results .select2-selection-limit { + background: #f4f4f4; + display: list-item; +} + +/* +disabled look for disabled choices in the results dropdown +*/ +.select2-results .select2-disabled.select2-highlighted { + color: #666; + background: #f4f4f4; + display: list-item; + cursor: default; +} +.select2-results .select2-disabled { + background: #f4f4f4; + display: list-item; + cursor: default; +} + +.select2-results .select2-selected { + display: none; +} + +.select2-more-results.select2-active { + background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%; +} + +.select2-more-results { + background: #f4f4f4; + display: list-item; +} + +/* disabled styles */ + +.select2-container.select2-container-disabled .select2-choice { + background-color: #f4f4f4; + background-image: none; + border: 1px solid #ddd; + cursor: default; +} + +.select2-container.select2-container-disabled .select2-choice div { + background-color: #f4f4f4; + background-image: none; + border-left: 0; +} + +.select2-container.select2-container-disabled .select2-choice abbr { + display: none +} + + +/* multiselect */ + +.select2-container-multi .select2-choices { + height: auto !important; + height: 1%; + margin: 0; + padding: 0; + position: relative; + + border: 1px solid #aaa; + cursor: text; + overflow: hidden; + + background-color: #fff; + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); + background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%); + background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%); + background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%); + background-image: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%); + background-image: linear-gradient(top, #eeeeee 1%, #ffffff 15%); +} + +.select2-locked { + padding: 3px 5px 3px 5px !important; +} + +.select2-container-multi .select2-choices { + min-height: 26px; +} + +.select2-container-multi.select2-container-active .select2-choices { + border: 1px solid #5897fb; + outline: none; + + -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3); + -moz-box-shadow: 0 0 5px rgba(0,0,0,.3); + box-shadow: 0 0 5px rgba(0,0,0,.3); +} +.select2-container-multi .select2-choices li { + float: left; + list-style: none; +} +.select2-container-multi .select2-choices .select2-search-field { + margin: 0; + padding: 0; + white-space: nowrap; +} + +.select2-container-multi .select2-choices .select2-search-field input { + padding: 5px; + margin: 1px 0; + + font-family: sans-serif; + font-size: 100%; + color: #666; + outline: 0; + border: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + background: transparent !important; +} + +.select2-container-multi .select2-choices .select2-search-field input.select2-active { + background: #fff url('select2-spinner.gif') no-repeat 100% !important; +} + +.select2-default { + color: #999 !important; +} + +.select2-container-multi .select2-choices .select2-search-choice { + padding: 3px 5px 3px 18px; + margin: 3px 0 3px 5px; + position: relative; + + line-height: 13px; + color: #333; + cursor: default; + border: 1px solid #aaaaaa; + + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + + -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); + -moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); + box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); + + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + background-color: #e4e4e4; + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0 ); + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee)); + background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); + background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); + background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); + background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); + background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); +} +.select2-container-multi .select2-choices .select2-search-choice span { + cursor: default; +} +.select2-container-multi .select2-choices .select2-search-choice-focus { + background: #d4d4d4; +} + +.select2-search-choice-close { + display: block; + width: 12px; + height: 13px; + position: absolute; + right: 3px; + top: 4px; + + font-size: 1px; + outline: none; + background: url('select2.png') right top no-repeat; +} + +.select2-container-multi .select2-search-choice-close { + left: 3px; +} + +.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover { + background-position: right -11px; +} +.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close { + background-position: right -11px; +} + +/* disabled styles */ +.select2-container-multi.select2-container-disabled .select2-choices{ + background-color: #f4f4f4; + background-image: none; + border: 1px solid #ddd; + cursor: default; +} + +.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice { + padding: 3px 5px 3px 5px; + border: 1px solid #ddd; + background-image: none; + background-color: #f4f4f4; +} + +.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close { + display: none; +} +/* end multiselect */ + + +.select2-result-selectable .select2-match, +.select2-result-unselectable .select2-match { + text-decoration: underline; +} + +.select2-offscreen { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +/* Retina-ize icons */ + +@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { + .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice div b { + background-image: url('select2x2.png') !important; + background-repeat: no-repeat !important; + background-size: 60px 40px !important; + } + .select2-search input { + background-position: 100% -21px !important; + } +} diff --git a/_jekyll/css/select2.png b/_jekyll/css/select2.png new file mode 100644 index 0000000..1d804ff Binary files /dev/null and b/_jekyll/css/select2.png differ diff --git a/_jekyll/css/select2x2.png b/_jekyll/css/select2x2.png new file mode 100644 index 0000000..4bdd5c9 Binary files /dev/null and b/_jekyll/css/select2x2.png differ diff --git a/_jekyll/index.html b/_jekyll/index.html new file mode 100644 index 0000000..f8991f0 --- /dev/null +++ b/_jekyll/index.html @@ -0,0 +1,11 @@ +--- +layout: minimal +--- + +
Demos
+ +
+ {% for version in site.versions %} +
Select2 {{ version }}
+ {% endfor %} +
diff --git a/_jekyll/select2-bootstrap.css b/_jekyll/select2-bootstrap.css new file mode 100644 index 0000000..e2ebdb7 --- /dev/null +++ b/_jekyll/select2-bootstrap.css @@ -0,0 +1,119 @@ +/** + * Select2 Bootstrap CSS v1.2.5 + * Tested with Bootstrap v2.3.1, v2.3.2 and Select2 v3.3.2, v3.4.1 + * MIT License + */ +.select2-container { + vertical-align: middle; +} +.select2-container.input-mini { + width: 60px; +} +.select2-container.input-small { + width: 90px; +} +.select2-container.input-medium { + width: 150px; +} +.select2-container.input-large { + width: 210px; +} +.select2-container.input-xlarge { + width: 270px; +} +.select2-container.input-xxlarge { + width: 530px; +} +.select2-container.input-default { + width: 220px; +} +.select2-container[class*="span"] { + float: none; + margin-left: 0; +} + +.select2-container .select2-choice, +.select2-container-multi .select2-choices { + height: 28px; + line-height: 29px; + border: 1px solid #ccc; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + background: none; + background-color: #fff; + filter: none; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.select2-container .select2-choice div, .select2-container .select2-choice .select2-arrow, +.select2-container.select2-container-disabled .select2-choice div, +.select2-container.select2-container-disabled .select2-choice .select2-arrow { + border-left: none; + background: none; + filter: none; +} + +.control-group.error [class^="select2-choice"] { + border-color: #b94a48; +} + +.select2-container-multi .select2-choices .select2-search-field { + height: 28px; + line-height: 27px; +} + +.select2-drop.select2-drop-active, +.select2-container-active .select2-choice, +.select2-container-multi.select2-container-active .select2-choices { + border-color: rgba(82, 168, 236, 0.8); + border-color: #ccc\0; + outline: none; +} + +.select2-container-active .select2-choice, +.select2-container-multi.select2-container-active .select2-choices { + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); +} + +[class^="input-"] .select2-container { + font-size: 14px; +} + +.input-prepend [class^="select2-choice"] { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.input-append [class^="select2-choice"] { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.select2-dropdown-open [class^="select2-choice"] { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.select2-dropdown-open.select2-drop-above [class^="select2-choice"] { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +[class^="input-"] .select2-offscreen { + position: absolute; +} + +/** + * This stops the quick flash when a native selectbox is shown and + * then replaced by a select2 input when javascript kicks in. This can be + * removed if javascript is not present + */ +select.select2 { + height: 28px; + visibility: hidden; +} diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..e811fe9 --- /dev/null +++ b/bower.json @@ -0,0 +1,19 @@ +{ + "name": "select2-bootstrap-css", + "version": "1.2.5", + "main": [ + "select2-bootstrap.css" + ], + "ignore": [ + "**/.*", + "node_modules", + "components" + ], + "dependencies": { + "select2": "^3.3.2" + }, + "devDependencies": { + "bootstrap": "~2.3.2", + "sass-bootstrap": "git://github.com/jlong/sass-twitter-bootstrap.git#~2.3.2" + } +} \ No newline at end of file diff --git a/compass/stylesheets/select2-bootstrap.scss b/compass/stylesheets/select2-bootstrap.scss new file mode 100644 index 0000000..9b9c99e --- /dev/null +++ b/compass/stylesheets/select2-bootstrap.scss @@ -0,0 +1 @@ +@import "../../lib/select2-bootstrap"; \ No newline at end of file diff --git a/docs/3.3.2.html b/docs/3.3.2.html new file mode 100644 index 0000000..4515734 --- /dev/null +++ b/docs/3.3.2.html @@ -0,0 +1,196 @@ + + + +
+ + +
+
+
+ + +
Select2 version 3.3.2
+ +
+ +
3.3.2
+ +
3.4.1
+ +
+
+
+
+
Default textbox
+
+
+
+
+ +
+
Select2 single select
+
+
+
+
A
+
B
+
C
+
+
+
+ +
+
Select2 multi select
+
+
+
+
A
+
B
+
C
+
+
+
+ +
+
Select2 append
+
+
+
+
+
A
+
B
+
C
+
+
+
+
+
+
+
+ +
+
Select2 prepend
+
+
+
+
+
+
+
+
A
+
B
+
C
+
+
+
+
+ +
+
Select2 multi append
+
+
+
+
+
A
+
B
+
C
+
+
+
+
+
+
+
+ +
+
Select2 multi prepend
+
+
+
+
+
+
+
+
A
+
B
+
C
+
+
+
+
+ +
+
Select2 custom data load
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
Select2 single select sizes
+
+
+
+
A
+
B
+
C
+
+
+
+
A
+
B
+
C
+
+
+
+
A
+
B
+
C
+
+
+
+ +
+
Select2 single select spans
+
+
+
+
A
+
B
+
C
+
+
+
+
A
+
B
+
C
+
+
+
+
A
+
B
+
C
+
+
+
+
+ + + + diff --git a/docs/3.4.1.html b/docs/3.4.1.html new file mode 100644 index 0000000..5ac698e --- /dev/null +++ b/docs/3.4.1.html @@ -0,0 +1,196 @@ + + + +
+ + +
+
+
+ + +
Select2 version 3.4.1
+ +
+ +
3.3.2
+ +
3.4.1
+ +
+
+
+
+
Default textbox
+
+
+
+
+ +
+
Select2 single select
+
+
+
+
A
+
B
+
C
+
+
+
+ +
+
Select2 multi select
+
+
+
+
A
+
B
+
C
+
+
+
+ +
+
Select2 append
+
+
+
+
+
A
+
B
+
C
+
+
+
+
+
+
+
+ +
+
Select2 prepend
+
+
+
+
+
+
+
+
A
+
B
+
C
+
+
+
+
+ +
+
Select2 multi append
+
+
+
+
+
A
+
B
+
C
+
+
+
+
+
+
+
+ +
+
Select2 multi prepend
+
+
+
+
+
+
+
+
A
+
B
+
C
+
+
+
+
+ +
+
Select2 custom data load
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
Select2 single select sizes
+
+
+
+
A
+
B
+
C
+
+
+
+
A
+
B
+
C
+
+
+
+
A
+
B
+
C
+
+
+
+ +
+
Select2 single select spans
+
+
+
+
A
+
B
+
C
+
+
+
+
A
+
B
+
C
+
+
+
+
A
+
B
+
C
+
+
+
+
+ + + + diff --git a/docs/css/select2-spinner.gif b/docs/css/select2-spinner.gif new file mode 100644 index 0000000..5b33f7e Binary files /dev/null and b/docs/css/select2-spinner.gif differ diff --git a/docs/css/select2.css b/docs/css/select2.css new file mode 100644 index 0000000..36324d6 --- /dev/null +++ b/docs/css/select2.css @@ -0,0 +1,615 @@ +/* +Version: 3.3.2 Timestamp: Mon Mar 25 12:14:18 PDT 2013 +*/ +.select2-container { + position: relative; + display: inline-block; + /* inline-block for ie7 */ + zoom: 1; + *display: inline; + vertical-align: middle; +} + +.select2-container, +.select2-drop, +.select2-search, +.select2-search input{ + /* + Force border-box so that % widths fit the parent + container without overlap because of margin/padding. + + More Info : http://www.quirksmode.org/css/box.html + */ + -webkit-box-sizing: border-box; /* webkit */ + -khtml-box-sizing: border-box; /* konqueror */ + -moz-box-sizing: border-box; /* firefox */ + -ms-box-sizing: border-box; /* ie */ + box-sizing: border-box; /* css3 */ +} + +.select2-container .select2-choice { + display: block; + height: 26px; + padding: 0 0 0 8px; + overflow: hidden; + position: relative; + + border: 1px solid #aaa; + white-space: nowrap; + line-height: 26px; + color: #444; + text-decoration: none; + + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + background-color: #fff; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white)); + background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%); + background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%); + background-image: -o-linear-gradient(bottom, #eeeeee 0%, #ffffff 50%); + background-image: -ms-linear-gradient(top, #ffffff 0%, #eeeeee 50%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0); + background-image: linear-gradient(top, #ffffff 0%, #eeeeee 50%); +} + +.select2-container.select2-drop-above .select2-choice { + border-bottom-color: #aaa; + + -webkit-border-radius:0 0 4px 4px; + -moz-border-radius:0 0 4px 4px; + border-radius:0 0 4px 4px; + + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.9, white)); + background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 90%); + background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 90%); + background-image: -o-linear-gradient(bottom, #eeeeee 0%, white 90%); + background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 90%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); + background-image: linear-gradient(top, #eeeeee 0%,#ffffff 90%); +} + +.select2-container .select2-choice span { + margin-right: 26px; + display: block; + overflow: hidden; + + white-space: nowrap; + + -ms-text-overflow: ellipsis; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; +} + +.select2-container .select2-choice abbr { + display: block; + width: 12px; + height: 12px; + position: absolute; + right: 26px; + top: 8px; + + font-size: 1px; + text-decoration: none; + + border: 0; + background: url('select2.png') right top no-repeat; + cursor: pointer; + outline: 0; +} +.select2-container .select2-choice abbr:hover { + background-position: right -11px; + cursor: pointer; +} + +.select2-drop-mask { + position: absolute; + left: 0; + top: 0; + z-index: 9998; + background-color: #fff; + opacity: 0; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* works in IE 8 */ + filter: "alpha(opacity=0)"; /* expected to work in IE 8 */ + filter: alpha(opacity=0); /* IE 4-7 */ +} + +.select2-drop { + width: 100%; + margin-top:-1px; + position: absolute; + z-index: 9999; + top: 100%; + + background: #fff; + color: #000; + border: 1px solid #aaa; + border-top: 0; + + -webkit-border-radius: 0 0 4px 4px; + -moz-border-radius: 0 0 4px 4px; + border-radius: 0 0 4px 4px; + + -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); + -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); + box-shadow: 0 4px 5px rgba(0, 0, 0, .15); +} + +.select2-drop.select2-drop-above { + margin-top: 1px; + border-top: 1px solid #aaa; + border-bottom: 0; + + -webkit-border-radius: 4px 4px 0 0; + -moz-border-radius: 4px 4px 0 0; + border-radius: 4px 4px 0 0; + + -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); + -moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); + box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); +} + +.select2-container .select2-choice div { + display: block; + width: 18px; + height: 100%; + position: absolute; + right: 0; + top: 0; + + border-left: 1px solid #aaa; + -webkit-border-radius: 0 4px 4px 0; + -moz-border-radius: 0 4px 4px 0; + border-radius: 0 4px 4px 0; + + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + + background: #ccc; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee)); + background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%); + background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%); + background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%); + background-image: -ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0); + background-image: linear-gradient(top, #cccccc 0%, #eeeeee 60%); +} + +.select2-container .select2-choice div b { + display: block; + width: 100%; + height: 100%; + background: url('select2.png') no-repeat 0 1px; +} + +.select2-search { + display: inline-block; + width: 100%; + min-height: 26px; + margin: 0; + padding-left: 4px; + padding-right: 4px; + + position: relative; + z-index: 10000; + + white-space: nowrap; +} + +.select2-search-hidden { + display: block; + position: absolute; + left: -10000px; +} + +.select2-search input { + width: 100%; + height: auto !important; + min-height: 26px; + padding: 4px 20px 4px 5px; + margin: 0; + + outline: 0; + font-family: sans-serif; + font-size: 1em; + + border: 1px solid #aaa; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; + + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + + background: #fff url('select2.png') no-repeat 100% -22px; + background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('select2.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); + background: url('select2.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%); + background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%); +} + +.select2-drop.select2-drop-above .select2-search input { + margin-top: 4px; +} + +.select2-search input.select2-active { + background: #fff url('select2-spinner.gif') no-repeat 100%; + background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); + background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); + background: url('select2-spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); + background: url('select2-spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%); + background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%); +} + +.select2-container-active .select2-choice, +.select2-container-active .select2-choices { + border: 1px solid #5897fb; + outline: none; + + -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3); + -moz-box-shadow: 0 0 5px rgba(0,0,0,.3); + box-shadow: 0 0 5px rgba(0,0,0,.3); +} + +.select2-dropdown-open .select2-choice { + border-bottom-color: transparent; + -webkit-box-shadow: 0 1px 0 #fff inset; + -moz-box-shadow: 0 1px 0 #fff inset; + box-shadow: 0 1px 0 #fff inset; + + -webkit-border-bottom-left-radius: 0; + -moz-border-radius-bottomleft: 0; + border-bottom-left-radius: 0; + + -webkit-border-bottom-right-radius: 0; + -moz-border-radius-bottomright: 0; + border-bottom-right-radius: 0; + + background-color: #eee; + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee)); + background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%); + background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%); + background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%); + background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); + background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%); +} + +.select2-dropdown-open .select2-choice div { + background: transparent; + border-left: none; + filter: none; +} +.select2-dropdown-open .select2-choice div b { + background-position: -18px 1px; +} + +/* results */ +.select2-results { + max-height: 200px; + padding: 0 0 0 4px; + margin: 4px 4px 4px 0; + position: relative; + overflow-x: hidden; + overflow-y: auto; + -webkit-tap-highlight-color: rgba(0,0,0,0); +} + +.select2-results ul.select2-result-sub { + margin: 0; +} + +.select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px } +.select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px } +.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px } +.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px } +.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px } +.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px } +.select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px } + +.select2-results li { + list-style: none; + display: list-item; + background-image: none; +} + +.select2-results li.select2-result-with-children > .select2-result-label { + font-weight: bold; +} + +.select2-results .select2-result-label { + padding: 3px 7px 4px; + margin: 0; + cursor: pointer; + + min-height: 1em; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.select2-results .select2-highlighted { + background: #3875d7; + color: #fff; +} + +.select2-results li em { + background: #feffde; + font-style: normal; +} + +.select2-results .select2-highlighted em { + background: transparent; +} + +.select2-results .select2-highlighted ul { + background: white; + color: #000; +} + + +.select2-results .select2-no-results, +.select2-results .select2-searching, +.select2-results .select2-selection-limit { + background: #f4f4f4; + display: list-item; +} + +/* +disabled look for disabled choices in the results dropdown +*/ +.select2-results .select2-disabled.select2-highlighted { + color: #666; + background: #f4f4f4; + display: list-item; + cursor: default; +} +.select2-results .select2-disabled { + background: #f4f4f4; + display: list-item; + cursor: default; +} + +.select2-results .select2-selected { + display: none; +} + +.select2-more-results.select2-active { + background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%; +} + +.select2-more-results { + background: #f4f4f4; + display: list-item; +} + +/* disabled styles */ + +.select2-container.select2-container-disabled .select2-choice { + background-color: #f4f4f4; + background-image: none; + border: 1px solid #ddd; + cursor: default; +} + +.select2-container.select2-container-disabled .select2-choice div { + background-color: #f4f4f4; + background-image: none; + border-left: 0; +} + +.select2-container.select2-container-disabled .select2-choice abbr { + display: none +} + + +/* multiselect */ + +.select2-container-multi .select2-choices { + height: auto !important; + height: 1%; + margin: 0; + padding: 0; + position: relative; + + border: 1px solid #aaa; + cursor: text; + overflow: hidden; + + background-color: #fff; + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); + background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%); + background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%); + background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%); + background-image: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%); + background-image: linear-gradient(top, #eeeeee 1%, #ffffff 15%); +} + +.select2-locked { + padding: 3px 5px 3px 5px !important; +} + +.select2-container-multi .select2-choices { + min-height: 26px; +} + +.select2-container-multi.select2-container-active .select2-choices { + border: 1px solid #5897fb; + outline: none; + + -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3); + -moz-box-shadow: 0 0 5px rgba(0,0,0,.3); + box-shadow: 0 0 5px rgba(0,0,0,.3); +} +.select2-container-multi .select2-choices li { + float: left; + list-style: none; +} +.select2-container-multi .select2-choices .select2-search-field { + margin: 0; + padding: 0; + white-space: nowrap; +} + +.select2-container-multi .select2-choices .select2-search-field input { + padding: 5px; + margin: 1px 0; + + font-family: sans-serif; + font-size: 100%; + color: #666; + outline: 0; + border: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + background: transparent !important; +} + +.select2-container-multi .select2-choices .select2-search-field input.select2-active { + background: #fff url('select2-spinner.gif') no-repeat 100% !important; +} + +.select2-default { + color: #999 !important; +} + +.select2-container-multi .select2-choices .select2-search-choice { + padding: 3px 5px 3px 18px; + margin: 3px 0 3px 5px; + position: relative; + + line-height: 13px; + color: #333; + cursor: default; + border: 1px solid #aaaaaa; + + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + + -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); + -moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); + box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); + + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + background-color: #e4e4e4; + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0 ); + background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee)); + background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); + background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); + background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); + background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); + background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); +} +.select2-container-multi .select2-choices .select2-search-choice span { + cursor: default; +} +.select2-container-multi .select2-choices .select2-search-choice-focus { + background: #d4d4d4; +} + +.select2-search-choice-close { + display: block; + width: 12px; + height: 13px; + position: absolute; + right: 3px; + top: 4px; + + font-size: 1px; + outline: none; + background: url('select2.png') right top no-repeat; +} + +.select2-container-multi .select2-search-choice-close { + left: 3px; +} + +.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover { + background-position: right -11px; +} +.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close { + background-position: right -11px; +} + +/* disabled styles */ +.select2-container-multi.select2-container-disabled .select2-choices{ + background-color: #f4f4f4; + background-image: none; + border: 1px solid #ddd; + cursor: default; +} + +.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice { + padding: 3px 5px 3px 5px; + border: 1px solid #ddd; + background-image: none; + background-color: #f4f4f4; +} + +.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close { + display: none; +} +/* end multiselect */ + + +.select2-result-selectable .select2-match, +.select2-result-unselectable .select2-match { + text-decoration: underline; +} + +.select2-offscreen { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +/* Retina-ize icons */ + +@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { + .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice div b { + background-image: url('select2x2.png') !important; + background-repeat: no-repeat !important; + background-size: 60px 40px !important; + } + .select2-search input { + background-position: 100% -21px !important; + } +} diff --git a/docs/css/select2.png b/docs/css/select2.png new file mode 100644 index 0000000..1d804ff Binary files /dev/null and b/docs/css/select2.png differ diff --git a/docs/css/select2x2.png b/docs/css/select2x2.png new file mode 100644 index 0000000..4bdd5c9 Binary files /dev/null and b/docs/css/select2x2.png differ diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..80f6c67 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,27 @@ + + + +
+ + +
+
+
+ + + +
Select2 Bootstrap CSS
+ +
Demos
+ +
+ +
Select2 3.3.2
+ +
Select2 3.4.1
+ +
+ + + + diff --git a/docs/select2-bootstrap.css b/docs/select2-bootstrap.css new file mode 100644 index 0000000..e2ebdb7 --- /dev/null +++ b/docs/select2-bootstrap.css @@ -0,0 +1,119 @@ +/** + * Select2 Bootstrap CSS v1.2.5 + * Tested with Bootstrap v2.3.1, v2.3.2 and Select2 v3.3.2, v3.4.1 + * MIT License + */ +.select2-container { + vertical-align: middle; +} +.select2-container.input-mini { + width: 60px; +} +.select2-container.input-small { + width: 90px; +} +.select2-container.input-medium { + width: 150px; +} +.select2-container.input-large { + width: 210px; +} +.select2-container.input-xlarge { + width: 270px; +} +.select2-container.input-xxlarge { + width: 530px; +} +.select2-container.input-default { + width: 220px; +} +.select2-container[class*="span"] { + float: none; + margin-left: 0; +} + +.select2-container .select2-choice, +.select2-container-multi .select2-choices { + height: 28px; + line-height: 29px; + border: 1px solid #ccc; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + background: none; + background-color: #fff; + filter: none; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.select2-container .select2-choice div, .select2-container .select2-choice .select2-arrow, +.select2-container.select2-container-disabled .select2-choice div, +.select2-container.select2-container-disabled .select2-choice .select2-arrow { + border-left: none; + background: none; + filter: none; +} + +.control-group.error [class^="select2-choice"] { + border-color: #b94a48; +} + +.select2-container-multi .select2-choices .select2-search-field { + height: 28px; + line-height: 27px; +} + +.select2-drop.select2-drop-active, +.select2-container-active .select2-choice, +.select2-container-multi.select2-container-active .select2-choices { + border-color: rgba(82, 168, 236, 0.8); + border-color: #ccc\0; + outline: none; +} + +.select2-container-active .select2-choice, +.select2-container-multi.select2-container-active .select2-choices { + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); +} + +[class^="input-"] .select2-container { + font-size: 14px; +} + +.input-prepend [class^="select2-choice"] { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.input-append [class^="select2-choice"] { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.select2-dropdown-open [class^="select2-choice"] { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.select2-dropdown-open.select2-drop-above [class^="select2-choice"] { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +[class^="input-"] .select2-offscreen { + position: absolute; +} + +/** + * This stops the quick flash when a native selectbox is shown and + * then replaced by a select2 input when javascript kicks in. This can be + * removed if javascript is not present + */ +select.select2 { + height: 28px; + visibility: hidden; +} diff --git a/lib/build.less b/lib/build.less new file mode 100644 index 0000000..02168ca --- /dev/null +++ b/lib/build.less @@ -0,0 +1,3 @@ +@import "../bower_components/bootstrap/less/variables"; +@import "../bower_components/bootstrap/less/mixins"; +@import "select2-bootstrap.less"; diff --git a/lib/build.scss b/lib/build.scss new file mode 100644 index 0000000..96030d5 --- /dev/null +++ b/lib/build.scss @@ -0,0 +1,3 @@ +@import "../bower_components/sass-bootstrap/lib/variables"; +@import "../bower_components/sass-bootstrap/lib/mixins"; +@import "select2-bootstrap.scss"; diff --git a/lib/select2-bootstrap-css.rb b/lib/select2-bootstrap-css.rb new file mode 100644 index 0000000..3ba0a24 --- /dev/null +++ b/lib/select2-bootstrap-css.rb @@ -0,0 +1,11 @@ +require 'compass' + +module Select2 + module Bootstrap + def self.base_directory + File.expand_path('../../compass', __FILE__) + end + end +end + +Compass::Frameworks.register 'select2-bootstrap', :path => Select2::Bootstrap.base_directory \ No newline at end of file diff --git a/lib/select2-bootstrap.less b/lib/select2-bootstrap.less new file mode 100644 index 0000000..979a4cb --- /dev/null +++ b/lib/select2-bootstrap.less @@ -0,0 +1,103 @@ +/** + * Select2 Bootstrap CSS v1.2.5 + * Tested with Bootstrap v2.3.1, v2.3.2 and Select2 v3.3.2, v3.4.1 + * MIT License + */ + +.select2-container { + vertical-align: middle; + &.input-mini { width: 60px; } + &.input-small { width: 90px; } + &.input-medium { width: 150px; } + &.input-large { width: 210px; } + &.input-xlarge { width: 270px; } + &.input-xxlarge { width: 530px; } + // Size to the width of a default text input. + &.input-default { width: 220px; } + &[class*="span"] { + float: none; + margin-left: 0; + } +} + +.select2-container .select2-choice, +.select2-container-multi .select2-choices { + height: @baseLineHeight + 8px; + line-height: @baseLineHeight + 9px; + border: 1px solid @inputBorder; + .border-radius(@inputBorderRadius); + background: none; + background-color: @inputBackground; + filter: none; + .box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075)); +} + +.select2-container .select2-choice, +.select2-container.select2-container-disabled .select2-choice { + div, .select2-arrow { + border-left: none; + background: none; + filter: none; + } +} + +.control-group.error [class^="select2-choice"] { + border-color: @errorText; +} + +.select2-container-multi .select2-choices .select2-search-field { + height: 28px; + line-height: 27px; +} + +.select2-drop.select2-drop-active, +.select2-container-active .select2-choice, +.select2-container-multi.select2-container-active .select2-choices { + border-color: rgba(82, 168, 236, 0.8); + border-color: #ccc\0; + outline: none; +} + +.select2-container-active .select2-choice, +.select2-container-multi.select2-container-active .select2-choices { + .box-shadow(~"inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)"); +} + +[class^="input-"] .select2-container { + font-size: @baseFontSize; +} + +.input-prepend [class^="select2-choice"] { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.input-append [class^="select2-choice"] { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.select2-dropdown-open [class^="select2-choice"] { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.select2-dropdown-open.select2-drop-above [class^="select2-choice"] { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +[class^="input-"] .select2-offscreen { + position: absolute; +} + +/** + * This stops the quick flash when a native selectbox is shown and + * then replaced by a select2 input when javascript kicks in. This can be + * removed if javascript is not present + */ + +select.select2 { + height: 28px; + visibility: hidden; +} diff --git a/lib/select2-bootstrap.scss b/lib/select2-bootstrap.scss new file mode 100644 index 0000000..76ca5d4 --- /dev/null +++ b/lib/select2-bootstrap.scss @@ -0,0 +1,103 @@ +/** + * Select2 Bootstrap CSS v1.2.5 + * Tested with Bootstrap v2.3.1, v2.3.2 and Select2 v3.3.2, v3.4.1 + * MIT License + */ + +.select2-container { + vertical-align: middle; + &.input-mini { width: 60px; } + &.input-small { width: 90px; } + &.input-medium { width: 150px; } + &.input-large { width: 210px; } + &.input-xlarge { width: 270px; } + &.input-xxlarge { width: 530px; } + // Size to the width of a default text input. + &.input-default { width: 220px; } + &[class*="span"] { + float: none; + margin-left: 0; + } +} + +.select2-container .select2-choice, +.select2-container-multi .select2-choices { + height: $baseLineHeight + 8px; + line-height: $baseLineHeight + 9px; + border: 1px solid $inputBorder; + @include border-radius($inputBorderRadius); + background: none; + background-color: $inputBackground; + filter: none; + @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075)); +} + +.select2-container .select2-choice, +.select2-container.select2-container-disabled .select2-choice { + div, .select2-arrow { + border-left: none; + background: none; + filter: none; + } +} + +.control-group.error [class^="select2-choice"] { + border-color: $errorText; +} + +.select2-container-multi .select2-choices .select2-search-field { + height: 28px; + line-height: 27px; +} + +.select2-drop.select2-drop-active, +.select2-container-active .select2-choice, +.select2-container-multi.select2-container-active .select2-choices { + border-color: rgba(82, 168, 236, 0.8); + border-color: #ccc\0; + outline: none; +} + +.select2-container-active .select2-choice, +.select2-container-multi.select2-container-active .select2-choices { + @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)); +} + +[class^="input-"] .select2-container { + font-size: $baseFontSize; +} + +.input-prepend [class^="select2-choice"] { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} + +.input-append [class^="select2-choice"] { + border-top-right-radius: 0; + border-bottom-right-radius: 0; +} + +.select2-dropdown-open [class^="select2-choice"] { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.select2-dropdown-open.select2-drop-above [class^="select2-choice"] { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +[class^="input-"] .select2-offscreen { + position: absolute; +} + +/** + * This stops the quick flash when a native selectbox is shown and + * then replaced by a select2 input when javascript kicks in. This can be + * removed if javascript is not present + */ + +select.select2 { + height: 28px; + visibility: hidden; +} diff --git a/lib/select2-bootstrap/version.rb b/lib/select2-bootstrap/version.rb new file mode 100644 index 0000000..eebd25c --- /dev/null +++ b/lib/select2-bootstrap/version.rb @@ -0,0 +1,9 @@ +module Select2 + module Bootstrap + # This is updated via the `grunt bump` command, which has a pretty + # unflexible matching syntax. + VERSION_STRING = "'version': '1.2.5'" + # Then, just the version. + VERSION = VERSION_STRING.match(/\d+\.\d+\.\d+/)[0] + end +end \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..f993cea --- /dev/null +++ b/package.json @@ -0,0 +1,33 @@ +{ + "name": "select2-bootstrap-css", + "version": "1.2.5", + "description": "simple css to make select2 widgets fit in with bootstrap", + "main": "", + "directories": { + "doc": "docs" + }, + "scripts": { + "test": "grunt nodeunit" + }, + "repository": { + "type": "git", + "url": "git://github.com/t0m/select2-bootstrap-css.git" + }, + "keywords": [ + "bootstrap", + "select2" + ], + "author": "Michael Hellein", + "license": "MIT", + "readmeFilename": "README.md", + "devDependencies": { + "grunt": "~0.4.5", + "grunt-contrib-nodeunit": "~0.4.1", + "diff": "~1.3.2", + "grunt-contrib-sass": "~0.9.2", + "bower": "~1.4.0", + "grunt-contrib-jshint": "~0.11.1", + "grunt-bump": "0.3.0", + "matchdep": "~0.3.0" + } +} diff --git a/select2-bootstrap-css.gemspec b/select2-bootstrap-css.gemspec new file mode 100644 index 0000000..ee0fe2f --- /dev/null +++ b/select2-bootstrap-css.gemspec @@ -0,0 +1,22 @@ +# encoding: utf-8 + +$:.unshift File.expand_path('../lib', __FILE__) +require 'select2-bootstrap/version' + +Gem::Specification.new do |s| + s.name = "select2-bootstrap-css" + s.version = Select2::Bootstrap::VERSION + s.authors = ["Michael Hellein"] + s.email = ["themichael@gmail.com"] + s.homepage = "https://github.com/t0m/select2-bootstrap-css" + s.summary = "A stylesheet for making select2 fit in with bootstrap a bit better." + s.description = "A stylesheet for making select2 fit in with bootstrap a bit better." + s.license = 'MIT' + + s.files = `git ls-files compass lib`.split("\n") + s.platform = Gem::Platform::RUBY + s.require_paths = ['lib'] + s.rubyforge_project = '[none]' + + s.add_development_dependency 'jekyll' +end diff --git a/select2-bootstrap.css b/select2-bootstrap.css index e64b481..e2ebdb7 100644 --- a/select2-bootstrap.css +++ b/select2-bootstrap.css @@ -1,41 +1,63 @@ +/** + * Select2 Bootstrap CSS v1.2.5 + * Tested with Bootstrap v2.3.1, v2.3.2 and Select2 v3.3.2, v3.4.1 + * MIT License + */ .select2-container { vertical-align: middle; } +.select2-container.input-mini { + width: 60px; +} +.select2-container.input-small { + width: 90px; +} +.select2-container.input-medium { + width: 150px; +} +.select2-container.input-large { + width: 210px; +} +.select2-container.input-xlarge { + width: 270px; +} +.select2-container.input-xxlarge { + width: 530px; +} +.select2-container.input-default { + width: 220px; +} +.select2-container[class*="span"] { + float: none; + margin-left: 0; +} -.select2-container .select2-choice { - border: 1px solid #ccc; +.select2-container .select2-choice, +.select2-container-multi .select2-choices { height: 28px; - border-radius: 3px; line-height: 29px; + border: 1px solid #ccc; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; background: none; + background-color: #fff; filter: none; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } -.select2-container .select2-choice div { +.select2-container .select2-choice div, .select2-container .select2-choice .select2-arrow, +.select2-container.select2-container-disabled .select2-choice div, +.select2-container.select2-container-disabled .select2-choice .select2-arrow { border-left: none; background: none; filter: none; } -.select2-container-multi .select2-choices { - border: 1px solid #ccc; - border-radius: 3px; - background: none; - filter: none; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -} - -.control-group.error .select2-container-multi .select2-choices { - border-color: #B94A48; -} - -.control-group.error .select2-container .select2-choice { - border-color: #B94A48; +.control-group.error [class^="select2-choice"] { + border-color: #b94a48; } .select2-container-multi .select2-choices .select2-search-field { @@ -43,59 +65,54 @@ line-height: 27px; } +.select2-drop.select2-drop-active, .select2-container-active .select2-choice, -.select2-container-active .select2-choices, .select2-container-multi.select2-container-active .select2-choices { - border-color: rgba(82, 168, 236, 0.8); - outline: none; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6); - -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6); + border-color: rgba(82, 168, 236, 0.8); + border-color: #ccc\0; + outline: none; } -.input-append .select2-container, .input-prepend .select2-container { +.select2-container-active .select2-choice, +.select2-container-multi.select2-container-active .select2-choices { + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); +} + +[class^="input-"] .select2-container { font-size: 14px; } -.input-prepend .select2-container > a.select2-choice, -.input-prepend .select2-container-multi .select2-choices { +.input-prepend [class^="select2-choice"] { border-top-left-radius: 0; border-bottom-left-radius: 0; } -.input-append .select2-container > a, -.input-append .select2-container-multi .select2-choices { +.input-append [class^="select2-choice"] { border-top-right-radius: 0; border-bottom-right-radius: 0; } -.select2-dropdown-open .select2-choice, -.select2-dropdown-open .select2-choices { +.select2-dropdown-open [class^="select2-choice"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } -.select2-dropdown-open.select2-drop-above .select2-choice, -.select2-dropdown-open.select2-drop-above .select2-choices { +.select2-dropdown-open.select2-drop-above [class^="select2-choice"] { border-top-left-radius: 0; border-top-right-radius: 0; } -.input-prepend .select2-container > a.select2-choice > div, -.input-append .select2-container > a.select2-choice > div { - display: none; -} - -.input-append .select2-offscreen, -.input-prepend .select2-offscreen { +[class^="input-"] .select2-offscreen { position: absolute; } /** - * This stops the quick flash when a native selectbox is shown and - * then replaced by a select2 input when javascript kicks in. This can be - * removed if javascript is not present - */ + * This stops the quick flash when a native selectbox is shown and + * then replaced by a select2 input when javascript kicks in. This can be + * removed if javascript is not present + */ select.select2 { height: 28px; visibility: hidden; diff --git a/test/less_test.js b/test/less_test.js new file mode 100644 index 0000000..f98c57a --- /dev/null +++ b/test/less_test.js @@ -0,0 +1,25 @@ +exports.compileLess = function(test){ + var grunt = require('grunt'), + fs = require('fs'), + jsdiff = require('diff'), + t = test, + filename = 'select2-bootstrap.css', + patchfile = 'test/support/less.patch', + + child = grunt.util.spawn({ + cmd: 'lessc', + args: ['--verbose', 'lib/build.less', 'tmp/'+filename] + }, function() { + var readFile = function(name) { return fs.readFileSync(name, {encoding: 'utf8'}) }, + orig = readFile(filename), + generated = readFile('tmp/'+filename), + patch = readFile(patchfile), + diff = jsdiff.createPatch(filename, orig, generated); + + // Save the output for future tests. + // fs.writeFileSync(patchfile, diff); + + t.equal(patch, diff); + t.done(); + }); +}; \ No newline at end of file diff --git a/test/scss_test.js b/test/scss_test.js new file mode 100644 index 0000000..b0a4f78 --- /dev/null +++ b/test/scss_test.js @@ -0,0 +1,25 @@ +exports.compileScss = function(test){ + var grunt = require('grunt'), + fs = require('fs'), + jsdiff = require('diff'), + t = test, + filename = 'select2-bootstrap.css', + patchfile = 'test/support/scss.patch', + + child = grunt.util.spawn({ + cmd: 'grunt', + args: ['sass:test'] + }, function() { + var readFile = function(name) { return fs.readFileSync(name, {encoding: 'utf8'}) }, + orig = readFile(filename), + generated = readFile('tmp/'+filename), + patch = readFile(patchfile), + diff = jsdiff.createPatch(filename, orig, generated); + + // Save the output for future tests. + // fs.writeFileSync(patchfile, diff); + + t.equal(patch, diff); + t.done(); + }); +}; \ No newline at end of file diff --git a/test/support/less.patch b/test/support/less.patch new file mode 100644 index 0000000..1fe81fc --- /dev/null +++ b/test/support/less.patch @@ -0,0 +1,126 @@ +Index: select2-bootstrap.css +=================================================================== +--- select2-bootstrap.css ++++ select2-bootstrap.css +@@ -1,4 +1,31 @@ ++.clearfix { ++ *zoom: 1; ++} ++.clearfix:before, ++.clearfix:after { ++ display: table; ++ content: ""; ++ line-height: 0; ++} ++.clearfix:after { ++ clear: both; ++} ++.hide-text { ++ font: 0/0 a; ++ color: transparent; ++ text-shadow: none; ++ background-color: transparent; ++ border: 0; ++} ++.input-block-level { ++ display: block; ++ width: 100%; ++ min-height: 30px; ++ -webkit-box-sizing: border-box; ++ -moz-box-sizing: border-box; ++ box-sizing: border-box; ++} + /** + * Select2 Bootstrap CSS v1.2.5 + * Tested with Bootstrap v2.3.1, v2.3.2 and Select2 v3.3.2, v3.4.1 + * MIT License +@@ -30,85 +57,73 @@ + .select2-container[class*="span"] { + float: none; + margin-left: 0; + } +- + .select2-container .select2-choice, + .select2-container-multi .select2-choices { + height: 28px; + line-height: 29px; ++ border: 1px solid #cccccc; +- border: 1px solid #ccc; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; + background: none; ++ background-color: #ffffff; +- background-color: #fff; + filter: none; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + } ++.select2-container .select2-choice div, +- +-.select2-container .select2-choice div, .select2-container .select2-choice .select2-arrow, + .select2-container.select2-container-disabled .select2-choice div, ++.select2-container .select2-choice .select2-arrow, + .select2-container.select2-container-disabled .select2-choice .select2-arrow { + border-left: none; + background: none; + filter: none; + } +- + .control-group.error [class^="select2-choice"] { + border-color: #b94a48; + } +- + .select2-container-multi .select2-choices .select2-search-field { + height: 28px; + line-height: 27px; + } +- + .select2-drop.select2-drop-active, + .select2-container-active .select2-choice, + .select2-container-multi.select2-container-active .select2-choices { + border-color: rgba(82, 168, 236, 0.8); + border-color: #ccc\0; + outline: none; + } +- + .select2-container-active .select2-choice, + .select2-container-multi.select2-container-active .select2-choices { + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); + } +- + [class^="input-"] .select2-container { + font-size: 14px; + } +- + .input-prepend [class^="select2-choice"] { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } +- + .input-append [class^="select2-choice"] { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +- + .select2-dropdown-open [class^="select2-choice"] { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } +- + .select2-dropdown-open.select2-drop-above [class^="select2-choice"] { + border-top-left-radius: 0; + border-top-right-radius: 0; + } +- + [class^="input-"] .select2-offscreen { + position: absolute; + } +- + /** + * This stops the quick flash when a native selectbox is shown and + * then replaced by a select2 input when javascript kicks in. This can be + * removed if javascript is not present diff --git a/test/support/scss.patch b/test/support/scss.patch new file mode 100644 index 0000000..4b2016d --- /dev/null +++ b/test/support/scss.patch @@ -0,0 +1,4 @@ +Index: select2-bootstrap.css +=================================================================== +--- select2-bootstrap.css ++++ select2-bootstrap.css