UNPKG

mantine-contextmenu

Version:

Craft your applications for productivity and meet your users’ expectations by enhancing your Mantine-based UIs with a desktop-grade, lightweight yet fully-featured, dark-theme aware context-menu component, built by the creator of Mantine DataTable

1 lines 1.64 kB
.mantine-contextmenu{border:1px solid var(--mantine-color-gray-3);position:fixed}[data-mantine-color-scheme=dark] .mantine-contextmenu{border:1px solid var(--mantine-color-dark-4)}.mantine-contextmenu{overflow:hidden;transition:all .2s}.mantine-contextmenu-divider{background:var(--mantine-color-gray-1);height:calc(.0625rem*var(--mantine-scale))}[data-mantine-color-scheme=dark] .mantine-contextmenu-divider{background:var(--mantine-color-dark-5)}.mantine-contextmenu-item-button{align-items:center;color:var(--mantine-contextmenu-item-button-color);display:flex;padding:calc(var(--mantine-spacing-sm)/2) var(--mantine-spacing-sm);transition:background .2s;width:100%}.mantine-contextmenu-item-button[disabled]{color:var(--mantine-color-gray-5);cursor:not-allowed}[data-mantine-color-scheme=dark] .mantine-contextmenu-item-button[disabled]{color:var(--mantine-color-dark-3)}.mantine-contextmenu-item-button:hover:not([disabled]){background:var(--mantine-contextmenu-item-button-hover-bg-color-light)}[data-mantine-color-scheme=dark] .mantine-contextmenu-item-button:hover:not([disabled]){background:var(--mantine-contextmenu-item-button-hover-bg-color-dark)}.mantine-contextmenu-item-button:active:not([disabled]){background:var(--mantine-contextmenu-item-button-pressed-bg-color-light)}[data-mantine-color-scheme=dark] .mantine-contextmenu-item-button:active:not([disabled]){background:var(--mantine-contextmenu-item-button-pressed-bg-color-dark)}.mantine-contextmenu-item-button-title{flex-grow:1;font-size:var(--mantine-font-size-sm);white-space:nowrap}.mantine-contextmenu-overlay{height:100%;left:0;position:fixed;top:0;width:100%}