oui-kit/lib/float/oui-menu.styl

🎯 *UI toolkit with a French touch* 🇫🇷

@require "../../stylus/index.styl";

.oui-menu {
  --menu-bg: var(--n0-50); // ButtonFace;
  --menu-border: 1px solid var(--n0-300); // ButtonShadow;
  --menu-radius: px(4);
  --item-fg: var(--n0-950); // ButtonText;
  --item-bg: none;
  --item-hover-fg: var(--fg, HighlightText);
  --item-hover-bg: var(--p1-200, Highlight);
  // --item-active-color: black;
  // --item-active-background: white;
  --item-separator: var(--n0-300);

  .dark & {
    --menu-bg: var(--n0-900); // ButtonFace;
    --menu-border: 1px solid var(--n0-600); // ButtonShadow;
    --menu-radius: px(4);
    --item-fg: var(--fg);
    --item-bg: none;
    --item-hover-fg: var(--fg);
    --item-hover-bg: var(--p1-800);
    --item-separator: var(--n0-600);
  }

  use: stack-y;
  cursor: default;
  max-width: 20rem;
  min-width: 10rem;
  padding: px(4) px(4);
  background: var(--menu-bg);
  border: var(--menu-border);
  border-radius: var(--menu-radius);
  box-shadow: var(--menu-shadow, -box-shadow-md);
  list-style: none;
  z-index: -z-index-popover;
  font-family: inherit;
  font-size: 10pt;
  font-weight: 500;
  user-select: none;

  ._menu_item {
    use: stack-x;
    gap: 4;
    color: var(--item-fg);
    background: var(--item-bg);
    list-style: none;
    border-radius: px(2);
    white-space: nowrap;
    position: relative;
    display: flex;
    padding: px(4) px(8);

    &:hover {
      color: var(--item-hover-fg);
      background: var(--item-hover-bg);
    }

    &._menu__active, &:active {
      color: var(--item-hover-fg);
      background: var(--item-hover-bg);
    }

    &._menu_submenu {
      justify-content: space-between;
    }
  }

  ._menu_disabled {
    opacity: 0.6;
    pointer-events: none;
  }

  ._menu_checked_possible, ._menu_checked {
    padding-left: 28;
  }

  ._menu_checked {
    &:before {
      position: absolute;
      left: 8;
      content: "✔︎";
    }
  }

  ._menu_separator {
    display: flex;
    height: px(1);
    max-height: px(1);
    min-height: 1px;
    border: none;
    padding: 0;
    margin-top: px(4);
    margin-bottom: px(4);
    background: var(--item-separator);
  }

  ._menu_header {
    color: var(--t3-fg);
    font-size: px(12);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: -0.2px;
    padding: 8;
    padding-bottom: 4;
  }

  svg {
    display: inline-block;
    flex-shrink: 0;
    flex-grow: 0;
    size: 1em;
    transform: translateY(0.1em);
  }

  ._menu_submenu_arrow {
    margin-left: auto;
    font-size: 8pt;
    opacity: 0.7;
  }
}