github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/public/root/css/select2.css (about) 1 /* 2 Version: 3.2 Timestamp: Mon Sep 10 10:38:04 PDT 2012 3 */ 4 .select2-container { 5 position: relative; 6 display: inline-block; 7 /* inline-block for ie7 */ 8 zoom: 1; 9 *display: inline; 10 vertical-align: top; width:90%; 11 } 12 .dataTables_length .select2-container{ width:auto!important;} 13 .select2-container, 14 .select2-drop, 15 .select2-search, 16 .select2-search input{ 17 /* 18 Force border-box so that % widths fit the parent 19 container without overlap because of margin/padding. 20 21 More Info : http://www.quirksmode.org/css/box.html 22 */ 23 -moz-box-sizing: border-box; /* firefox */ 24 -ms-box-sizing: border-box; /* ie */ 25 -webkit-box-sizing: border-box; /* webkit */ 26 -khtml-box-sizing: border-box; /* konqueror */ 27 box-sizing: border-box; /* css3 */ 28 } 29 30 .select2-container .select2-choice { 31 background-color: #fff; 32 33 -moz-background-clip: padding; 34 -webkit-background-clip: padding-box; 35 background-clip: padding-box; 36 border: 1px solid #aaa; 37 display: block; 38 overflow: hidden; 39 white-space: nowrap; 40 position: relative; 41 height: 26px; 42 line-height: 26px; 43 padding: 0 0 0 8px; 44 color: #444; 45 text-decoration: none; 46 } 47 48 .select2-container.select2-drop-above .select2-choice 49 { 50 border-bottom-color: #aaa; 51 52 } 53 54 .select2-container .select2-choice span { 55 margin-right: 26px; 56 display: block; 57 overflow: hidden; 58 white-space: nowrap; 59 -o-text-overflow: ellipsis; 60 -ms-text-overflow: ellipsis; 61 text-overflow: ellipsis; 62 } 63 64 .select2-container .select2-choice abbr { 65 display: block; 66 position: absolute; 67 right: 26px; 68 top: 8px; 69 width: 12px; 70 height: 12px; 71 font-size: 1px; 72 background: url('../img/select2.png') right top no-repeat; 73 cursor: pointer; 74 text-decoration: none; 75 border:0; 76 outline: 0; 77 } 78 .select2-container .select2-choice abbr:hover { 79 background-position: right -11px; 80 cursor: pointer; 81 } 82 83 .select2-drop { 84 background: #fff; 85 color: #000; 86 border: 1px solid #aaa; 87 border-top: 0; 88 position: absolute; 89 top: 100%; 90 -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); 91 -moz-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); 92 -o-box-shadow: 0 4px 5px rgba(0, 0, 0, .15); 93 box-shadow: 0 4px 5px rgba(0, 0, 0, .15); 94 z-index: 9999; 95 width:100%; 96 margin-top:-1px; 97 98 } 99 100 .select2-drop.select2-drop-above { 101 102 margin-top:1px; 103 border-top: 1px solid #aaa; 104 border-bottom: 0; 105 106 -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); 107 -moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); 108 -o-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); 109 box-shadow: 0 -4px 5px rgba(0, 0, 0, .15); 110 } 111 112 .select2-container .select2-choice div { 113 114 -moz-background-clip: padding; 115 -webkit-background-clip: padding-box; 116 background-clip: padding-box; 117 background: #ccc; 118 border-left: 1px solid #aaa; 119 position: absolute; 120 right: 0; 121 top: 0; 122 display: block; 123 height: 100%; 124 width: 18px; 125 } 126 127 .select2-container .select2-choice div b { 128 background: url('../img/select2.png') no-repeat 0 1px; 129 display: block; 130 width: 100%; 131 height: 100%; 132 } 133 134 .select2-search { 135 display: inline-block; 136 white-space: nowrap; 137 z-index: 10000; 138 min-height: 26px; 139 width: 100%; 140 margin: 0; 141 padding-left: 4px; 142 padding-right: 4px; 143 } 144 145 .select2-search-hidden { 146 display: block; 147 position: absolute; 148 left: -10000px; 149 } 150 151 .select2-search input { 152 background: #fff url('../img/select2.png') no-repeat 100% -22px; 153 background: url('../img/select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); 154 background: url('../img/select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); 155 background: url('../img/select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); 156 background: url('../img/select2.png') no-repeat 100% -22px, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); 157 background: url('../img/select2.png') no-repeat 100% -22px, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%); 158 background: url('../img/select2.png') no-repeat 100% -22px, linear-gradient(top, #ffffff 85%, #eeeeee 99%); 159 padding: 4px 20px 4px 5px; 160 outline: 0; 161 border: 1px solid #aaa; 162 font-family: sans-serif; 163 font-size: 1em; 164 width:100%; 165 margin:0; 166 height:auto !important; 167 min-height: 26px; 168 -webkit-box-shadow: none; 169 -moz-box-shadow: none; 170 box-shadow: none; 171 border-radius: 0; 172 -moz-border-radius: 0; 173 -webkit-border-radius: 0; 174 } 175 176 .select2-drop.select2-drop-above .select2-search input 177 { 178 margin-top:4px; 179 } 180 181 .select2-search input.select2-active { 182 background: #fff url('../img/spinner.gif') no-repeat 100%; 183 background: url('../img/spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, white), color-stop(0.99, #eeeeee)); 184 background: url('../img/spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, white 85%, #eeeeee 99%); 185 background: url('../img/spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, white 85%, #eeeeee 99%); 186 background: url('../img/spinner.gif') no-repeat 100%, -o-linear-gradient(bottom, white 85%, #eeeeee 99%); 187 background: url('../img/spinner.gif') no-repeat 100%, -ms-linear-gradient(top, #ffffff 85%, #eeeeee 99%); 188 background: url('../img/spinner.gif') no-repeat 100%, linear-gradient(top, #ffffff 85%, #eeeeee 99%); 189 } 190 191 192 .select2-container-active .select2-choice, 193 .select2-container-active .select2-choices { 194 -webkit-box-shadow: 0 0 5px rgba(0,0,0,.3); 195 -moz-box-shadow : 0 0 5px rgba(0,0,0,.3); 196 -o-box-shadow : 0 0 5px rgba(0,0,0,.3); 197 box-shadow : 0 0 5px rgba(0,0,0,.3); 198 border: 1px solid #5897fb; 199 outline: none; 200 } 201 202 .select2-dropdown-open .select2-choice { 203 border: 1px solid #aaa; 204 border-bottom-color: transparent; 205 -webkit-box-shadow: 0 1px 0 #fff inset; 206 -moz-box-shadow : 0 1px 0 #fff inset; 207 -o-box-shadow : 0 1px 0 #fff inset; 208 box-shadow : 0 1px 0 #fff inset; 209 background-color: #eee; 210 background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, white), color-stop(0.5, #eeeeee)); 211 background-image: -webkit-linear-gradient(center bottom, white 0%, #eeeeee 50%); 212 background-image: -moz-linear-gradient(center bottom, white 0%, #eeeeee 50%); 213 background-image: -o-linear-gradient(bottom, white 0%, #eeeeee 50%); 214 background-image: -ms-linear-gradient(top, #ffffff 0%,#eeeeee 50%); 215 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 ); 216 background-image: linear-gradient(top, #ffffff 0%,#eeeeee 50%); 217 -webkit-border-bottom-left-radius : 0; 218 -webkit-border-bottom-right-radius: 0; 219 -moz-border-radius-bottomleft : 0; 220 -moz-border-radius-bottomright: 0; 221 border-bottom-left-radius : 0; 222 border-bottom-right-radius: 0; 223 } 224 225 .select2-dropdown-open .select2-choice div { 226 background: transparent; 227 border-left: none; 228 } 229 .select2-dropdown-open .select2-choice div b { 230 background-position: -18px 1px; 231 } 232 233 /* results */ 234 .select2-results { 235 margin: 4px 4px 4px 0; 236 padding: 0 0 0 4px; 237 position: relative; 238 overflow-x: hidden; 239 overflow-y: auto; 240 max-height: 200px; 241 } 242 243 .select2-results ul.select2-result-sub { 244 margin: 0 0 0 0; 245 } 246 247 .select2-results ul.select2-result-sub > li .select2-result-label { padding-left: 20px } 248 .select2-results ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 40px } 249 .select2-results ul.select2-result-sub ul.select2-result-sub ul.select2-result-sub > li .select2-result-label { padding-left: 60px } 250 .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 } 251 .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 } 252 .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 } 253 .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 } 254 255 .select2-results li { 256 list-style: none; 257 display: list-item; 258 } 259 260 .select2-results li.select2-result-with-children > .select2-result-label { 261 font-weight: bold; 262 } 263 264 .select2-results .select2-result-label { 265 padding: 3px 7px 4px; 266 margin: 0; 267 cursor: pointer; 268 } 269 270 .select2-results .select2-highlighted { 271 background: #3875d7; 272 color: #fff; 273 } 274 .select2-results li em { 275 background: #feffde; 276 font-style: normal; 277 } 278 .select2-results .select2-highlighted em { 279 background: transparent; 280 } 281 .select2-results .select2-no-results, 282 .select2-results .select2-searching, 283 .select2-results .select2-selection-limit { 284 background: #f4f4f4; 285 display: list-item; 286 } 287 288 /* 289 disabled look for already selected choices in the results dropdown 290 .select2-results .select2-disabled.select2-highlighted { 291 color: #666; 292 background: #f4f4f4; 293 display: list-item; 294 cursor: default; 295 } 296 .select2-results .select2-disabled { 297 background: #f4f4f4; 298 display: list-item; 299 cursor: default; 300 } 301 */ 302 .select2-results .select2-disabled { 303 display: none; 304 } 305 306 .select2-more-results.select2-active { 307 background: #f4f4f4 url('../img/spinner.gif') no-repeat 100%; 308 } 309 310 .select2-more-results { 311 background: #f4f4f4; 312 display: list-item; 313 } 314 315 /* disabled styles */ 316 317 .select2-container.select2-container-disabled .select2-choice { 318 background-color: #f4f4f4; 319 background-image: none; 320 border: 1px solid #ddd; 321 cursor: default; 322 } 323 324 .select2-container.select2-container-disabled .select2-choice div { 325 background-color: #f4f4f4; 326 background-image: none; 327 border-left: 0; 328 } 329 330 331 /* multiselect */ 332 333 .select2-container-multi .select2-choices { 334 background-color: #fff; 335 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eeeeee), color-stop(15%, #ffffff)); 336 background-image: -webkit-linear-gradient(top, #eeeeee 1%, #ffffff 15%); 337 background-image: -moz-linear-gradient(top, #eeeeee 1%, #ffffff 15%); 338 background-image: -o-linear-gradient(top, #eeeeee 1%, #ffffff 15%); 339 background-image: -ms-linear-gradient(top, #eeeeee 1%, #ffffff 15%); 340 background-image: linear-gradient(top, #eeeeee 1%, #ffffff 15%); 341 border: 1px solid #ccc; 342 margin: 0; 343 padding: 0; 344 cursor: text; 345 overflow: hidden; 346 height: auto !important; 347 height: 1%; 348 position: relative; width:100%; 349 350 } 351 352 .select2-container-multi .select2-choices { 353 min-height: 26px; 354 } 355 356 .select2-container-multi.select2-container-active .select2-choices { 357 -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6); 358 -moz-box-shadow : 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6); 359 -o-box-shadow : 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6); 360 box-shadow : 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6); 361 border: 1px solid #5897fb; 362 outline: none; 363 } 364 .select2-container-multi .select2-choices li { 365 float: left; 366 list-style: none; 367 } 368 .select2-container-multi .select2-choices .select2-search-field { 369 white-space: nowrap; 370 margin: 0; 371 padding: 0; 372 } 373 374 .select2-container-multi .select2-choices .select2-search-field input { 375 color: #666; 376 background: transparent !important; 377 font-family: sans-serif; 378 font-size: 100%; 379 height: 15px; 380 padding: 5px; 381 margin: 1px 0; 382 outline: 0; 383 border: 0; 384 -webkit-box-shadow: none; 385 -moz-box-shadow : none; 386 -o-box-shadow : none; 387 box-shadow : none; 388 } 389 390 .select2-container-multi .select2-choices .select2-search-field input.select2-active { 391 background: #fff url('../img/spinner.gif') no-repeat 100% !important; 392 } 393 394 .select2-default { 395 color: #999 !important; 396 } 397 398 .select2-container-multi .select2-choices .select2-search-choice { 399 -moz-background-clip : padding; 400 -webkit-background-clip: padding-box; 401 background-clip : padding-box; 402 background:#f9eae1; 403 -webkit-box-shadow: 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); 404 -moz-box-shadow : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); 405 box-shadow : 0 0 2px #ffffff inset, 0 1px 0 rgba(0,0,0,0.05); 406 color: #333; 407 border: 1px solid #F77825; 408 line-height: 13px; 409 padding: 3px 5px 3px 18px; 410 margin: 3px 0 3px 5px; 411 position: relative; 412 cursor: default; 413 } 414 .select2-container-multi .select2-choices .select2-search-choice span { 415 cursor: default; 416 } 417 .select2-container-multi .select2-choices .select2-search-choice-focus { 418 background: #d4d4d4; 419 } 420 421 .select2-search-choice-close { 422 display: block; 423 position: absolute; 424 right: 3px; 425 top: 4px; 426 width: 12px; 427 height: 13px; 428 font-size: 1px; 429 background: url('../img/select2.png') right top no-repeat; 430 outline: none; 431 } 432 433 .select2-container-multi .select2-search-choice-close { 434 left: 3px; 435 } 436 437 438 .select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover { 439 background-position: right -11px; 440 } 441 .select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close { 442 background-position: right -11px; 443 } 444 445 /* disabled styles */ 446 447 .select2-container-multi.select2-container-disabled .select2-choices{ 448 background-color: #f4f4f4; 449 background-image: none; 450 border: 1px solid #ddd; 451 cursor: default; 452 } 453 454 .select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice { 455 background-image: none; 456 background-color: #f4f4f4; 457 border: 1px solid #ddd; 458 padding: 3px 5px 3px 5px; 459 } 460 461 .select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close { 462 display: none; 463 } 464 /* end multiselect */ 465 466 .select2-result-selectable .select2-match, 467 .select2-result-unselectable .select2-result-selectable .select2-match { text-decoration: underline; } 468 .select2-result-unselectable .select2-match { text-decoration: none; } 469 470 .select2-offscreen { position: absolute; left: -10000px; } 471 472 /* Retina-ize icons */ 473 474 @media only screen and (-webkit-min-device-pixel-ratio: 1.5) { 475 .select2-search input, .select2-search-choice-close, .select2-container .select2-choice abbr, .select2-container .select2-choice div b { 476 background-image: url(../img/select2x2.png) !important; 477 background-repeat: no-repeat !important; 478 background-size: 60px 40px !important; 479 } 480 .select2-search input { 481 background-position: 100% -21px !important; 482 } 483 }