source: main/trunk/model-interfaces-dev/heritage-nz/iframe/heritage-nz-dl_files/select2.css@ 32796

Last change on this file since 32796 was 32796, checked in by davidb, 5 years ago

Initial set of files to provide look and feel of Heritage NZ site, plus SVN clickable map in an iframe

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