@mantine-vue/contextmenu 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/README.md +14 -0
  2. package/cjs/index.cjs +545 -0
  3. package/cjs/index.cjs.map +1 -0
  4. package/esm/index.mjs +531 -0
  5. package/esm/index.mjs.map +1 -0
  6. package/lib/ContextMenu.d.ts +4 -0
  7. package/lib/ContextMenuDivider.d.ts +14 -0
  8. package/lib/ContextMenuItem.d.ts +4 -0
  9. package/lib/ContextMenuOverlay.d.ts +25 -0
  10. package/lib/ContextMenuPortal.d.ts +33 -0
  11. package/lib/ContextMenuProvider.d.ts +93 -0
  12. package/lib/context.d.ts +12 -0
  13. package/lib/index.d.mts +9 -0
  14. package/lib/index.d.ts +9 -0
  15. package/lib/types.d.ts +94 -0
  16. package/lib/utils.d.ts +6 -0
  17. package/package.json +49 -0
  18. package/styles.css +157 -0
  19. package/styles.layer.css +159 -0
package/lib/ContextMenuProvider.d.ts ADDED
@@ -0,0 +1,93 @@
1
+ import { type PropType } from 'vue';
2
+ import { type MantineRadius, type MantineShadow, type MantineTheme } from '@mantine-vue/core';
3
+ import { ContextMenuKey, ContextMenuSettingsKey, useContextMenu } from './context';
4
+ import type { ContextMenuOptions, ContextMenuStyles, ContextMenuStyle } from './types';
5
+ export declare const ContextMenuProvider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
6
+ zIndex: {
7
+ type: NumberConstructor;
8
+ default: number;
9
+ };
10
+ shadow: {
11
+ type: PropType<MantineShadow>;
12
+ default: "sm";
13
+ };
14
+ borderRadius: {
15
+ type: PropType<MantineRadius>;
16
+ default: "xs";
17
+ };
18
+ submenuDelay: {
19
+ type: NumberConstructor;
20
+ default: 500;
21
+ };
22
+ repositionOnRepeat: {
23
+ type: BooleanConstructor;
24
+ default: false;
25
+ };
26
+ className: {
27
+ type: StringConstructor;
28
+ default: undefined;
29
+ };
30
+ style: {
31
+ type: PropType<ContextMenuStyle>;
32
+ default: undefined;
33
+ };
34
+ classNames: {
35
+ type: PropType<ContextMenuOptions["classNames"]>;
36
+ default: undefined;
37
+ };
38
+ styles: {
39
+ type: PropType<ContextMenuStyles | ((theme: MantineTheme) => ContextMenuStyles)>;
40
+ default: undefined;
41
+ };
42
+ }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
43
+ [key: string]: any;
44
+ }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
45
+ zIndex: {
46
+ type: NumberConstructor;
47
+ default: number;
48
+ };
49
+ shadow: {
50
+ type: PropType<MantineShadow>;
51
+ default: "sm";
52
+ };
53
+ borderRadius: {
54
+ type: PropType<MantineRadius>;
55
+ default: "xs";
56
+ };
57
+ submenuDelay: {
58
+ type: NumberConstructor;
59
+ default: 500;
60
+ };
61
+ repositionOnRepeat: {
62
+ type: BooleanConstructor;
63
+ default: false;
64
+ };
65
+ className: {
66
+ type: StringConstructor;
67
+ default: undefined;
68
+ };
69
+ style: {
70
+ type: PropType<ContextMenuStyle>;
71
+ default: undefined;
72
+ };
73
+ classNames: {
74
+ type: PropType<ContextMenuOptions["classNames"]>;
75
+ default: undefined;
76
+ };
77
+ styles: {
78
+ type: PropType<ContextMenuStyles | ((theme: MantineTheme) => ContextMenuStyles)>;
79
+ default: undefined;
80
+ };
81
+ }>> & Readonly<{}>, {
82
+ style: ContextMenuStyle;
83
+ shadow: MantineShadow;
84
+ classNames: Partial<Record<"root" | "item" | "divider", string>> | undefined;
85
+ styles: Partial<Record<"root" | "item" | "divider", ContextMenuStyle>> | ((theme: MantineTheme) => ContextMenuStyles);
86
+ zIndex: number;
87
+ borderRadius: MantineRadius;
88
+ className: string;
89
+ submenuDelay: number;
90
+ repositionOnRepeat: boolean;
91
+ }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
92
+ export { ContextMenuKey, ContextMenuSettingsKey, useContextMenu };
93
+ export { ContextMenuKey as ContextMenuCtx, ContextMenuSettingsKey as ContextMenuSettingsCtx };
package/lib/context.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { type InjectionKey, type Ref } from 'vue';
2
+ import type { ContextMenuContextValue, ContextMenuSettings } from './types';
3
+ export interface ResolvedContextMenuSettings {
4
+ shadow: NonNullable<ContextMenuSettings['shadow']>;
5
+ borderRadius: NonNullable<ContextMenuSettings['borderRadius']>;
6
+ submenuDelay: number;
7
+ repositionOnRepeat: boolean;
8
+ }
9
+ export declare const ContextMenuSettingsKey: InjectionKey<Ref<ResolvedContextMenuSettings>>;
10
+ export declare const ContextMenuKey: InjectionKey<ContextMenuContextValue>;
11
+ export declare function useContextMenu(): ContextMenuContextValue;
12
+ export declare function useContextMenuSettings(): Ref<ResolvedContextMenuSettings, ResolvedContextMenuSettings>;
package/lib/index.d.mts ADDED
@@ -0,0 +1,9 @@
1
+ import './styles.css';
2
+ export * from './ContextMenu';
3
+ export * from './ContextMenuDivider';
4
+ export * from './ContextMenuItem';
5
+ export * from './ContextMenuOverlay';
6
+ export * from './ContextMenuPortal';
7
+ export * from './ContextMenuProvider';
8
+ export * from './types';
9
+ export * from './utils';
package/lib/index.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import './styles.css';
2
+ export * from './ContextMenu';
3
+ export * from './ContextMenuDivider';
4
+ export * from './ContextMenuItem';
5
+ export * from './ContextMenuOverlay';
6
+ export * from './ContextMenuPortal';
7
+ export * from './ContextMenuProvider';
8
+ export * from './types';
9
+ export * from './utils';
package/lib/types.d.ts ADDED
@@ -0,0 +1,94 @@
1
+ import type { MantineColor, MantineNode, MantineRadius, MantineShadow, MantineStyle, MantineTheme } from '@mantine-vue/core';
2
+ import type { Ref, VNodeChild } from 'vue';
3
+ export type WithRequiredProperty<Type, Key extends keyof Type> = Type & {
4
+ [Property in Key]-?: Type[Property];
5
+ };
6
+ export type WithOptionalProperty<Type, Key extends keyof Type> = Omit<Type, Key> & Partial<Pick<Type, Key>>;
7
+ export type ContextMenuStyle = MantineStyle | ((theme: MantineTheme) => MantineStyle);
8
+ export type ContextMenuStyles = Partial<Record<'root' | 'item' | 'divider', ContextMenuStyle>>;
9
+ export interface ContextMenuOptions {
10
+ /** The z-index of context menu. @default 9999 */
11
+ zIndex?: number;
12
+ /** Context menu container class name. */
13
+ className?: string;
14
+ /** Context menu container style. */
15
+ style?: ContextMenuStyle;
16
+ /** Context menu elements class names. */
17
+ classNames?: Partial<Record<'root' | 'item' | 'divider', string>>;
18
+ /** Context menu styles, or a function returning styles for the current theme. */
19
+ styles?: ContextMenuStyles | ((theme: MantineTheme) => ContextMenuStyles);
20
+ }
21
+ export interface ContextMenuSettings {
22
+ /** Context menu shadow. @default 'sm' */
23
+ shadow?: MantineShadow;
24
+ /** Context menu border radius. @default 'xs' */
25
+ borderRadius?: MantineRadius;
26
+ /** Delay in ms to use when showing and hiding submenus. @default 500 */
27
+ submenuDelay?: number;
28
+ /** Whether repeated contextmenu events reposition the open menu. @default false */
29
+ repositionOnRepeat?: boolean;
30
+ }
31
+ export type ContextMenuProviderProps = ContextMenuSettings & ContextMenuOptions;
32
+ interface ContextMenuItemBase {
33
+ /** Unique key of the context menu item or divider. */
34
+ key: string;
35
+ className?: string;
36
+ style?: ContextMenuStyle;
37
+ hidden?: boolean;
38
+ }
39
+ interface ContextMenuActionBase {
40
+ icon?: MantineNode;
41
+ iconRight?: MantineNode;
42
+ title?: MantineNode;
43
+ color?: MantineColor;
44
+ disabled?: boolean;
45
+ }
46
+ export type ContextMenuItemOptions = ContextMenuItemBase & ((ContextMenuActionBase & {
47
+ onClick: (event: MouseEvent) => void;
48
+ items?: never;
49
+ }) | (ContextMenuActionBase & {
50
+ onClick?: never;
51
+ items: ContextMenuItemOptions[];
52
+ }) | {
53
+ icon?: never;
54
+ iconRight?: never;
55
+ title?: never;
56
+ color?: never;
57
+ disabled?: never;
58
+ onClick?: never;
59
+ items?: never;
60
+ });
61
+ export type ContextMenuContent = ContextMenuItemOptions[] | ((close: () => void) => VNodeChild);
62
+ export type ContextMenuEvent = MouseEvent | TouchEvent;
63
+ export type ShowContextMenuFunction = (content: ContextMenuContent, options?: ContextMenuOptions) => (event: ContextMenuEvent) => void;
64
+ export type HideContextMenuFunction = () => void;
65
+ export interface ContextMenuContextValue {
66
+ showContextMenu: ShowContextMenuFunction;
67
+ hideContextMenu: HideContextMenuFunction;
68
+ isContextMenuVisible: Readonly<Ref<boolean>>;
69
+ }
70
+ export interface ContextMenuInstanceOptions {
71
+ x: number;
72
+ y: number;
73
+ content: ContextMenuContent;
74
+ }
75
+ export interface ContextMenuProps extends ContextMenuInstanceOptions, ContextMenuOptions {
76
+ onHide: HideContextMenuFunction;
77
+ dir?: 'ltr' | 'rtl';
78
+ }
79
+ export interface ContextMenuPortalProps extends ContextMenuProps {
80
+ zIndex?: number;
81
+ dir: 'ltr' | 'rtl';
82
+ }
83
+ export type ContextMenuSubmenuProps = Pick<ContextMenuOptions, 'className' | 'classNames' | 'style' | 'styles'> & {
84
+ dir?: 'ltr' | 'rtl';
85
+ };
86
+ export type ContextMenuItemProps = WithRequiredProperty<Omit<ContextMenuItemOptions, 'key'>, 'title'> & {
87
+ onHide: HideContextMenuFunction;
88
+ submenuProps: ContextMenuSubmenuProps;
89
+ };
90
+ export interface ContextMenuDividerProps {
91
+ className?: string;
92
+ style?: ContextMenuStyle;
93
+ }
94
+ export {};
package/lib/utils.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import type { ContextMenuStyle, ContextMenuStyles } from './types';
2
+ import type { MantineStyle, MantineTheme } from '@mantine-vue/core';
3
+ /** Returns a humanized version of a string, for example "camelCase" becomes "Camel Case". */
4
+ export declare function humanize(value: string): string;
5
+ export declare function resolveContextMenuStyle(style: ContextMenuStyle | undefined, theme: MantineTheme): MantineStyle | undefined;
6
+ export declare function resolveContextMenuStyles(styles: ContextMenuStyles | ((theme: MantineTheme) => ContextMenuStyles) | undefined, theme: MantineTheme): Partial<Record<"root" | "item" | "divider", ContextMenuStyle>> | undefined;
package/package.json ADDED
@@ -0,0 +1,49 @@
1
+ {
2
+ "name": "@mantine-vue/contextmenu",
3
+ "version": "2.3.0",
4
+ "description": "Desktop-grade context menu extension for Mantine Vue",
5
+ "license": "MIT",
6
+ "files": [
7
+ "cjs",
8
+ "esm",
9
+ "lib",
10
+ "styles.css",
11
+ "styles.layer.css",
12
+ "styles"
13
+ ],
14
+ "sideEffects": [
15
+ "*.css"
16
+ ],
17
+ "main": "./cjs/index.cjs",
18
+ "module": "./esm/index.mjs",
19
+ "types": "./lib/index.d.ts",
20
+ "exports": {
21
+ ".": {
22
+ "import": {
23
+ "types": "./lib/index.d.mts",
24
+ "default": "./esm/index.mjs"
25
+ },
26
+ "require": {
27
+ "types": "./lib/index.d.ts",
28
+ "default": "./cjs/index.cjs"
29
+ }
30
+ },
31
+ "./styles.css": "./styles.css",
32
+ "./styles.layer.css": "./styles.layer.css"
33
+ },
34
+ "devDependencies": {
35
+ "@mantine-vue/core": "workspace:*",
36
+ "@mantine-vue/hooks": "workspace:*",
37
+ "@vue/compiler-dom": "^3.5.0",
38
+ "@vue/test-utils": "^2.4.6",
39
+ "vue": "^3.5.0"
40
+ },
41
+ "peerDependencies": {
42
+ "@mantine-vue/core": "2.3.0",
43
+ "@mantine-vue/hooks": "2.3.0",
44
+ "vue": "^3.5.0"
45
+ },
46
+ "mantineVue": {
47
+ "cssLayer": "mantine-contextmenu"
48
+ }
49
+ }
package/styles.css ADDED
@@ -0,0 +1,157 @@
1
+ .mantine-contextmenu {
2
+ position: fixed;
3
+ border: 1px solid var(--mantine-color-gray-3);
4
+ }
5
+ [data-mantine-color-scheme='dark'] .mantine-contextmenu {
6
+ border: 1px solid var(--mantine-color-dark-4);
7
+ }
8
+ .mantine-contextmenu {
9
+ overflow: hidden;
10
+ visibility: hidden;
11
+ }
12
+
13
+ .mantine-contextmenu-mounted {
14
+ visibility: visible;
15
+ transition:
16
+ top 0.2s,
17
+ left 0.2s;
18
+ }
19
+
20
+ .mantine-contextmenu-divider {
21
+ height: calc(0.0625rem * var(--mantine-scale));
22
+ background: var(--mantine-color-gray-1);
23
+ }
24
+
25
+ [data-mantine-color-scheme='dark'] .mantine-contextmenu-divider {
26
+ background: var(--mantine-color-dark-5);
27
+ }
28
+
29
+ .mantine-contextmenu-item-button {
30
+ width: 100%;
31
+ display: flex;
32
+ align-items: center;
33
+ padding-top: calc(var(--mantine-spacing-sm) / 2);
34
+ padding-bottom: calc(var(--mantine-spacing-sm) / 2);
35
+ padding-left: var(--mantine-spacing-sm);
36
+ padding-right: var(--mantine-spacing-sm);
37
+ color: var(--mantine-contextmenu-item-button-color);
38
+ transition: background 0.2s;
39
+ text-align: start;
40
+ }
41
+
42
+ .mantine-contextmenu-item-button[disabled] {
43
+ cursor: not-allowed;
44
+ color: var(--mantine-color-gray-5);
45
+ }
46
+
47
+ [data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button[disabled] {
48
+ color: var(--mantine-color-dark-3);
49
+ }
50
+
51
+ .mantine-contextmenu-item-button:hover:not([disabled]) {
52
+ background: var(--mantine-contextmenu-item-button-hover-bg-color-light);
53
+ }
54
+
55
+ [data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button:hover:not([disabled]) {
56
+ background: var(--mantine-contextmenu-item-button-hover-bg-color-dark);
57
+ }
58
+
59
+ .mantine-contextmenu-item-button:active:not([disabled]) {
60
+ background: var(--mantine-contextmenu-item-button-pressed-bg-color-light);
61
+ }
62
+
63
+ [data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button:active:not([disabled]) {
64
+ background: var(--mantine-contextmenu-item-button-pressed-bg-color-dark);
65
+ }
66
+
67
+ .mantine-contextmenu-item-button-title {
68
+ font-size: var(--mantine-font-size-sm);
69
+ white-space: nowrap;
70
+ flex-grow: 1;
71
+ text-align: inherit;
72
+ }
73
+
74
+ .mantine-contextmenu-overlay {
75
+ position: fixed;
76
+ top: 0;
77
+ left: 0;
78
+ width: 100%;
79
+ height: 100%;
80
+ }
81
+ .mantine-contextmenu-divider {
82
+ height: calc(0.0625rem * var(--mantine-scale));
83
+ background: var(--mantine-color-gray-1);
84
+ }
85
+ [data-mantine-color-scheme='dark'] .mantine-contextmenu-divider {
86
+ background: var(--mantine-color-dark-5);
87
+ }
88
+ .mantine-contextmenu-item-button {
89
+ width: 100%;
90
+ display: flex;
91
+ align-items: center;
92
+ padding-top: calc(var(--mantine-spacing-sm) / 2);
93
+ padding-bottom: calc(var(--mantine-spacing-sm) / 2);
94
+ padding-left: var(--mantine-spacing-sm);
95
+ padding-right: var(--mantine-spacing-sm);
96
+ color: var(--mantine-contextmenu-item-button-color);
97
+ transition: background 0.2s;
98
+ text-align: start;
99
+ }
100
+
101
+ .mantine-contextmenu-item-button[disabled] {
102
+ cursor: not-allowed;
103
+ color: var(--mantine-color-gray-5);
104
+ }
105
+
106
+ [data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button[disabled] {
107
+ color: var(--mantine-color-dark-3);
108
+ }
109
+
110
+ .mantine-contextmenu-item-button:hover:not([disabled]) {
111
+ background: var(--mantine-contextmenu-item-button-hover-bg-color-light);
112
+ }
113
+
114
+ [data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button:hover:not([disabled]) {
115
+ background: var(--mantine-contextmenu-item-button-hover-bg-color-dark);
116
+ }
117
+
118
+ .mantine-contextmenu-item-button:active:not([disabled]) {
119
+ background: var(--mantine-contextmenu-item-button-pressed-bg-color-light);
120
+ }
121
+
122
+ [data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button:active:not([disabled]) {
123
+ background: var(--mantine-contextmenu-item-button-pressed-bg-color-dark);
124
+ }
125
+
126
+ .mantine-contextmenu-item-button-title {
127
+ font-size: var(--mantine-font-size-sm);
128
+ white-space: nowrap;
129
+ flex-grow: 1;
130
+ text-align: inherit;
131
+ }
132
+ .mantine-contextmenu {
133
+ position: fixed;
134
+ border: 1px solid var(--mantine-color-gray-3);
135
+ }
136
+ [data-mantine-color-scheme='dark'] .mantine-contextmenu {
137
+ border: 1px solid var(--mantine-color-dark-4);
138
+ }
139
+ .mantine-contextmenu {
140
+ overflow: hidden;
141
+ visibility: hidden;
142
+ }
143
+
144
+ .mantine-contextmenu-mounted {
145
+ visibility: visible;
146
+ transition:
147
+ top 0.2s,
148
+ left 0.2s;
149
+ }
150
+ .mantine-contextmenu-overlay {
151
+ position: fixed;
152
+ top: 0;
153
+ left: 0;
154
+ width: 100%;
155
+ height: 100%;
156
+ }
157
+ /*$vite$:1*/
package/styles.layer.css ADDED
@@ -0,0 +1,159 @@
1
+ @layer mantine-contextmenu {
2
+ .mantine-contextmenu {
3
+ position: fixed;
4
+ border: 1px solid var(--mantine-color-gray-3);
5
+ }
6
+ [data-mantine-color-scheme='dark'] .mantine-contextmenu {
7
+ border: 1px solid var(--mantine-color-dark-4);
8
+ }
9
+ .mantine-contextmenu {
10
+ overflow: hidden;
11
+ visibility: hidden;
12
+ }
13
+
14
+ .mantine-contextmenu-mounted {
15
+ visibility: visible;
16
+ transition:
17
+ top 0.2s,
18
+ left 0.2s;
19
+ }
20
+
21
+ .mantine-contextmenu-divider {
22
+ height: calc(0.0625rem * var(--mantine-scale));
23
+ background: var(--mantine-color-gray-1);
24
+ }
25
+
26
+ [data-mantine-color-scheme='dark'] .mantine-contextmenu-divider {
27
+ background: var(--mantine-color-dark-5);
28
+ }
29
+
30
+ .mantine-contextmenu-item-button {
31
+ width: 100%;
32
+ display: flex;
33
+ align-items: center;
34
+ padding-top: calc(var(--mantine-spacing-sm) / 2);
35
+ padding-bottom: calc(var(--mantine-spacing-sm) / 2);
36
+ padding-left: var(--mantine-spacing-sm);
37
+ padding-right: var(--mantine-spacing-sm);
38
+ color: var(--mantine-contextmenu-item-button-color);
39
+ transition: background 0.2s;
40
+ text-align: start;
41
+ }
42
+
43
+ .mantine-contextmenu-item-button[disabled] {
44
+ cursor: not-allowed;
45
+ color: var(--mantine-color-gray-5);
46
+ }
47
+
48
+ [data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button[disabled] {
49
+ color: var(--mantine-color-dark-3);
50
+ }
51
+
52
+ .mantine-contextmenu-item-button:hover:not([disabled]) {
53
+ background: var(--mantine-contextmenu-item-button-hover-bg-color-light);
54
+ }
55
+
56
+ [data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button:hover:not([disabled]) {
57
+ background: var(--mantine-contextmenu-item-button-hover-bg-color-dark);
58
+ }
59
+
60
+ .mantine-contextmenu-item-button:active:not([disabled]) {
61
+ background: var(--mantine-contextmenu-item-button-pressed-bg-color-light);
62
+ }
63
+
64
+ [data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button:active:not([disabled]) {
65
+ background: var(--mantine-contextmenu-item-button-pressed-bg-color-dark);
66
+ }
67
+
68
+ .mantine-contextmenu-item-button-title {
69
+ font-size: var(--mantine-font-size-sm);
70
+ white-space: nowrap;
71
+ flex-grow: 1;
72
+ text-align: inherit;
73
+ }
74
+
75
+ .mantine-contextmenu-overlay {
76
+ position: fixed;
77
+ top: 0;
78
+ left: 0;
79
+ width: 100%;
80
+ height: 100%;
81
+ }
82
+ .mantine-contextmenu-divider {
83
+ height: calc(0.0625rem * var(--mantine-scale));
84
+ background: var(--mantine-color-gray-1);
85
+ }
86
+ [data-mantine-color-scheme='dark'] .mantine-contextmenu-divider {
87
+ background: var(--mantine-color-dark-5);
88
+ }
89
+ .mantine-contextmenu-item-button {
90
+ width: 100%;
91
+ display: flex;
92
+ align-items: center;
93
+ padding-top: calc(var(--mantine-spacing-sm) / 2);
94
+ padding-bottom: calc(var(--mantine-spacing-sm) / 2);
95
+ padding-left: var(--mantine-spacing-sm);
96
+ padding-right: var(--mantine-spacing-sm);
97
+ color: var(--mantine-contextmenu-item-button-color);
98
+ transition: background 0.2s;
99
+ text-align: start;
100
+ }
101
+
102
+ .mantine-contextmenu-item-button[disabled] {
103
+ cursor: not-allowed;
104
+ color: var(--mantine-color-gray-5);
105
+ }
106
+
107
+ [data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button[disabled] {
108
+ color: var(--mantine-color-dark-3);
109
+ }
110
+
111
+ .mantine-contextmenu-item-button:hover:not([disabled]) {
112
+ background: var(--mantine-contextmenu-item-button-hover-bg-color-light);
113
+ }
114
+
115
+ [data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button:hover:not([disabled]) {
116
+ background: var(--mantine-contextmenu-item-button-hover-bg-color-dark);
117
+ }
118
+
119
+ .mantine-contextmenu-item-button:active:not([disabled]) {
120
+ background: var(--mantine-contextmenu-item-button-pressed-bg-color-light);
121
+ }
122
+
123
+ [data-mantine-color-scheme='dark'] .mantine-contextmenu-item-button:active:not([disabled]) {
124
+ background: var(--mantine-contextmenu-item-button-pressed-bg-color-dark);
125
+ }
126
+
127
+ .mantine-contextmenu-item-button-title {
128
+ font-size: var(--mantine-font-size-sm);
129
+ white-space: nowrap;
130
+ flex-grow: 1;
131
+ text-align: inherit;
132
+ }
133
+ .mantine-contextmenu {
134
+ position: fixed;
135
+ border: 1px solid var(--mantine-color-gray-3);
136
+ }
137
+ [data-mantine-color-scheme='dark'] .mantine-contextmenu {
138
+ border: 1px solid var(--mantine-color-dark-4);
139
+ }
140
+ .mantine-contextmenu {
141
+ overflow: hidden;
142
+ visibility: hidden;
143
+ }
144
+
145
+ .mantine-contextmenu-mounted {
146
+ visibility: visible;
147
+ transition:
148
+ top 0.2s,
149
+ left 0.2s;
150
+ }
151
+ .mantine-contextmenu-overlay {
152
+ position: fixed;
153
+ top: 0;
154
+ left: 0;
155
+ width: 100%;
156
+ height: 100%;
157
+ }
158
+ /*$vite$:1*/
159
+ }