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

Spur web UI

/* Nav search */
.nav-search {
  @apply z-20;

  @screen xl {
    @apply relative;
  }
}

.nav-search-container {
  @apply absolute inset-x-0 inset-y-0 z-10 p-4 opacity-0 pointer-events-none;
  background-color: rgba(0, 0, 0, 0.75);
  transition: opacity 200ms ease-in-out, width 300ms ease-in-out;

  @screen xl {
    @apply p-0 pr-6 bg-transparent;
    right: 100%;
    left: auto;
    top: -1.125rem;
    width: 0rem;
  }
}

.nav-search-container.is-active {
  @apply opacity-100 pointer-events-auto;

  @screen xl {
    width: 20rem;
  }
}

/* Nav search field */
.nav-search-field {
  @apply relative p-4 h-15 bg-white rounded-md border border-border-line-purple;
}

.nav-search-field::before,
.nav-search-field::after {
  @apply hidden;
  position: absolute;
  top: 0;
  left: 2.75rem;
  width: 0;
  height: 0;
  content: '';
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;

  @screen xl {
    @apply block;
    left: auto;
    transform: translateY(-50%);
    border-right: 0;
  }
}

.nav-search-field::before {
  top: -6px;
  border-bottom: 5px solid #b7b4d5;

  @screen xl {
    top: 50%;
    right: -0.5rem;
    border-left: 0.5rem solid #b7b4d5;
    border-top: 0.5rem solid transparent;
    border-bottom: 0.5rem solid transparent;
  }
}

.nav-search-field::after {
  top: -5px;
  border-bottom: 5px solid #ffffff;

  @screen xl {
    top: 50%;
    right: calc(-0.5rem - -1px);
    border-left: 0.5rem solid #ffffff;
    border-top: 0.5rem solid transparent;
    border-bottom: 0.5rem solid transparent;
  }
}

.nav-search-field-input {
  @apply w-full h-full bg-transparent;
}

.nav-search-field-input::placeholder {
  @apply text-xs;
}

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

/* Nav search dropdown */
.nav-search-dropdown {
  @apply relative p-4 max-h-4xs overflow-y-scroll bg-white rounded-b-md border border-border-line-purple opacity-0;
  top: -1rem;
  transition: opacity 200ms ease-in-out, top 300ms ease-in-out, width 0ms;

  @screen xl {
    @apply max-h-2xs;
    width: 0;
  }
}

.nav-search-dropdown.is-active {
  @apply block opacity-100;
  top: -0.5rem;

  @screen xl {
    width: 32rem;
  }
}

.nav-search-dropdown-list {
  @apply -my-4;
}

.nav-search-dropdown-item {
  @apply -mx-4 px-4 py-4;
  transition: background-color 200ms ease-in-out;
}

.nav-search-dropdown-item:hover,
.nav-search-dropdown-item.is-selected {
  @apply bg-buzz-purple-10;
}