git.roojs.org Git - roojs1/blob - scss/roojs-bootstrap/select2.scss

   1 /*
   2 Version: 3.4.8 Timestamp: Thu May  1 09:50:32 EDT 2014
   3 */
   4 .roo-select2-container {
   5     margin: 0;
   6     position: relative;
   7     /*display: inline-block;*/
   8     /* inline-block for ie7 */
   9     zoom: 1;
  10     *display: inline;
  11     display: table;
  12
  13     vertical-align: middle;
  14 }
  15
  16 .roo-select2-container,
  17 .roo-select2-drop,
  18 .roo-select2-search,
  19 .roo-select2-search input {
  20   /*
  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
  24   */
  25   -webkit-box-sizing: border-box; /* webkit */
  26      -moz-box-sizing: border-box; /* firefox */
  27           box-sizing: border-box; /* css3 */
  28 }
  29
  30 .roo-select2-container .roo-select2-choice {
  31     display: block;
  32     height: 26px;
  33     padding: 0 0 0 8px;
  34     overflow: hidden;
  35     position: relative;
  36
  37     border: 1px solid $gray-light; //#aaa;
  38     white-space: nowrap;
  39     line-height: 26px;
  40     color: $gray-dark; //#444;
  41     text-decoration: none;
  42
  43     border-radius: 4px;
  44
  45     background-clip: padding-box;
  46
  47     -webkit-touch-callout: none;
  48       -webkit-user-select: none;
  49          -moz-user-select: none;
  50           -ms-user-select: none;
  51               user-select: none;
  52
  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%);
  59 }
  60
  61 .roo-select2-container.roo-select2-drop-above .roo-select2-choice {
  62     border-bottom-color: $gray-light; //#aaa;
  63
  64     border-radius: 0 0 4px 4px;
  65
  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%);
  71 }
  72
  73 .roo-select2-container.roo-select2-allowclear .roo-select2-choice .roo-select2-chosen {
  74     margin-right: 42px;
  75 }
  76
  77 .roo-select2-container .roo-select2-choice > .roo-select2-chosen {
  78     margin-right: 26px;
  79     display: block;
  80     overflow: hidden;
  81
  82     white-space: nowrap;
  83
  84     text-overflow: ellipsis;
  85     float: none;
  86     width: auto;
  87 }
  88
  89 .roo-select2-container .roo-select2-choice abbr {
  90     display: none;
  91     width: 12px;
  92     height: 12px;
  93     position: absolute;
  94     right: 24px;
  95     top: 8px;
  96
  97     font-size: 1px;
  98     text-decoration: none;
  99
 100     border: 0;
 101     background: url('#{$bootstrap-image-path}/select2/select2.png') right top no-repeat;
 102     cursor: pointer;
 103     outline: 0;
 104 }
 105
 106 .roo-select2-container.roo-select2-allowclear .roo-select2-choice abbr {
 107     display: inline-block;
 108 }
 109
 110 .roo-select2-container .roo-select2-choice abbr:hover {
 111     background-position: right -11px;
 112     cursor: pointer;
 113 }
 114
 115 .roo-select2-drop-mask {
 116     border: 0;
 117     margin: 0;
 118     padding: 0;
 119     position: fixed;
 120     left: 0;
 121     top: 0;
 122     min-height: 100%;
 123     min-width: 100%;
 124     height: auto;
 125     width: auto;
 126     opacity: 0;
 127     z-index: 9998;
 128     /* styles required for IE to work */
 129     background-color: $body-bg;
 130     filter: alpha(opacity=0);
 131 }
 132
 133 .roo-select2-drop {
 134     width: 100%;
 135     margin-top: -1px;
 136     position: absolute;
 137     z-index: 9999;
 138     top: 100%;
 139
 140     background: $body-bg;
 141     color: $gray-base;
 142     border: 1px solid $gray-light;
 143     border-top: 0;
 144
 145     border-radius: 0 0 4px 4px;
 146
 147     -webkit-box-shadow: 0 4px 5px $black-opacity-20;
 148             box-shadow: 0 4px 5px $black-opacity-20;
 149 }
 150
 151 .roo-select2-drop.roo-select2-drop-above {
 152     margin-top: 1px;
 153     border-top: 1px solid $gray-light; //#aaa;
 154     border-bottom: 0;
 155
 156     border-radius: 4px 4px 0 0;
 157
 158     -webkit-box-shadow: 0 -4px 5px $black-opacity-20;
 159             box-shadow: 0 -4px 5px $black-opacity-20;
 160 }
 161
 162 .roo-select2-drop-active {
 163     border: 1px solid $brand-primary; //#5897fb;
 164     border-top: none;
 165 }
 166
 167 .roo-select2-drop.roo-select2-drop-above.roo-select2-drop-active {
 168     border-top: 1px solid $brand-primary; //#5897fb;
 169 }
 170
 171 .roo-select2-drop-auto-width {
 172     border-top: 1px solid $gray-light; //#aaa;
 173     width: auto;
 174 }
 175
 176 .roo-select2-drop-auto-width .roo-select2-search {
 177     padding-top: 4px;
 178 }
 179
 180 .roo-select2-container .roo-select2-choice .roo-select2-arrow {
 181     display: inline-block;
 182     width: 18px;
 183     height: 100%;
 184     position: absolute;
 185     right: 0;
 186     top: 0;
 187
 188     border-left: 1px solid $gray-light; //#aaa;
 189     border-radius: 0 4px 4px 0;
 190
 191     background-clip: padding-box;
 192
 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%);
 199 }
 200
 201 .roo-select2-container .roo-select2-choice .roo-select2-arrow b {
 202     display: block;
 203     width: 100%;
 204     height: 100%;
 205     background: url('#{$bootstrap-image-path}/select2/select2.png') no-repeat 0 1px;
 206 }
 207
 208 .roo-select2-search {
 209     display: inline-block;
 210     width: 100%;
 211     min-height: 26px;
 212     margin: 0;
 213     padding-left: 4px;
 214     padding-right: 4px;
 215
 216     position: relative;
 217     z-index: 10000;
 218
 219     white-space: nowrap;
 220 }
 221
 222 .roo-select2-search input {
 223     width: 100%;
 224     height: auto !important;
 225     min-height: 26px;
 226     padding: 4px 20px 4px 5px;
 227     margin: 0;
 228
 229     outline: 0;
 230     font-family: sans-serif;
 231     font-size: 1em;
 232
 233     border: 1px solid $gray-light;
 234     border-radius: 0;
 235
 236     -webkit-box-shadow: none;
 237             box-shadow: none;
 238
 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;
 244 }
 245
 246 .roo-select2-drop.roo-select2-drop-above .roo-select2-search input {
 247     margin-top: 4px;
 248 }
 249
 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;
 256 }
 257
 258 .roo-select2-container-active .roo-select2-choice,
 259 .roo-select2-container-active .roo-select2-choices {
 260     border: 1px solid $brand-primary; //#5897fb;
 261     outline: none;
 262
 263     -webkit-box-shadow: 0 0 5px $black-opacity-50;
 264             box-shadow: 0 0 5px $black-opacity-50;
 265 }
 266
 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;
 271
 272     border-bottom-left-radius: 0;
 273     border-bottom-right-radius: 0;
 274
 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%);
 281 }
 282
 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;
 287
 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%);
 293 }
 294
 295 .roo-select2-dropdown-open .roo-select2-choice .roo-select2-arrow {
 296     background: transparent;
 297     border-left: none;
 298     filter: none;
 299 }
 300 .roo-select2-dropdown-open .roo-select2-choice .roo-select2-arrow b {
 301     background-position: -18px 1px;
 302 }
 303
 304 .roo-select2-hidden-accessible {
 305     border: 0;
 306     clip: rect(0 0 0 0);
 307     height: 1px;
 308     margin: -1px;
 309     overflow: hidden;
 310     padding: 0;
 311     position: absolute;
 312     width: 1px;
 313 }
 314
 315 /* results */
 316 .roo-select2-results {
 317     max-height: 200px;
 318     padding: 0 0 0 4px;
 319     margin: 4px 4px 4px 0;
 320     position: relative;
 321     overflow-x: hidden;
 322     overflow-y: auto;
 323     -webkit-tap-highlight-color: fade($gray-base, 0%);
 324 }
 325
 326 .roo-select2-results ul.roo-select2-result-sub {
 327     margin: 0;
 328     padding-left: 0;
 329 }
 330
 331 .roo-select2-results li {
 332     list-style: none;
 333     display: list-item;
 334     background-image: none;
 335 }
 336
 337 .roo-select2-results li.roo-select2-result-with-children > .roo-select2-result-label {
 338     font-weight: bold;
 339 }
 340
 341 .roo-select2-results .roo-select2-result-label {
 342     padding: 3px 7px 4px;
 343     margin: 0;
 344     cursor: pointer;
 345
 346     min-height: 1em;
 347
 348     -webkit-touch-callout: none;
 349       -webkit-user-select: none;
 350          -moz-user-select: none;
 351           -ms-user-select: none;
 352               user-select: none;
 353 }
 354
 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 }
 362
 363 .roo-select2-results .roo-select2-highlighted {
 364     background: $brand-primary; //#3875d7;
 365     color: $body-bg;
 366 }
 367
 368 .roo-select2-results li em {
 369     background: $brand-warning;
 370     font-style: normal;
 371 }
 372
 373 .roo-select2-results .roo-select2-highlighted em {
 374     background: transparent;
 375 }
 376
 377 .roo-select2-results .roo-select2-highlighted ul {
 378     background: $body-bg;
 379     color: $gray-base;
 380 }
 381
 382
 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;
 387     display: list-item;
 388     padding-left: 5px;
 389 }
 390
 391 /*
 392 disabled look for disabled choices in the results dropdown
 393 */
 394 .roo-select2-results .roo-select2-disabled.roo-select2-highlighted {
 395     color: $gray-lighter; //#666;
 396     background: $gray-light; //#f4f4f4;
 397     display: list-item;
 398     cursor: default;
 399 }
 400 .roo-select2-results .roo-select2-disabled {
 401   background: $gray-light; //#f4f4f4;
 402   display: list-item;
 403   cursor: default;
 404 }
 405
 406 .roo-select2-results .roo-select2-selected {
 407     display: none;
 408 }
 409
 410 .roo-select2-more-results.roo-select2-active {
 411     background: $gray-light url('#{$bootstrap-image-path}/select2/select2-spinner.gif') no-repeat 100%;
 412 }
 413
 414 .roo-select2-more-results {
 415     background: $gray-light; //#f4f4f4;
 416     display: list-item;
 417 }
 418
 419 /* disabled styles */
 420
 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;
 425     cursor: default;
 426 }
 427
 428 .roo-select2-container.roo-select2-container-disabled .roo-select2-choice .roo-select2-arrow {
 429     background-color: $gray-light; //#f4f4f4;
 430     background-image: none;
 431     border-left: 0;
 432 }
 433
 434 .roo-select2-container.roo-select2-container-disabled .roo-select2-choice abbr {
 435     display: none;
 436 }
 437
 438
 439 /* multiselect */
 440 .roo-select2-container-multi {
 441     width: 100%; /* needed on BS4? */
 442 }
 443
 444 .roo-select2-container-multi .roo-select2-choices {
 445     height: auto !important;
 446     height: 1%;
 447     margin: 0;
 448     padding: 0;
 449     width: 100%; /* needed on BS4? */
 450     /*position: relative;*/
 451     border: 1px solid $gray-light;
 452     cursor: text;
 453     overflow: hidden;
 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%);
 459 }
 460
 461 .roo-select2-locked {
 462   padding: 3px 5px 3px 5px !important;
 463 }
 464
 465 .roo-select2-container-multi .roo-select2-choices {
 466     min-height: 26px;
 467 }
 468
 469 .roo-select2-container-multi.roo-select2-container-active .roo-select2-choices {
 470     border: 1px solid $brand-primary;
 471     outline: none;
 472
 473     -webkit-box-shadow: 0 0 5px $black-opacity-50;
 474             box-shadow: 0 0 5px $black-opacity-50;
 475 }
 476 .roo-select2-container-multi .roo-select2-choices li {
 477     float: left;
 478     list-style: none;
 479 }
 480 html[dir="rtl"] .roo-select2-container-multi .roo-select2-choices li
 481 {
 482     float: right;
 483 }
 484 .roo-select2-container-multi .roo-select2-choices .roo-select2-search-field {
 485     margin: 0;
 486     padding: 0;
 487     white-space: nowrap;
 488 }
 489
 490 .roo-select2-container-multi .roo-select2-choices .roo-select2-search-field input {
 491     padding: 5px;
 492     margin: 1px 0;
 493
 494     font-family: sans-serif;
 495     font-size: 100%;
 496     color: $gray; //#666;
 497     outline: 0;
 498     border: 0;
 499     -webkit-box-shadow: none;
 500             box-shadow: none;
 501     background: transparent !important;
 502 }
 503
 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;
 506 }
 507
 508 .roo-select2-default {
 509     color: $gray-light !important;
 510 }
 511
 512 .roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice {
 513
 514
 515     padding: 4px 7px 4px 16px;
 516     margin: 0 1px;
 517     position: relative;
 518     line-height: 13px;
 519     color: $gray-dark;
 520     cursor: default;
 521     border: 1px solid $gray-light;
 522     border-radius: 3px;
 523
 524     -webkit-touch-callout: none;
 525     -webkit-user-select: none;
 526     -moz-user-select: none;
 527     -ms-user-select: none;
 528     user-select: none;
 529 }
 530
 531
 532 html[dir="rtl"] .roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice
 533 {
 534     margin-left: 0;
 535     margin-right: 5px;
 536 }
 537 .roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice .roo-select2-chosen {
 538     cursor: default;
 539 }
 540 .roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice-focus {
 541     background: $gray-light; //#d4d4d4;
 542 }
 543
 544 .roo-select2-search-choice-close {
 545     display: block;
 546     width: 12px;
 547     height: 13px;
 548     position: absolute;
 549     right: 3px;
 550     top: 4px;
 551     font-size: 12px;
 552     outline: none;
 553     color: $gray-light;
 554     /*background: url('#{$bootstrap-image-path}/select2/select2.png') right top no-repeat;*/
 555 }
 556
 557 .roo-select2-search-choice-close:hover {
 558     color: $gray-dark;
 559 }
 560
 561 html[dir="rtl"] .roo-select2-search-choice-close {
 562     right: auto;
 563     left: 3px;
 564 }
 565
 566 .roo-select2-container-multi .roo-select2-search-choice-close {
 567     left: 3px;
 568 }
 569
 570 .roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice .roo-select2-search-choice-close:hover {
 571   background-position: right -11px;
 572 }
 573 .roo-select2-container-multi .roo-select2-choices .roo-select2-search-choice-focus .roo-select2-search-choice-close {
 574     background-position: right -11px;
 575 }
 576
 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;
 582     cursor: default;
 583 }
 584
 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;
 590 }
 591
 592 .roo-select2-container-multi.roo-select2-container-disabled .roo-select2-choices .roo-select2-search-choice .roo-select2-search-choice-close {    display: none;
 593     background: none;
 594 }
 595 /* end multiselect */
 596
 597
 598 .roo-select2-result-selectable .roo-select2-match,
 599 .roo-select2-result-unselectable .roo-select2-match {
 600     text-decoration: underline;
 601 }
 602
 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;
 614     top: 0px !important;
 615 }
 616
 617 .roo-select2-display-none {
 618     display: none;
 619 }
 620
 621 .roo-select2-measure-scrollbar {
 622     position: absolute;
 623     top: -10000px;
 624     left: -10000px;
 625     width: 100px;
 626     height: 100px;
 627     overflow: scroll;
 628 }
 629
 630 /* Retina-ize icons */
 631
 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;
 640     }
 641
 642     .roo-select2-search input {
 643         background-position: 100% -21px !important;
 644     }
 645 }
 646
 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;
 651 }
 652
 653 .dropdown-menu .roo-select2-result.disabled {
 654     background-color: $gray-lighter;
 655     color: $gray-light;
 656     cursor: not-allowed;
 657 }