spur-tailwind/css/components/filter-field.css

Spur web UI

.filter-field {
  @apply relative;
}

.filter-field-search {
  @apply relative border border-spur-grey rounded-md bg-white;
}

.filter-field-input {
  @apply pl-4 pr-16 h-11 w-full text-left bg-transparent;
}

.filter-field-input-meta {
  @apply absolute z-10;
  top: 50%;
  right: 1rem;
  content: '';
  transform: translateY(-50%);
}

.filter-field-counter {
  @apply mr-2;
}

.filter-field-tags {
  @apply hidden items-center px-4 min-h-11 w-full overflow-hidden whitespace-no-wrap;
}

.filter-field-tags .tag {
  @apply m-1 truncate;
}

.filter-field-tags .tag-text {
  @apply truncate;
  max-width: 5rem;
}

.filter-field-all {
  @apply flex items-center px-4 h-11 w-full border-b border-spur-grey bg-transparent;
}

.filter-field-dropdown {
  @apply absolute z-20 hidden overflow-hidden w-full border border-t-0 border-spur-grey rounded-b-md bg-white;
  top: 100%;
}

.filter-field-dropdown.is-relative {
  @apply relative;
}

.filter-field-results {
  @apply max-h-3xs overflow-y-scroll;
}

.filter-field-results ul {
  @apply pl-0;
  list-style: none;
}

.filter-field-results ul .filter-field-result {
  @apply pl-8;
}

.filter-field-results ul ul .filter-field-result {
  @apply pl-12;
}

.filter-field-result-heading {
  @apply text-xl;
}

/* .filter-field-results ul .filter-field-result-heading {
  @apply .pl-4;
} */

.filter-field-result {
  @apply flex flex-col justify-center px-4 h-11;
}

/* Hover states */
.filter-field-all:hover,
.filter-field-result:hover {
  @apply bg-filter-grey cursor-pointer;
}

/* Active state */
.filter-field.is-active .filter-field-search {
  @apply rounded-b-none;
}

.filter-field.is-active .filter-field-icon {
  transform: rotate(180deg);
}

.filter-field.is-active .filter-field-dropdown {
  @apply block;
}

/* Filtering state */
.filter-field.is-filtering .filter-field-input {
  @apply hidden;
}

.filter-field.is-filtering .filter-field-tags {
  @apply flex;
}

/* Relative modifier */
.filter-field-dropdown.is-relative {
  @apply relative;
}