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