penpot/frontend/src/app/main/ui/workspace/main_menu.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.
//
// Copyright (c) KALEIDOS INC

@use "ds/typography.scss" as t;
@use "ds/z-index.scss" as *;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/_utils.scss" as *;

.base-menu {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: var(--sp-xs);
  padding: var(--sp-xs);
  border-radius: $br-8;
  z-index: var(--z-index-dropdown);
  background-color: var(--menu-background-color);
  border: $b-2 solid var(--panel-border-color);
  box-shadow: 0 0 $sz-12 0 var(--menu-shadow-color);
}

.menu {
  top: $sz-48;
  left: calc(var(--right-sidebar-width) - $sz-40);
  inline-size: $sz-192;
}

.sub-menu {
  left: calc(var(--right-sidebar-width) + $sz-154);
  min-width: $sz-284;
  width: 115%;

  &.pos-1 {
    top: calc($sz-16 + $sz-32);
  }

  &.pos-2 {
    top: calc($sz-16 + (2 * $sz-32));
  }

  &.pos-3 {
    top: calc($sz-16 + (3 * $sz-32));
  }

  &.pos-4 {
    top: calc($sz-16 + (4 * $sz-32));
  }

  &.pos-5 {
    top: calc($sz-16 + (5 * $sz-32));
  }

  &.pos-6 {
    top: calc($sz-16 + (6 * $sz-32));
  }

  &.pos-final-5 {
    top: calc($sz-32 + (5 * $sz-32));
  }

  &.pos-final-6 {
    top: calc($sz-32 + (6 * $sz-32));
  }

  &.pos-final-7 {
    top: calc($sz-32 + (7 * $sz-32));
  }

  &.plugins {
    max-height: calc(100vh - $sz-200);
    overflow: hidden auto;
  }
}

.base-menu-item {
  @include t.use-typography("body-small");

  display: grid;
  align-items: center;
  grid-template-columns: auto $sz-16 $sz-16;
  grid-template-areas: "name indicator arrow";
  block-size: $sz-28;
  inline-size: 100%;
  padding: $sz-6;
  border-radius: $br-8;
  color: var(--menu-foreground-color);
  background-color: var(--menu-background-color);

  &:hover {
    --menu-foreground-color: var(--menu-foreground-color-hover);
    --menu-background-color: var(--menu-background-color-hover);
    --menu-shortcut-foreground-color: var(--menu-shortcut-foreground-color-hover);
    --menu-icon-foreground-color: var(--menu-foreground-color-hover);
  }

  &.disabled {
    --menu-foreground-color: var(--color-foreground-secondary);

    pointer-events: none;
  }
}

.menu-item {
  display: grid;
  align-items: center;
  grid-template-columns: auto $sz-16 $sz-16;
  grid-template-areas: "name indicator arrow";
}

.submenu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item-name {
  grid-area: name;
}

.item-indicator {
  --menu-indicator-color: var(--color-foreground-secondary);

  grid-area: indicator;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: px2rem(8);
  block-size: px2rem(8);
  border-radius: $br-circle;
  background-color: var(--menu-indicator-color);

  &.active {
    --menu-indicator-color: var(--color-accent-primary);
  }

  &.failed {
    --menu-indicator-color: var(--color-foreground-error);
  }
}

.item-arrow {
  grid-area: arrow;
  color: var(--menu-icon-foreground-color);
}

.item-icon {
  color: var(--menu-icon-foreground-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.separator {
  position: relative;
  block-size: var(--sp-xs);
  inline-size: calc(100% + var(--sp-s));
  border-top: $b-1 solid var(--color-background-quaternary);
  left: calc(-1 * var(--sp-xs));
  margin-top: var(--sp-s);
}

.shortcut {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-xxs);
  color: var(--menu-shortcut-foreground-color);
}

.shortcut-key {
  @include t.use-typography("body-small");

  display: flex;
  align-items: center;
  justify-content: center;
  height: px2rem(20);
  padding: var(--sp-xxs) px2rem(6);
  border-radius: $br-6;
  background-color: var(--menu-shortcut-background-color);
}