haikal/static/scss/theme/plugins/_choices.scss

/* -------------------------------------------------------------------------- */
/*                                   Choices                                  */
/* -------------------------------------------------------------------------- */
@use 'sass:math';
// @import 'choices.js/src/styles/choices';

.choices {
  font-family: var(--#{$prefix}font-sans-serif) !important;
  .choices__inner {
    border-radius: $input-border-radius;
    line-height: 1.5rem !important;
    font-size: 1rem;
    background-color: $input-bg !important;
    min-height: var(--#{$prefix}choices-inner-min-height) !important;
    background-size: $form-select-bg-size;
    border: 1px solid $input-border-color;
    font-family: $form-select-font-family;
    padding: 6px ($form-select-padding-x + $form-select-indicator-padding) 6px
      $form-select-padding-x;

    box-shadow: $input-box-shadow;
  }
  .choices__input--cloned {
    padding: 0;
    font-size: 0.8rem;
    color: $input-color;
    background-color: var(--#{$prefix}emphasis-bg) !important;
    // margin-top: 5px !important;
    vertical-align: top;
    margin-bottom: 0;
    &::placeholder {
      color: $input-placeholder-color;
    }
  }

  .choices__list--dropdown {
    border: 1px solid var(--#{$prefix}border-color-translucent) !important;
    // box-shadow: var(--#{$prefix}box-shadow) !important;
    border-bottom-left-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
    background-color: var(--#{$prefix}emphasis-bg);
    z-index: 1000;
    // border-radius: $border-radius;
    .choices__item--selectable {
      padding: 2px $form-select-padding-x;
      padding-right: 20px;
      font-size: 1rem !important;
      background-color: var(--#{$prefix}secondary-bg);
      color: var(--#{$prefix}body-color);
      &.is-highlighted {
        background-color: var(--#{$prefix}primary);
        color: var(--#{$prefix}emphasis-bg);
      }
    }
  }
  .choices__list {
    margin-top: 0 !important;
    .has-no-choices {
      background-color: var(--#{$prefix}choices-item-has-no-choices-bg);
    }
  }
  .choices__list--multiple .choices__item {
    text-transform: uppercase;
    padding: 2.5px 8px !important;
    font-size: map-get($font-sizes, 10) !important;
    border: 0;
    background-color: var(--#{$prefix}choices-item-bg) !important;
    border-radius: 4px;
    margin-bottom: 0 !important;
    // margin-top: 5px !important;
    // color: var(--#{$prefix}body-highlight-color);
    color: var(--#{$prefix}choices-item-color);
    font-weight: $font-weight-bold;
    line-height: 1;
    // text-transform: uppercase;
  }
  .choices__list--single {
    padding: 0 !important;
    // margin-top: 5px !important;
    .choices__button {
      background-color: transparent !important;
    }
  }
}
.choices[data-type*='select-multiple'] .choices__button,
.choices[data-type*='text'] .choices__button {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiM2ZTc4OTEiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXgiPjxsaW5lIHgxPSIxOCIgeTE9IjYiIHgyPSI2IiB5Mj0iMTgiPjwvbGluZT48bGluZSB4MT0iNiIgeTE9IjYiIHgyPSIxOCIgeTI9IjE4Ij48L2xpbmU+PC9zdmc+);
  background-color: transparent !important;
  padding: 0px !important;
  background-size: 11px !important;
  margin: 0;
  margin-left: 6px;
  border: none;
  background-position: -2px -1px;
  .firefox & {
    background-position: -2px 0px;
  }
}
.choices[data-type*='select-one'] {
  .choices__input {
    padding-left: $form-select-padding-x;
    padding-right: $form-select-padding-x;
  }
  .choices__inner {
    padding-bottom: 5px !important;
  }
}
.is-focused,
.is-open {
  .choices__inner {
    border-radius: $border-radius !important;
    border-color: $form-select-focus-border-color !important;
    box-shadow: $form-select-focus-box-shadow !important;
    outline: 0;
  }
}

.choices-select-container {
  position: relative;
  .choices__inner {
    padding-left: map-get($spacers, 6);
  }
  .choices-icon {
    position: absolute;
    left: 1rem;
  }
}

.choices__item .choices__item--choice .has-no-results {
  background-color: red !important;
}

// validation
.was-validated {
  .choices {
    &.valid {
      .choices__inner {
        border-color: var(--#{$prefix}success) !important;
        padding-right: calc(1.5em + 0.75rem);
        background-image: escape-svg($form-feedback-icon-valid);
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
      }
    }
    &[data-type='select-one'].valid {
      .choices__inner {
        background-position: right calc(0.375em + 1.55rem) center;
      }
    }
    &.invalid {
      margin-bottom: 0;
      .choices__inner {
        border-color: var(--#{$prefix}danger) !important;
        padding-right: calc(1.5em + 0.75rem);
        background-image: escape-svg($form-feedback-icon-invalid);
        background-repeat: no-repeat;
        background-position: right calc(0.375em + 0.1875rem) center;
        background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
      }
      & + .invalid-feedback {
        display: block;
      }
    }
    &[data-type='select-one'].invalid {
      .choices__inner {
        background-position: right calc(0.375em + 1.55rem) center;
      }
    }
  }
  .choices[data-type*='select-one'] .choices__button {
    margin-right: 60px !important;
  }
  .choices[data-type*='select-one'] .choices__inner {
    padding-bottom: 6px !important;
  }
}
.form-floating-advance-select > label {
  color: rgba(var(--#{$prefix}body-color-rgb), 0.65);
  padding-top: map-get($spacers, 1);
}
.form-floating-advance-select .choices__inner {
  padding-top: map-get($spacers, 3);
}