[Summary view] [Print] [Text view]

   1  @import "../../../../../../vendor/bootstrap/scss/functions";
   2  @import "../../../../../../vendor/bootstrap/scss/variables";
   3  @import "../../../../../../vendor/bootstrap/scss/mixins";
   4  
   5  // choices.js
   6  @import "../../../../../../vendor/choicesjs/scss/choices";
   7  
   8  // Cassiopea Variables, Functions and Mixins
   9  @import "../../tools/tools";
  10  
  11  .choices {
  12    border: 0;
  13    border-radius: $border-radius;
  14  
  15    &:hover {
  16      cursor: pointer;
  17    }
  18  
  19    &.is-focused {
  20      box-shadow: $cassiopeia-input-focus-shadow;
  21    }
  22  }
  23  
  24  .choices__inner {
  25    padding: .4rem 1rem;
  26    margin-bottom: 0;
  27    font-size: 1rem;
  28    border: $input-border;
  29    border-radius: $border-radius;
  30    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  31  
  32    .is-focused & {
  33      border-color: #000;
  34    }
  35  }
  36  
  37  .choices__input {
  38    padding: 0;
  39    margin-bottom: 0;
  40    font-size: 1rem;
  41    background-color: transparent;
  42  
  43    &::-moz-placeholder {
  44      color: $gray-700;
  45      opacity: 1;
  46    }
  47  
  48    &::-webkit-input-placeholder {
  49      color: $gray-700;
  50      opacity: 1;
  51    }
  52  }
  53  
  54  .choices__list--dropdown {
  55    z-index: $zindex-popover;
  56  }
  57  
  58  .choices__list--multiple .choices__item {
  59    position: relative;
  60    margin: 2px;
  61    background-color: var(--cassiopeia-color-primary);
  62    margin-inline-end: 2px;
  63    border: 0;
  64    border-radius: $border-radius;
  65  
  66    &.is-highlighted {
  67      background-color: var(--cassiopeia-color-primary);;
  68      opacity: .9;
  69    }
  70  }
  71  
  72  .choices .choices__list--dropdown {
  73    .choices__item {
  74      padding-inline-end: 10px;
  75    }
  76  
  77    .choices__item--selectable::after {
  78      display: none;
  79    }
  80  }
  81  
  82  .choices__button_joomla {
  83    position: relative;
  84    padding: 0 10px;
  85    color: inherit;
  86    text-indent: -9999px;
  87    cursor: pointer;
  88    background: none;
  89    border: 0;
  90    opacity: .5;
  91    appearance: none;
  92  
  93    &::before {
  94      position: absolute;
  95      top: 0;
  96      right: 0;
  97      bottom: 0;
  98      left: 0;
  99      display: block;
 100      text-align: center;
 101      text-indent: 0;
 102      content: "\00d7";
 103    }
 104  
 105    &:hover,
 106    &:focus {
 107      opacity: 1;
 108    }
 109  
 110    &:focus {
 111      outline: none;
 112    }
 113  }
 114  
 115  .choices[data-type*="select-one"],
 116  .choices[data-type*="select-multiple"] {
 117    .choices__inner {
 118      padding-inline-end: 3rem;
 119      cursor: pointer;
 120      background: url("../../../images/select-bg.svg") no-repeat 100%/116rem;
 121      background-color: $form-select-bg;
 122  
 123      [dir="rtl"] & {
 124        background: url("../../../images/select-bg-rtl.svg") no-repeat 0/116rem;
 125        background-color: $form-select-bg;
 126      }
 127    }
 128  }
 129  
 130  .choices[data-type*="select-one"] {
 131    .choices__item {
 132      display: flex;
 133      justify-content: space-between;
 134    }
 135  
 136    .choices__button_joomla {
 137      position: absolute;
 138      top: 50%;
 139      inset-inline-end: 0;
 140      width: 20px;
 141      height: 20px;
 142      padding: 0;
 143      margin-block-start: -10px;
 144      margin-inline-end: 50px;
 145      border-radius: 10em;
 146      opacity: .5;
 147  
 148      &:hover,
 149      &:focus {
 150        opacity: 1;
 151      }
 152  
 153      &:focus {
 154        box-shadow: 0 0 0 2px #00bcd4;
 155      }
 156    }
 157  
 158    &::after {
 159      display: none;
 160    }
 161  }
 162  
 163  .choices[data-type*="select-multiple"],
 164  .choices[data-type*="text"] {
 165    .choices__input {
 166      padding: .2rem 0;
 167    }
 168  }
 169  
 170  .choices__heading {
 171    font-size: 1.2rem;
 172  }