infima/styles/components/menu.css

A UI framework for content-centric websites.

:root {
  --ifm-menu-color: var(--ifm-color-emphasis-700);
  --ifm-menu-color-active: var(--ifm-color-primary);
  --ifm-menu-color-background-active: var(--ifm-hover-overlay);
  --ifm-menu-color-background-hover: var(--ifm-hover-overlay);
  --ifm-menu-link-padding-horizontal: 1rem;
  --ifm-menu-link-padding-vertical: 0.375rem;
  --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg alt="Arrow" xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="rgba(0,0,0,0.5)" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
}

.menu {
  font-weight: var(--ifm-font-weight-semibold);
  overflow-x: hidden;

  & .menu__list {
    margin: 0;
    list-style-type: none;
    padding-left: 0;
    transition: height var(--ifm-transition-fast)
      cubic-bezier(0.08, 0.52, 0.52, 1);

    // Non-top level menus
    & .menu__list {
      margin-left: var(--ifm-menu-link-padding-horizontal);
    }
  }

  & .menu__list-item {
    margin-bottom: 0.25rem;
    margin-top: 0.25rem;

    &.menu__list-item--collapsed {
      & .menu__list {
        height: 0;
        overflow: hidden;
      }

      & .menu__link--sublist:after {
        transform: rotateZ(90deg);
      }
    }
  }

  & .menu__link {
    border-radius: 0.25rem;
    color: var(--ifm-menu-color);
    cursor: pointer;
    display: flex;
    line-height: 20px;
    justify-content: space-between;
    text-decoration: none;
    margin: 0;
    padding: var(--ifm-menu-link-padding-vertical)
      var(--ifm-menu-link-padding-horizontal);

    &.menu__link--sublist:after {
      background-image: var(--ifm-menu-link-sublist-icon);
      background-size: 2rem 2rem;
      background-position: center;
      content: ' ';
      display: inline-block;
      height: 1.25rem;
      width: 1.25rem;
      transition: transform var(--ifm-transition-fast) linear;
      transform: rotate(180deg);
    }

    &:hover {
      background: var(--ifm-menu-color-background-hover);
    }

    &.menu__link--active:not(.menu__link--sublist) {
      background: var(--ifm-menu-color-background-active);
    }

    &.menu__link--active {
      color: var(--ifm-menu-color-active);
    }
  }

  &.menu--responsive {
    & .menu__button {
      bottom: 2rem;
      display: none;
      position: fixed;
      right: 1rem;
      z-index: var(--ifm-z-index-fixed);

      @media (--ifm-narrow-window) {
        display: inherit;
      }
    }

    @media (--ifm-narrow-window) {
      & .menu__list {
        display: none;
        opacity: 0;
      }
    }
  }

  &.menu--show {
    -ms-scroll-chaining: none;
    background: var(--ifm-background-surface-color);
    bottom: 0;
    left: 0;
    overscroll-behavior: contain;
    padding: 1rem;
    position: fixed;
    right: 0;
    top: 0;
    z-index: var(--ifm-z-index-overlay);

    & .menu__list {
      display: inherit;
      opacity: 100;
      transition: opacity var(--ifm-transition-fast) linear;
    }
  }
}