2 Version: 3.4.8 Timestamp: Thu May 1 09:50:32 EDT 2014
4 .roo-select2-container {
7 /*display: inline-block;*/
8 /* inline-block for ie7 */
13 vertical-align: middle;
16 .roo-select2-container,
19 .roo-select2-search input {
21 Force border-box so that % widths fit the parent
22 container without overlap because of margin/padding.
23 More Info : http://www.quirksmode.org/css/box.html
25 -webkit-box-sizing: border-box; /* webkit */
26 -moz-box-sizing: border-box; /* firefox */
27 box-sizing: border-box; /* css3 */
30 .roo-select2-container .roo-select2-choice {
37 border: 1px solid $gray-light; //#aaa;
40 color: $gray-dark; //#444;
41 text-decoration: none;
45 background-clip: padding-box;
47 -webkit-touch-callout: none;
48 -webkit-user-select: none;
49 -moz-user-select: none;
50 -ms-user-select: none;
53 background-color: $body-bg;
54 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, $gray-lighter), color-stop(0.5, $body-bg));
55 background-image: -webkit-linear-gradient(center bottom, $gray-lighter 0%, $body-bg 50%);
56 background-image: -moz-linear-gradient(center bottom, $gray-lighter 0%, $body-bg 50%);
57 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '$body-bg', endColorstr = '$gray-lighter', GradientType = 0);
58 background-image: linear-gradient(to top, $gray-lighter 0%, $body-bg 50%);
61 .roo-select2-container.roo-select2-drop-above .roo-select2-choice {
62 border-bottom-color: $gray-light; //#aaa;
64 border-radius: 0 0 4px 4px;
66 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, $gray-lighter), color-stop(0.9, $body-bg));
67 background-image: -webkit-linear-gradient(center bottom, $gray-lighter 0%, $body-bg 90%);
68 background-image: -moz-linear-gradient(center bottom, $gray-lighter 0%, $body-bg 90%);
69 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$body-bg', endColorstr='$gray-lighter', GradientType=0);
70 background-image: linear-gradient(to bottom, $gray-lighter 0%, $body-bg 90%);
73 .roo-select2-container.roo-select2-allowclear .roo-select2-choice .roo-select2-chosen {
77 .roo-select2-container .roo-select2-choice > .roo-select2-chosen {
84 text-overflow: ellipsis;
89 .roo-select2-container .roo-select2-choice abbr {
98 text-decoration: none;
101 background: url('#{$bootstrap-image-path}/select2/select2.png') right top no-repeat;
106 .roo-select2-container.roo-select2-allowclear .roo-select2-choice abbr {
107 display: inline-block;
110 .roo-select2-container .roo-select2-choice abbr:hover {
111 background-position: right -11px;
115 .roo-select2-drop-mask {
128 /* styles required for IE to work */
129 background-color: $body-bg;
130 filter: alpha(opacity=0);
140 background: $body-bg;
142 border: 1px solid $gray-light;
145 border-radius: 0 0 4px 4px;
147 -webkit-box-shadow: 0 4px 5px $black-opacity-20;
148 box-shadow: 0 4px 5px $black-opacity-20;
151 .roo-select2-drop.roo-select2-drop-above {
153 border-top: 1px solid $gray-light; //#aaa;
156 border-radius: 4px 4px 0 0;
158 -webkit-box-shadow: 0 -4px 5px $black-opacity-20;
159 box-shadow: 0 -4px 5px $black-opacity-20;
162 .roo-select2-drop-active {
163 border: 1px solid $brand-primary; //#5897fb;
167 .roo-select2-drop.roo-select2-drop-above.roo-select2-drop-active {
168 border-top: 1px solid $brand-primary; //#5897fb;
171 .roo-select2-drop-auto-width {
172 border-top: 1px solid $gray-light; //#aaa;
176 .roo-select2-drop-auto-width .roo-select2-search {
180 .roo-select2-container .roo-select2-choice .roo-select2-arrow {
181 display: inline-block;
188 border-left: 1px solid $gray-light; //#aaa;
189 border-radius: 0 4px 4px 0;
191 background-clip: padding-box;
193 background: $gray-light;
194 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, $gray-light), color-stop(0.6, $gray-lighter));
195 background-image: -webkit-linear-gradient(center bottom, $gray-light 0%, $gray-lighter 60%);
196 background-image: -moz-linear-gradient(center bottom, $gray-light 0%, $gray-lighter 60%);
197 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '$gray-lighter', endColorstr = '$gray-light', GradientType = 0);
198 background-image: linear-gradient(to top, $gray-light 0%, $gray-lighter 60%);
201 .roo-select2-container .roo-select2-choice .roo-select2-arrow b {
205 background: url('#{$bootstrap-image-path}/select2/select2.png') no-repeat 0 1px;
208 .roo-select2-search {
209 display: inline-block;
222 .roo-select2-search input {
224 height: auto !important;
226 padding: 4px 20px 4px 5px;
230 font-family: sans-serif;
233 border: 1px solid $gray-light;
236 -webkit-box-shadow: none;
239 background: $body-bg url('#{$bootstrap-image-path}/select2/select2.png') no-repeat 100% -22px;
240 background: url('#{$bootstrap-image-path}/select2/select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, $body-bg), color-stop(0.99, $gray-lighter));
241 background: url('#{$bootstrap-image-path}/select2/select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, $body-bg 85%, $gray-lighter 99%);
242 background: url('#{$bootstrap-image-path}/select2/select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, $body-bg 85%, $gray-lighter 99%);
243 background: url('#{$bootstrap-image-path}/select2/select2.png') no-repeat 100% -22px, linear-gradient(to bottom, $body-bg 85%, $gray-lighter 99%) 0 0;
246 .roo-select2-drop.roo-select2-drop-above .roo-select2-search input {
250 .roo-select2-search input.roo-select2-active {
251 background: $body-bg url('#{$bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100%;
252 background: url('#{$bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, $body-bg), color-stop(0.99, $gray-lighter));
253 background: url('#{$bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, $body-bg 85%, $gray-lighter 99%);
254 background: url('#{$bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, $body-bg 85%, $gray-lighter 99%);
255 background: url('#{$bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100%, linear-gradient(to bottom, $body-bg 85%, $gray-lighter 99%) 0 0;
258 .roo-select2-container-active .roo-select2-choice,
259 .roo-select2-container-active .roo-select2-choices {
260 border: 1px solid $brand-primary; //#5897fb;
263 -webkit-box-shadow: 0 0 5px $black-opacity-50;
264 box-shadow: 0 0 5px $black-opacity-50;
267 .roo-select2-dropdown-open .roo-select2-choice {
268 border-bottom-color: transparent;
269 -webkit-box-shadow: 0 1px 0 $body-bg inset;
270 box-shadow: 0 1px 0 $body-bg inset;
272 border-bottom-left-radius: 0;
273 border-bottom-right-radius: 0;
275 background-color: $gray-lighter;
276 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, $body-bg), color-stop(0.5, $gray-lighter));
277 background-image: -webkit-linear-gradient(center bottom, $body-bg 0%, $gray-lighter 50%);
278 background-image: -moz-linear-gradient(center bottom, $body-bg 0%, $gray-lighter 50%);
279 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$gray-lighter', endColorstr='$body-bg', GradientType=0);
280 background-image: linear-gradient(to top, $body-bg 0%, $gray-lighter 50%);
283 .roo-select2-dropdown-open.roo-select2-drop-above .roo-select2-choice,
284 .roo-select2-dropdown-open.roo-select2-drop-above .roo-select2-choices {
285 border: 1px solid $brand-primary; //#5897fb;
286 border-top-color: transparent;
288 background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, $body-bg), color-stop(0.5, $gray-lighter));
289 background-image: -webkit-linear-gradient(center top, $body-bg 0%, $gray-lighter 50%);
290 background-image: -moz-linear-gradient(center top, $body-bg 0%, $gray-lighter 50%);
291 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$gray-lighter', endColorstr='$body-bg', GradientType=0);
292 background-image: linear-gradient(to bottom, $body-bg 0%, $gray-lighter 50%);
295 .roo-select2-dropdown-open .roo-select2-choice .roo-select2-arrow {
296 background: transparent;
300 .roo-select2-dropdown-open .roo-select2-choice .roo-select2-arrow b {
301 background-position: -18px 1px;
304 .roo-select2-hidden-accessible {
316 .roo-select2-results {
319 margin: 4px 4px 4px 0;
323 -webkit-tap-highlight-color: fade($gray-base, 0%);
326 .roo-select2-results ul.roo-select2-result-sub {
331 .roo-select2-results li {
334 background-image: none;
337 .roo-select2-results li.roo-select2-result-with-children > .roo-select2-result-label {
341 .roo-select2-results .roo-select2-result-label {
342 padding: 3px 7px 4px;
348 -webkit-touch-callout: none;
349 -webkit-user-select: none;
350 -moz-user-select: none;
351 -ms-user-select: none;
355 .roo-select2-results-dept-1 .roo-select2-result-label { padding-left: 20px }
356 .roo-select2-results-dept-2 .roo-select2-result-label { padding-left: 40px }
357 .roo-select2-results-dept-3 .roo-select2-result-label { padding-left: 60px }
358 .roo-select2-results-dept-4 .roo-select2-result-label { padding-left: 80px }
359 .roo-select2-results-dept-5 .roo-select2-result-label { padding-left: 100px }
360 .roo-select2-results-dept-6 .roo-select2-result-label { padding-left: 110px }
361 .roo-select2-results-dept-7 .roo-select2-result-label { padding-left: 120px }
363 .roo-select2-results .roo-select2-highlighted {
364 background: $brand-primary; //#3875d7;
368 .roo-select2-results li em {
369 background: $brand-warning;
373 .roo-select2-results .roo-select2-highlighted em {
374 background: transparent;
377 .roo-select2-results .roo-select2-highlighted ul {
378 background: $body-bg;
383 .roo-select2-results .roo-select2-no-results,
384 .roo-select2-results .roo-select2-searching,
385 .roo-select2-results .roo-select2-selection-limit {
386 background: $gray-light; //#f4f4f4;
392 disabled look for disabled choices in the results dropdown
394 .roo-select2-results .roo-select2-disabled.roo-select2-highlighted {
395 color: $gray-lighter; //#666;
396 background: $gray-light; //#f4f4f4;
400 .roo-select2-results .roo-select2-disabled {
401 background: $gray-light; //#f4f4f4;
406 .roo-select2-results .roo-select2-selected {
410 .roo-select2-more-results.roo-select2-active {
411 background: $gray-light url('#{$bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100%;
414 .roo-select2-more-results {
415 background: $gray-light; //#f4f4f4;
419 /* disabled styles */
421 .roo-select2-container.roo-select2-container-disabled .roo-select2-choice {
422 background-color: $gray-light; //#f4f4f4;
423 background-image: none;
424 border: 1px solid $gray-light;
428 .roo-select2-container.roo-select2-container-disabled .roo-select2-choice .roo-select2-arrow {
429 background-color: $gray-light; //#f4f4f4;
430 background-image: none;
434 .roo-select2-container.roo-select2-container-disabled .roo-select2-choice abbr {
440 .roo-select2-container-multi {
441 width: 100%; /* needed on BS4? */
444 .roo-select2-container-multi .roo-select2-choices {
445 height: auto !important;
449 width: 100%; /* needed on BS4? */
450 /*position: relative;*/
451 border: 1px solid $gray-light;
454 background-color: $body-bg;
455 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, $gray-lighter), color-stop(15%, $body-bg));
456 background-image: -webkit-linear-gradient(top, $gray-lighter 1%, $body-bg 15%);
457 background-image: -moz-linear-gradient(top, $gray-lighter 1%, $body-bg 15%);
458 background-image: linear-gradient(to bottom, $gray-lighter 1%, $body-bg 15%);
461 .roo-select2-locked {
462 padding: 3px 5px 3px 5px !important;
465 .roo-select2-container-multi .roo-select2-choices {
469 .roo-select2-container-multi.roo-select2-container-active .roo-select2-choices {
470 border: 1px solid $brand-primary;
473 -webkit-box-shadow: 0 0 5px $black-opacity-50;
474 box-shadow: 0 0 5px $black-opacity-50;
476 .roo-select2-container-multi .roo-select2-choices li {
480 html[dir="rtl"] .roo-select2-container-multi .roo-select2-choices li
484 .roo-select2-container-multi .roo-select2-choices .roo-select2-search-field {
490 .roo-select2-container-multi .roo-select2-choices .roo-select2-search-field input {
494 font-family: sans-serif;
496 color: $gray; //#666;
499 -webkit-box-shadow: none;
501 background: transparent !important;
504 .roo-select2-container-multi .roo-select2-choices .roo-select2-search-field input.roo-select2-active {
505 background: $body-bg url('#{$bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100% !important;
508 .roo-select2-default {
509 color: $gray-light !important;
512 .roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice {
515 padding: 4px 7px 4px 16px;
521 border: 1px solid $gray-light;
524 -webkit-touch-callout: none;
525 -webkit-user-select: none;
526 -moz-user-select: none;
527 -ms-user-select: none;
532 html[dir="rtl"] .roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice
537 .roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice .roo-select2-chosen {
540 .roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice-focus {
541 background: $gray-light; //#d4d4d4;
544 .roo-select2-search-choice-close {
554 /*background: url('#{$bootstrap-image-path}/select2/select2.png') right top no-repeat;*/
557 .roo-select2-search-choice-close:hover {
561 html[dir="rtl"] .roo-select2-search-choice-close {
566 .roo-select2-container-multi .roo-select2-search-choice-close {
570 .roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice .roo-select2-search-choice-close:hover {
571 background-position: right -11px;
573 .roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice-focus .roo-select2-search-choice-close {
574 background-position: right -11px;
577 /* disabled styles */
578 .roo-select2-container-multi.roo-select2-container-disabled .roo-select2-choices {
579 background-color: $gray-light; //#f4f4f4;
580 background-image: none;
581 border: 1px solid $gray-light;
585 .roo-select2-container-multi.roo-select2-container-disabled .roo-select2-choices .roo-select2-search-choice {
586 padding: 3px 5px 3px 5px;
587 border: 1px solid $gray-light;
588 background-image: none;
589 background-color: $gray-light; //#f4f4f4;
592 .roo-select2-container-multi.roo-select2-container-disabled .roo-select2-choices .roo-select2-search-choice .roo-select2-search-choice-close { display: none;
595 /* end multiselect */
598 .roo-select2-result-selectable .roo-select2-match,
599 .roo-select2-result-unselectable .roo-select2-match {
600 text-decoration: underline;
603 .roo-select2-offscreen, .roo-select2-offscreen:focus {
604 clip: rect(0 0 0 0) !important;
605 width: 1px !important;
606 height: 1px !important;
607 border: 0 !important;
608 margin: 0 !important;
609 padding: 0 !important;
610 overflow: hidden !important;
611 position: absolute !important;
612 outline: 0 !important;
613 left: 0px !important;
617 .roo-select2-display-none {
621 .roo-select2-measure-scrollbar {
630 /* Retina-ize icons */
632 @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 2dppx) {
633 .roo-select2-search input,
634 .roo-select2-search-choice-close,
635 .roo-select2-container .roo-select2-choice abbr,
636 .roo-select2-container .roo-select2-choice .roo-select2-arrow b {
637 background-image: url('#{$bootstrap-image-path}/select2/select2x2.png') !important;
638 background-repeat: no-repeat !important;
639 background-size: 60px 40px !important;
642 .roo-select2-search input {
643 background-position: 100% -21px !important;
647 .has-error .roo-select2-choices {
648 border-color: $brand-danger; //#a94442;
649 -webkit-box-shadow: inset 0 1px 1px $black-opacity-80;
650 box-shadow: inset 0 1px 1px $black-opacity-80;
653 .dropdown-menu .roo-select2-result.disabled {
654 background-color: $gray-lighter;