scss scss for select2 #bulma

Posted 2021-05-17

.select2-container {
  .select2-selection--single {
    transition: border-color $speed;
    font-family: $family-sans-serif;
    height: 2.285em;

    font-size: 1rem;
    outline: none !important;
    display: inline-flex;
    align-items: center;
    width: 100%;
    border-color: $border;
    border-radius: $radius;
    &:hover {
      border-color: $border-hover;
    }

    .select2-selection__rendered {
      padding-left: 0.75em;
      padding-right: 0.75em;
      line-height: 2.3em;

    }
    .select2-selection__arrow {
      height: 2.3em;
      top: 0px;
    }
  }
  
  .select2-dropdown {
    border-color: $primary;

    .select2-search {
      margin: 10px;
      .select2-search__field {
        @extend .input;
        border-radius: $radius !important;
      }
    }

    .select2-results__options {
      max-height: 210px;
      .select2-results__option {
        padding: 0.75em;
        font-family: $family-sans-serif;
        font-size: 1rem;

        &.select2-results__option--highlighted {
          background: $primary;
        }
      }
    }
  }
}

.select2-container--open {
  .select2-selection--single {
    border-color: $primary;

    &:hover {
      border-color: $primary;
    }
  }
}