├── Rakefile ├── Gemfile ├── lib └── chosen-sass-bootstrap-rails.rb ├── .gitignore ├── README.md ├── chosen-sass-bootstrap-rails.gemspec ├── LICENSE.txt └── vendor └── assets └── stylesheets └── chosen_bootstrap.css.scss /Rakefile: -------------------------------------------------------------------------------- 1 | require "bundler/gem_tasks" 2 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | # Specify your gem's dependencies in chosen-sass-bootstrap-rails.gemspec 4 | gemspec 5 | -------------------------------------------------------------------------------- /lib/chosen-sass-bootstrap-rails.rb: -------------------------------------------------------------------------------- 1 | module Chosen 2 | module Sass 3 | module Bootstrap 4 | module Rails 5 | class Engine < ::Rails::Engine 6 | end 7 | end 8 | end 9 | end 10 | end 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.gem 2 | *.rbc 3 | .bundle 4 | .config 5 | .yardoc 6 | Gemfile.lock 7 | InstalledFiles 8 | _yardoc 9 | coverage 10 | doc/ 11 | lib/bundler/man 12 | pkg 13 | rdoc 14 | spec/reports 15 | test/tmp 16 | test/version_tmp 17 | tmp 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Chosen::Sass::Bootstrap::Rails 2 | 3 | Just a Gemified version of choses-sass-bootstrap, by @joeylomanto. 4 | 5 | ## Installation 6 | 7 | Add this line to your application's Gemfile: 8 | 9 | gem 'chosen-sass-bootstrap-rails' 10 | 11 | And then execute: 12 | 13 | $ bundle 14 | 15 | Or install it yourself as: 16 | 17 | $ gem install chosen-sass-bootstrap-rails 18 | 19 | ## Usage 20 | 21 | 22 | Replace the `require chosen` by `require chosen_bootstrap` in your 23 | application.css and you are ready to go. 24 | 25 | 26 | ## Contributing 27 | 28 | 1. Fork it 29 | 2. Create your feature branch (`git checkout -b my-new-feature`) 30 | 3. Commit your changes (`git commit -am 'Add some feature'`) 31 | 4. Push to the branch (`git push origin my-new-feature`) 32 | 5. Create new Pull Request 33 | -------------------------------------------------------------------------------- /chosen-sass-bootstrap-rails.gemspec: -------------------------------------------------------------------------------- 1 | # -*- encoding: utf-8 -*- 2 | lib = File.expand_path('../lib', __FILE__) 3 | $LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib) 4 | 5 | Gem::Specification.new do |gem| 6 | gem.name = "chosen-sass-bootstrap-rails" 7 | gem.version = "0.0.1" 8 | gem.authors = ["Carlos Alexandro Becker"] 9 | gem.email = ["caarlos0@gmail.com"] 10 | gem.description = %q{Just a Gemified version of choses-sass-bootstrap, by @joeylomanto} 11 | gem.summary = %q{Same as description} 12 | gem.homepage = "" 13 | 14 | gem.files = `git ls-files`.split($/) 15 | gem.executables = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) } 16 | gem.test_files = gem.files.grep(%r{^(test|spec|features)/}) 17 | gem.require_paths = ["lib"] 18 | gem.add_dependency "bootstrap-sass", "~> 2.3.2.0" 19 | gem.add_dependency "sass-rails", "~> 4.0.0" 20 | gem.add_dependency "chosen-rails" 21 | end 22 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2013 Carlos Alexandro Becker 2 | 3 | MIT License 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /vendor/assets/stylesheets/chosen_bootstrap.css.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * 3 | * Chosen for Bootstrap and Sass 4 | * 5 | * Converted and maintained by @joeylomanto (http://www.twitter.com/joeylomanto). 6 | * Big thanks to the people who built these tools: 7 | * Twitter Bootstrap: @mdo, @fat 8 | * Twitter Bootstrap Sass Conversion: @johnwlong 9 | * Havest: @harvest 10 | * 11 | */ 12 | 13 | // Import the Bootstrap library 14 | // Notice: You'll need to update this path depending on your project structure 15 | // @import "../../bootstrap/lib/bootstrap"; 16 | @import "bootstrap/mixins"; 17 | @import "bootstrap/variables"; 18 | 19 | 20 | // Base 21 | // ------------------------------------------ 22 | 23 | .chzn-container { 24 | position: relative; 25 | display: inline-block; 26 | zoom: 1; 27 | *display: inline; 28 | .chzn-drop { 29 | @include border-radius(4px); 30 | @include box-shadow(0 4px 5px rgba(0, 0, 0, 0.15)); 31 | background: #fff; 32 | border: 1px solid #CCC; 33 | position: absolute; 34 | top: 29px; 35 | left: 0; 36 | z-index: 1010; 37 | margin: 4px 0 0; 38 | } 39 | } 40 | 41 | 42 | // Chosen Single 43 | // ------------------------------------------ 44 | 45 | .chzn-container-single { 46 | .chzn-single { 47 | @include border-radius(3px); 48 | @include box-shadow(#{0 0 3px #ffffff inset, 0 1px 1px rgba(0,0,0,0.1)}); 49 | @include background-clip(padding-box); 50 | @include gradient-vertical-three-colors(#ffffff, #f6f6f6, 50%, #f4f4f4); 51 | -moz-background-clip: padding; 52 | background-color: #ffffff; 53 | border: 1px solid #CCC; 54 | display: block; 55 | overflow: hidden; 56 | white-space: nowrap; 57 | position: relative; 58 | height: 28px; 59 | line-height: 29px; 60 | padding: 0 0 0 8px; 61 | color: $gray; 62 | text-decoration: none; 63 | span { 64 | @include text-overflow(); 65 | margin-right: 26px; 66 | display: block; 67 | overflow: hidden; 68 | white-space: nowrap; 69 | } 70 | abbr { 71 | display: block; 72 | position: absolute; 73 | right: 26px; 74 | top: 8px; 75 | width: 12px; 76 | height: 13px; 77 | font-size: 1px; 78 | background: url("chosen-sprite.png") right top no-repeat; 79 | &:hover { 80 | background-position: right -11px; 81 | } 82 | } 83 | div { 84 | position: absolute; 85 | right: 0; 86 | top: 0; 87 | display: block; 88 | height: 100%; 89 | width: 18px; 90 | b { 91 | background: url("chosen-sprite.png") no-repeat 0 2px; 92 | display: block; 93 | width: 100%; 94 | height: 100%; 95 | } 96 | } 97 | } 98 | .chzn-search { 99 | padding: 3px 4px; 100 | position: relative; 101 | margin: 0; 102 | white-space: nowrap; 103 | z-index: 1010; 104 | input { 105 | margin: 1px 0; 106 | padding: 4px 20px 4px 5px; 107 | outline: 0; 108 | } 109 | } 110 | .chzn-default { 111 | color: #999; 112 | } 113 | .chzn-drop { 114 | @include border-radius(3px); 115 | @include background-clip(padding-box); 116 | -moz-background-clip : padding; 117 | } 118 | &.chzn-disabled { 119 | .chzn-single abbr:hover { 120 | background-position: right top; 121 | } 122 | } 123 | } 124 | 125 | .chzn-container-single-nosearch { 126 | .chzn-search { 127 | input { 128 | position: absolute; 129 | left: -9000px; 130 | } 131 | } 132 | } 133 | 134 | 135 | // Chosen Multi 136 | // ------------------------------------------ 137 | 138 | .chzn-container-multi { 139 | .chzn-choices { 140 | @include border-radius($inputBorderRadius); 141 | @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); 142 | @include transition(#{border linear .2s, box-shadow linear .2s}); 143 | background-color: $inputBackground !important; 144 | border: 1px solid $inputBorder; 145 | cursor: text; 146 | overflow: hidden; 147 | height: auto !important; 148 | height: 1%; 149 | position: relative; 150 | display: block; 151 | padding: 0; 152 | margin: 0; 153 | font-size: $baseFontSize; 154 | line-height: $baseLineHeight; 155 | color: $gray; 156 | li { 157 | float: left; 158 | list-style: none; 159 | } 160 | .search-field { 161 | white-space: nowrap; 162 | margin: 0; 163 | padding: 0; 164 | input { 165 | @include box-shadow(none); 166 | color: $gray; 167 | background: transparent !important; 168 | border: 0 !important; 169 | font-family: sans-serif; 170 | font-size: 100%; 171 | height: 15px; 172 | padding: 5px; 173 | margin: 1px 0 2px; 174 | outline: 0; 175 | } 176 | .default { 177 | color: #999; 178 | } 179 | } 180 | .search-choice { 181 | @include border-radius(3px); 182 | @include box-shadow(#{0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05)}); 183 | @include gradient-vertical-three-colors(#ffffff, #f6f6f6, 50%, #f4f4f4); 184 | @include background-clip(padding-box); 185 | -moz-background-clip: padding; 186 | color: $gray; 187 | border: 1px solid $grayLight; 188 | line-height: 13px; 189 | padding: 3px 20px 3px 5px; 190 | margin: 3px 0 3px 5px; 191 | position: relative; 192 | cursor: default; 193 | .search-choice-close { 194 | display: block; 195 | position: absolute; 196 | right: 3px; 197 | top: 4px; 198 | width: 12px; 199 | height: 13px; 200 | font-size: 1px; 201 | background: url("chosen-sprite.png") right top no-repeat; 202 | &:hover { 203 | background-position: right -11px; 204 | } 205 | } 206 | } 207 | .search-choice.search-choice-disabled { 208 | @include gradient-vertical-three-colors(#f4f4f4, #f0f0f0, 50%, #e8e8e8); 209 | color: #666; 210 | border: 1px solid #cccccc; 211 | padding-right: 5px; 212 | } 213 | .search-choice-focus { 214 | background: #d4d4d4; 215 | .search-choice-close { 216 | background-position: right -11px; 217 | } 218 | } 219 | } 220 | } 221 | 222 | 223 | // Chosen Container 224 | // ------------------------------------------ 225 | 226 | .chzn-container { 227 | .chzn-results { 228 | margin: 0 4px 4px 0; 229 | max-height: 240px; 230 | padding: 0 0 0 4px; 231 | position: relative; 232 | overflow-x: hidden; 233 | overflow-y: auto; 234 | -webkit-overflow-scrolling: touch; 235 | li { 236 | display: none; 237 | line-height: 15px; 238 | padding: 5px 6px; 239 | margin: 0; 240 | list-style: none; 241 | em { 242 | background: #feffde; 243 | font-style: normal; 244 | } 245 | } 246 | .no-results { 247 | background: #f4f4f4; 248 | display: list-item; 249 | } 250 | .group-result { 251 | cursor: default; 252 | color: #999; 253 | font-weight: bold; 254 | } 255 | .group-option { 256 | padding-left: 15px; 257 | } 258 | .active-result { 259 | cursor: pointer; 260 | display: list-item; 261 | } 262 | .highlighted { 263 | @include gradient-vertical(#3875d7, #2a62bc); 264 | color: #fff; 265 | em { 266 | background: transparent; 267 | } 268 | } 269 | } 270 | .chzn-results-scroll { 271 | background: white; 272 | margin: 0 4px; 273 | position: absolute; 274 | text-align: center; 275 | width: 321px; /* This should by dynamic with js */ 276 | z-index: 1; 277 | span { 278 | display: inline-block; 279 | height: 17px; 280 | text-indent: -5000px; 281 | width: 9px; 282 | } 283 | } 284 | .chzn-results-scroll-down { 285 | bottom: 0; 286 | span { 287 | background: url("chosen-sprite.png") no-repeat -4px -3px; 288 | } 289 | } 290 | .chzn-results-scroll-up { 291 | span { 292 | background: url("chosen-sprite.png") no-repeat -22px -3px; 293 | } 294 | } 295 | } 296 | 297 | .chzn-container-multi { 298 | .chzn-results { 299 | margin: 4px; 300 | padding: 0; 301 | } 302 | .chzn-drop { 303 | .result-selected { 304 | display: none; 305 | } 306 | } 307 | } 308 | 309 | .chzn-container-active { 310 | .chzn-single { 311 | border: 1px solid #CCC; 312 | .chzn-drop { 313 | margin-top: -29px; 314 | } 315 | } 316 | .chzn-single-with-drop { 317 | @include box-shadow(none); 318 | border-color: #CCC; 319 | div { 320 | background: transparent; 321 | border-left: none; 322 | b { 323 | background-position: -18px 1px; 324 | } 325 | } 326 | } 327 | .chzn-choices { 328 | @include box-shadow(#{inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)}); 329 | border: 1px solid rgba(82,168,236,.8); 330 | outline: 0; 331 | outline: thin dotted \9; /* IE6-9 */ 332 | .search-field { 333 | input { 334 | color: #111 !important; 335 | } 336 | } 337 | } 338 | } 339 | 340 | 341 | // Chosen Disabled 342 | // ------------------------------------------ 343 | 344 | .chzn-disabled { 345 | @include opacity(0.5); 346 | cursor: default; 347 | .chzn-single { 348 | cursor: default; 349 | } 350 | .search-choice-close { 351 | cursor: default; 352 | } 353 | } 354 | 355 | 356 | // Chosen RTL (Right to Left) 357 | // ------------------------------------------ 358 | 359 | .chzn-rtl { 360 | text-align: right; 361 | .chzn-single { 362 | padding: 0 8px 0 0; 363 | overflow: visible; 364 | span { 365 | margin-left: 26px; 366 | margin-right: 0; 367 | direction: rtl; 368 | } 369 | div { 370 | left: 3px; 371 | right: auto; 372 | } 373 | abbr { 374 | left: 26px; 375 | right: auto; 376 | } 377 | } 378 | .chzn-choices { 379 | li { 380 | float: right; 381 | } 382 | .search-field { 383 | input { 384 | direction: rtl; 385 | } 386 | } 387 | .search-choice { 388 | padding: 3px 5px 3px 19px; 389 | margin: 3px 5px 3px 0; 390 | .search-choice-close { 391 | left: 4px; 392 | right: auto; 393 | background-position: right top; 394 | } 395 | } 396 | } 397 | .chzn-results { 398 | .group-option { 399 | padding-left: 0; 400 | padding-right: 15px; 401 | } 402 | } 403 | .chzn-search { 404 | input { 405 | padding: 4px 5px 4px 20px; 406 | direction: rtl; 407 | } 408 | } 409 | &.chzn-container-single { 410 | .chzn-results { 411 | margin: 0 0 4px 4px; 412 | padding: 0 4px 0 0; 413 | } 414 | } 415 | &.chzn-container-active { 416 | .chzn-single-with-drop { 417 | div { 418 | border-right: none; 419 | } 420 | } 421 | } 422 | } 423 | --------------------------------------------------------------------------------