thooams/ui_bibz

View on GitHub
app/assets/stylesheets/sass/forms/_multiselect.sass

Summary

Maintainability
Test Coverage
.multiselect-container
  padding: 10px
.multiselect-container > li > a > label
  padding: 3px 20px 3px 10px
  > input[type=checkbox]
    margin-bottom: 0px

.multiselect-container
  height: max-content // fix with bootstrap v 5.0.0-beta1
  .filter
    margin: 5px

.without-caret
  .dropdown-toggle::after
    content: none

.ui_surround_field > .multiselect-native-select .multiselect
  border-radius: 0px

// .ui_surround_field .multiselect-native-select .multiselect
.ui_surround_field .multiselect-native-select:first-child .multiselect
  @include border-start-radius($border-radius)

.ui_surround_field .multiselect-native-select:last-child .multiselect
  @include border-end-radius($border-radius)

.multiselect-native-select
  button.multiselect
    padding-right: 30px !important
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e")
  .dropdown-menu
    padding: 0
    flex-direction: column
    &.show
      display: flex !important

  .multiselect-filter
    background-color: white
    position: sticky
    top: 0px
    z-index: 1
  .dropdown-menu
    overflow: auto
    max-height: 300px