source: pro-violet-viettel/www/deploy/20150304/assets/css/select2.css @ 780

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