[Summary view] [Print] [Text view]

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