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

Spur web UI

.search-field {
  @apply flex h-full relative;
}

.search-field-btn {
  @apply px-4 h-11 w-full border border-spur-grey rounded-md text-left;
}

.search-field-btn[disabled] {
  @apply bg-filter-grey cursor-not-allowed;
}

.search-field-btn-placeholder {
  @apply text-border-line-purple;
  line-height: 44px;
  margin-left: -1px;
}

.search-field-input {
  @apply px-4 h-11 w-full bg-transparent;
  margin: -1px;
}

.search-field-btn:focus,
.search-field-input:focus {
  outline: none;
}

.search-field-input::-webkit-input-placeholder {
  @apply text-border-line-purple opacity-100;
}

.search-field-input::-moz-placeholder {
  @apply text-border-line-purple opacity-100;
}

.search-field-input:-ms-input-placeholder {
  @apply text-border-line-purple opacity-100;
}

.search-field-input:-moz-placeholder {
  @apply text-border-line-purple opacity-100;
}

.search-field-input::placeholder {
  @apply text-border-line-purple opacity-100;
}

.search-field-dropdown {
  @apply absolute top-0 inset-x-0 z-10 hidden overflow-hidden w-full border border-spur-grey rounded-md bg-white;
}

.search-field-results {
  @apply max-h-3xs  overflow-y-scroll border-t border-spur-grey;
}

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

.search-field-result.disabled {
  @apply opacity-50;
}

.search-field-result:hover {
  @apply bg-filter-grey cursor-pointer;
}

.search-field-result.is-selected,
.search-field-result.is-selected:hover {
  @apply bg-support-purple text-white;
}

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

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