[Summary view] [Print] [Text view]

   1  /* ===============================
   2  =            Choices            =
   3  =============================== */
   4  .choices {
   5    position: relative;
   6    overflow: hidden;
   7    margin-bottom: 24px;
   8    font-size: 16px;
   9  }
  10  .choices:focus {
  11    outline: none;
  12  }
  13  .choices:last-child {
  14    margin-bottom: 0;
  15  }
  16  .choices.is-open {
  17    overflow: initial;
  18  }
  19  .choices.is-disabled .choices__inner,
  20  .choices.is-disabled .choices__input {
  21    background-color: #eaeaea;
  22    cursor: not-allowed;
  23    -webkit-user-select: none;
  24            user-select: none;
  25  }
  26  .choices.is-disabled .choices__item {
  27    cursor: not-allowed;
  28  }
  29  .choices [hidden] {
  30    display: none !important;
  31  }
  32  
  33  .choices[data-type*=select-one] {
  34    cursor: pointer;
  35  }
  36  .choices[data-type*=select-one] .choices__inner {
  37    padding-bottom: 7.5px;
  38  }
  39  .choices[data-type*=select-one] .choices__input {
  40    display: block;
  41    width: 100%;
  42    padding: 10px;
  43    border-bottom: 1px solid #ddd;
  44    background-color: #fff;
  45    margin: 0;
  46  }
  47  .choices[data-type*=select-one] .choices__button {
  48    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
  49    padding: 0;
  50    background-size: 8px;
  51    position: absolute;
  52    top: 50%;
  53    right: 0;
  54    margin-top: -10px;
  55    margin-right: 25px;
  56    height: 20px;
  57    width: 20px;
  58    border-radius: 10em;
  59    opacity: 0.25;
  60  }
  61  .choices[data-type*=select-one] .choices__button:hover, .choices[data-type*=select-one] .choices__button:focus {
  62    opacity: 1;
  63  }
  64  .choices[data-type*=select-one] .choices__button:focus {
  65    box-shadow: 0 0 0 2px #00bcd4;
  66  }
  67  .choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
  68    display: none;
  69  }
  70  .choices[data-type*=select-one]::after {
  71    content: "";
  72    height: 0;
  73    width: 0;
  74    border-style: solid;
  75    border-color: #333 transparent transparent transparent;
  76    border-width: 5px;
  77    position: absolute;
  78    right: 11.5px;
  79    top: 50%;
  80    margin-top: -2.5px;
  81    pointer-events: none;
  82  }
  83  .choices[data-type*=select-one].is-open::after {
  84    border-color: transparent transparent #333 transparent;
  85    margin-top: -7.5px;
  86  }
  87  .choices[data-type*=select-one][dir=rtl]::after {
  88    left: 11.5px;
  89    right: auto;
  90  }
  91  .choices[data-type*=select-one][dir=rtl] .choices__button {
  92    right: auto;
  93    left: 0;
  94    margin-left: 25px;
  95    margin-right: 0;
  96  }
  97  
  98  .choices[data-type*=select-multiple] .choices__inner,
  99  .choices[data-type*=text] .choices__inner {
 100    cursor: text;
 101  }
 102  .choices[data-type*=select-multiple] .choices__button,
 103  .choices[data-type*=text] .choices__button {
 104    position: relative;
 105    display: inline-block;
 106    margin-top: 0;
 107    margin-right: -4px;
 108    margin-bottom: 0;
 109    margin-left: 8px;
 110    padding-left: 16px;
 111    border-left: 1px solid #008fa1;
 112    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
 113    background-size: 8px;
 114    width: 8px;
 115    line-height: 1;
 116    opacity: 0.75;
 117    border-radius: 0;
 118  }
 119  .choices[data-type*=select-multiple] .choices__button:hover, .choices[data-type*=select-multiple] .choices__button:focus,
 120  .choices[data-type*=text] .choices__button:hover,
 121  .choices[data-type*=text] .choices__button:focus {
 122    opacity: 1;
 123  }
 124  
 125  .choices__inner {
 126    display: inline-block;
 127    vertical-align: top;
 128    width: 100%;
 129    background-color: #f9f9f9;
 130    padding: 7.5px 7.5px 3.75px;
 131    border: 1px solid #ddd;
 132    border-radius: 2.5px;
 133    font-size: 14px;
 134    min-height: 44px;
 135    overflow: hidden;
 136  }
 137  .is-focused .choices__inner, .is-open .choices__inner {
 138    border-color: #b7b7b7;
 139  }
 140  .is-open .choices__inner {
 141    border-radius: 2.5px 2.5px 0 0;
 142  }
 143  .is-flipped.is-open .choices__inner {
 144    border-radius: 0 0 2.5px 2.5px;
 145  }
 146  
 147  .choices__list {
 148    margin: 0;
 149    padding-left: 0;
 150    list-style: none;
 151  }
 152  
 153  .choices__list--single {
 154    display: inline-block;
 155    padding: 4px 16px 4px 4px;
 156    width: 100%;
 157  }
 158  [dir=rtl] .choices__list--single {
 159    padding-right: 4px;
 160    padding-left: 16px;
 161  }
 162  .choices__list--single .choices__item {
 163    width: 100%;
 164  }
 165  
 166  .choices__list--multiple {
 167    display: inline;
 168  }
 169  .choices__list--multiple .choices__item {
 170    display: inline-block;
 171    vertical-align: middle;
 172    border-radius: 20px;
 173    padding: 4px 10px;
 174    font-size: 12px;
 175    font-weight: 500;
 176    margin-right: 3.75px;
 177    margin-bottom: 3.75px;
 178    background-color: #00bcd4;
 179    border: 1px solid #00a5bb;
 180    color: #fff;
 181    word-break: break-all;
 182    box-sizing: border-box;
 183  }
 184  .choices__list--multiple .choices__item[data-deletable] {
 185    padding-right: 5px;
 186  }
 187  [dir=rtl] .choices__list--multiple .choices__item {
 188    margin-right: 0;
 189    margin-left: 3.75px;
 190  }
 191  .choices__list--multiple .choices__item.is-highlighted {
 192    background-color: #00a5bb;
 193    border: 1px solid #008fa1;
 194  }
 195  .is-disabled .choices__list--multiple .choices__item {
 196    background-color: #aaaaaa;
 197    border: 1px solid #919191;
 198  }
 199  
 200  .choices__list--dropdown {
 201    visibility: hidden;
 202    z-index: 1;
 203    position: absolute;
 204    width: 100%;
 205    background-color: #fff;
 206    border: 1px solid #ddd;
 207    top: 100%;
 208    margin-top: -1px;
 209    border-bottom-left-radius: 2.5px;
 210    border-bottom-right-radius: 2.5px;
 211    overflow: hidden;
 212    word-break: break-all;
 213    will-change: visibility;
 214  }
 215  .choices__list--dropdown.is-active {
 216    visibility: visible;
 217  }
 218  .is-open .choices__list--dropdown {
 219    border-color: #b7b7b7;
 220  }
 221  .is-flipped .choices__list--dropdown {
 222    top: auto;
 223    bottom: 100%;
 224    margin-top: 0;
 225    margin-bottom: -1px;
 226    border-radius: 0.25rem 0.25rem 0 0;
 227  }
 228  .choices__list--dropdown .choices__list {
 229    position: relative;
 230    max-height: 300px;
 231    overflow: auto;
 232    -webkit-overflow-scrolling: touch;
 233    will-change: scroll-position;
 234  }
 235  .choices__list--dropdown .choices__item {
 236    position: relative;
 237    padding: 10px;
 238    font-size: 14px;
 239  }
 240  [dir=rtl] .choices__list--dropdown .choices__item {
 241    text-align: right;
 242  }
 243  @media (min-width: 640px) {
 244    .choices__list--dropdown .choices__item--selectable {
 245      padding-right: 100px;
 246    }
 247    .choices__list--dropdown .choices__item--selectable::after {
 248      content: attr(data-select-text);
 249      font-size: 12px;
 250      opacity: 0;
 251      position: absolute;
 252      right: 10px;
 253      top: 50%;
 254      transform: translateY(-50%);
 255    }
 256    [dir=rtl] .choices__list--dropdown .choices__item--selectable {
 257      text-align: right;
 258      padding-left: 100px;
 259      padding-right: 10px;
 260    }
 261    [dir=rtl] .choices__list--dropdown .choices__item--selectable::after {
 262      right: auto;
 263      left: 10px;
 264    }
 265  }
 266  .choices__list--dropdown .choices__item--selectable.is-highlighted {
 267    background-color: #f2f2f2;
 268  }
 269  .choices__list--dropdown .choices__item--selectable.is-highlighted::after {
 270    opacity: 0.5;
 271  }
 272  
 273  .choices__item {
 274    cursor: default;
 275  }
 276  
 277  .choices__item--selectable {
 278    cursor: pointer;
 279  }
 280  
 281  .choices__item--disabled {
 282    cursor: not-allowed;
 283    -webkit-user-select: none;
 284            user-select: none;
 285    opacity: 0.5;
 286  }
 287  
 288  .choices__heading {
 289    font-weight: 600;
 290    font-size: 12px;
 291    padding: 10px;
 292    border-bottom: 1px solid #f7f7f7;
 293    color: gray;
 294  }
 295  
 296  .choices__button {
 297    text-indent: -9999px;
 298    -webkit-appearance: none;
 299            appearance: none;
 300    border: 0;
 301    background-color: transparent;
 302    background-repeat: no-repeat;
 303    background-position: center;
 304    cursor: pointer;
 305  }
 306  .choices__button:focus {
 307    outline: none;
 308  }
 309  
 310  .choices__input {
 311    display: inline-block;
 312    vertical-align: baseline;
 313    background-color: #f9f9f9;
 314    font-size: 14px;
 315    margin-bottom: 5px;
 316    border: 0;
 317    border-radius: 0;
 318    max-width: 100%;
 319    padding: 4px 0 4px 2px;
 320  }
 321  .choices__input:focus {
 322    outline: 0;
 323  }
 324  [dir=rtl] .choices__input {
 325    padding-right: 2px;
 326    padding-left: 0;
 327  }
 328  
 329  .choices__placeholder {
 330    opacity: 0.5;
 331  }
 332  
 333  /* =====  End of Choices  ====== */