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

Spur web UI

.nav-dropdown {
  @apply absolute z-30 flex flex-col bg-white text-sm shadow-md	rounded opacity-0	pointer-events-none;
  width: 230px;
  top: 100%;
  right: 1rem;
  transform: translateY(-0.5rem);
  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;

  @screen xl {
    width: 210px;
  }
}

.is-active .nav-dropdown {
  @apply opacity-100 pointer-events-auto z-10;
  transform: translateY(0);
}

.nav-dropdown::before,
.nav-dropdown::after {
  @apply block;
  position: absolute;
  top: -0.5rem;
  right: calc(0.75rem - 1px);
  width: 0;
  height: 0;
  content: '';
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
}

.nav-dropdown::before {
  border-bottom: 0.5rem solid #b7b4d5;
  filter: blur(2px);
  z-index: -1;
  opacity: 0.5;
}

.nav-dropdown::after {
  border-bottom: 0.5rem solid #ffffff;
}

.nav-dropdown-list {
  @apply py-3 bg-background-grey rounded-b z-10 overflow-hidden;
}

.nav-dropdown-item {
  @apply font-semibold uppercase text-buzz-purple;
}

.nav-dropdown-item a {
  @apply block p-3 no-underline text-xs;
}

.nav-location-dropdown-list {
  @apply py-3 text-spur-black text-xs bg-white rounded-t;
}

.nav-location-dropdown-list ul {
  @apply;
}

.nav-location-dropdown-list a {
  @apply block p-3 no-underline text-spur-black;
  transition: background-color 200ms ease-in-out;
}

.nav-location-dropdown-list ul a {
  @apply pl-6;
}

.nav-location-dropdown-list a:hover {
  @apply bg-buzz-purple-10;
}

.nav-location-dropdown-list a.is-active {
  @apply text-deep-blue-jeans;
}

@screen xl {
  .nav-dropdown {
    top: calc(100% + 1rem);
    right: 0.875rem;
  }
}

/* Help dropdown modifiers */
.nav-dropdown.help-dropdown {
  top: 125%;
  right: -103px;
  width: 230px;

  &::before,
  &::after {
    left: auto;
    right: 50%;
    transform: translate(50%);
  }

  @screen xl {
    top: calc(100% + 1rem);
    right: -0.25rem;
    width: 250px;

    &::before,
    &::after {
      left: auto;
      right: calc(0.75rem - 1px);
      transform: translate(0);
    }
  }
}