castopod/app/Views/_assets/styles/multiSelect.css

/*===============================
=          MultiSelect          =
===============================*/
.multiselect {
  @apply relative;

  &:focus {
    @apply shadow-outline outline-none;
  }
  &:last-child {
    @apply mb-0;
  }
  &.is-disabled {
    &.multiselect__inner,
    &.multiselect__input {
      @apply bg-gray-300 cursor-not-allowed select-none;
    }
    &.multiselect__item {
      @apply cursor-not-allowed;
    }
  }

  & [hidden] {
    @apply hidden;
  }
}

.multiselect[data-type*="select-multiple"],
.multiselect[data-type*="text"] {
  & .multiselect__inner {
    @apply cursor-text;
  }
  & .multiselect__button {
    @apply relative inline-block w-2 pl-4 mt-0 mb-0 ml-1 opacity-75;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
    background-size: 8px;

    &:hover,
    &:focus {
      @apply opacity-100;
    }
  }
}

.multiselect__inner {
  @apply inline-block w-full px-2 pt-2 pb-1 overflow-hidden align-top bg-white border rounded;

  &.is-focused,
  &.is-open {
    @apply shadow-outline;
  }
  &.is-open {
    @apply rounded-b-none;
  }
  &.is-flipped.is-open {
    @apply rounded-t-none;
  }
}

.multiselect__list {
  @apply p-0 m-0 list-none;
}

.multiselect__list--multiple {
  @apply inline;

  & .multiselect__item {
    @apply inline-flex px-2 py-1 mb-1 mr-2 text-sm text-white break-all bg-green-500 rounded;

    &[data-deletable] {
      @apply pr-1;
    }
    & [dir="rtl"] {
      @apply ml-2 mr-0;
    }
    &.is-highlighted {
      @apply bg-green-700;
    }
    &.is-disabled {
      @apply bg-gray-500;
    }
  }
}

.multiselect__list--dropdown {
  @apply absolute z-10 invisible w-full overflow-hidden break-all bg-white border border-t-0 rounded-b shadow-lg;
  top: 100%;
  will-change: visibility;

  &.is-active {
    @apply visible;
  }
  &.is-open {
    @apply shadow-outline;
  }
  &.is-flipped {
    @apply top-auto mt-0 rounded-t;
    bottom: 100%;
  }
  & .multiselect__list {
    @apply relative overflow-auto;
    max-height: 300px;
    -webkit-overflow-scrolling: touch;
    will-change: scroll-position;
  }
  & .multiselect__item {
    @apply relative p-3;

    & [dir="rtl"] {
      @apply text-right;
    }
  }
  & .multiselect__item--selectable {
    @screen sm {
      padding-right: 100px;
      &:after {
        @apply absolute text-sm transform -translate-y-1/2 opacity-0;
        content: attr(data-select-text);
        right: 10px;
        top: 50%;
      }
      & [dir="rtl"] {
        @apply text-right;
        padding-left: 100px;
        padding-right: 10px;
        &:after {
          @apply right-auto;
          left: 10px;
        }
      }
    }
    &.is-highlighted {
      @apply bg-gray-100;
      &:after {
        @apply opacity-50;
      }
    }
  }
}

.multiselect__item {
  @apply cursor-default;
}

.multiselect__item--selectable {
  @apply cursor-pointer;
}

.multiselect__item--disabled {
  @apply opacity-50 cursor-not-allowed select-none;
}

.multiselect__heading {
  @apply p-3 font-semibold text-gray-600 border-b;
}

.multiselect__button {
  @apply bg-transparent bg-center bg-no-repeat border-0 appearance-none cursor-pointer;
  text-indent: -9999px;

  &:focus {
    @apply outline-none;
  }
}

.multiselect__input {
  @apply inline-block max-w-full py-1 pl-1 mb-1 align-baseline bg-transparent border-0 rounded-none;
  &:focus {
    @apply outline-none;
  }
  & [dir="rtl"] {
    @apply pl-0 pr-1;
  }
}

.multiselect__placeholder {
  @apply opacity-50;
}

/*=====  End of Choices  ======*/