@nattstack/ui 0.0.91 → 0.0.92
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.
|
@@ -7,14 +7,17 @@ function MenuCheckboxItem(props) {
|
|
|
7
7
|
const { children, className: customClassName = "", iconEnd = void 0, indicator = void 0, isChecked = void 0, isDefaultChecked = false, isDisabled = false, ...rest } = props;
|
|
8
8
|
const combinedClassName = cx(MENU_CLASS_NAME.CHECKBOX_ITEM, customClassName);
|
|
9
9
|
const currentIndicator = indicator ?? /* @__PURE__ */ jsx("svg", {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
children: /* @__PURE__ */ jsx("
|
|
15
|
-
|
|
10
|
+
height: "14px",
|
|
11
|
+
viewBox: "0 0 18 18",
|
|
12
|
+
width: "14px",
|
|
13
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
14
|
+
children: /* @__PURE__ */ jsx("polyline", {
|
|
15
|
+
fill: "none",
|
|
16
|
+
points: "2.75 9.25 6.75 14.25 15.25 3.75",
|
|
16
17
|
stroke: "currentColor",
|
|
17
|
-
|
|
18
|
+
strokeLinecap: "round",
|
|
19
|
+
strokeLinejoin: "round",
|
|
20
|
+
strokeWidth: "1.5"
|
|
18
21
|
})
|
|
19
22
|
});
|
|
20
23
|
return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
|
|
@@ -1,58 +1,44 @@
|
|
|
1
1
|
@layer components {
|
|
2
2
|
.menu-module_menu_trigger_7pJHya {
|
|
3
|
-
background-color: var(--color-
|
|
4
|
-
box-shadow: 0 0 0 1px var(--color-
|
|
3
|
+
background-color: var(--color-bg-shell-inner);
|
|
4
|
+
box-shadow: 0 0 0 1px var(--color-border) inset;
|
|
5
5
|
color: var(--color-text-primary);
|
|
6
6
|
cursor: pointer;
|
|
7
|
-
outline-color: var(--color-primary-9);
|
|
8
7
|
outline-offset: 2px;
|
|
9
8
|
user-select: none;
|
|
10
|
-
background-image: linear-gradient(oklab(0% none none / 0) 50%, oklab(0% none none / .0196078) 50%);
|
|
11
|
-
border-style: none;
|
|
12
9
|
border-radius: 10px;
|
|
13
|
-
outline
|
|
14
|
-
outline-style: solid;
|
|
10
|
+
outline: 2px solid #0000;
|
|
15
11
|
flex-shrink: 0;
|
|
16
|
-
|
|
17
|
-
align-items: safe center;
|
|
12
|
+
align-items: center;
|
|
18
13
|
column-gap: 8px;
|
|
19
14
|
width: max-content;
|
|
20
15
|
height: 40px;
|
|
21
|
-
padding: 0
|
|
16
|
+
padding: 0 16px;
|
|
22
17
|
font-size: 14px;
|
|
23
|
-
font-weight:
|
|
24
|
-
|
|
25
|
-
transition-property: background-color, opacity, translate;
|
|
18
|
+
font-weight: 450;
|
|
19
|
+
transition-property: background-color;
|
|
26
20
|
transition-duration: .15s;
|
|
27
21
|
display: inline-flex;
|
|
28
22
|
overflow: hidden;
|
|
29
23
|
}
|
|
30
24
|
|
|
31
|
-
.menu-module_menu_trigger_7pJHya:hover:not(:disabled), .menu-module_menu_trigger_7pJHya[data-popup-open] {
|
|
32
|
-
background-color: var(--color-gray-3);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.menu-module_menu_trigger_7pJHya:active:not(:disabled), .menu-module_menu_trigger_7pJHya[data-pressed] {
|
|
36
|
-
translate: 0 1px;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
25
|
.menu-module_menu_trigger_7pJHya:disabled {
|
|
26
|
+
background-color: var(--color-gray-3);
|
|
40
27
|
cursor: not-allowed;
|
|
41
28
|
opacity: .5;
|
|
42
29
|
}
|
|
43
30
|
|
|
44
31
|
.menu-module_menu_trigger_7pJHya:focus-visible {
|
|
45
|
-
outline-
|
|
32
|
+
outline-color: var(--color-primary);
|
|
46
33
|
}
|
|
47
34
|
|
|
48
|
-
.menu-module_menu_trigger_7pJHya
|
|
49
|
-
|
|
50
|
-
height: var(--size-icon);
|
|
51
|
-
width: var(--size-icon);
|
|
35
|
+
.menu-module_menu_trigger_7pJHya:hover:not(:disabled), .menu-module_menu_trigger_7pJHya[data-popup-open] {
|
|
36
|
+
background-color: var(--color-gray-3);
|
|
52
37
|
}
|
|
53
38
|
|
|
54
|
-
.
|
|
55
|
-
|
|
39
|
+
.menu-module_menu_trigger_7pJHya > svg {
|
|
40
|
+
width: 16px;
|
|
41
|
+
height: 16px;
|
|
56
42
|
}
|
|
57
43
|
|
|
58
44
|
.menu-module_menu_content_positioner_7pJHya {
|
|
@@ -63,7 +49,11 @@
|
|
|
63
49
|
.menu-module_menu_content_7pJHya {
|
|
64
50
|
background-color: var(--color-bg-shell-inner);
|
|
65
51
|
box-shadow: 0 0 0 1px var(--color-border) inset,
|
|
66
|
-
0
|
|
52
|
+
0 .5px 0 oklab(0% none none / .03),
|
|
53
|
+
0 36px 15px -4px oklab(0% none none / .01),
|
|
54
|
+
0 20px 12px -3px oklab(0% none none / .03),
|
|
55
|
+
0 9px 9px -2px oklab(0% none none / .04),
|
|
56
|
+
0 2px 5px -1px oklab(0% none none / .05);
|
|
67
57
|
color: var(--color-text-primary);
|
|
68
58
|
max-height: min(var(--available-height), 480px);
|
|
69
59
|
max-width: min(var(--available-width), 320px);
|
|
@@ -137,13 +127,13 @@
|
|
|
137
127
|
user-select: none;
|
|
138
128
|
border-radius: 8px;
|
|
139
129
|
outline: none;
|
|
140
|
-
|
|
130
|
+
flex-shrink: 0;
|
|
131
|
+
align-items: center;
|
|
141
132
|
column-gap: 8px;
|
|
142
|
-
|
|
143
|
-
padding: 0
|
|
133
|
+
height: 36px;
|
|
134
|
+
padding: 0 12px;
|
|
144
135
|
font-size: 14px;
|
|
145
|
-
font-weight:
|
|
146
|
-
line-height: 1.5;
|
|
136
|
+
font-weight: 450;
|
|
147
137
|
text-decoration: none;
|
|
148
138
|
display: flex;
|
|
149
139
|
position: relative;
|
|
@@ -161,8 +151,8 @@
|
|
|
161
151
|
.menu-module_menu_item__icon_7pJHya, .menu-module_menu_item__indicator_7pJHya {
|
|
162
152
|
color: var(--color-text-secondary);
|
|
163
153
|
flex-shrink: 0;
|
|
164
|
-
justify-content:
|
|
165
|
-
align-items:
|
|
154
|
+
justify-content: center;
|
|
155
|
+
align-items: center;
|
|
166
156
|
width: 16px;
|
|
167
157
|
height: 16px;
|
|
168
158
|
display: flex;
|
|
@@ -192,16 +182,15 @@
|
|
|
192
182
|
|
|
193
183
|
.menu-module_menu_group_label_7pJHya {
|
|
194
184
|
color: var(--color-text-secondary);
|
|
195
|
-
padding: 6px
|
|
185
|
+
padding: 6px 12px 4px;
|
|
196
186
|
font-size: 12px;
|
|
197
|
-
font-weight:
|
|
198
|
-
line-height: 1.5;
|
|
187
|
+
font-weight: 450;
|
|
199
188
|
}
|
|
200
189
|
|
|
201
190
|
.menu-module_menu_separator_7pJHya {
|
|
202
191
|
background-color: var(--color-border);
|
|
203
192
|
flex-shrink: 0;
|
|
204
193
|
height: 1px;
|
|
205
|
-
margin: 4px;
|
|
194
|
+
margin: 4px 8px;
|
|
206
195
|
}
|
|
207
196
|
}
|