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.
- checksums.yaml +7 -0
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/LICENSE +19 -0
- data/README.md +152 -0
- data/Rakefile +16 -0
- data/lib/chosen-rails.rb +15 -0
- data/lib/chosen-rails/engine.rb +13 -0
- data/lib/chosen-rails/engine3.rb +11 -0
- data/lib/chosen-rails/railtie.rb +6 -0
- data/lib/chosen-rails/rspec.rb +93 -0
- data/lib/chosen-rails/source_file.rb +75 -0
- data/lib/chosen-rails/tasks.rake +11 -0
- data/lib/chosen-rails/version.rb +6 -0
- data/trln-chosen-rails.gemspec +26 -0
- data/vendor/assets/images/chosen-sprite.png +0 -0
- data/vendor/assets/images/chosen-sprite@2x.png +0 -0
- data/vendor/assets/javascripts/chosen-jquery.js +3 -0
- data/vendor/assets/javascripts/chosen-prototype.js +3 -0
- data/vendor/assets/javascripts/chosen.jquery.coffee +513 -0
- data/vendor/assets/javascripts/chosen.proto.coffee +523 -0
- data/vendor/assets/javascripts/lib/abstract-chosen.coffee +384 -0
- data/vendor/assets/javascripts/lib/select-parser.coffee +56 -0
- data/vendor/assets/stylesheets/chosen-base.scss +427 -0
- data/vendor/assets/stylesheets/chosen-compass.scss +63 -0
- data/vendor/assets/stylesheets/chosen.scss +59 -0
- metadata +155 -0
@@ -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 */
|