UNPKG

@wuild/vue-contextmenu

Version:

A customizable context menu component for Vue 3

3 lines (2 loc) 2.06 kB
:root{--context-bg: #ffffff;--context-text: #1f2937;--context-hover: rgba(0, 0, 0, 0.05);--context-divider: rgba(0, 0, 0, 0.1);--context-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)}[data-theme=dark]{--context-bg: #374151;--context-text: #e5e7eb;--context-hover: rgba(255, 255, 255, 0.1);--context-divider: rgba(255, 255, 255, 0.1);--context-shadow: 0 0 10px rgba(0, 0, 0, 0.3)}@keyframes context-menu-fade-in{from{opacity:0;transform:scale(0.98)}to{opacity:1;transform:scale(1)}}.context-menu{position:fixed;z-index:1000;background-color:var(--context-bg);color:var(--context-text);border-radius:.375rem;box-shadow:var(--context-shadow);min-width:12rem}.context-menu-items{display:flex;flex-direction:column;width:100%}.context-menu.is-submenu{position:fixed;overflow-y:auto;scrollbar-width:thin}.context-menu.is-submenu::-webkit-scrollbar{width:8px}.context-menu.is-submenu::-webkit-scrollbar-track{background:rgba(0,0,0,0)}.context-menu-item{cursor:pointer;display:flex;flex-direction:row;gap:.5rem;justify-content:space-between;align-items:center;user-select:none;padding:.375rem .75rem;transition:background-color .1s ease}.context-menu-item:first-child{border-top-left-radius:.375rem;border-top-right-radius:.375rem}.context-menu-item:last-child{border-bottom-left-radius:.375rem;border-bottom-right-radius:.375rem}.context-menu-item:hover:not(.context-menu-item-disabled){background-color:var(--context-hover)}.context-menu-item-disabled{opacity:.5;cursor:default}.context-menu-item-disabled:hover{background-color:rgba(0,0,0,0)}.context-menu-item-with-submenu{position:relative}.context-menu-item .item-label{flex-grow:1}.context-menu-item .item-icon{display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem}.context-menu-item .item-shortcut{font-size:.75rem;opacity:.7;margin-left:1rem}.context-menu-item .submenu-arrow{margin-left:8px;font-size:.8em;opacity:.7}.context-menu-divider{display:flex;height:1px;background-color:var(--context-divider)} /*# sourceMappingURL=style.css.map */