trln-chosen-rails 1.8.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,384 @@
1
+ class AbstractChosen
2
+
3
+ constructor: (@form_field, @options={}) ->
4
+ return unless AbstractChosen.browser_is_supported()
5
+ @is_multiple = @form_field.multiple
6
+ this.set_default_text()
7
+ this.set_default_values()
8
+
9
+ this.setup()
10
+
11
+ this.set_up_html()
12
+ this.register_observers()
13
+ # instantiation done, fire ready
14
+ this.on_ready()
15
+
16
+ set_default_values: ->
17
+ @click_test_action = (evt) => this.test_active_click(evt)
18
+ @activate_action = (evt) => this.activate_field(evt)
19
+ @active_field = false
20
+ @mouse_on_container = false
21
+ @results_showing = false
22
+ @result_highlighted = null
23
+ @is_rtl = @options.rtl || /\bchosen-rtl\b/.test(@form_field.className)
24
+ @allow_single_deselect = if @options.allow_single_deselect? and @form_field.options[0]? and @form_field.options[0].text is "" then @options.allow_single_deselect else false
25
+ @disable_search_threshold = @options.disable_search_threshold || 0
26
+ @disable_search = @options.disable_search || false
27
+ @enable_split_word_search = if @options.enable_split_word_search? then @options.enable_split_word_search else true
28
+ @group_search = if @options.group_search? then @options.group_search else true
29
+ @search_contains = @options.search_contains || false
30
+ @single_backstroke_delete = if @options.single_backstroke_delete? then @options.single_backstroke_delete else true
31
+ @max_selected_options = @options.max_selected_options || Infinity
32
+ @inherit_select_classes = @options.inherit_select_classes || false
33
+ @display_selected_options = if @options.display_selected_options? then @options.display_selected_options else true
34
+ @display_disabled_options = if @options.display_disabled_options? then @options.display_disabled_options else true
35
+ @include_group_label_in_selected = @options.include_group_label_in_selected || false
36
+ @max_shown_results = @options.max_shown_results || Number.POSITIVE_INFINITY
37
+ @case_sensitive_search = @options.case_sensitive_search || false
38
+ @hide_results_on_select = if @options.hide_results_on_select? then @options.hide_results_on_select else true
39
+
40
+ set_default_text: ->
41
+ if @form_field.getAttribute("data-placeholder")
42
+ @default_text = @form_field.getAttribute("data-placeholder")
43
+ else if @is_multiple
44
+ @default_text = @options.placeholder_text_multiple || @options.placeholder_text || AbstractChosen.default_multiple_text
45
+ else
46
+ @default_text = @options.placeholder_text_single || @options.placeholder_text || AbstractChosen.default_single_text
47
+
48
+ @default_text = this.escape_html(@default_text)
49
+
50
+ @results_none_found = @form_field.getAttribute("data-no_results_text") || @options.no_results_text || AbstractChosen.default_no_result_text
51
+
52
+ choice_label: (item) ->
53
+ if @include_group_label_in_selected and item.group_label?
54
+ "<b class='group-name'>#{this.escape_html(item.group_label)}</b>#{item.html}"
55
+ else
56
+ item.html
57
+
58
+ mouse_enter: -> @mouse_on_container = true
59
+ mouse_leave: -> @mouse_on_container = false
60
+
61
+ input_focus: (evt) ->
62
+ if @is_multiple
63
+ setTimeout (=> this.container_mousedown()), 50 unless @active_field
64
+ else
65
+ @activate_field() unless @active_field
66
+
67
+ input_blur: (evt) ->
68
+ if not @mouse_on_container
69
+ @active_field = false
70
+ setTimeout (=> this.blur_test()), 100
71
+
72
+ label_click_handler: (evt) =>
73
+ if @is_multiple
74
+ this.container_mousedown(evt)
75
+ else
76
+ this.activate_field()
77
+
78
+ results_option_build: (options) ->
79
+ content = ''
80
+ shown_results = 0
81
+ for data in @results_data
82
+ data_content = ''
83
+ if data.group
84
+ data_content = this.result_add_group data
85
+ else
86
+ data_content = this.result_add_option data
87
+ if data_content != ''
88
+ shown_results++
89
+ content += data_content
90
+
91
+ # this select logic pins on an awkward flag
92
+ # we can make it better
93
+ if options?.first
94
+ if data.selected and @is_multiple
95
+ this.choice_build data
96
+ else if data.selected and not @is_multiple
97
+ this.single_set_selected_text(this.choice_label(data))
98
+
99
+ if shown_results >= @max_shown_results
100
+ break
101
+
102
+ content
103
+
104
+ result_add_option: (option) ->
105
+ return '' unless option.search_match
106
+ return '' unless this.include_option_in_results(option)
107
+
108
+ classes = []
109
+ classes.push "active-result" if !option.disabled and !(option.selected and @is_multiple)
110
+ classes.push "disabled-result" if option.disabled and !(option.selected and @is_multiple)
111
+ classes.push "result-selected" if option.selected
112
+ classes.push "group-option" if option.group_array_index?
113
+ classes.push option.classes if option.classes != ""
114
+
115
+ option_el = document.createElement("li")
116
+ option_el.className = classes.join(" ")
117
+ option_el.style.cssText = option.style if option.style
118
+ option_el.setAttribute("data-option-array-index", option.array_index)
119
+ option_el.innerHTML = option.highlighted_html or option.html
120
+ option_el.title = option.title if option.title
121
+
122
+ this.outerHTML(option_el)
123
+
124
+ result_add_group: (group) ->
125
+ return '' unless group.search_match || group.group_match
126
+ return '' unless group.active_options > 0
127
+
128
+ classes = []
129
+ classes.push "group-result"
130
+ classes.push group.classes if group.classes
131
+
132
+ group_el = document.createElement("li")
133
+ group_el.className = classes.join(" ")
134
+ group_el.innerHTML = group.highlighted_html or this.escape_html(group.label)
135
+ group_el.title = group.title if group.title
136
+
137
+ this.outerHTML(group_el)
138
+
139
+ results_update_field: ->
140
+ this.set_default_text()
141
+ this.results_reset_cleanup() if not @is_multiple
142
+ this.result_clear_highlight()
143
+ this.results_build()
144
+ this.winnow_results() if @results_showing
145
+
146
+ reset_single_select_options: () ->
147
+ for result in @results_data
148
+ result.selected = false if result.selected
149
+
150
+ results_toggle: ->
151
+ if @results_showing
152
+ this.results_hide()
153
+ else
154
+ this.results_show()
155
+
156
+ results_search: (evt) ->
157
+ if @results_showing
158
+ this.winnow_results()
159
+ else
160
+ this.results_show()
161
+
162
+ winnow_results: (options) ->
163
+ this.no_results_clear()
164
+
165
+ results = 0
166
+
167
+ query = this.get_search_text()
168
+ escapedQuery = query.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&")
169
+ regex = this.get_search_regex(escapedQuery)
170
+
171
+ for option in @results_data
172
+
173
+ option.search_match = false
174
+ results_group = null
175
+ search_match = null
176
+ option.highlighted_html = ''
177
+
178
+ if this.include_option_in_results(option)
179
+
180
+ if option.group
181
+ option.group_match = false
182
+ option.active_options = 0
183
+
184
+ if option.group_array_index? and @results_data[option.group_array_index]
185
+ results_group = @results_data[option.group_array_index]
186
+ results += 1 if results_group.active_options is 0 and results_group.search_match
187
+ results_group.active_options += 1
188
+
189
+ text = if option.group then option.label else option.text
190
+
191
+ unless option.group and not @group_search
192
+ search_match = this.search_string_match(text, regex)
193
+ option.search_match = search_match?
194
+
195
+ results += 1 if option.search_match and not option.group
196
+
197
+ if option.search_match
198
+ if query.length
199
+ startpos = search_match.index
200
+ prefix = text.slice(0, startpos)
201
+ fix = text.slice(startpos, startpos + query.length)
202
+ suffix = text.slice(startpos + query.length)
203
+ option.highlighted_html = "#{this.escape_html(prefix)}<em>#{this.escape_html(fix)}</em>#{this.escape_html(suffix)}"
204
+
205
+ results_group.group_match = true if results_group?
206
+
207
+ else if option.group_array_index? and @results_data[option.group_array_index].search_match
208
+ option.search_match = true
209
+
210
+ this.result_clear_highlight()
211
+
212
+ if results < 1 and query.length
213
+ this.update_results_content ""
214
+ this.no_results query
215
+ else
216
+ this.update_results_content this.results_option_build()
217
+ this.winnow_results_set_highlight() unless options?.skip_highlight
218
+
219
+ get_search_regex: (escaped_search_string) ->
220
+ regex_string = if @search_contains then escaped_search_string else "(^|\\s|\\b)#{escaped_search_string}[^\\s]*"
221
+ regex_string = "^#{regex_string}" unless @enable_split_word_search or @search_contains
222
+ regex_flag = if @case_sensitive_search then "" else "i"
223
+ new RegExp(regex_string, regex_flag)
224
+
225
+ search_string_match: (search_string, regex) ->
226
+ match = regex.exec(search_string)
227
+ match.index += 1 if !@search_contains && match?[1] # make up for lack of lookbehind operator in regex
228
+ match
229
+
230
+ choices_count: ->
231
+ return @selected_option_count if @selected_option_count?
232
+
233
+ @selected_option_count = 0
234
+ for option in @form_field.options
235
+ @selected_option_count += 1 if option.selected
236
+
237
+ return @selected_option_count
238
+
239
+ choices_click: (evt) ->
240
+ evt.preventDefault()
241
+ this.activate_field()
242
+ this.results_show() unless @results_showing or @is_disabled
243
+
244
+ keydown_checker: (evt) ->
245
+ stroke = evt.which ? evt.keyCode
246
+ this.search_field_scale()
247
+
248
+ this.clear_backstroke() if stroke != 8 and @pending_backstroke
249
+
250
+ switch stroke
251
+ when 8 # backspace
252
+ @backstroke_length = this.get_search_field_value().length
253
+ break
254
+ when 9 # tab
255
+ this.result_select(evt) if @results_showing and not @is_multiple
256
+ @mouse_on_container = false
257
+ break
258
+ when 13 # enter
259
+ evt.preventDefault() if @results_showing
260
+ break
261
+ when 27 # escape
262
+ evt.preventDefault() if @results_showing
263
+ break
264
+ when 32 # space
265
+ evt.preventDefault() if @disable_search
266
+ break
267
+ when 38 # up arrow
268
+ evt.preventDefault()
269
+ this.keyup_arrow()
270
+ break
271
+ when 40 # down arrow
272
+ evt.preventDefault()
273
+ this.keydown_arrow()
274
+ break
275
+
276
+ keyup_checker: (evt) ->
277
+ stroke = evt.which ? evt.keyCode
278
+ this.search_field_scale()
279
+
280
+ switch stroke
281
+ when 8 # backspace
282
+ if @is_multiple and @backstroke_length < 1 and this.choices_count() > 0
283
+ this.keydown_backstroke()
284
+ else if not @pending_backstroke
285
+ this.result_clear_highlight()
286
+ this.results_search()
287
+ break
288
+ when 13 # enter
289
+ evt.preventDefault()
290
+ this.result_select(evt) if this.results_showing
291
+ break
292
+ when 27 # escape
293
+ this.results_hide() if @results_showing
294
+ break
295
+ when 9, 16, 17, 18, 38, 40, 91
296
+ # don't do anything on these keys
297
+ else
298
+ this.results_search()
299
+ break
300
+
301
+ clipboard_event_checker: (evt) ->
302
+ return if @is_disabled
303
+ setTimeout (=> this.results_search()), 50
304
+
305
+ container_width: ->
306
+ return if @options.width? then @options.width else "#{@form_field.offsetWidth}px"
307
+
308
+ include_option_in_results: (option) ->
309
+ return false if @is_multiple and (not @display_selected_options and option.selected)
310
+ return false if not @display_disabled_options and option.disabled
311
+ return false if option.empty
312
+
313
+ return true
314
+
315
+ search_results_touchstart: (evt) ->
316
+ @touch_started = true
317
+ this.search_results_mouseover(evt)
318
+
319
+ search_results_touchmove: (evt) ->
320
+ @touch_started = false
321
+ this.search_results_mouseout(evt)
322
+
323
+ search_results_touchend: (evt) ->
324
+ this.search_results_mouseup(evt) if @touch_started
325
+
326
+ outerHTML: (element) ->
327
+ return element.outerHTML if element.outerHTML
328
+ tmp = document.createElement("div")
329
+ tmp.appendChild(element)
330
+ tmp.innerHTML
331
+
332
+ get_single_html: ->
333
+ """
334
+ <a class="chosen-single chosen-default">
335
+ <span>#{@default_text}</span>
336
+ <div><b></b></div>
337
+ </a>
338
+ <div class="chosen-drop">
339
+ <div class="chosen-search">
340
+ <input class="chosen-search-input" type="text" autocomplete="off" />
341
+ </div>
342
+ <ul class="chosen-results"></ul>
343
+ </div>
344
+ """
345
+
346
+ get_multi_html: ->
347
+ """
348
+ <ul class="chosen-choices">
349
+ <li class="search-field">
350
+ <input class="chosen-search-input" type="text" autocomplete="off" value="#{@default_text}" />
351
+ </li>
352
+ </ul>
353
+ <div class="chosen-drop">
354
+ <ul class="chosen-results"></ul>
355
+ </div>
356
+ """
357
+
358
+ get_no_results_html: (terms) ->
359
+ """
360
+ <li class="no-results">
361
+ #{@results_none_found} <span>#{this.escape_html(terms)}</span>
362
+ </li>
363
+ """
364
+
365
+ # class methods and variables ============================================================
366
+
367
+ @browser_is_supported: ->
368
+ if "Microsoft Internet Explorer" is window.navigator.appName
369
+ return document.documentMode >= 8
370
+ if /iP(od|hone)/i.test(window.navigator.userAgent) or
371
+ /IEMobile/i.test(window.navigator.userAgent) or
372
+ /Windows Phone/i.test(window.navigator.userAgent) or
373
+ /BlackBerry/i.test(window.navigator.userAgent) or
374
+ /BB10/i.test(window.navigator.userAgent) or
375
+ /Android.*Mobile/i.test(window.navigator.userAgent)
376
+ return false
377
+ return true
378
+
379
+ @default_multiple_text: "Select Some Options"
380
+ @default_single_text: "Select an Option"
381
+ @default_no_result_text: "No results match"
382
+
383
+
384
+ window.AbstractChosen = AbstractChosen
@@ -0,0 +1,56 @@
1
+ class SelectParser
2
+
3
+ constructor: ->
4
+ @options_index = 0
5
+ @parsed = []
6
+
7
+ add_node: (child) ->
8
+ if child.nodeName.toUpperCase() is "OPTGROUP"
9
+ this.add_group child
10
+ else
11
+ this.add_option child
12
+
13
+ add_group: (group) ->
14
+ group_position = @parsed.length
15
+ @parsed.push
16
+ array_index: group_position
17
+ group: true
18
+ label: group.label
19
+ title: group.title if group.title
20
+ children: 0
21
+ disabled: group.disabled,
22
+ classes: group.className
23
+ this.add_option( option, group_position, group.disabled ) for option in group.childNodes
24
+
25
+ add_option: (option, group_position, group_disabled) ->
26
+ if option.nodeName.toUpperCase() is "OPTION"
27
+ if option.text != ""
28
+ if group_position?
29
+ @parsed[group_position].children += 1
30
+ @parsed.push
31
+ array_index: @parsed.length
32
+ options_index: @options_index
33
+ value: option.value
34
+ text: option.text
35
+ html: option.innerHTML
36
+ title: option.title if option.title
37
+ selected: option.selected
38
+ disabled: if group_disabled is true then group_disabled else option.disabled
39
+ group_array_index: group_position
40
+ group_label: if group_position? then @parsed[group_position].label else null
41
+ classes: option.className
42
+ style: option.style.cssText
43
+ else
44
+ @parsed.push
45
+ array_index: @parsed.length
46
+ options_index: @options_index
47
+ empty: true
48
+ @options_index += 1
49
+
50
+ SelectParser.select_to_array = (select) ->
51
+ parser = new SelectParser()
52
+ parser.add_node( child ) for child in select.childNodes
53
+ parser.parsed
54
+
55
+
56
+ window.SelectParser = SelectParser
@@ -0,0 +1,427 @@
1
+ //= depend_on_asset "chosen-sprite.png"
2
+ //= depend_on_asset "chosen-sprite@2x.png"
3
+ $chosen-sprite: image-url('chosen-sprite.png') !default;
4
+ $chosen-sprite-retina: image-url('chosen-sprite@2x.png') !default;
5
+
6
+ /* @group Base */
7
+ .chosen-container {
8
+ position: relative;
9
+ display: inline-block;
10
+ vertical-align: middle;
11
+ font-size: 13px;
12
+ user-select: none;
13
+ * {
14
+ box-sizing: border-box;
15
+ }
16
+ .chosen-drop {
17
+ position: absolute;
18
+ top: 100%;
19
+ z-index: 1010;
20
+ width: 100%;
21
+ border: 1px solid #aaa;
22
+ border-top: 0;
23
+ background: #fff;
24
+ box-shadow: 0 4px 5px rgba(#000,.15);
25
+ clip: rect(0,0,0,0);
26
+ clip-path: inset(100% 100%);
27
+ }
28
+ &.chosen-with-drop .chosen-drop {
29
+ clip: auto;
30
+ clip-path: none;
31
+ }
32
+ a{
33
+ cursor: pointer;
34
+ }
35
+
36
+ .search-choice, .chosen-single{
37
+ .group-name{
38
+ margin-right: 4px;
39
+ overflow: hidden;
40
+ white-space: nowrap;
41
+ text-overflow: ellipsis;
42
+ font-weight: normal;
43
+ color: #999999;
44
+ &:after {
45
+ content: ":";
46
+ padding-left: 2px;
47
+ vertical-align: top;
48
+ }
49
+ }
50
+ }
51
+ }
52
+ /* @end */
53
+
54
+ /* @group Single Chosen */
55
+ .chosen-container-single{
56
+ .chosen-single {
57
+ position: relative;
58
+ display: block;
59
+ overflow: hidden;
60
+ padding: 0 0 0 8px;
61
+ height: 25px;
62
+ border: 1px solid #aaa;
63
+ border-radius: 5px;
64
+ background-color: #fff;
65
+ background: linear-gradient(#fff 20%, #f6f6f6 50%, #eee 52%, #f4f4f4 100%);
66
+ background-clip: padding-box;
67
+ box-shadow: 0 0 3px #fff inset, 0 1px 1px rgba(#000,.1);
68
+ color: #444;
69
+ text-decoration: none;
70
+ white-space: nowrap;
71
+ line-height: 24px;
72
+ }
73
+ .chosen-default {
74
+ color: #999;
75
+ }
76
+ .chosen-single span {
77
+ display: block;
78
+ overflow: hidden;
79
+ margin-right: 26px;
80
+ text-overflow: ellipsis;
81
+ white-space: nowrap;
82
+ }
83
+ .chosen-single-with-deselect span {
84
+ margin-right: 38px;
85
+ }
86
+ .chosen-single abbr {
87
+ position: absolute;
88
+ top: 6px;
89
+ right: 26px;
90
+ display: block;
91
+ width: 12px;
92
+ height: 12px;
93
+ background: $chosen-sprite -42px 1px no-repeat;
94
+ font-size: 1px;
95
+ &:hover {
96
+ background-position: -42px -10px;
97
+ }
98
+ }
99
+ &.chosen-disabled .chosen-single abbr:hover {
100
+ background-position: -42px -10px;
101
+ }
102
+ .chosen-single div {
103
+ position: absolute;
104
+ top: 0;
105
+ right: 0;
106
+ display: block;
107
+ width: 18px;
108
+ height: 100%;
109
+ b {
110
+ display: block;
111
+ width: 100%;
112
+ height: 100%;
113
+ background: $chosen-sprite no-repeat 0px 2px;
114
+ }
115
+ }
116
+ .chosen-search {
117
+ position: relative;
118
+ z-index: 1010;
119
+ margin: 0;
120
+ padding: 3px 4px;
121
+ white-space: nowrap;
122
+
123
+ input[type="text"] {
124
+ margin: 1px 0;
125
+ padding: 4px 20px 4px 5px;
126
+ width: 100%;
127
+ height: auto;
128
+ outline: 0;
129
+ border: 1px solid #aaa;
130
+ background: $chosen-sprite no-repeat 100% -20px;
131
+ font-size: 1em;
132
+ font-family: sans-serif;
133
+ line-height: normal;
134
+ border-radius: 0;
135
+ }
136
+ }
137
+ .chosen-drop {
138
+ margin-top: -1px;
139
+ border-radius: 0 0 4px 4px;
140
+ background-clip: padding-box;
141
+ }
142
+ &.chosen-container-single-nosearch .chosen-search {
143
+ position: absolute;
144
+ clip: rect(0,0,0,0);
145
+ clip-path: inset(100% 100%);
146
+ }
147
+ }
148
+ /* @end */
149
+
150
+ /* @group Results */
151
+ .chosen-container .chosen-results {
152
+ color: #444;
153
+ position: relative;
154
+ overflow-x: hidden;
155
+ overflow-y: auto;
156
+ margin: 0 4px 4px 0;
157
+ padding: 0 0 0 4px;
158
+ max-height: 240px;
159
+ -webkit-overflow-scrolling: touch;
160
+ li {
161
+ display: none;
162
+ margin: 0;
163
+ padding: 5px 6px;
164
+ list-style: none;
165
+ line-height: 15px;
166
+ word-wrap: break-word;
167
+ -webkit-touch-callout: none;
168
+ &.active-result {
169
+ display: list-item;
170
+ cursor: pointer;
171
+ }
172
+ &.disabled-result {
173
+ display: list-item;
174
+ color: #ccc;
175
+ cursor: default;
176
+ }
177
+ &.highlighted {
178
+ background-color: #3875d7;
179
+ background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
180
+ color: #fff;
181
+ }
182
+ &.no-results {
183
+ color: #777;
184
+ display: list-item;
185
+ background: #f4f4f4;
186
+ }
187
+ &.group-result {
188
+ display: list-item;
189
+ font-weight: bold;
190
+ cursor: default;
191
+ }
192
+ &.group-option {
193
+ padding-left: 15px;
194
+ }
195
+ em {
196
+ font-style: normal;
197
+ text-decoration: underline;
198
+ }
199
+ }
200
+ }
201
+ /* @end */
202
+
203
+ /* @group Multi Chosen */
204
+ .chosen-container-multi{
205
+ .chosen-choices {
206
+ position: relative;
207
+ overflow: hidden;
208
+ margin: 0;
209
+ padding: 0 5px;
210
+ width: 100%;
211
+ height: auto;
212
+ border: 1px solid #aaa;
213
+ background-color: #fff;
214
+ background-image: linear-gradient(#eee 1%, #fff 15%);
215
+ cursor: text;
216
+ }
217
+ .chosen-choices li {
218
+ float: left;
219
+ list-style: none;
220
+ &.search-field {
221
+ margin: 0;
222
+ padding: 0;
223
+ white-space: nowrap;
224
+ input[type="text"] {
225
+ margin: 1px 0;
226
+ padding: 0;
227
+ height: 25px;
228
+ outline: 0;
229
+ border: 0 !important;
230
+ background: transparent !important;
231
+ box-shadow: none;
232
+ color: #999;
233
+ font-size: 100%;
234
+ font-family: sans-serif;
235
+ line-height: normal;
236
+ border-radius: 0;
237
+ width: 25px;
238
+ }
239
+ }
240
+ &.search-choice {
241
+ position: relative;
242
+ margin: 3px 5px 3px 0;
243
+ padding: 3px 20px 3px 5px;
244
+ border: 1px solid #aaa;
245
+ max-width: 100%;
246
+ border-radius: 3px;
247
+ background-color: #eeeeee;
248
+ background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
249
+ background-size: 100% 19px;
250
+ background-repeat: repeat-x;
251
+ background-clip: padding-box;
252
+ box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(#000,.05);
253
+ color: #333;
254
+ line-height: 13px;
255
+ cursor: default;
256
+ span {
257
+ word-wrap: break-word;
258
+ }
259
+ .search-choice-close {
260
+ position: absolute;
261
+ top: 4px;
262
+ right: 3px;
263
+ display: block;
264
+ width: 12px;
265
+ height: 12px;
266
+ background: $chosen-sprite -42px 1px no-repeat;
267
+ font-size: 1px;
268
+ &:hover {
269
+ background-position: -42px -10px;
270
+ }
271
+ }
272
+ }
273
+ &.search-choice-disabled {
274
+ padding-right: 5px;
275
+ border: 1px solid #ccc;
276
+ background-color: #e4e4e4;
277
+ background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
278
+ color: #666;
279
+ }
280
+ &.search-choice-focus {
281
+ background: #d4d4d4;
282
+ .search-choice-close {
283
+ background-position: -42px -10px;
284
+ }
285
+ }
286
+ }
287
+ .chosen-results {
288
+ margin: 0;
289
+ padding: 0;
290
+ }
291
+ .chosen-drop .result-selected {
292
+ display: list-item;
293
+ color: #ccc;
294
+ cursor: default;
295
+ }
296
+ }
297
+ /* @end */
298
+
299
+ /* @group Active */
300
+ .chosen-container-active{
301
+ .chosen-single {
302
+ border: 1px solid #5897fb;
303
+ box-shadow: 0 0 5px rgba(#000,.3);
304
+ }
305
+ &.chosen-with-drop{
306
+ .chosen-single {
307
+ border: 1px solid #aaa;
308
+ -moz-border-radius-bottomright: 0;
309
+ border-bottom-right-radius: 0;
310
+ -moz-border-radius-bottomleft: 0;
311
+ border-bottom-left-radius: 0;
312
+ background-image: linear-gradient(#eee 20%, #fff 80%);
313
+ box-shadow: 0 1px 0 #fff inset;
314
+ }
315
+ .chosen-single div {
316
+ border-left: none;
317
+ background: transparent;
318
+ b {
319
+ background-position: -18px 2px;
320
+ }
321
+ }
322
+ }
323
+ .chosen-choices {
324
+ border: 1px solid #5897fb;
325
+ box-shadow: 0 0 5px rgba(#000,.3);
326
+ li.search-field input[type="text"] {
327
+ color: #222 !important;
328
+ }
329
+ }
330
+ }
331
+ /* @end */
332
+
333
+ /* @group Disabled Support */
334
+ .chosen-disabled {
335
+ opacity: 0.5 !important;
336
+ cursor: default;
337
+ .chosen-single {
338
+ cursor: default;
339
+ }
340
+ .chosen-choices .search-choice .search-choice-close {
341
+ cursor: default;
342
+ }
343
+ }
344
+ /* @end */
345
+
346
+ /* @group Right to Left */
347
+ .chosen-rtl {
348
+ text-align: right;
349
+ .chosen-single {
350
+ overflow: visible;
351
+ padding: 0 8px 0 0;
352
+ }
353
+ .chosen-single span {
354
+ margin-right: 0;
355
+ margin-left: 26px;
356
+ direction: rtl;
357
+ }
358
+ .chosen-single-with-deselect span {
359
+ margin-left: 38px;
360
+ }
361
+ .chosen-single div {
362
+ right: auto;
363
+ left: 3px;
364
+ }
365
+ .chosen-single abbr {
366
+ right: auto;
367
+ left: 26px;
368
+ }
369
+ .chosen-choices li {
370
+ float: right;
371
+ &.search-field input[type="text"] {
372
+ direction: rtl;
373
+ }
374
+ &.search-choice {
375
+ margin: 3px 5px 3px 0;
376
+ padding: 3px 5px 3px 19px;
377
+ .search-choice-close {
378
+ right: auto;
379
+ left: 4px;
380
+ }
381
+ }
382
+ }
383
+ &.chosen-container-single .chosen-results {
384
+ margin: 0 0 4px 4px;
385
+ padding: 0 4px 0 0;
386
+ }
387
+ .chosen-results li.group-option {
388
+ padding-right: 15px;
389
+ padding-left: 0;
390
+ }
391
+ &.chosen-container-active.chosen-with-drop .chosen-single div {
392
+ border-right: none;
393
+ }
394
+ .chosen-search input[type="text"] {
395
+ padding: 4px 5px 4px 20px;
396
+ background: $chosen-sprite no-repeat -30px -20px;
397
+ direction: rtl;
398
+ }
399
+ &.chosen-container-single{
400
+ .chosen-single div b {
401
+ background-position: 6px 2px;
402
+ }
403
+ &.chosen-with-drop{
404
+ .chosen-single div b {
405
+ background-position: -12px 2px;
406
+ }
407
+ }
408
+ }
409
+ }
410
+
411
+ /* @end */
412
+
413
+ /* @group Retina compatibility */
414
+ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi), only screen and (min-resolution: 1.5dppx) {
415
+ .chosen-rtl .chosen-search input[type="text"],
416
+ .chosen-container-single .chosen-single abbr,
417
+ .chosen-container-single .chosen-single div b,
418
+ .chosen-container-single .chosen-search input[type="text"],
419
+ .chosen-container-multi .chosen-choices .search-choice .search-choice-close,
420
+ .chosen-container .chosen-results-scroll-down span,
421
+ .chosen-container .chosen-results-scroll-up span {
422
+ background-image: $chosen-sprite-retina !important;
423
+ background-size: 52px 37px !important;
424
+ background-repeat: no-repeat !important;
425
+ }
426
+ }
427
+ /* @end */