// 为了提示用户这不是系统菜单。 @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 { &-menu { position: absolute; z-index: $zindex-contextmenu; &.in, &.out { // opacity: 1; // transform: translateY(0) scale(1); animation-duration: 0.35s; animation-fill-mode: both; } &.in { animation-name: contextMenuInSpecial; animation-duration: 0.5s; } &.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: 14px; line-height: 15px; &::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: 0.35s; 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: 14px; line-height: 15px; &::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; } }