comparison hexagram-6ae12361157c/hexagram/select2.css @ 0:1407e3634bcf draft default tip

Uploaded r11 from test tool shed.
author adam-novak
date Tue, 22 Oct 2013 14:17:59 -0400
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1407e3634bcf
1 /*
2 Version: 3.4.0 Timestamp: Tue May 14 08:27:33 PDT 2013
3 */
4 .select2-container {
5 margin: 0;
6 position: relative;
7 display: inline-block;
8 /* inline-block for ie7 */
9 zoom: 1;
10 *display: inline;
11 vertical-align: middle;
12 }
13
14 .select2-container,
15 .select2-drop,
16 .select2-search,
17 .select2-search input{
18 /*
19 Force border-box so that % widths fit the parent
20 container without overlap because of margin/padding.
21
22 More Info : http://www.quirksmode.org/css/box.html
23 */
24 -webkit-box-sizing: border-box; /* webkit */
25 -khtml-box-sizing: border-box; /* konqueror */
26 -moz-box-sizing: border-box; /* firefox */
27 -ms-box-sizing: border-box; /* ie */
28 box-sizing: border-box; /* css3 */
29 }
30
31 .select2-container .select2-choice {
32 display: block;
33 height: 26px;
34 padding: 0 0 0 8px;
35 overflow: hidden;
36 position: relative;
37
38 border: 1px solid #aaa;
39 white-space: nowrap;
40 line-height: 26px;
41 color: #444;
42 text-decoration: none;
43
44 -webkit-border-radius: 4px;
45 -moz-border-radius: 4px;
46 border-radius: 4px;
47
48 -webkit-background-clip: padding-box;
49 -moz-background-clip: padding;
50 background-clip: padding-box;
51
52 -webkit-touch-callout: none;
53 -webkit-user-select: none;
54 -khtml-user-select: none;
55 -moz-user-select: none;
56 -ms-user-select: none;
57 user-select: none;
58
59 background-color: #fff;
60 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.5, white));
61 background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 50%);
62 background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 50%);
63 background-image: -o-linear-gradient(bottom, #eeeeee 0%, #ffffff 50%);
64 background-image: -ms-linear-gradient(top, #ffffff 0%, #eeeeee 50%);
65 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
66 background-image: linear-gradient(top, #ffffff 0%, #eeeeee 50%);
67 }
68
69 .select2-container.select2-drop-above .select2-choice {
70 border-bottom-color: #aaa;
71
72 -webkit-border-radius:0 0 4px 4px;
73 -moz-border-radius:0 0 4px 4px;
74 border-radius:0 0 4px 4px;
75
76 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eeeeee), color-stop(0.9, white));
77 background-image: -webkit-linear-gradient(center bottom, #eeeeee 0%, white 90%);
78 background-image: -moz-linear-gradient(center bottom, #eeeeee 0%, white 90%);
79 background-image: -o-linear-gradient(bottom, #eeeeee 0%, white 90%);
80 background-image: -ms-linear-gradient(top, #eeeeee 0%,#ffffff 90%);
81 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );
82 background-image: linear-gradient(top, #eeeeee 0%,#ffffff 90%);
83 }
84
85 .select2-container.select2-allowclear .select2-choice span {
86 margin-right: 42px;
87 }
88
89 .select2-container .select2-choice span {
90 margin-right: 26px;
91 display: block;
92 overflow: hidden;
93
94 white-space: nowrap;
95
96 -ms-text-overflow: ellipsis;
97 -o-text-overflow: ellipsis;
98 text-overflow: ellipsis;
99 }
100
101 .select2-container .select2-choice abbr {
102 display: none;
103 width: 12px;
104 height: 12px;
105 position: absolute;
106 right: 24px;
107 top: 8px;
108
109 font-size: 1px;
110 text-decoration: none;
111
112 border: 0;
113 background: url('select2.png') right top no-repeat;
114 cursor: pointer;
115 outline: 0;
116 }
117
118 .select2-container.select2-allowclear .select2-choice abbr {
119 display: inline-block;
120 }
121
122 .select2-container .select2-choice abbr:hover {
123 background-position: right -11px;
124 cursor: pointer;
125 }
126
127 .select2-drop-mask {
128 position: absolute;
129 left: 0;
130 top: 0;
131 z-index: 9998;
132 }
133
134 .select2-drop {
135 width: 100%;
136 margin-top:-1px;
137 position: absolute;
138 z-index: 9999;
139 top: 100%;
140
141 background: #fff;
142 color: #000;
143 border: 1px solid #aaa;
144 border-top: 0;
145
146 -webkit-border-radius: 0 0 4px 4px;
147 -moz-border-radius: 0 0 4px 4px;
148 border-radius: 0 0 4px 4px;
149
150 -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
151 -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
152 box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
153 }
154
155 .select2-drop-auto-width {
156 border-top: 1px solid #aaa;
157 width: auto;
158 }
159
160 .select2-drop-auto-width .select2-search {
161 padding-top: 4px;
162 }
163
164 .select2-drop.select2-drop-above {
165 margin-top: 1px;
166 border-top: 1px solid #aaa;
167 border-bottom: 0;
168
169 -webkit-border-radius: 4px 4px 0 0;
170 -moz-border-radius: 4px 4px 0 0;
171 border-radius: 4px 4px 0 0;
172
173 -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
174 -moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
175 box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
176 }
177
178 .select2-container .select2-choice div {
179 display: inline-block;
180 width: 18px;
181 height: 100%;
182 position: absolute;
183 right: 0;
184 top: 0;
185
186 border-left: 1px solid #aaa;
187 -webkit-border-radius: 0 4px 4px 0;
188 -moz-border-radius: 0 4px 4px 0;
189 border-radius: 0 4px 4px 0;
190
191 -webkit-background-clip: padding-box;
192 -moz-background-clip: padding;
193 background-clip: padding-box;
194
195 background: #ccc;
196 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
197 background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
198 background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
199 background-image: -o-linear-gradient(bottom, #ccc 0%, #eee 60%);
200 background-image: -ms-linear-gradient(top, #cccccc 0%, #eeeeee 60%);
201 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0);
202 background-image: linear-gradient(top, #cccccc 0%, #eeeeee 60%);
203 }
204
205 .select2-container .select2-choice div b {
206 display: block;
207 width: 100%;
208 height: 100%;
209 background: url('select2.png') no-repeat 0 1px;
210 }
211
212 .select2-search {
213 display: inline-block;
214 width: 100%;
215 min-height: 26px;
216 margin: 0;
217 padding-left: 4px;
218 padding-right: 4px;
219
220 position: relative;
221 z-index: 10000;
222
223 white-space: nowrap;
224 }
225
226 .select2-search input {
227 width: 100%;
228 height: auto !important;
229 min-height: 26px;
230 padding: 4px 20px 4px 5px;
231 margin: 0;
232
233 outline: 0;
234 font-family: sans-serif;
235 font-size: 1em;
236
237 border: 1px solid #aaa;
238 -webkit-border-radius: 0;
239 -moz-border-radius: 0;
240 border-radius: 0;
241
242 -webkit-box-shadow: none;
243 -moz-box-shadow: none;
244 box-shadow: none;
245
246 background: #fff url('select2.png') no-repeat 100% -22px;
247 background: url('select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
248 background: url('select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
249 background: url('select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
250 background: url('select2.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
251 background: url('select2.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
252 background: url('select2.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
253 }
254
255 .select2-drop.select2-drop-above .select2-search input {
256 margin-top: 4px;
257 }
258
259 .select2-search input.select2-active {
260 background: #fff url('select2-spinner.gif') no-repeat 100%;
261 background: url('select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee));
262 background: url('select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%);
263 background: url('select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%);
264 background: url('select2-spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%);
265 background: url('select2-spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%);
266 background: url('select2-spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%);
267 }
268
269 .select2-container-active .select2-choice,
270 .select2-container-active .select2-choices {
271 border: 1px solid #5897fb;
272 outline: none;
273
274 -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
275 -moz-box-shadow: 0 0 5px rgba(0,0,0,.3);
276 box-shadow: 0 0 5px rgba(0,0,0,.3);
277 }
278
279 .select2-dropdown-open .select2-choice {
280 border-bottom-color: transparent;
281 -webkit-box-shadow: 0 1px 0 #fff inset;
282 -moz-box-shadow: 0 1px 0 #fff inset;
283 box-shadow: 0 1px 0 #fff inset;
284
285 -webkit-border-bottom-left-radius: 0;
286 -moz-border-radius-bottomleft: 0;
287 border-bottom-left-radius: 0;
288
289 -webkit-border-bottom-right-radius: 0;
290 -moz-border-radius-bottomright: 0;
291 border-bottom-right-radius: 0;
292
293 background-color: #eee;
294 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee));
295 background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%);
296 background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%);
297 background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%);
298 background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%);
299 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
300 background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%);
301 }
302
303 .select2-dropdown-open.select2-drop-above .select2-choice,
304 .select2-dropdown-open.select2-drop-above .select2-choices {
305 border: 1px solid #5897fb;
306 border-top-color: transparent;
307
308 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, white), color-stop(0.5, #eeeeee));
309 background-image: -webkit-linear-gradient(center top, white 0%, #eeeeee 50%);
310 background-image: -moz-linear-gradient(center top, white 0%, #eeeeee 50%);
311 background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%);
312 background-image: -ms-linear-gradient(bottom, #ffffff 0%,#eeeeee 50%);
313 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
314 background-image: linear-gradient(bottom, #ffffff 0%,#eeeeee 50%);
315 }
316
317 .select2-dropdown-open .select2-choice div {
318 background: transparent;
319 border-left: none;
320 filter: none;
321 }
322 .select2-dropdown-open .select2-choice div b {
323 background-position: -18px 1px;
324 }
325
326 /* results */
327 .select2-results {
328 max-height: 200px;
329 padding: 0 0 0 4px;
330 margin: 4px 4px 4px 0;
331 position: relative;
332 overflow-x: hidden;
333 overflow-y: auto;
334 -webkit-tap-highlight-color: rgba(0,0,0,0);
335 }
336
337 .select2-results ul.select2-result-sub {
338 margin: 0;
339 padding-left: 0;
340 }
341
342 .select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px }
343 .select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px }
344 .select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px }
345 .select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 80px }
346 .select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 100px }
347 .select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 110px }
348 .select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 120px }
349
350 .select2-results li {
351 list-style: none;
352 display: list-item;
353 background-image: none;
354 }
355
356 .select2-results li.select2-result-with-children > .select2-result-label {
357 font-weight: bold;
358 }
359
360 .select2-results .select2-result-label {
361 padding: 3px 7px 4px;
362 margin: 0;
363 cursor: pointer;
364
365 min-height: 1em;
366
367 -webkit-touch-callout: none;
368 -webkit-user-select: none;
369 -khtml-user-select: none;
370 -moz-user-select: none;
371 -ms-user-select: none;
372 user-select: none;
373 }
374
375 .select2-results .select2-highlighted {
376 background: #3875d7;
377 color: #fff;
378 }
379
380 .select2-results li em {
381 background: #feffde;
382 font-style: normal;
383 }
384
385 .select2-results .select2-highlighted em {
386 background: transparent;
387 }
388
389 .select2-results .select2-highlighted ul {
390 background: white;
391 color: #000;
392 }
393
394
395 .select2-results .select2-no-results,
396 .select2-results .select2-searching,
397 .select2-results .select2-selection-limit {
398 background: #f4f4f4;
399 display: list-item;
400 }
401
402 /*
403 disabled look for disabled choices in the results dropdown
404 */
405 .select2-results .select2-disabled.select2-highlighted {
406 color: #666;
407 background: #f4f4f4;
408 display: list-item;
409 cursor: default;
410 }
411 .select2-results .select2-disabled {
412 background: #f4f4f4;
413 display: list-item;
414 cursor: default;
415 }
416
417 .select2-results .select2-selected {
418 display: none;
419 }
420
421 .select2-more-results.select2-active {
422 background: #f4f4f4 url('select2-spinner.gif') no-repeat 100%;
423 }
424
425 .select2-more-results {
426 background: #f4f4f4;
427 display: list-item;
428 }
429
430 /* disabled styles */
431
432 .select2-container.select2-container-disabled .select2-choice {
433 background-color: #f4f4f4;
434 background-image: none;
435 border: 1px solid #ddd;
436 cursor: default;
437 }
438
439 .select2-container.select2-container-disabled .select2-choice div {
440 background-color: #f4f4f4;
441 background-image: none;
442 border-left: 0;
443 }
444
445 .select2-container.select2-container-disabled .select2-choice abbr {
446 display: none;
447 }
448
449
450 /* multiselect */
451
452 .select2-container-multi .select2-choices {
453 height: auto !important;
454 height: 1%;
455 margin: 0;
456 padding: 0;
457 position: relative;
458
459 border: 1px solid #aaa;
460 cursor: text;
461 overflow: hidden;
462
463 background-color: #fff;
464 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff));
465 background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
466 background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
467 background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
468 background-image: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%);
469 background-image: linear-gradient(top, #eeeeee 1%, #ffffff 15%);
470 }
471
472 .select2-locked {
473 padding: 3px 5px 3px 5px !important;
474 }
475
476 .select2-container-multi .select2-choices {
477 min-height: 26px;
478 }
479
480 .select2-container-multi.select2-container-active .select2-choices {
481 border: 1px solid #5897fb;
482 outline: none;
483
484 -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3);
485 -moz-box-shadow: 0 0 5px rgba(0,0,0,.3);
486 box-shadow: 0 0 5px rgba(0,0,0,.3);
487 }
488 .select2-container-multi .select2-choices li {
489 float: left;
490 list-style: none;
491 }
492 .select2-container-multi .select2-choices .select2-search-field {
493 margin: 0;
494 padding: 0;
495 white-space: nowrap;
496 }
497
498 .select2-container-multi .select2-choices .select2-search-field input {
499 padding: 5px;
500 margin: 1px 0;
501
502 font-family: sans-serif;
503 font-size: 100%;
504 color: #666;
505 outline: 0;
506 border: 0;
507 -webkit-box-shadow: none;
508 -moz-box-shadow: none;
509 box-shadow: none;
510 background: transparent !important;
511 }
512
513 .select2-container-multi .select2-choices .select2-search-field input.select2-active {
514 background: #fff url('select2-spinner.gif') no-repeat 100% !important;
515 }
516
517 .select2-default {
518 color: #999 !important;
519 }
520
521 .select2-container-multi .select2-choices .select2-search-choice {
522 padding: 3px 5px 3px 18px;
523 margin: 3px 0 3px 5px;
524 position: relative;
525
526 line-height: 13px;
527 color: #333;
528 cursor: default;
529 border: 1px solid #aaaaaa;
530
531 -webkit-border-radius: 3px;
532 -moz-border-radius: 3px;
533 border-radius: 3px;
534
535 -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
536 -moz-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
537 box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05);
538
539 -webkit-background-clip: padding-box;
540 -moz-background-clip: padding;
541 background-clip: padding-box;
542
543 -webkit-touch-callout: none;
544 -webkit-user-select: none;
545 -khtml-user-select: none;
546 -moz-user-select: none;
547 -ms-user-select: none;
548 user-select: none;
549
550 background-color: #e4e4e4;
551 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0 );
552 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eeeeee));
553 background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
554 background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
555 background-image: -o-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
556 background-image: -ms-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
557 background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%);
558 }
559 .select2-container-multi .select2-choices .select2-search-choice span {
560 cursor: default;
561 }
562 .select2-container-multi .select2-choices .select2-search-choice-focus {
563 background: #d4d4d4;
564 }
565
566 .select2-search-choice-close {
567 display: block;
568 width: 12px;
569 height: 13px;
570 position: absolute;
571 right: 3px;
572 top: 4px;
573
574 font-size: 1px;
575 outline: none;
576 background: url('select2.png') right top no-repeat;
577 }
578
579 .select2-container-multi .select2-search-choice-close {
580 left: 3px;
581 }
582
583 .select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
584 background-position: right -11px;
585 }
586 .select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
587 background-position: right -11px;
588 }
589
590 /* disabled styles */
591 .select2-container-multi.select2-container-disabled .select2-choices{
592 background-color: #f4f4f4;
593 background-image: none;
594 border: 1px solid #ddd;
595 cursor: default;
596 }
597
598 .select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
599 padding: 3px 5px 3px 5px;
600 border: 1px solid #ddd;
601 background-image: none;
602 background-color: #f4f4f4;
603 }
604
605 .select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close { display: none;
606 background:none;
607 }
608 /* end multiselect */
609
610
611 .select2-result-selectable .select2-match,
612 .select2-result-unselectable .select2-match {
613 text-decoration: underline;
614 }
615
616 .select2-offscreen, .select2-offscreen:focus {
617 clip: rect(0 0 0 0);
618 width: 1px;
619 height: 1px;
620 border: 0;
621 margin: 0;
622 padding: 0;
623 overflow: hidden;
624 position: absolute;
625 outline: 0;
626 left: 0px;
627 }
628
629 .select2-display-none {
630 display: none;
631 }
632
633 .select2-measure-scrollbar {
634 position: absolute;
635 top: -10000px;
636 left: -10000px;
637 width: 100px;
638 height: 100px;
639 overflow: scroll;
640 }
641 /* Retina-ize icons */
642
643 @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) {
644 .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice div b {
645 background-image: url('select2x2.png') !important;
646 background-repeat: no-repeat !important;
647 background-size: 60px 40px !important;
648 }
649 .select2-search input {
650 background-position: 100% -21px !important;
651 }
652 }