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

/*===============================
=          MultiSelect          =
===============================*/

@layer components {
  .multiselect {
    @apply relative;

    &:focus {
      @apply outline-none ring;
    }
    &: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 ring;
    }
    &.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 rounded bg-pine-600;

      &[data-deletable] {
        @apply pr-1;
      }
      & [dir="rtl"] {
        @apply ml-2 mr-0;
      }
      &.is-highlighted {
        @apply bg-pine-600;
      }
      &.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 ring;
    }
    &.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 Multiselect  ======*/