penpot/frontend/src/app/main/ui/components/context_menu_a11y.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 "refactor/common-refactor.scss" as *;

.context-menu {
  position: relative;
  visibility: hidden;
  opacity: $op-0;
  z-index: $z-index-4;

  &.is-open {
    position: relative;
    display: block;
    opacity: $op-10;
    visibility: visible;
  }

  &.fixed {
    position: fixed;
  }

  .context-menu-items {
    @include menuShadow;
    position: absolute;
    top: $s-12;
    left: calc(-1 * $s-6);
    max-height: $s-480;
    min-width: $s-96;
    margin: $s-0;
    padding: $s-4;
    border-radius: $br-8;
    border: $s-2 solid var(--panel-border-color);
    background-color: var(--menu-background-color);
    overflow: auto;

    & .separator {
      border-top: solid $s-1 var(--color-background-quaternary);
    }

    &.min-width {
      min-width: $s-192;
    }

    .context-menu-item {
      display: flex;

      .context-menu-action {
        @include bodySmallTypography;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        height: $s-28;
        width: 100%;
        padding: $s-6;
        border-radius: $br-8;
        white-space: nowrap;
        color: var(--menu-foreground-color);

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

          .submenu-icon {
            margin-left: 0.5rem;

            svg {
              @extend .button-icon-small;
              stroke: var(--menu-foreground-color);
            }
          }
        }

        &.submenu-back {
          display: flex;
          align-items: center;
          font-weight: $fw700;
          background: none;
          border: none;
          cursor: pointer;

          .submenu-icon-back svg {
            @extend .button-icon-small;
            stroke: var(--menu-foreground-color);
            transform: rotate(180deg);
          }
        }
      }

      &:hover .context-menu-action {
        background-color: var(--menu-background-color-hover);
        text-decoration: none;
        color: var(--menu-foreground-color);

        &.submenu .submenu-icon svg {
          stroke: var(--menu-foreground-color);
        }

        &.submenu-back .submenu-icon-back svg {
          stroke: var(--menu-foreground-color);
        }
      }

      .context-menu-action-disabled,
      &:hover .context-menu-action-disabled {
        color: var(--color-foreground-secondary);
      }

      &:focus {
        outline: none;
      }

      &:focus-visible {
        outline: none;

        .context-menu-action {
          border: 1px solid var(--menu-border-color-focus);
          background-color: var(--menu-background-color-focus);
          text-decoration: none;
          color: var(--menu-foreground-color-focus);

          &.submenu .submenu-icon svg {
            stroke: var(--menu-foreground-color-focus);
          }

          &.submenu-back .submenu-icon-back svg {
            stroke: var(--menu-foreground-color-focus);
          }
        }
      }

      &.selected {
        .context-menu-action {
          justify-content: space-between;
          color: var(--menu-foreground-color-focus);
        }

        .selected-icon {
          @extend .button-tag;
          border-radius: $br-8;
          height: 100%;

          svg {
            @extend .button-icon-small;
            stroke: var(--menu-foreground-color-focus);
          }
        }
      }
    }

    .is-selected .context-menu-action {
      padding-left: $s-28;
      background-image: url(/images/icons/tick.svg);
      background-repeat: no-repeat;
      background-position: 5% 48%;
      background-size: $s-12;
      font-weight: $fw700;
    }
  }

  &.is-selectable {
    .context-menu-action {
      padding-left: 1.5rem;
    }
  }
}