UNPKG

@totase/react-context-menu

Version:
3 lines (2 loc) 3.19 kB
:root{--react-context-menu-z-index:1000;--react-context-menu-font-size:.875rem;--react-context-menu-background-color:#f2f2f2;--react-context-menu-border-color:#ccc;--react-context-menu-item-color:#2c2c2c;--react-context-menu-item-hover-color:#fff;--react-context-menu-item-hover-disabled-color:#999;--react-context-menu-item-hover-background-color:#4095da;--react-context-menu-shadow-color:#00000026;--react-context-menu-padding-sm:4px;--react-context-menu-padding-md:8px;--react-context-menu-border-radius-inner:4px;--react-context-menu-border-radius-outer:6px}@keyframes react-context-menu-exit{0%{opacity:1}to{opacity:0}}.react-context-menu--exit{animation:.15s ease-out forwards react-context-menu-exit}@keyframes react-context-menu__item-clicked{0%{color:var(--react-context-menu-item-hover-color);background-color:var(--react-context-menu-item-hover-background-color)}50%{color:var(--react-context-menu-item-color);background-color:#0000}to{color:var(--react-context-menu-item-hover-color);background-color:var(--react-context-menu-item-hover-background-color)}}.react-context-menu__item--clicked{animation:.1s ease-out react-context-menu__item-clicked}.react-context-menu,.react-context-menu__submenu{z-index:var(--react-context-menu-z-index);padding:var(--react-context-menu-padding-sm);background:var(--react-context-menu-background-color);box-shadow:0 2px 4px 0 var(--react-context-menu-shadow-color);border:1px solid var(--react-context-menu-border-color);border-radius:var(--react-context-menu-border-radius-outer);min-width:160px}.react-context-menu{position:fixed}.react-context-menu__submenu{position:absolute;left:100%;&:not(.react-context-menu__submenu-bottom){top:calc(-1*var(--react-context-menu-padding-sm))}}.react-context-menu__submenu-bottom{top:unset}.react-context-menu__submenu-right{right:100%;left:unset}.react-context-menu__separator{margin-block:0;margin:var(--react-context-menu-padding-sm)var(--react-context-menu-padding-md);background-color:var(--react-context-menu-border-color);border:0;height:1px}.react-context-menu__item{&:not(:has(.react-context-menu__submenu)){width:100%;display:flex}color:var(--react-context-menu-item-color);padding:var(--react-context-menu-padding-sm)var(--react-context-menu-padding-md);line-height:1;font-size:var(--react-context-menu-font-size);border-radius:var(--react-context-menu-border-radius-inner);-webkit-user-select:none;user-select:none;background-color:#0000;border:none&:has(.react-context-menu__submenu){position:relative}&:not(.react-context-menu__item--disabled){cursor:pointer;&:hover{color:var(--react-context-menu-item-hover-color);background-color:var(--react-context-menu-item-hover-background-color);& .react-context-menu__arrow{border-color:var(--react-context-menu-item-hover-color)}}}}.react-context-menu__item--disabled{cursor:not-allowed;color:var(--react-context-menu-item-hover-disabled-color)}.react-context-menu__label{justify-content:space-between;align-items:center;display:flex}.react-context-menu__arrow{border-style:solid;border-width:0 2px 2px 0;border-color:var(--react-context-menu-item-color);width:4px;height:4px;padding:1px;transform:rotate(-45deg)} /*# sourceMappingURL=main.css.map */