amis2/scss/components/_context-menu.scss

// 为了提示用户这不是系统菜单。
@keyframes contextMenuInSpecial {
  from {
    transform: scale3d(1, 1, 1);
  }

  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes contextMenuIn {
  from {
    opacity: 0;
  }
}

@keyframes contextMenuOut {
  to {
    opacity: 0;
  }
}

.#{$ns}ContextMenu {
  z-index: $zindex-contextmenu;
  position: fixed;
  left: 0;
  top: 0;
  // pointer-events: none;

  &-menu {
    position: absolute;
    z-index: $zindex-contextmenu;

    &.in,
    &.out {
      // opacity: 1;
      // transform: translateY(0) scale(1);
      animation-duration: var(--animation-duration);
      animation-fill-mode: both;
    }

    &.in {
      animation-name: contextMenuInSpecial;
      animation-duration: var(--animation-duration);
    }

    &.out {
      animation-name: contextMenuOut;
    }

    display: block;
    position: absolute;

    margin: 0;
    padding: 4px 0 5px;

    background: rgba(239, 239, 239, 0.95);
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.34);

    color: rgba(0, 0, 0, 0.75);
    font-family: -apple-system, Lucida Grande;
    font-size: var(--fontSizeMd);
    line-height: 1.1;

    &::before {
      display: block;
      position: absolute;
      content: '';
      top: -1px;
      left: -1px;
      bottom: -1px;
      right: -1px;

      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.125);
      z-index: -1;
    }
  }

  &-divider {
    border: none;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin: 6px 1px 5px;
    padding: 0;
  }

  &-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 185px;
  }

  &-item {
    position: relative;

    > a {
      white-space: nowrap;
      display: block;
      padding: 0 20px;
      border-top: 1px solid rgba(0, 0, 0, 0);
      border-bottom: 1px solid rgba(0, 0, 0, 0);
      color: inherit;
    }

    &:not(.is-disabled):hover > a {
      text-decoration: none;
      color: #fff;
      background: -webkit-linear-gradient(top, #648bf5, #2866f2);
      background: linear-gradient(to bottom, #648bf5 0%, #2866f2 100%);
      border-top: 1px solid #5a82eb;
      border-bottom: 1px solid #1758e7;
      cursor: pointer;
    }

    &.is-disabled > a {
      color: #999;
      pointer-events: none;
    }

    &.has-child > a::after {
      content: '';
      width: 0;
      height: 0;
      border-width: 4px 7px;
      border-style: solid;
      border-color: transparent transparent transparent rgba(0, 0, 0, 0.75);
      text-shadow: 0px 4px 9px rgba(0, 0, 0, 0.34);
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }

    &.has-child:hover > a::after {
      border-color: transparent transparent transparent #fff;
    }
  }

  &-itemIcon {
    margin-right: 5px;
  }

  &-subList {
    display: none;
    list-style: none;
  }

  &-item:hover > &-subList {
    display: block;
    animation-duration: var(--animation-duration);
    animation-fill-mode: both;
    animation-name: contextMenuIn;

    display: block;
    position: absolute;
    left: 100%;
    top: -3px;

    margin: 0;
    padding: 4px 0 5px;

    background: rgba(239, 239, 239, 0.95);
    box-shadow: 0px 4px 9px rgba(0, 0, 0, 0.34);
    border-radius: 7px;

    color: rgba(0, 0, 0, 0.75);
    font-family: -apple-system, Lucida Grande;
    font-size: var(--fontSizeMd);
    line-height: 1.1;

    &::before {
      display: block;
      position: absolute;
      content: '';
      top: -1px;
      left: -1px;
      bottom: -1px;
      right: -1px;

      border-radius: 4px;
      border: 1px solid rgba(0, 0, 0, 0.125);
      z-index: -1;
    }
  }

  &--left &-item:hover > &-subList {
    left: auto;
    right: 100%;
  }

  &-cursor {
    position: absolute;
    width: 1px;
    height: 1px;
    z-index: -1;
  }

  &-overlay {
    position: fixed !important;
    z-index: $zindex-contextmenu - 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    pointer-events: none;
  }
}