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  }