infima/styles/components/dropdown.css

A UI framework for content-centric websites.

:root {
  --ifm-dropdown-background-color: var(--ifm-background-surface-color);
  --ifm-dropdown-font-weight: var(--ifm-font-weight-semibold);
  --ifm-dropdown-link-color: var(--ifm-font-base-color);
  --ifm-dropdown-hover-background-color: var(--ifm-hover-overlay);
}

.dropdown {
  display: inline-flex;
  font-weight: var(--ifm-dropdown-font-weight);
  position: relative;
  vertical-align: top;

  &.dropdown--hoverable:hover,
  &.dropdown--show {
    & .dropdown__menu {
      display: block;
    }
  }

  &.dropdown--right {
    & .dropdown__menu {
      right: 0;
    }
  }

  & .dropdown__menu {
    background-color: var(--ifm-dropdown-background-color);
    border-radius: var(--ifm-global-radius);
    box-shadow: var(--ifm-global-shadow-md);
    display: none;
    min-width: 10rem;
    list-style: none;
    padding: 0.5rem;
    position: absolute;
    top: 100%;
    z-index: var(--ifm-z-index-dropdown);

    & .dropdown__link {
      border-radius: 0.375rem;
      color: var(--ifm-dropdown-link-color);
      display: block;
      font-size: 0.875rem;
      padding: 0.375rem 0.5rem;
      white-space: nowrap;

      &:hover {
        background-color: var(--ifm-dropdown-hover-background-color);
        text-decoration: none;
      }
    }
  }
}