@plexui/styles 0.1.0 → 0.1.1
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.
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
@layer components {.Menu {
|
|
2
2
|
/* Top-level selector needs to exist */
|
|
3
|
+
}.MenuList[data-pill] {
|
|
4
|
+
--menu-radius: var(--menu-radius-pill, 22px);
|
|
5
|
+
--menu-item-radius: var(--radius-full);
|
|
3
6
|
}.MenuList {
|
|
4
7
|
z-index: 50;
|
|
5
8
|
overflow: auto;
|
|
@@ -93,7 +96,7 @@
|
|
|
93
96
|
position: absolute;
|
|
94
97
|
inset: 0;
|
|
95
98
|
display: block;
|
|
96
|
-
border-radius: calc(var(--menu-radius) - var(--menu-gutter));
|
|
99
|
+
border-radius: var(--menu-item-radius, calc(var(--menu-radius) - var(--menu-gutter)));
|
|
97
100
|
background: var(--menu-item-background-color);
|
|
98
101
|
content: "";
|
|
99
102
|
opacity: 0;
|
|
@@ -168,12 +171,12 @@
|
|
|
168
171
|
margin: var(--menu-separator-gutter);
|
|
169
172
|
background: var(--menu-separator-background-color);
|
|
170
173
|
}.MenuLabel {
|
|
171
|
-
padding: var(--menu-item-padding);
|
|
172
|
-
padding-bottom: calc(var(--spacing) * 0.5);
|
|
174
|
+
padding: var(--menu-label-padding, var(--menu-item-padding));
|
|
175
|
+
padding-bottom: var(--menu-label-padding-bottom, calc(var(--spacing) * 0.5));
|
|
173
176
|
color: var(--color-text-tertiary);
|
|
174
|
-
font-size: var(--font-text-xs-size);
|
|
175
|
-
font-weight: var(--font-weight-semibold);
|
|
176
|
-
line-height: var(--font-text-xs-line-height);
|
|
177
|
+
font-size: var(--menu-label-font-size, var(--font-text-xs-size));
|
|
178
|
+
font-weight: var(--menu-label-font-weight, var(--font-weight-semibold));
|
|
179
|
+
line-height: var(--menu-label-line-height, var(--font-text-xs-line-height));
|
|
177
180
|
-webkit-user-select: none;
|
|
178
181
|
-moz-user-select: none;
|
|
179
182
|
user-select: none;
|
|
@@ -2,6 +2,9 @@
|
|
|
2
2
|
Custom Select
|
|
3
3
|
============================================= */.Menu {
|
|
4
4
|
/* Top-level selector needs to exist */
|
|
5
|
+
}.MenuList[data-pill] {
|
|
6
|
+
--menu-radius: var(--menu-radius-pill, 22px);
|
|
7
|
+
--menu-item-radius: var(--radius-full);
|
|
5
8
|
}.MenuList {
|
|
6
9
|
z-index: 50;
|
|
7
10
|
/* Default to the width of the trigger */
|
|
@@ -84,7 +87,7 @@
|
|
|
84
87
|
position: absolute;
|
|
85
88
|
inset: 0;
|
|
86
89
|
display: block;
|
|
87
|
-
border-radius: calc(var(--menu-radius) - var(--menu-gutter));
|
|
90
|
+
border-radius: var(--menu-item-radius, calc(var(--menu-radius) - var(--menu-gutter)));
|
|
88
91
|
background: var(--menu-item-background-color);
|
|
89
92
|
content: "";
|
|
90
93
|
opacity: 0;
|
|
@@ -211,7 +214,7 @@
|
|
|
211
214
|
============================================= */.Action {
|
|
212
215
|
position: relative;
|
|
213
216
|
padding: var(--menu-item-padding);
|
|
214
|
-
border-radius: calc(var(--menu-radius) - var(--menu-gutter));
|
|
217
|
+
border-radius: var(--menu-item-radius, calc(var(--menu-radius) - var(--menu-gutter)));
|
|
215
218
|
cursor: pointer;
|
|
216
219
|
transition: background-color 0.15s ease;
|
|
217
220
|
}
|
|
@@ -221,7 +224,7 @@
|
|
|
221
224
|
position: absolute;
|
|
222
225
|
inset: 0;
|
|
223
226
|
display: block;
|
|
224
|
-
border-radius: calc(var(--menu-radius) - var(--menu-gutter));
|
|
227
|
+
border-radius: var(--menu-item-radius, calc(var(--menu-radius) - var(--menu-gutter)));
|
|
225
228
|
content: "";
|
|
226
229
|
opacity: 0;
|
|
227
230
|
transform: scale(var(--scale, 0.98));
|
|
@@ -242,7 +245,7 @@ background: var(--gray-25);
|
|
|
242
245
|
position: absolute;
|
|
243
246
|
inset: 0;
|
|
244
247
|
display: block;
|
|
245
|
-
border-radius: calc(var(--menu-radius) - var(--menu-gutter));
|
|
248
|
+
border-radius: var(--menu-item-radius, calc(var(--menu-radius) - var(--menu-gutter)));
|
|
246
249
|
content: "";
|
|
247
250
|
pointer-events: none;
|
|
248
251
|
transition-duration: 0.15s;
|
|
@@ -328,14 +328,14 @@
|
|
|
328
328
|
display: flex;
|
|
329
329
|
align-items: center;
|
|
330
330
|
width: 100%;
|
|
331
|
-
padding: 8px 12px;
|
|
331
|
+
padding: var(--sidebar-menu-sub-item-padding-y, 8px) 12px;
|
|
332
332
|
margin: var(--sidebar-menu-item-margin);
|
|
333
333
|
border: none;
|
|
334
334
|
border-radius: 0;
|
|
335
335
|
background: transparent;
|
|
336
336
|
color: var(--sidebar-menu-text);
|
|
337
|
-
font-size: 14px;
|
|
338
|
-
line-height: 20px;
|
|
337
|
+
font-size: var(--sidebar-menu-sub-item-font-size, 14px);
|
|
338
|
+
line-height: var(--sidebar-menu-sub-item-line-height, 20px);
|
|
339
339
|
text-decoration: none;
|
|
340
340
|
cursor: pointer;
|
|
341
341
|
-webkit-user-select: none;
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Optional touch sizes for phones, from Apple's iOS and iPadOS 26 design
|
|
3
|
+
* resources. Below 768px every control takes one height, 44px, with text at
|
|
4
|
+
* 17px; menus and the mobile sidebar follow the iOS measures. Nothing changes
|
|
5
|
+
* unless this file is imported, after the main stylesheet:
|
|
6
|
+
*
|
|
7
|
+
* @import "@plexui/styles/styles/touch.css";
|
|
8
|
+
*
|
|
9
|
+
* Tokens only, so a size prop still picks the same token as on desktop. `3xl`
|
|
10
|
+
* stays large at 50px for the main action of a sign-in or checkout screen.
|
|
11
|
+
*/
|
|
12
|
+
@media (max-width: 767px) {
|
|
13
|
+
html:root {
|
|
14
|
+
--control-size-sm: 44px;
|
|
15
|
+
--control-size-md: 44px;
|
|
16
|
+
--control-size-lg: 44px;
|
|
17
|
+
--control-size-xl: 44px;
|
|
18
|
+
--control-size-3xl: 50px;
|
|
19
|
+
--control-gutter-sm: 14px;
|
|
20
|
+
--control-gutter-md: 14px;
|
|
21
|
+
--control-gutter-lg: 14px;
|
|
22
|
+
--control-gutter-xl: 20px;
|
|
23
|
+
--control-gutter-pill-scaling: 1;
|
|
24
|
+
--control-font-size-md: 17px;
|
|
25
|
+
--control-font-size-lg: 17px;
|
|
26
|
+
--button-gap-lg: 4px;
|
|
27
|
+
|
|
28
|
+
--segmented-control-gutter: 4px;
|
|
29
|
+
|
|
30
|
+
--menu-gutter: 10px;
|
|
31
|
+
--menu-radius: 32px;
|
|
32
|
+
--menu-radius-pill: 32px;
|
|
33
|
+
--menu-font-size: 17px;
|
|
34
|
+
--menu-line-height: 20px;
|
|
35
|
+
--menu-item-padding: 10px 14px 10px 12px;
|
|
36
|
+
--menu-item-gap: 6px;
|
|
37
|
+
--menu-separator-gutter: 10px 14px;
|
|
38
|
+
--menu-checkbox-indicator-size: 24px;
|
|
39
|
+
--menu-label-padding: 4px 14px 10px;
|
|
40
|
+
--menu-label-padding-bottom: 10px;
|
|
41
|
+
--menu-label-font-size: 13px;
|
|
42
|
+
--menu-label-font-weight: var(--font-weight-medium);
|
|
43
|
+
--menu-label-line-height: 15px;
|
|
44
|
+
|
|
45
|
+
--sidebar-menu-item-height: 44px;
|
|
46
|
+
--sidebar-menu-item-font-size: 17px;
|
|
47
|
+
--sidebar-menu-item-line-height: 22px;
|
|
48
|
+
--sidebar-menu-item-margin: 0;
|
|
49
|
+
--sidebar-menu-sub-item-padding-y: 11px;
|
|
50
|
+
--sidebar-menu-sub-item-font-size: 17px;
|
|
51
|
+
--sidebar-menu-sub-item-line-height: 22px;
|
|
52
|
+
--sidebar-icon-size: 20px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
html [role="radiogroup"] {
|
|
56
|
+
--segmented-control-font-size: 15px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
html [data-slot="input"] {
|
|
60
|
+
--input-font-size: 17px;
|
|
61
|
+
--input-gutter: 14px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
html [data-slot="input"][data-has-start-adornment] {
|
|
65
|
+
--input-gutter: 11px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
html [role="menu"] {
|
|
69
|
+
--menu-min-width: 238px !important;
|
|
70
|
+
}
|
|
71
|
+
}
|