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

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