diff --git a/.gitignore b/.gitignore index e65cc06..2a7940f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,8 @@ build -components +bower_components node_modules .sass-cache gh-pages -tmp \ No newline at end of file +tmp +Gemfile.lock +.ruby-version diff --git a/Gemfile b/Gemfile index 109f303..896d547 100644 --- a/Gemfile +++ b/Gemfile @@ -1,3 +1,3 @@ source "https://rubygems.org" -gem "jekyll" \ No newline at end of file +gemspec \ No newline at end of file diff --git a/Gemfile.lock b/Gemfile.lock deleted file mode 100644 index 1d0721d..0000000 --- a/Gemfile.lock +++ /dev/null @@ -1,38 +0,0 @@ -GEM - remote: https://rubygems.org/ - specs: - classifier (1.3.3) - fast-stemmer (>= 1.0.0) - colorator (0.1) - commander (4.1.3) - highline (~> 1.6.11) - directory_watcher (1.4.1) - fast-stemmer (1.0.2) - highline (1.6.19) - jekyll (1.0.3) - classifier (~> 1.3) - colorator (~> 0.1) - commander (~> 4.1.3) - directory_watcher (~> 1.4.1) - kramdown (~> 1.0.2) - liquid (~> 2.3) - maruku (~> 0.5) - pygments.rb (~> 0.5.0) - safe_yaml (~> 0.7.0) - kramdown (1.0.2) - liquid (2.5.0) - maruku (0.6.1) - syntax (>= 1.0.0) - posix-spawn (0.3.6) - pygments.rb (0.5.2) - posix-spawn (~> 0.3.6) - yajl-ruby (~> 1.1.0) - safe_yaml (0.7.1) - syntax (1.0.0) - yajl-ruby (1.1.0) - -PLATFORMS - ruby - -DEPENDENCIES - jekyll diff --git a/Gruntfile.js b/Gruntfile.js index def2415..e77e85b 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,20 +1,21 @@ module.exports = function(grunt) { - - grunt.loadNpmTasks('grunt-contrib-nodeunit'); - grunt.loadNpmTasks('grunt-contrib-sass'); + // load all grunt tasks + require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); // Project configuration. grunt.initConfig({ nodeunit: { all: ['test/*_test.js'] }, - + sass: { options: { - style: 'expanded' + 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' } @@ -24,7 +25,19 @@ module.exports = function(grunt) { '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 + } } + }); -}; \ No newline at end of file +}; diff --git a/Makefile b/Makefile index 56409a5..45f7a42 100644 --- a/Makefile +++ b/Makefile @@ -16,4 +16,5 @@ 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 8133fa4..63e4837 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,15 @@ # Select2 Bootstrap CSS -This is a bare bones stylesheet for making select2 fit in with bootstrap a bit better. +Simple CSS to make Select2 widgets fit in with Bootstrap. + +* NOTE: This is the legacy repo. You probably want the official one here: https://github.com/select2/select2-bootstrap-theme + +-------------------------------------------------- + + + +* 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. @@ -11,7 +20,23 @@ Tests are included to verify that LESS and SCSS compile down to the target CSS. ## Notable Changes -Versions prior to 1.2.0 included a default width for select2 containers. Applying the class "input-default" to you select will line the select2 container up with a default bootstrap text input. +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 diff --git a/_jekyll/_layouts/default.html b/_jekyll/_layouts/default.html index 77abfa0..401d634 100644 --- a/_jekyll/_layouts/default.html +++ b/_jekyll/_layouts/default.html @@ -2,10 +2,10 @@ - - - - + + + + @@ -183,7 +183,7 @@

Select2 version {{ page.version }}

- \ No newline at end of file + diff --git a/_jekyll/_layouts/minimal.html b/_jekyll/_layouts/minimal.html index 6cdfea8..03cf06c 100644 --- a/_jekyll/_layouts/minimal.html +++ b/_jekyll/_layouts/minimal.html @@ -2,10 +2,10 @@ - - - - + + + + @@ -15,4 +15,4 @@

Select2 Bootstrap CSS

{{ content }} - \ No newline at end of file + diff --git a/_jekyll/select2-bootstrap.css b/_jekyll/select2-bootstrap.css index 3c08d5d..e2ebdb7 100644 --- a/_jekyll/select2-bootstrap.css +++ b/_jekyll/select2-bootstrap.css @@ -1,6 +1,6 @@ /** - * Select2 Bootstrap CSS 1.0 - * Compatible with select2 3.3.2 and bootstrap 2.3.1 + * 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 { @@ -36,12 +36,12 @@ .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: white; + 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); @@ -65,10 +65,16 @@ 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); @@ -103,9 +109,9 @@ } /** - * 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; diff --git a/bower.json b/bower.json index 9e10746..e811fe9 100644 --- a/bower.json +++ b/bower.json @@ -1,13 +1,19 @@ { "name": "select2-bootstrap-css", - "version": "1.1.0", + "version": "1.2.5", + "main": [ + "select2-bootstrap.css" + ], "ignore": [ "**/.*", "node_modules", "components" ], + "dependencies": { + "select2": "^3.3.2" + }, "devDependencies": { - "bootstrap": "~2.3.1", - "sass-bootstrap": "git://github.com/jlong/sass-twitter-bootstrap.git#~2.3.1" + "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 index 4ef7a9b..4515734 100644 --- a/docs/3.3.2.html +++ b/docs/3.3.2.html @@ -2,10 +2,10 @@ - - - - + + + + @@ -185,7 +185,7 @@

Select2 version 3.3.2

- \ No newline at end of file + diff --git a/docs/3.4.1.html b/docs/3.4.1.html index b7e583a..5ac698e 100644 --- a/docs/3.4.1.html +++ b/docs/3.4.1.html @@ -2,10 +2,10 @@ - - - - + + + + @@ -185,7 +185,7 @@

Select2 version 3.4.1

- \ No newline at end of file + diff --git a/docs/index.html b/docs/index.html index 46bc7d3..80f6c67 100644 --- a/docs/index.html +++ b/docs/index.html @@ -2,10 +2,10 @@ - - - - + + + + @@ -24,4 +24,4 @@

Demos

- \ No newline at end of file + diff --git a/docs/select2-bootstrap.css b/docs/select2-bootstrap.css index 3c08d5d..e2ebdb7 100644 --- a/docs/select2-bootstrap.css +++ b/docs/select2-bootstrap.css @@ -1,6 +1,6 @@ /** - * Select2 Bootstrap CSS 1.0 - * Compatible with select2 3.3.2 and bootstrap 2.3.1 + * 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 { @@ -36,12 +36,12 @@ .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: white; + 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); @@ -65,10 +65,16 @@ 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); @@ -103,9 +109,9 @@ } /** - * 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; diff --git a/lib/build.less b/lib/build.less index cbb99d3..02168ca 100644 --- a/lib/build.less +++ b/lib/build.less @@ -1,3 +1,3 @@ -@import "../components/bootstrap/less/variables"; -@import "../components/bootstrap/less/mixins"; -@import "select2-bootstrap.less"; \ No newline at end of file +@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 index 2975986..96030d5 100644 --- a/lib/build.scss +++ b/lib/build.scss @@ -1,3 +1,3 @@ -@import "../components/sass-bootstrap/lib/variables"; -@import "../components/sass-bootstrap/lib/mixins"; -@import "select2-bootstrap.scss"; \ No newline at end of file +@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 index 318edaa..979a4cb 100644 --- a/lib/select2-bootstrap.less +++ b/lib/select2-bootstrap.less @@ -1,9 +1,9 @@ /** - * Select2 Bootstrap CSS 1.0 - * Compatible with select2 3.3.2 and bootstrap 2.3.1 + * 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; } @@ -50,10 +50,16 @@ 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)"); } @@ -86,9 +92,9 @@ } /** - * 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 { diff --git a/lib/select2-bootstrap.scss b/lib/select2-bootstrap.scss index 477767f..76ca5d4 100644 --- a/lib/select2-bootstrap.scss +++ b/lib/select2-bootstrap.scss @@ -1,9 +1,9 @@ /** - * Select2 Bootstrap CSS 1.0 - * Compatible with select2 3.3.2 and bootstrap 2.3.1 + * 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; } @@ -50,10 +50,16 @@ 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)); } @@ -86,9 +92,9 @@ } /** - * 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 { 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 index 8cb8615..f993cea 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "select2-bootstrap-css", - "version": "1.1.0", + "version": "1.2.5", "description": "simple css to make select2 widgets fit in with bootstrap", "main": "", "directories": { @@ -21,10 +21,13 @@ "license": "MIT", "readmeFilename": "README.md", "devDependencies": { - "grunt": "~0.4.1", - "grunt-contrib-nodeunit": "~0.1.2", - "diff": "~1.0.4", - "grunt-contrib-sass": "~0.3.0", - "bower": "~0.9.2" + "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 3c08d5d..e2ebdb7 100644 --- a/select2-bootstrap.css +++ b/select2-bootstrap.css @@ -1,6 +1,6 @@ /** - * Select2 Bootstrap CSS 1.0 - * Compatible with select2 3.3.2 and bootstrap 2.3.1 + * 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 { @@ -36,12 +36,12 @@ .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: white; + 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); @@ -65,10 +65,16 @@ 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); @@ -103,9 +109,9 @@ } /** - * 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; diff --git a/test/support/less.patch b/test/support/less.patch index a1ab642..1fe81fc 100644 --- a/test/support/less.patch +++ b/test/support/less.patch @@ -31,10 +31,10 @@ Index: select2-bootstrap.css + box-sizing: border-box; +} /** - * Select2 Bootstrap CSS 1.0 - * Compatible with select2 3.3.2 and bootstrap 2.3.1 + * 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,9 +57,8 @@ +@@ -30,85 +57,73 @@ .select2-container[class*="span"] { float: none; margin-left: 0; @@ -44,13 +44,14 @@ Index: select2-bootstrap.css .select2-container-multi .select2-choices { height: 28px; line-height: 29px; -@@ -40,69 +66,59 @@ ++ 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: white; +- 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); @@ -76,10 +77,16 @@ Index: select2-bootstrap.css 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); @@ -114,6 +121,6 @@ Index: select2-bootstrap.css } - /** - * 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