@hummingbirdui/hummingbird/src/components/dropdown.css

An open-source system designed for rapid development, without sacrificing the granular control of utility-first CSS.

@utility dropdown {
  @layer base {
    @apply relative;
  }
}
@utility dropdown-center {
  @layer base {
    @apply relative;
  }
}
@utility dropup-center {
  @layer base {
    @apply relative;
  }
}

@utility dropdown-menu {
  @layer base {
    --dropdown-zindex: 1000;
    --dropdown-bg: var(--background-color-default);
    --dropdown-spacer: --spacing(0.5);
    --dropdown-min-width: 10rem;
    --dropdown-padding-x: 0;
    --dropdown-padding-y: --spacing(2);
    --dropdown-font-size: var(--text-sm);
    --dropdown-border-width: 1px;
    --dropdown-border-color: transparent;
    --dropdown-box-shadow: var(--shadow-xl);
    --dropdown-border-radius: var(--radius-lg);
    --dropdown-link-color: var(--text-color-default);
    --dropdown-link-hover-color: var(--text-color-default);
    --dropdown-link-hover-bg: var(--background-color-subtle);
    --dropdown-link-disabled-color: var(--color-disabled-color);
    --dropdown-link-active-color: var(--color-primary);
    --dropdown-link-active-bg: var(--color-primary-lighter);
    --dropdown-item-padding-x: --spacing(4);
    --dropdown-item-padding-y: --spacing(1.5);
    --dropdown-divider-bg: var(--border-color-base);
    --dropdown-divider-margin-y: --spacing(2);
    --dropdown-header-padding-y: --spacing(2);
    --dropdown-header-padding-x: --spacing(4);
    --dropdown-header-color: var(--text-color-muted);
    --dropdown-header-font-size: var(--text-base);

    @apply absolute 
    z-[var(--dropdown-zindex)]
    hidden
    min-w-[var(--dropdown-min-width)]
    px-[var(--dropdown-padding-x)]
    py-[var(--dropdown-padding-y)]
    m-0
    list-none
    border-[length:var(--dropdown-border-width)]
    border-[var(--dropdown-border-color)]
    text-[length:var(--dropdown-font-size)]
    bg-[var(--dropdown-bg)]
    bg-clip-padding
    shadow-[var(--dropdown-box-shadow)]
    rounded-[var(--dropdown-border-radius)];

    &[data-bs-popper] {
      @apply top-full left-0 mt-[var(--dropdown-spacer)];
    }

    &.show {
      @apply block;
    }

    @variant dark {
      --dropdown-border-color: var(--border-color-base);
    }
  }
}

@utility dropdown-menu-start {
  @layer base {
    --bs-position: start;
    &[data-bs-popper] {
      @apply right-auto left-0;
    }
  }
}
@utility dropdown-menu-end {
  @layer base {
    --bs-position: end;
    &[data-bs-popper] {
      @apply right-0 left-auto;
    }
  }
}

@utility dropup {
  @layer base {
    @apply relative;
    .dropdown-menu[data-bs-popper] {
      @apply top-auto bottom-full mt-0 mb-[var(--dropdown-spacer)];
    }
  }
}
@utility dropend {
  @layer base {
    @apply relative;
    .dropdown-menu[data-bs-popper] {
      @apply top-0 right-auto left-full mt-0 ml-[var(--dropdown-spacer)];
    }
  }
}
@utility dropstart {
  @layer base {
    @apply relative;
    .dropdown-menu[data-bs-popper] {
      @apply top-0 right-full left-auto mt-0 mr-[var(--dropdown-spacer)];
    }
  }
}

@utility dropdown-divider {
  @layer base {
    @apply h-0 overflow-hidden
    my-[var(--dropdown-divider-margin-y)]
    border-t
    border-[var(--dropdown-divider-bg)];
  }
}

@utility dropdown-item {
  @layer base {
    @apply block w-full
    px-[var(--dropdown-item-padding-x)]
    py-[var(--dropdown-item-padding-y)]
    clear-both
    text-left
    text-[var(--dropdown-link-color)]
    whitespace-nowrap
    no-underline;

    &:hover,
    &:focus {
      @apply text-[var(--dropdown-link-hover-color)]
      bg-[var(--dropdown-link-hover-bg)];
    }
    &.active,
    &:active {
      @apply text-[var(--dropdown-link-active-color)]
      bg-[var(--dropdown-link-active-bg)];
    }
    &:is(:disabled, [disabled], .disabled) {
      @apply text-[var(--dropdown-link-disabled-color)]
      pointer-events-none;
    }
  }
}

@utility dropdown-header {
  @layer base {
    @apply block font-semibold
    px-[var(--dropdown-header-padding-x)]
    py-[var(--dropdown-header-padding-y)]
    text-[var(--dropdown-header-color)]
    text-[length:var(--dropdown-header-font-size)]
    whitespace-nowrap
    mb-0;
  }
}

@utility dropdown-item-text {
  @layer base {
    @apply block
    px-[var(--dropdown-item-padding-x)]
    py-[var(--dropdown-item-padding-y)]
    text-[var(--dropdown-link-color)];
  }
}