[Summary view] [Print] [Text view]

   1  @charset "UTF-8";
   2  /* ===============================
   3  =            Choices            =
   4  =============================== */
   5  .choices {
   6    position: relative;
   7    overflow: hidden;
   8    margin-bottom: 24px;
   9    font-size: 16px;
  10  }
  11  .choices:focus {
  12    outline: none;
  13  }
  14  .choices:last-child {
  15    margin-bottom: 0;
  16  }
  17  .choices.is-open {
  18    overflow: initial;
  19  }
  20  .choices.is-disabled .choices__inner,
  21  .choices.is-disabled .choices__input {
  22    background-color: #eaeaea;
  23    cursor: not-allowed;
  24    -webkit-user-select: none;
  25       -moz-user-select: none;
  26        -ms-user-select: none;
  27            user-select: none;
  28  }
  29  .choices.is-disabled .choices__item {
  30    cursor: not-allowed;
  31  }
  32  .choices [hidden] {
  33    display: none !important;
  34  }
  35  
  36  .choices[data-type*=select-one] {
  37    cursor: pointer;
  38  }
  39  .choices[data-type*=select-one] .choices__inner {
  40    padding-bottom: 7.5px;
  41  }
  42  .choices[data-type*=select-one] .choices__input {
  43    display: block;
  44    width: 100%;
  45    padding: 10px;
  46    border-bottom: 1px solid #ddd;
  47    background-color: #fff;
  48    margin: 0;
  49  }
  50  .choices[data-type*=select-one] .choices__button {
  51    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
  52    padding: 0;
  53    background-size: 8px;
  54    position: absolute;
  55    top: 50%;
  56    right: 0;
  57    margin-top: -10px;
  58    margin-right: 25px;
  59    height: 20px;
  60    width: 20px;
  61    border-radius: 10em;
  62    opacity: 0.25;
  63  }
  64  .choices[data-type*=select-one] .choices__button:hover, .choices[data-type*=select-one] .choices__button:focus {
  65    opacity: 1;
  66  }
  67  .choices[data-type*=select-one] .choices__button:focus {
  68    box-shadow: 0 0 0 2px #00bcd4;
  69  }
  70  .choices[data-type*=select-one] .choices__item[data-value=""] .choices__button {
  71    display: none;
  72  }
  73  .choices[data-type*=select-one]::after {
  74    content: "";
  75    height: 0;
  76    width: 0;
  77    border-style: solid;
  78    border-color: #333 transparent transparent transparent;
  79    border-width: 5px;
  80    position: absolute;
  81    right: 11.5px;
  82    top: 50%;
  83    margin-top: -2.5px;
  84    pointer-events: none;
  85  }
  86  .choices[data-type*=select-one].is-open::after {
  87    border-color: transparent transparent #333 transparent;
  88    margin-top: -7.5px;
  89  }
  90  .choices[data-type*=select-one][dir=rtl]::after {
  91    left: 11.5px;
  92    right: auto;
  93  }
  94  .choices[data-type*=select-one][dir=rtl] .choices__button {
  95    right: auto;
  96    left: 0;
  97    margin-left: 25px;
  98    margin-right: 0;
  99  }
 100  
 101  .choices[data-type*=select-multiple] .choices__inner,
 102  .choices[data-type*=text] .choices__inner {
 103    cursor: text;
 104  }
 105  .choices[data-type*=select-multiple] .choices__button,
 106  .choices[data-type*=text] .choices__button {
 107    position: relative;
 108    display: inline-block;
 109    margin-top: 0;
 110    margin-right: -4px;
 111    margin-bottom: 0;
 112    margin-left: 8px;
 113    padding-left: 16px;
 114    border-left: 1px solid #008fa1;
 115    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
 116    background-size: 8px;
 117    width: 8px;
 118    line-height: 1;
 119    opacity: 0.75;
 120    border-radius: 0;
 121  }
 122  .choices[data-type*=select-multiple] .choices__button:hover, .choices[data-type*=select-multiple] .choices__button:focus,
 123  .choices[data-type*=text] .choices__button:hover,
 124  .choices[data-type*=text] .choices__button:focus {
 125    opacity: 1;
 126  }
 127  
 128  .choices__inner {
 129    display: inline-block;
 130    vertical-align: top;
 131    width: 100%;
 132    background-color: #f9f9f9;
 133    padding: 7.5px 7.5px 3.75px;
 134    border: 1px solid #ddd;
 135    border-radius: 2.5px;
 136    font-size: 14px;
 137    min-height: 44px;
 138    overflow: hidden;
 139  }
 140  .is-focused .choices__inner, .is-open .choices__inner {
 141    border-color: #b7b7b7;
 142  }
 143  .is-open .choices__inner {
 144    border-radius: 2.5px 2.5px 0 0;
 145  }
 146  .is-flipped.is-open .choices__inner {
 147    border-radius: 0 0 2.5px 2.5px;
 148  }
 149  
 150  .choices__list {
 151    margin: 0;
 152    padding-left: 0;
 153    list-style: none;
 154  }
 155  
 156  .choices__list--single {
 157    display: inline-block;
 158    padding: 4px 16px 4px 4px;
 159    width: 100%;
 160  }
 161  [dir=rtl] .choices__list--single {
 162    padding-right: 4px;
 163    padding-left: 16px;
 164  }
 165  .choices__list--single .choices__item {
 166    width: 100%;
 167  }
 168  
 169  .choices__list--multiple {
 170    display: inline;
 171  }
 172  .choices__list--multiple .choices__item {
 173    display: inline-block;
 174    vertical-align: middle;
 175    border-radius: 20px;
 176    padding: 4px 10px;
 177    font-size: 12px;
 178    font-weight: 500;
 179    margin-right: 3.75px;
 180    margin-bottom: 3.75px;
 181    background-color: #00bcd4;
 182    border: 1px solid #00a5bb;
 183    color: #fff;
 184    word-break: break-all;
 185    box-sizing: border-box;
 186  }
 187  .choices__list--multiple .choices__item[data-deletable] {
 188    padding-right: 5px;
 189  }
 190  [dir=rtl] .choices__list--multiple .choices__item {
 191    margin-right: 0;
 192    margin-left: 3.75px;
 193  }
 194  .choices__list--multiple .choices__item.is-highlighted {
 195    background-color: #00a5bb;
 196    border: 1px solid #008fa1;
 197  }
 198  .is-disabled .choices__list--multiple .choices__item {
 199    background-color: #aaaaaa;
 200    border: 1px solid #919191;
 201  }
 202  
 203  .choices__list--dropdown {
 204    visibility: hidden;
 205    z-index: 1;
 206    position: absolute;
 207    width: 100%;
 208    background-color: #fff;
 209    border: 1px solid #ddd;
 210    top: 100%;
 211    margin-top: -1px;
 212    border-bottom-left-radius: 2.5px;
 213    border-bottom-right-radius: 2.5px;
 214    overflow: hidden;
 215    word-break: break-all;
 216    will-change: visibility;
 217  }
 218  .choices__list--dropdown.is-active {
 219    visibility: visible;
 220  }
 221  .is-open .choices__list--dropdown {
 222    border-color: #b7b7b7;
 223  }
 224  .is-flipped .choices__list--dropdown {
 225    top: auto;
 226    bottom: 100%;
 227    margin-top: 0;
 228    margin-bottom: -1px;
 229    border-radius: 0.25rem 0.25rem 0 0;
 230  }
 231  .choices__list--dropdown .choices__list {
 232    position: relative;
 233    max-height: 300px;
 234    overflow: auto;
 235    -webkit-overflow-scrolling: touch;
 236    will-change: scroll-position;
 237  }
 238  .choices__list--dropdown .choices__item {
 239    position: relative;
 240    padding: 10px;
 241    font-size: 14px;
 242  }
 243  [dir=rtl] .choices__list--dropdown .choices__item {
 244    text-align: right;
 245  }
 246  @media (min-width: 640px) {
 247    .choices__list--dropdown .choices__item--selectable {
 248      padding-right: 100px;
 249    }
 250    .choices__list--dropdown .choices__item--selectable::after {
 251      content: attr(data-select-text);
 252      font-size: 12px;
 253      opacity: 0;
 254      position: absolute;
 255      right: 10px;
 256      top: 50%;
 257      -webkit-transform: translateY(-50%);
 258              transform: translateY(-50%);
 259    }
 260    [dir=rtl] .choices__list--dropdown .choices__item--selectable {
 261      text-align: right;
 262      padding-left: 100px;
 263      padding-right: 10px;
 264    }
 265    [dir=rtl] .choices__list--dropdown .choices__item--selectable::after {
 266      right: auto;
 267      left: 10px;
 268    }
 269  }
 270  .choices__list--dropdown .choices__item--selectable.is-highlighted {
 271    background-color: #f2f2f2;
 272  }
 273  .choices__list--dropdown .choices__item--selectable.is-highlighted::after {
 274    opacity: 0.5;
 275  }
 276  
 277  .choices__item {
 278    cursor: default;
 279  }
 280  
 281  .choices__item--selectable {
 282    cursor: pointer;
 283  }
 284  
 285  .choices__item--disabled {
 286    cursor: not-allowed;
 287    -webkit-user-select: none;
 288       -moz-user-select: none;
 289        -ms-user-select: none;
 290            user-select: none;
 291    opacity: 0.5;
 292  }
 293  
 294  .choices__heading {
 295    font-weight: 600;
 296    font-size: 12px;
 297    padding: 10px;
 298    border-bottom: 1px solid #f7f7f7;
 299    color: gray;
 300  }
 301  
 302  .choices__button {
 303    text-indent: -9999px;
 304    -webkit-appearance: none;
 305       -moz-appearance: none;
 306            appearance: none;
 307    border: 0;
 308    background-color: transparent;
 309    background-repeat: no-repeat;
 310    background-position: center;
 311    cursor: pointer;
 312  }
 313  .choices__button:focus {
 314    outline: none;
 315  }
 316  
 317  .choices__input {
 318    display: inline-block;
 319    vertical-align: baseline;
 320    background-color: #f9f9f9;
 321    font-size: 14px;
 322    margin-bottom: 5px;
 323    border: 0;
 324    border-radius: 0;
 325    max-width: 100%;
 326    padding: 4px 0 4px 2px;
 327  }
 328  .choices__input:focus {
 329    outline: 0;
 330  }
 331  [dir=rtl] .choices__input {
 332    padding-right: 2px;
 333    padding-left: 0;
 334  }
 335  
 336  .choices__placeholder {
 337    opacity: 0.5;
 338  }
 339  
 340  /* =====  End of Choices  ====== */
 341  .choices {
 342    border: 0;
 343    border-radius: 0.25rem;
 344  }
 345  .choices:hover {
 346    cursor: pointer;
 347  }
 348  .choices.is-focused {
 349    box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.1);
 350  }
 351  
 352  .choices__inner {
 353    padding: 0.4rem 1rem;
 354    margin-bottom: 0;
 355    font-size: 1rem;
 356    border: solid 1px #ced4da;
 357    border-radius: 0.25rem;
 358    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
 359  }
 360  .is-focused .choices__inner {
 361    border-color: #000;
 362  }
 363  
 364  .choices__input {
 365    padding: 0;
 366    margin-bottom: 0;
 367    font-size: 1rem;
 368    background-color: transparent;
 369  }
 370  .choices__input::-moz-placeholder {
 371    color: #495057;
 372    opacity: 1;
 373  }
 374  .choices__input::-webkit-input-placeholder {
 375    color: #495057;
 376    opacity: 1;
 377  }
 378  
 379  .choices__list--dropdown {
 380    z-index: 1070;
 381  }
 382  
 383  .choices__list--multiple .choices__item {
 384    position: relative;
 385    margin: 2px;
 386    background-color: var(--cassiopeia-color-primary);
 387    -webkit-margin-end: 2px;
 388            margin-inline-end: 2px;
 389    border: 0;
 390    border-radius: 0.25rem;
 391  }
 392  .choices__list--multiple .choices__item.is-highlighted {
 393    background-color: var(--cassiopeia-color-primary);
 394    opacity: 0.9;
 395  }
 396  
 397  .choices .choices__list--dropdown .choices__item {
 398    -webkit-padding-end: 10px;
 399            padding-inline-end: 10px;
 400  }
 401  .choices .choices__list--dropdown .choices__item--selectable::after {
 402    display: none;
 403  }
 404  
 405  .choices__button_joomla {
 406    position: relative;
 407    padding: 0 10px;
 408    color: inherit;
 409    text-indent: -9999px;
 410    cursor: pointer;
 411    background: none;
 412    border: 0;
 413    opacity: 0.5;
 414    -webkit-appearance: none;
 415       -moz-appearance: none;
 416            appearance: none;
 417  }
 418  .choices__button_joomla::before {
 419    position: absolute;
 420    top: 0;
 421    right: 0;
 422    bottom: 0;
 423    left: 0;
 424    display: block;
 425    text-align: center;
 426    text-indent: 0;
 427    content: "×";
 428  }
 429  .choices__button_joomla:hover, .choices__button_joomla:focus {
 430    opacity: 1;
 431  }
 432  .choices__button_joomla:focus {
 433    outline: none;
 434  }
 435  
 436  .choices[data-type*=select-one] .choices__inner,
 437  .choices[data-type*=select-multiple] .choices__inner {
 438    -webkit-padding-end: 3rem;
 439            padding-inline-end: 3rem;
 440    cursor: pointer;
 441    background: url("../../../images/select-bg.svg") no-repeat 100%/116rem;
 442    background-color: #fff;
 443  }
 444  [dir=rtl] .choices[data-type*=select-one] .choices__inner,
 445  [dir=rtl] .choices[data-type*=select-multiple] .choices__inner {
 446    background: url("../../../images/select-bg-rtl.svg") no-repeat 0/116rem;
 447    background-color: #fff;
 448  }
 449  
 450  .choices[data-type*=select-one] .choices__item {
 451    display: flex;
 452    justify-content: space-between;
 453  }
 454  .choices[data-type*=select-one] .choices__button_joomla {
 455    position: absolute;
 456    top: 50%;
 457    inset-inline-end: 0;
 458    width: 20px;
 459    height: 20px;
 460    padding: 0;
 461    -webkit-margin-before: -10px;
 462            margin-block-start: -10px;
 463    -webkit-margin-end: 50px;
 464            margin-inline-end: 50px;
 465    border-radius: 10em;
 466    opacity: 0.5;
 467  }
 468  .choices[data-type*=select-one] .choices__button_joomla:hover, .choices[data-type*=select-one] .choices__button_joomla:focus {
 469    opacity: 1;
 470  }
 471  .choices[data-type*=select-one] .choices__button_joomla:focus {
 472    box-shadow: 0 0 0 2px #00bcd4;
 473  }
 474  .choices[data-type*=select-one]::after {
 475    display: none;
 476  }
 477  
 478  .choices[data-type*=select-multiple] .choices__input,
 479  .choices[data-type*=text] .choices__input {
 480    padding: 0.2rem 0;
 481  }
 482  
 483  .choices__heading {
 484    font-size: 1.2rem;
 485  }