1 | /* @group Base */ |
---|
2 | .chosen-container { |
---|
3 | position: relative; |
---|
4 | display: inline-block; |
---|
5 | vertical-align: middle; |
---|
6 | font-size: 13px; |
---|
7 | zoom: 1; |
---|
8 | *display: inline; |
---|
9 | -webkit-user-select: none; |
---|
10 | -moz-user-select: none; |
---|
11 | user-select: none; |
---|
12 | } |
---|
13 | .chosen-container .chosen-drop { |
---|
14 | position: absolute; |
---|
15 | top: 100%; |
---|
16 | left: -9999px; |
---|
17 | z-index: 1010; |
---|
18 | -webkit-box-sizing: border-box; |
---|
19 | -moz-box-sizing: border-box; |
---|
20 | box-sizing: border-box; |
---|
21 | width: 100%; |
---|
22 | border: 1px solid #aaa; |
---|
23 | border-top: 0; |
---|
24 | background: #fff; |
---|
25 | box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); |
---|
26 | } |
---|
27 | .chosen-container.chosen-with-drop .chosen-drop { |
---|
28 | left: 0; |
---|
29 | } |
---|
30 | .chosen-container a { |
---|
31 | cursor: pointer; |
---|
32 | } |
---|
33 | |
---|
34 | /* @end */ |
---|
35 | /* @group Single Chosen */ |
---|
36 | .chosen-container-single .chosen-single { |
---|
37 | position: relative; |
---|
38 | display: block; |
---|
39 | overflow: hidden; |
---|
40 | padding: 0 0 0 8px; |
---|
41 | height: 23px; |
---|
42 | border: 1px solid #aaa; |
---|
43 | border-radius: 5px; |
---|
44 | background-color: #fff; |
---|
45 | background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #ffffff), color-stop(50%, #f6f6f6), color-stop(52%, #eeeeee), color-stop(100%, #f4f4f4)); |
---|
46 | background: -webkit-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); |
---|
47 | background: -moz-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); |
---|
48 | background: -o-linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); |
---|
49 | background: linear-gradient(top, #ffffff 20%, #f6f6f6 50%, #eeeeee 52%, #f4f4f4 100%); |
---|
50 | background-clip: padding-box; |
---|
51 | box-shadow: 0 0 3px white inset, 0 1px 1px rgba(0, 0, 0, 0.1); |
---|
52 | color: #444; |
---|
53 | text-decoration: none; |
---|
54 | white-space: nowrap; |
---|
55 | line-height: 24px; |
---|
56 | } |
---|
57 | .chosen-container-single .chosen-default { |
---|
58 | color: #999; |
---|
59 | } |
---|
60 | .chosen-container-single .chosen-single span { |
---|
61 | display: block; |
---|
62 | overflow: hidden; |
---|
63 | margin-right: 26px; |
---|
64 | text-overflow: ellipsis; |
---|
65 | white-space: nowrap; |
---|
66 | } |
---|
67 | .chosen-container-single .chosen-single-with-deselect span { |
---|
68 | margin-right: 38px; |
---|
69 | } |
---|
70 | .chosen-container-single .chosen-single abbr { |
---|
71 | position: absolute; |
---|
72 | top: 6px; |
---|
73 | right: 26px; |
---|
74 | display: block; |
---|
75 | width: 12px; |
---|
76 | height: 12px; |
---|
77 | background: url('chosen-sprite.png') -42px 1px no-repeat; |
---|
78 | font-size: 1px; |
---|
79 | } |
---|
80 | .chosen-container-single .chosen-single abbr:hover { |
---|
81 | background-position: -42px -10px; |
---|
82 | } |
---|
83 | .chosen-container-single.chosen-disabled .chosen-single abbr:hover { |
---|
84 | background-position: -42px -10px; |
---|
85 | } |
---|
86 | .chosen-container-single .chosen-single div { |
---|
87 | position: absolute; |
---|
88 | top: 0; |
---|
89 | right: 0; |
---|
90 | display: block; |
---|
91 | width: 18px; |
---|
92 | height: 100%; |
---|
93 | } |
---|
94 | .chosen-container-single .chosen-single div b { |
---|
95 | display: block; |
---|
96 | width: 100%; |
---|
97 | height: 100%; |
---|
98 | background: url('chosen-sprite.png') no-repeat 0px 2px; |
---|
99 | } |
---|
100 | .chosen-container-single .chosen-search { |
---|
101 | position: relative; |
---|
102 | z-index: 1010; |
---|
103 | margin: 0; |
---|
104 | padding: 3px 4px; |
---|
105 | white-space: nowrap; |
---|
106 | } |
---|
107 | .chosen-container-single .chosen-search input[type="text"] { |
---|
108 | -webkit-box-sizing: border-box; |
---|
109 | -moz-box-sizing: border-box; |
---|
110 | box-sizing: border-box; |
---|
111 | margin: 1px 0; |
---|
112 | padding: 4px 20px 4px 5px; |
---|
113 | width: 100%; |
---|
114 | height: auto; |
---|
115 | outline: 0; |
---|
116 | border: 1px solid #aaa; |
---|
117 | background: white url('chosen-sprite.png') no-repeat 100% -20px; |
---|
118 | background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); |
---|
119 | background: url('chosen-sprite.png') no-repeat 100% -20px, -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%); |
---|
120 | background: url('chosen-sprite.png') no-repeat 100% -20px, -moz-linear-gradient(#eeeeee 1%, #ffffff 15%); |
---|
121 | background: url('chosen-sprite.png') no-repeat 100% -20px, -o-linear-gradient(#eeeeee 1%, #ffffff 15%); |
---|
122 | background: url('chosen-sprite.png') no-repeat 100% -20px, linear-gradient(#eeeeee 1%, #ffffff 15%); |
---|
123 | font-size: 1em; |
---|
124 | font-family: sans-serif; |
---|
125 | line-height: normal; |
---|
126 | border-radius: 0; |
---|
127 | } |
---|
128 | .chosen-container-single .chosen-drop { |
---|
129 | margin-top: -1px; |
---|
130 | border-radius: 0 0 4px 4px; |
---|
131 | background-clip: padding-box; |
---|
132 | } |
---|
133 | .chosen-container-single.chosen-container-single-nosearch .chosen-search { |
---|
134 | position: absolute; |
---|
135 | left: -9999px; |
---|
136 | } |
---|
137 | |
---|
138 | /* @end */ |
---|
139 | /* @group Results */ |
---|
140 | .chosen-container .chosen-results { |
---|
141 | position: relative; |
---|
142 | overflow-x: hidden; |
---|
143 | overflow-y: auto; |
---|
144 | margin: 0 4px 4px 0; |
---|
145 | padding: 0 0 0 4px; |
---|
146 | max-height: 240px; |
---|
147 | -webkit-overflow-scrolling: touch; |
---|
148 | } |
---|
149 | .chosen-container .chosen-results li { |
---|
150 | display: none; |
---|
151 | margin: 0; |
---|
152 | padding: 5px 6px; |
---|
153 | list-style: none; |
---|
154 | line-height: 15px; |
---|
155 | } |
---|
156 | .chosen-container .chosen-results li.active-result { |
---|
157 | display: list-item; |
---|
158 | cursor: pointer; |
---|
159 | } |
---|
160 | .chosen-container .chosen-results li.disabled-result { |
---|
161 | display: list-item; |
---|
162 | color: #ccc; |
---|
163 | cursor: default; |
---|
164 | } |
---|
165 | .chosen-container .chosen-results li.highlighted { |
---|
166 | background-color: #3875d7; |
---|
167 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc)); |
---|
168 | background-image: -webkit-linear-gradient(#3875d7 20%, #2a62bc 90%); |
---|
169 | background-image: -moz-linear-gradient(#3875d7 20%, #2a62bc 90%); |
---|
170 | background-image: -o-linear-gradient(#3875d7 20%, #2a62bc 90%); |
---|
171 | background-image: linear-gradient(#3875d7 20%, #2a62bc 90%); |
---|
172 | color: #fff; |
---|
173 | } |
---|
174 | .chosen-container .chosen-results li.no-results { |
---|
175 | display: list-item; |
---|
176 | background: #f4f4f4; |
---|
177 | } |
---|
178 | .chosen-container .chosen-results li.group-result { |
---|
179 | display: list-item; |
---|
180 | font-weight: bold; |
---|
181 | cursor: default; |
---|
182 | } |
---|
183 | .chosen-container .chosen-results li.group-option { |
---|
184 | padding-left: 15px; |
---|
185 | } |
---|
186 | .chosen-container .chosen-results li em { |
---|
187 | font-style: normal; |
---|
188 | text-decoration: underline; |
---|
189 | } |
---|
190 | |
---|
191 | /* @end */ |
---|
192 | /* @group Multi Chosen */ |
---|
193 | .chosen-container-multi .chosen-choices { |
---|
194 | position: relative; |
---|
195 | overflow: hidden; |
---|
196 | -webkit-box-sizing: border-box; |
---|
197 | -moz-box-sizing: border-box; |
---|
198 | box-sizing: border-box; |
---|
199 | margin: 0; |
---|
200 | padding: 0; |
---|
201 | width: 100%; |
---|
202 | height: auto !important; |
---|
203 | height: 1%; |
---|
204 | border: 1px solid #aaa; |
---|
205 | background-color: #fff; |
---|
206 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); |
---|
207 | background-image: -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%); |
---|
208 | background-image: -moz-linear-gradient(#eeeeee 1%, #ffffff 15%); |
---|
209 | background-image: -o-linear-gradient(#eeeeee 1%, #ffffff 15%); |
---|
210 | background-image: linear-gradient(#eeeeee 1%, #ffffff 15%); |
---|
211 | cursor: text; |
---|
212 | } |
---|
213 | .chosen-container-multi .chosen-choices li { |
---|
214 | float: left; |
---|
215 | list-style: none; |
---|
216 | } |
---|
217 | .chosen-container-multi .chosen-choices li.search-field { |
---|
218 | margin: 0; |
---|
219 | padding: 0; |
---|
220 | white-space: nowrap; |
---|
221 | } |
---|
222 | .chosen-container-multi .chosen-choices li.search-field input[type="text"] { |
---|
223 | margin: 1px 0; |
---|
224 | padding: 5px; |
---|
225 | height: 15px; |
---|
226 | outline: 0; |
---|
227 | border: 0 !important; |
---|
228 | background: transparent !important; |
---|
229 | box-shadow: none; |
---|
230 | color: #666; |
---|
231 | font-size: 100%; |
---|
232 | font-family: sans-serif; |
---|
233 | line-height: normal; |
---|
234 | border-radius: 0; |
---|
235 | } |
---|
236 | .chosen-container-multi .chosen-choices li.search-field .default { |
---|
237 | color: #999; |
---|
238 | } |
---|
239 | .chosen-container-multi .chosen-choices li.search-choice { |
---|
240 | position: relative; |
---|
241 | margin: 3px 0 3px 5px; |
---|
242 | padding: 3px 20px 3px 5px; |
---|
243 | border: 1px solid #aaa; |
---|
244 | border-radius: 3px; |
---|
245 | background-color: #e4e4e4; |
---|
246 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee)); |
---|
247 | background-image: -webkit-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); |
---|
248 | background-image: -moz-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); |
---|
249 | background-image: -o-linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); |
---|
250 | background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); |
---|
251 | background-clip: padding-box; |
---|
252 | box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05); |
---|
253 | color: #333; |
---|
254 | line-height: 13px; |
---|
255 | cursor: default; |
---|
256 | } |
---|
257 | .chosen-container-multi .chosen-choices li.search-choice .search-choice-close { |
---|
258 | position: absolute; |
---|
259 | top: 4px; |
---|
260 | right: 3px; |
---|
261 | display: block; |
---|
262 | width: 12px; |
---|
263 | height: 12px; |
---|
264 | background: url('chosen-sprite.png') -42px 1px no-repeat; |
---|
265 | font-size: 1px; |
---|
266 | } |
---|
267 | .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover { |
---|
268 | background-position: -42px -10px; |
---|
269 | } |
---|
270 | .chosen-container-multi .chosen-choices li.search-choice-disabled { |
---|
271 | padding-right: 5px; |
---|
272 | border: 1px solid #ccc; |
---|
273 | background-color: #e4e4e4; |
---|
274 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee)); |
---|
275 | background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); |
---|
276 | background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); |
---|
277 | background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); |
---|
278 | background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); |
---|
279 | color: #666; |
---|
280 | } |
---|
281 | .chosen-container-multi .chosen-choices li.search-choice-focus { |
---|
282 | background: #d4d4d4; |
---|
283 | } |
---|
284 | .chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close { |
---|
285 | background-position: -42px -10px; |
---|
286 | } |
---|
287 | .chosen-container-multi .chosen-results { |
---|
288 | margin: 0; |
---|
289 | padding: 0; |
---|
290 | } |
---|
291 | .chosen-container-multi .chosen-drop .result-selected { |
---|
292 | display: list-item; |
---|
293 | color: #ccc; |
---|
294 | cursor: default; |
---|
295 | } |
---|
296 | |
---|
297 | /* @end */ |
---|
298 | /* @group Active */ |
---|
299 | .chosen-container-active .chosen-single { |
---|
300 | border: 1px solid #5897fb; |
---|
301 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); |
---|
302 | } |
---|
303 | .chosen-container-active.chosen-with-drop .chosen-single { |
---|
304 | border: 1px solid #aaa; |
---|
305 | -moz-border-radius-bottomright: 0; |
---|
306 | border-bottom-right-radius: 0; |
---|
307 | -moz-border-radius-bottomleft: 0; |
---|
308 | border-bottom-left-radius: 0; |
---|
309 | background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #eeeeee), color-stop(80%, #ffffff)); |
---|
310 | background-image: -webkit-linear-gradient(#eeeeee 20%, #ffffff 80%); |
---|
311 | background-image: -moz-linear-gradient(#eeeeee 20%, #ffffff 80%); |
---|
312 | background-image: -o-linear-gradient(#eeeeee 20%, #ffffff 80%); |
---|
313 | background-image: linear-gradient(#eeeeee 20%, #ffffff 80%); |
---|
314 | box-shadow: 0 1px 0 #fff inset; |
---|
315 | } |
---|
316 | .chosen-container-active.chosen-with-drop .chosen-single div { |
---|
317 | border-left: none; |
---|
318 | background: transparent; |
---|
319 | } |
---|
320 | .chosen-container-active.chosen-with-drop .chosen-single div b { |
---|
321 | background-position: -18px 2px; |
---|
322 | } |
---|
323 | .chosen-container-active .chosen-choices { |
---|
324 | border: 1px solid #5897fb; |
---|
325 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); |
---|
326 | } |
---|
327 | .chosen-container-active .chosen-choices li.search-field input[type="text"] { |
---|
328 | color: #111 !important; |
---|
329 | } |
---|
330 | |
---|
331 | /* @end */ |
---|
332 | /* @group Disabled Support */ |
---|
333 | .chosen-disabled { |
---|
334 | opacity: 0.5 !important; |
---|
335 | cursor: default; |
---|
336 | } |
---|
337 | .chosen-disabled .chosen-single { |
---|
338 | cursor: default; |
---|
339 | } |
---|
340 | .chosen-disabled .chosen-choices .search-choice .search-choice-close { |
---|
341 | cursor: default; |
---|
342 | } |
---|
343 | |
---|
344 | /* @end */ |
---|
345 | /* @group Right to Left */ |
---|
346 | .chosen-rtl { |
---|
347 | text-align: right; |
---|
348 | } |
---|
349 | .chosen-rtl .chosen-single { |
---|
350 | overflow: visible; |
---|
351 | padding: 0 8px 0 0; |
---|
352 | } |
---|
353 | .chosen-rtl .chosen-single span { |
---|
354 | margin-right: 0; |
---|
355 | margin-left: 26px; |
---|
356 | direction: rtl; |
---|
357 | } |
---|
358 | .chosen-rtl .chosen-single-with-deselect span { |
---|
359 | margin-left: 38px; |
---|
360 | } |
---|
361 | .chosen-rtl .chosen-single div { |
---|
362 | right: auto; |
---|
363 | left: 3px; |
---|
364 | } |
---|
365 | .chosen-rtl .chosen-single abbr { |
---|
366 | right: auto; |
---|
367 | left: 26px; |
---|
368 | } |
---|
369 | .chosen-rtl .chosen-choices li { |
---|
370 | float: right; |
---|
371 | } |
---|
372 | .chosen-rtl .chosen-choices li.search-field input[type="text"] { |
---|
373 | direction: rtl; |
---|
374 | } |
---|
375 | .chosen-rtl .chosen-choices li.search-choice { |
---|
376 | margin: 3px 5px 3px 0; |
---|
377 | padding: 3px 5px 3px 19px; |
---|
378 | } |
---|
379 | .chosen-rtl .chosen-choices li.search-choice .search-choice-close { |
---|
380 | right: auto; |
---|
381 | left: 4px; |
---|
382 | } |
---|
383 | .chosen-rtl.chosen-container-single-nosearch .chosen-search, |
---|
384 | .chosen-rtl .chosen-drop { |
---|
385 | left: 9999px; |
---|
386 | } |
---|
387 | .chosen-rtl.chosen-container-single .chosen-results { |
---|
388 | margin: 0 0 4px 4px; |
---|
389 | padding: 0 4px 0 0; |
---|
390 | } |
---|
391 | .chosen-rtl .chosen-results li.group-option { |
---|
392 | padding-right: 15px; |
---|
393 | padding-left: 0; |
---|
394 | } |
---|
395 | .chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div { |
---|
396 | border-right: none; |
---|
397 | } |
---|
398 | .chosen-rtl .chosen-search input[type="text"] { |
---|
399 | padding: 4px 5px 4px 20px; |
---|
400 | background: white url('chosen-sprite.png') no-repeat -30px -20px; |
---|
401 | background: url('chosen-sprite.png') no-repeat -30px -20px, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); |
---|
402 | background: url('chosen-sprite.png') no-repeat -30px -20px, -webkit-linear-gradient(#eeeeee 1%, #ffffff 15%); |
---|
403 | background: url('chosen-sprite.png') no-repeat -30px -20px, -moz-linear-gradient(#eeeeee 1%, #ffffff 15%); |
---|
404 | background: url('chosen-sprite.png') no-repeat -30px -20px, -o-linear-gradient(#eeeeee 1%, #ffffff 15%); |
---|
405 | background: url('chosen-sprite.png') no-repeat -30px -20px, linear-gradient(#eeeeee 1%, #ffffff 15%); |
---|
406 | direction: rtl; |
---|
407 | } |
---|
408 | .chosen-rtl.chosen-container-single .chosen-single div b { |
---|
409 | background-position: 6px 2px; |
---|
410 | } |
---|
411 | .chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b { |
---|
412 | background-position: -12px 2px; |
---|
413 | } |
---|
414 | |
---|
415 | /* @end */ |
---|
416 | /* @group Retina compatibility */ |
---|
417 | @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi) { |
---|
418 | .chosen-rtl .chosen-search input[type="text"], |
---|
419 | .chosen-container-single .chosen-single abbr, |
---|
420 | .chosen-container-single .chosen-single div b, |
---|
421 | .chosen-container-single .chosen-search input[type="text"], |
---|
422 | .chosen-container-multi .chosen-choices .search-choice .search-choice-close, |
---|
423 | .chosen-container .chosen-results-scroll-down span, |
---|
424 | .chosen-container .chosen-results-scroll-up span { |
---|
425 | background-image: url('chosen-sprite@2x.png') !important; |
---|
426 | background-size: 52px 37px !important; |
---|
427 | background-repeat: no-repeat !important; |
---|
428 | } |
---|
429 | } |
---|
430 | /* @end */ |
---|