chosen-rails 0.12.0 → 0.13.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: a32fb00872ecb69436db4a92a31779096517bff1
-  data.tar.gz: f31803b1c81d6438de864a8d8e1a3dc03167df56
+  metadata.gz: ad66d71162136204ed73e3c857e02c9e00500e88
+  data.tar.gz: c085f626780bd1706795bfe8e6b65ae4280de151
 SHA512:
-  metadata.gz: 7d3f9452482557374dad4d67089b70eae5174b970f33102fe445903ae5f2317e2d9aa9bd61be96a2cc73cd0ac4bf31d1faa74e9799c21b0e2a1a59f8044e18f4
-  data.tar.gz: c68dfb92a883c6092dc53a1a9c098430b40d978b59c9ec3adf01e6a7c8855d0d9b27dd18a7c2c1d77b9b21e52a92e9f1ba2528e4d3927a055ad8cf31588b1be9
+  metadata.gz: 81c8187eba3ba107e464e8fb4f7f5e4dfa75da9d1bfc0e5c5e055cbb54cb8c4d2d96fc91497405415a39d9dc875165d62851a9ef675167cb8514662e7c4cc01f
+  data.tar.gz: 5a3425b486c0dc90608c7b7dc3c7bef1a95578837bc8067b941a855c796a9215c2c9425f3708567331f1b77984940c34dcdb48b7e563a1582c4613f6fc9508fb

data/README.md

@@ -64,6 +64,10 @@ If you use simple form as form builder
       input_html: { class: 'chzn-select' }
     %>
 
+### Deployment
+
+Since version 0.13.0, non-digested assets of `chosen-rails` will simply be copied from digested assets.
+
 ## Gem maintenance
 
 Maintain `chosen-rails` gem with `Rake` commands.

data/Rakefile

@@ -8,6 +8,5 @@ task 'update-chosen', 'remote', 'branch' do |task, args|
   branch = args['branch'] || 'master'
   files = SourceFile.new
   files.fetch remote, branch
-  files.convert
   files.cleanup
 end

data/chosen-rails.gemspec

@@ -18,6 +18,7 @@ Gem::Specification.new do |gem|
   gem.add_dependency 'railties', '>= 3.0'
   gem.add_dependency 'coffee-rails', '>= 3.2'
   gem.add_dependency 'sass-rails', '>= 3.2'
+  gem.add_dependency 'compass-rails', '>= 1.0'
 
   gem.add_development_dependency 'bundler', '>= 1.0'
   gem.add_development_dependency 'rails', '>= 3.0'

data/lib/chosen-rails/engine.rb

@@ -4,6 +4,10 @@ module Chosen
       config.assets.precompile += %w(
         chosen-sprite*.png
       )
+
+      rake_tasks do
+        load 'chosen-rails/tasks.rake'
+      end
     end
   end
 end

data/lib/chosen-rails/source_file.rb

@@ -9,7 +9,7 @@ class SourceFile < Thor
     self.destination_root = 'vendor/assets'
     get "#{remote}/raw/#{branch}/public/chosen-sprite.png", 'images/chosen-sprite.png'
     get "#{remote}/raw/#{branch}/public/chosen-sprite@2x.png", 'images/chosen-sprite@2x.png'
-    get "#{remote}/raw/#{branch}/public/chosen.css", 'stylesheets/chosen.css'
+    get "#{remote}/raw/#{branch}/sass/chosen.scss", 'stylesheets/chosen.css.scss'
     get "#{remote}/raw/#{branch}/coffee/lib/abstract-chosen.coffee", 'javascripts/lib/abstract-chosen.coffee'
     get "#{remote}/raw/#{branch}/coffee/lib/select-parser.coffee", 'javascripts/lib/select-parser.coffee'
     get "#{remote}/raw/#{branch}/coffee/chosen.jquery.coffee", 'javascripts/chosen.jquery.coffee'
@@ -18,21 +18,9 @@ class SourceFile < Thor
     bump_version
   end
 
-  desc 'convert css to sass file', 'convert css to sass file by sass-convert'
-  def convert
-    self.destination_root = 'vendor/assets'
-    inside destination_root do
-      run('sass-convert -F css -T sass stylesheets/chosen.css stylesheets/chosen.css.sass')
-      gsub_file 'stylesheets/chosen.css.sass', '(chosen-sprite.png)', "('chosen-sprite.png')"
-      gsub_file 'stylesheets/chosen.css.sass', '(chosen-sprite@2x.png)', "('chosen-sprite@2x.png')"
-      gsub_file 'stylesheets/chosen.css.sass', ' url', ' image-url'
-    end
-  end
-
   desc 'clean up useless files', 'clean up useless files'
   def cleanup
     self.destination_root = 'vendor/assets'
-    remove_file 'stylesheets/chosen.css'
     remove_file 'package.json'
   end
 

data/lib/chosen-rails/tasks.rake

@@ -0,0 +1,11 @@
+require 'fileutils'
+
+desc 'Create nondigest versions of all chosen digest assets'
+task 'assets:precompile' do
+  fingerprint = /\-[0-9a-f]{32}\./
+  Dir['public/assets/chosen-*'].each do |file|
+    next unless file =~ fingerprint
+    nondigest = file.sub fingerprint, '.'
+    FileUtils.cp file, nondigest, verbose: true
+  end
+end

data/lib/chosen-rails/version.rb

@@ -1,6 +1,6 @@
 module Chosen
   module Rails
-    VERSION = '0.12.0'
-    CHOSEN_VERSION = '0.12.0'
+    VERSION = '0.13.0'
+    CHOSEN_VERSION = '0.13.0'
   end
 end

data/vendor/assets/javascripts/chosen.jquery.coffee

@@ -23,20 +23,18 @@ class Chosen extends AbstractChosen
     @form_field_jq.addClass "chzn-done"
 
   set_up_html: ->
-    @container_id = if @form_field.id.length then @form_field.id.replace(/[^\w]/g, '_') else this.generate_field_id()
-    @container_id += "_chzn"
-
     container_classes = ["chzn-container"]
     container_classes.push "chzn-container-" + (if @is_multiple then "multi" else "single")
     container_classes.push @form_field.className if @inherit_select_classes && @form_field.className
     container_classes.push "chzn-rtl" if @is_rtl
 
     container_props =
-      'id': @container_id
       'class': container_classes.join ' '
       'style': "width: #{this.container_width()};"
       'title': @form_field.title
 
+    container_props.id = @form_field.id.replace(/[^\w]/g, '_') + "_chzn" if @form_field.id.length
+
     @container = ($ "<div />", container_props)
 
     if @is_multiple
@@ -152,7 +150,7 @@ class Chosen extends AbstractChosen
 
 
   test_active_click: (evt) ->
-    if $(evt.target).parents('#' + @container_id).length
+    if @container.is($(evt.target).closest('.chzn-container'))
       @active_field = true
     else
       this.close_field()
@@ -182,10 +180,6 @@ class Chosen extends AbstractChosen
 
     @parsing = false
 
-  result_add_group: (group) ->
-    group.dom_id = @container_id + "_g_" + group.array_index
-    '<li id="' + group.dom_id + '" class="group-result">' + $("<div />").text(group.label).html() + '</li>'
-
   result_do_highlight: (el) ->
     if el.length
       this.result_clear_highlight()
@@ -316,7 +310,6 @@ class Chosen extends AbstractChosen
   result_select: (evt) ->
     if @result_highlight
       high = @result_highlight
-      high_id = high.attr "id"
 
       this.result_clear_highlight()
 
@@ -332,8 +325,7 @@ class Chosen extends AbstractChosen
 
       high.addClass "result-selected"
 
-      position = high_id.substr(high_id.lastIndexOf("_") + 1 )
-      item = @results_data[position]
+      item = @results_data[ high[0].getAttribute("data-option-array-index") ]
       item.selected = true
 
       @form_field.options[item.options_index].selected = true
@@ -370,9 +362,6 @@ class Chosen extends AbstractChosen
       @form_field.options[result_data.options_index].selected = false
       @selected_option_count = null
 
-      result = $("#" + @container_id + "_o_" + pos)
-      result.removeClass("result-selected").addClass("active-result").show()
-
       this.result_clear_highlight()
       this.winnow_results() if @results_showing
 
@@ -487,17 +476,11 @@ class Chosen extends AbstractChosen
       w = div.width() + 25
       div.remove()
 
-      @f_width = @container.outerWidth() unless @f_width
+      f_width = @container.outerWidth()
 
-      if( w > @f_width-10 )
-        w = @f_width - 10
+      if( w > f_width - 10 )
+        w = f_width - 10
 
       @search_field.css({'width': w + 'px'})
-  
-  generate_random_id: ->
-    string = "sel" + this.generate_random_char() + this.generate_random_char() + this.generate_random_char()
-    while $("#" + string).length > 0
-      string += this.generate_random_char()
-    string
 
 root.Chosen = Chosen

data/vendor/assets/javascripts/chosen.proto.coffee

@@ -18,19 +18,18 @@ class Chosen extends AbstractChosen
     @no_results_temp = new Template('<li class="no-results">' + @results_none_found + ' "<span>#{terms}</span>"</li>')
 
   set_up_html: ->
-    @container_id = @form_field.identify().replace(/[^\w]/g, '_') + "_chzn"
-
     container_classes = ["chzn-container"]
     container_classes.push "chzn-container-" + (if @is_multiple then "multi" else "single")
     container_classes.push @form_field.className if @inherit_select_classes && @form_field.className
     container_classes.push "chzn-rtl" if @is_rtl
 
     container_props =
-      'id': @container_id
       'class': container_classes.join ' '
       'style': "width: #{this.container_width()};"
       'title': @form_field.title
 
+    container_props.id = @form_field.id.replace(/[^\w]/g, '_') + "_chzn" if @form_field.id.length
+
     @container = if @is_multiple then new Element('div', container_props).update( @multi_temp.evaluate({ "default": @default_text}) ) else new Element('div', container_props).update( @single_temp.evaluate({ "default":@default_text }) )
 
     @form_field.hide().insert({ after: @container })
@@ -140,7 +139,7 @@ class Chosen extends AbstractChosen
     @search_field.focus()
 
   test_active_click: (evt) ->
-    if evt.target.up('#' + @container_id)
+    if evt.target.up('.chzn-container') is @container
       @active_field = true
     else
       this.close_field()
@@ -170,10 +169,6 @@ class Chosen extends AbstractChosen
 
     @parsing = false
 
-  result_add_group: (group) ->
-    group.dom_id = @container_id + "_g_" + group.array_index
-    '<li id="' + group.dom_id + '" class="group-result">' + group.label.escapeHTML() + '</li>'
-
   result_do_highlight: (el) ->
       this.result_clear_highlight()
 
@@ -318,8 +313,7 @@ class Chosen extends AbstractChosen
       
       high.addClassName("result-selected")
 
-      position = high.id.substr(high.id.lastIndexOf("_") + 1 )
-      item = @results_data[position]
+      item = @results_data[ high.getAttribute("data-option-array-index") ]
       item.selected = true
 
       @form_field.options[item.options_index].selected = true
@@ -357,9 +351,6 @@ class Chosen extends AbstractChosen
       @form_field.options[result_data.options_index].selected = false
       @selected_option_count = null
 
-      result = $(@container_id + "_o_" + pos)
-      result.removeClassName("result-selected").addClassName("active-result").show()
-
       this.result_clear_highlight()
       this.winnow_results() if @results_showing
 
@@ -476,10 +467,10 @@ class Chosen extends AbstractChosen
       w = Element.measure(div, 'width') + 25
       div.remove()
 
-      @f_width = @container.getWidth() unless @f_width
+      f_width = @container.getWidth()
 
-      if( w > @f_width-10 )
-        w = @f_width - 10
+      if( w > f_width-10 )
+        w = f_width - 10
 
       @search_field.setStyle({'width': w + 'px'})
 

data/vendor/assets/javascripts/lib/abstract-chosen.coffee

@@ -27,8 +27,9 @@ class AbstractChosen
     @disable_search_threshold = @options.disable_search_threshold || 0
     @disable_search = @options.disable_search || false
     @enable_split_word_search = if @options.enable_split_word_search? then @options.enable_split_word_search else true
+    @group_search = if @options.group_search? then @options.group_search else true
     @search_contains = @options.search_contains || false
-    @single_backstroke_delete = @options.single_backstroke_delete || false
+    @single_backstroke_delete = if @options.single_backstroke_delete? then @options.single_backstroke_delete else true
     @max_selected_options = @options.max_selected_options || Infinity
     @inherit_select_classes = @options.inherit_select_classes || false
 
@@ -50,7 +51,7 @@ class AbstractChosen
       setTimeout (=> this.container_mousedown()), 50 unless @active_field
     else
       @activate_field() unless @active_field
-  
+
   input_blur: (evt) ->
     if not @mouse_on_container
       @active_field = false
@@ -59,7 +60,7 @@ class AbstractChosen
   results_option_build: (options) ->
     content = ''
     for data in @results_data
-      if data.group && data.search_match
+      if data.group && (data.search_match || data.group_match)
         content += this.result_add_group data
       else if !data.empty && data.search_match
         content += this.result_add_option data
@@ -75,8 +76,6 @@ class AbstractChosen
     content
 
   result_add_option: (option) ->
-    option.dom_id = @container_id + "_o_" + option.array_index
-
     classes = []
     classes.push "active-result" if !option.disabled and !(option.selected and @is_multiple)
     classes.push "disabled-result" if option.disabled and !(option.selected and @is_multiple)
@@ -86,7 +85,10 @@ class AbstractChosen
 
     style = if option.style.cssText != "" then " style=\"#{option.style}\"" else ""
 
-    """<li id="#{option.dom_id}" class="#{classes.join(' ')}"#{style}>#{option.search_text}</li>"""
+    """<li class="#{classes.join(' ')}"#{style} data-option-array-index="#{option.array_index}">#{option.search_text}</li>"""
+
+  result_add_group: (group) ->
+    """<li class="group-result">#{group.search_text}</li>"""
 
   results_update_field: ->
     this.set_default_text()
@@ -94,6 +96,7 @@ class AbstractChosen
     this.result_clear_highlight()
     @result_single_selected = null
     this.results_build()
+    this.winnow_results() if @results_showing
 
   results_toggle: ->
     if @results_showing
@@ -119,42 +122,46 @@ class AbstractChosen
 
     for option in @results_data
       if not option.empty
-        if option.group
-          option.search_match = false
-        else
+
+        option.group_match = false if option.group
+
+        unless option.group and not @group_search
           option.search_match = false
 
-          if regex.test option.html
-            option.search_match = true
-            results += 1
-          else if @enable_split_word_search and (option.html.indexOf(" ") >= 0 or option.html.indexOf("[") == 0)
-            #TODO: replace this substitution of /\[\]/ with a list of characters to skip.
-            parts = option.html.replace(/\[|\]/g, "").split(" ")
-            if parts.length
-              for part in parts
-                if regex.test part
-                  option.search_match = true
-                  results += 1
+          option.search_text = if option.group then option.label else option.html
+          option.search_match = this.search_string_match(option.search_text, regex)
+          results += 1 if option.search_match
 
           if option.search_match
             if searchText.length
-              startpos = option.html.search zregex
-              text = option.html.substr(0, startpos + searchText.length) + '</em>' + option.html.substr(startpos + searchText.length)
-              text = text.substr(0, startpos) + '<em>' + text.substr(startpos)
-            else
-              text = option.html
-
-            option.search_text = text
+              startpos = option.search_text.search zregex
+              text = option.search_text.substr(0, startpos + searchText.length) + '</em>' + option.search_text.substr(startpos + searchText.length)
+              option.search_text = text.substr(0, startpos) + '<em>' + text.substr(startpos)
 
-            @results_data[option.group_array_index].search_match = true if option.group_array_index?
+            @results_data[option.group_array_index].group_match = true if option.group_array_index?
+          
+          else if option.group_array_index? and @results_data[option.group_array_index].search_match
+            option.search_match = true
 
     if results < 1 and searchText.length
       this.update_results_content ""
+      this.result_clear_highlight()
       this.no_results searchText
     else
       this.update_results_content this.results_option_build()
       this.winnow_results_set_highlight()
 
+  search_string_match: (search_string, regex) ->
+    if regex.test search_string
+      return true
+    else if @enable_split_word_search and (search_string.indexOf(" ") >= 0 or search_string.indexOf("[") == 0)
+      #TODO: replace this substitution of /\[\]/ with a list of characters to skip.
+      parts = search_string.replace(/\[|\]/g, "").split(" ")
+      if parts.length
+        for part in parts
+          if regex.test part
+            return true
+
   choices_count: ->
     return @selected_option_count if @selected_option_count?
 
@@ -189,16 +196,6 @@ class AbstractChosen
         # don't do anything on these keys
       else this.results_search()
 
-  generate_field_id: ->
-    new_id = this.generate_random_id()
-    @form_field.id = new_id
-    new_id
-  
-  generate_random_char: ->
-    chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"
-    rand = Math.floor(Math.random() * chars.length)
-    newchar = chars.substring rand, rand+1
-
   container_width: ->
     return if @options.width? then @options.width else "#{@form_field.offsetWidth}px"
 
@@ -213,5 +210,4 @@ class AbstractChosen
   @default_single_text: "Select an Option"
   @default_no_result_text: "No results match"
 
-
 root.AbstractChosen = AbstractChosen

data/vendor/assets/javascripts/lib/select-parser.coffee

@@ -1,5 +1,5 @@
 class SelectParser
-  
+
   constructor: ->
     @options_index = 0
     @parsed = []
@@ -15,7 +15,7 @@ class SelectParser
     @parsed.push
       array_index: group_position
       group: true
-      label: group.label
+      label: this.escapeExpression(group.label)
       children: 0
       disabled: group.disabled
     this.add_option( option, group_position, group.disabled ) for option in group.childNodes
@@ -43,6 +43,21 @@ class SelectParser
           empty: true
       @options_index += 1
 
+  escapeExpression: (text) ->
+    if not text? or text is false
+      return ""
+    unless /[\&\<\>\"\'\`]/.test(text)
+      return text
+    map =
+      "<": "&lt;"
+      ">": "&gt;"
+      '"': "&quot;"
+      "'": "&#x27;"
+      "`": "&#x60;"
+    unsafe_chars = /&(?!\w+;)|[\<\>\"\'\`]/g
+    text.replace unsafe_chars, (chr) ->
+      map[chr] || "&amp;"
+
 SelectParser.select_to_array = (select) ->
   parser = new SelectParser()
   parser.add_node( child ) for child in select.childNodes

data/vendor/assets/stylesheets/chosen.css.scss

@@ -0,0 +1,407 @@
+@import "compass/css3/box-sizing";
+@import "compass/css3/images";
+@import "compass/css3/user-interface";
+
+$chosen-sprite: image-url('chosen-sprite.png');
+$chosen-sprite-retina: image-url('chosen-sprite@2x.png');
+
+/* @group Base */
+.chzn-container {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 13px;
+  zoom: 1;
+  *display: inline;
+  @include user-select(none);
+  .chzn-drop {
+    position: absolute;
+    top: 100%;
+    left: -9999px;
+    z-index: 1010;
+    @include box-sizing(border-box);
+    width: 100%;
+    border: 1px solid #aaa;
+    border-top: 0;
+    background: #fff;
+    box-shadow: 0 4px 5px rgba(#000,.15);
+  }
+  &.chzn-with-drop .chzn-drop {
+    left: 0;
+  }
+}
+/* @end */
+
+/* @group Single Chosen */
+.chzn-container-single{
+  .chzn-single {
+    position: relative;
+    display: block;
+    overflow: hidden;
+    padding: 0 0 0 8px;
+    height: 23px;
+    border: 1px solid #aaa;
+    border-radius: 5px;
+    background-color: #fff;
+    @include background(linear-gradient(top, #fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%));
+    background-clip: padding-box;
+    box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(#000,.1);
+    color: #444;
+    text-decoration: none;
+    white-space: nowrap;
+    line-height: 24px;
+  }
+  .chzn-default {
+    color: #999;
+  }
+  .chzn-single span {
+    display: block;
+    overflow: hidden;
+    margin-right: 26px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .chzn-single-with-deselect span {
+    margin-right: 38px;
+  }
+  .chzn-single abbr {
+    position: absolute;
+    top: 6px;
+    right: 26px;
+    display: block;
+    width: 12px;
+    height: 12px;
+    background: $chosen-sprite -42px 1px no-repeat;
+    font-size: 1px;
+    &:hover {
+      background-position: -42px -10px;
+    }
+  }
+  &.chzn-disabled .chzn-single abbr:hover {
+    background-position: -42px -10px;
+  }
+  .chzn-single div {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: block;
+    width: 18px;
+    height: 100%;
+    b {
+      display: block;
+      width: 100%;
+      height: 100%;
+      background: $chosen-sprite no-repeat 0px 2px;
+    }
+  }
+  .chzn-search {
+    position: relative;
+    z-index: 1010;
+    margin: 0;
+    padding: 3px 4px;
+    white-space: nowrap;
+    input[type="text"] {
+      @include box-sizing(border-box);
+      margin: 1px 0;
+      padding: 4px 20px 4px 5px;
+      width: 100%;
+      height: auto;
+      outline: 0;
+      border: 1px solid #aaa;
+      background: #fff $chosen-sprite no-repeat 100% -20px;
+      @include background($chosen-sprite no-repeat 100% -20px, linear-gradient(#eee 1%, #fff 15%));
+      font-size: 1em;
+      font-family: sans-serif;
+      line-height: normal;
+      border-radius: 0;
+    }
+  }
+  .chzn-drop {
+    margin-top: -1px;
+    border-radius: 0 0 4px 4px;
+    background-clip: padding-box;
+  }
+  &.chzn-container-single-nosearch .chzn-search {
+    position: absolute;
+    left: -9999px;
+  }
+}
+/* @end */
+
+/* @group Results */
+.chzn-container .chzn-results {
+  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  margin: 0 4px 4px 0;
+  padding: 0 0 0 4px;
+  max-height: 240px;
+  -webkit-overflow-scrolling: touch;
+  li {
+    display: none;
+    margin: 0;
+    padding: 5px 6px;
+    list-style: none;
+    line-height: 15px;
+    &.active-result {
+      display: list-item;
+      cursor: pointer;
+    }
+    &.disabled-result {
+      display: list-item;
+      color: #ccc;
+      cursor: default;
+    }
+    &.highlighted {
+      background-color: #3875d7;
+      @include background-image(linear-gradient(#3875d7 20%, #2a62bc 90%));
+      color: #fff;
+    }
+    &.no-results {
+      display: list-item;
+      background: #f4f4f4;
+    }
+    &.group-result {
+      display: list-item;
+      font-weight: bold;
+      cursor: default;
+    }
+    &.group-option {
+      padding-left: 15px;
+    }
+    em {
+      font-style: normal;
+      text-decoration: underline;
+    }
+  }
+}
+/* @end */
+
+/* @group Multi Chosen */
+.chzn-container-multi{
+  .chzn-choices {
+    position: relative;
+    overflow: hidden;
+    @include box-sizing(border-box);
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: auto !important;
+    height: 1%;
+    border: 1px solid #aaa;
+    background-color: #fff;
+    @include background-image(linear-gradient(#eee 1%, #fff 15%));
+    cursor: text;
+  }
+  .chzn-choices li {
+    float: left;
+    list-style: none;
+    &.search-field {
+      margin: 0;
+      padding: 0;
+      white-space: nowrap;
+      input[type="text"] {
+        margin: 1px 0;
+        padding: 5px;
+        height: 15px;
+        outline: 0;
+        border: 0 !important;
+        background: transparent !important;
+        box-shadow: none;
+        color: #666;
+        font-size: 100%;
+        font-family: sans-serif;
+        line-height: normal;
+        border-radius: 0;
+      }
+      .default {
+        color: #999;
+      }
+    }
+    &.search-choice {
+      position: relative;
+      margin: 3px 0 3px 5px;
+      padding: 3px 20px 3px 5px;
+      border: 1px solid #aaa;
+      border-radius: 3px;
+      background-color: #e4e4e4;
+      @include background-image(linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%));
+      background-clip: padding-box; 
+      box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(#000,.05);
+      color: #333;
+      line-height: 13px;
+      cursor: default;
+      .search-choice-close {
+        position: absolute;
+        top: 4px;
+        right: 3px;
+        display: block;
+        width: 12px;
+        height: 12px;
+        background: $chosen-sprite -42px 1px no-repeat;
+        font-size: 1px;
+        &:hover {
+          background-position: -42px -10px;
+        }
+      }
+    }
+    &.search-choice-disabled {
+      padding-right: 5px;
+      border: 1px solid #ccc;
+      background-color: #e4e4e4;
+      @include background-image(linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%));
+      color: #666;
+    }
+    &.search-choice-focus {
+      background: #d4d4d4;
+      .search-choice-close {
+        background-position: -42px -10px;
+      }
+    }
+  }
+  .chzn-results {
+    margin: 0;
+    padding: 0;
+  }
+  .chzn-drop .result-selected {
+    display: list-item;
+    color: #ccc;
+    cursor: default;
+  }
+}
+/* @end */
+
+/* @group Active  */
+.chzn-container-active{
+  .chzn-single {
+    border: 1px solid #5897fb;
+    box-shadow: 0 0 5px rgba(#000,.3);
+  }
+  &.chzn-with-drop{
+    .chzn-single {
+      border: 1px solid #aaa;
+      -moz-border-radius-bottomright: 0;
+      border-bottom-right-radius: 0;
+      -moz-border-radius-bottomleft: 0;
+      border-bottom-left-radius: 0;
+      @include background-image(linear-gradient(#eee 20%, #fff 80%));
+      box-shadow: 0 1px 0 #fff inset;
+    }
+    .chzn-single div {
+      border-left: none;
+      background: transparent;
+      b {
+        background-position: -18px 2px;
+      }
+    }
+  }
+  .chzn-choices {
+    border: 1px solid #5897fb;
+    box-shadow: 0 0 5px rgba(#000,.3);
+    li.search-field input[type="text"] {
+      color: #111 !important;
+    }
+  }
+}
+/* @end */
+
+/* @group Disabled Support */
+.chzn-disabled {
+  opacity: 0.5 !important;
+  cursor: default;
+  .chzn-single {
+    cursor: default;
+  }
+  .chzn-choices .search-choice .search-choice-close {
+    cursor: default;
+  }
+}
+/* @end */
+
+/* @group Right to Left */
+.chzn-rtl {
+  text-align: right;
+  .chzn-single {
+    overflow: visible;
+    padding: 0 8px 0 0;
+  }
+  .chzn-single span {
+    margin-right: 0;
+    margin-left: 26px;
+    direction: rtl;
+  }
+  .chzn-single-with-deselect span {
+    margin-left: 38px;
+  }
+  .chzn-single div {
+    right: auto;
+    left: 3px;
+  }
+  .chzn-single abbr {
+    right: auto;
+    left: 26px;
+  }
+  .chzn-choices li {
+    float: right;
+    &.search-field input[type="text"] {
+      direction: rtl;
+    }
+    &.search-choice {
+      margin: 3px 5px 3px 0;
+      padding: 3px 5px 3px 19px;
+      .search-choice-close {
+        right: auto;
+        left: 4px;
+      }
+    }
+  }
+  &.chzn-container-single-nosearch .chzn-search,
+  .chzn-drop {
+    left: 9999px;
+  }
+  &.chzn-container-single .chzn-results {
+    margin: 0 0 4px 4px;
+    padding: 0 4px 0 0;
+  }
+  .chzn-results li.group-option {
+    padding-right: 15px;
+    padding-left: 0;
+  }
+  &.chzn-container-active.chzn-with-drop .chzn-single div {
+    border-right: none;
+  }
+  .chzn-search input[type="text"] {
+    padding: 4px 5px 4px 20px;
+    background: #fff $chosen-sprite no-repeat -30px -20px;
+    @include background($chosen-sprite no-repeat -30px -20px, linear-gradient(#eee 1%, #fff 15%));
+    direction: rtl;
+  }
+  &.chzn-container-single{
+    .chzn-single div b {
+      background-position: 6px 2px;
+    }
+    &.chzn-with-drop{
+      .chzn-single div b {
+        background-position: -12px 2px;
+      }
+    }
+  }
+}
+
+/* @end */
+
+/* @group Retina compatibility */
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi)  {
+  .chzn-rtl .chzn-search input[type="text"],
+  .chzn-container-single .chzn-single abbr,
+  .chzn-container-single .chzn-single div b,
+  .chzn-container-single .chzn-search input[type="text"],
+  .chzn-container-multi .chzn-choices .search-choice .search-choice-close,
+  .chzn-container .chzn-results-scroll-down span,
+  .chzn-container .chzn-results-scroll-up span {
+    background-image: $chosen-sprite-retina !important;
+    background-size: 52px 37px !important;
+    background-repeat: no-repeat !important;
+  }
+}
+/* @end */

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: chosen-rails
 version: !ruby/object:Gem::Version
-  version: 0.12.0
+  version: 0.13.0
 platform: ruby
 authors:
 - Tse-Ching Ho
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-07-11 00:00:00.000000000 Z
+date: 2013-07-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -52,6 +52,20 @@ dependencies:
     - - '>='
       - !ruby/object:Gem::Version
         version: '3.2'
+- !ruby/object:Gem::Dependency
+  name: compass-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '1.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '1.0'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -113,6 +127,7 @@ files:
 - lib/chosen-rails/engine3.rb
 - lib/chosen-rails/railtie.rb
 - lib/chosen-rails/source_file.rb
+- lib/chosen-rails/tasks.rake
 - lib/chosen-rails/version.rb
 - vendor/assets/images/chosen-sprite.png
 - vendor/assets/images/chosen-sprite@2x.png
@@ -123,6 +138,7 @@ files:
 - vendor/assets/javascripts/lib/abstract-chosen.coffee
 - vendor/assets/javascripts/lib/select-parser.coffee
 - vendor/assets/stylesheets/chosen.css.sass
+- vendor/assets/stylesheets/chosen.css.scss
 homepage: https://github.com/tsechingho/chosen-rails
 licenses: []
 metadata: {}