[Summary view] [Print] [Text view]

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