@plexui/styles 0.1.3 → 0.1.5
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.
- package/dist/es/components/EmptyMessage/EmptyMessage.module.css +8 -0
- package/dist/es/components/Menu/Menu.module.css +11 -0
- package/dist/es/components/Select/Select.module.css +3 -0
- package/dist/es/styles/touch.css +3 -0
- package/dist/es/styles/variables-components.css +4 -0
- package/package.json +1 -1
|
@@ -48,6 +48,10 @@
|
|
|
48
48
|
.EmptyMessage[data-align="start"] .Title,
|
|
49
49
|
.EmptyMessage[data-align="start"] .Description {
|
|
50
50
|
text-align: start;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.EmptyMessage[data-align="start"] .ActionRow {
|
|
54
|
+
justify-content: flex-start;
|
|
51
55
|
}.IconBadge {
|
|
52
56
|
--badge-size: 40px;
|
|
53
57
|
--icon-size: 24px;
|
|
@@ -111,6 +115,10 @@
|
|
|
111
115
|
text-align: center;
|
|
112
116
|
text-wrap: pretty;
|
|
113
117
|
}.ActionRow {
|
|
118
|
+
display: flex;
|
|
119
|
+
flex-wrap: wrap;
|
|
120
|
+
justify-content: center;
|
|
121
|
+
gap: calc(var(--spacing) * 2);
|
|
114
122
|
margin-top: calc(var(--spacing) * 4);
|
|
115
123
|
}
|
|
116
124
|
}
|
|
@@ -2,6 +2,9 @@
|
|
|
2
2
|
/* Top-level selector needs to exist */
|
|
3
3
|
}.MenuList[data-pill] {
|
|
4
4
|
--menu-radius: var(--menu-radius-pill, 22px);
|
|
5
|
+
--menu-gutter: var(--menu-pill-gutter);
|
|
6
|
+
--menu-item-padding: var(--menu-pill-item-padding);
|
|
7
|
+
--menu-separator-gutter: var(--menu-pill-separator-gutter);
|
|
5
8
|
}.MenuList {
|
|
6
9
|
z-index: 50;
|
|
7
10
|
overflow: auto;
|
|
@@ -297,11 +300,19 @@
|
|
|
297
300
|
justify-content: space-between;
|
|
298
301
|
gap: calc(var(--spacing) * 3);
|
|
299
302
|
}.CheckboxIndicator {
|
|
303
|
+
display: flex;
|
|
300
304
|
flex-shrink: 0;
|
|
305
|
+
align-items: center;
|
|
306
|
+
justify-content: center;
|
|
301
307
|
width: var(--menu-checkbox-indicator-size);
|
|
302
308
|
height: var(--menu-checkbox-indicator-size);
|
|
303
309
|
}
|
|
304
310
|
|
|
311
|
+
/* The indicator wraps the icon in a span: inline, it would sit on the text baseline. */
|
|
312
|
+
.CheckboxIndicator > * {
|
|
313
|
+
display: flex;
|
|
314
|
+
}
|
|
315
|
+
|
|
305
316
|
[data-indicator-position="end"] .CheckboxIndicator {
|
|
306
317
|
order: 1;
|
|
307
318
|
}
|
|
@@ -4,6 +4,9 @@
|
|
|
4
4
|
/* Top-level selector needs to exist */
|
|
5
5
|
}.MenuList[data-pill] {
|
|
6
6
|
--menu-radius: var(--menu-radius-pill, 22px);
|
|
7
|
+
--menu-gutter: var(--menu-pill-gutter);
|
|
8
|
+
--menu-item-padding: var(--menu-pill-item-padding);
|
|
9
|
+
--menu-separator-gutter: var(--menu-pill-separator-gutter);
|
|
7
10
|
}.MenuList {
|
|
8
11
|
z-index: 50;
|
|
9
12
|
/* Default to the width of the trigger */
|
package/dist/es/styles/touch.css
CHANGED
|
@@ -35,6 +35,9 @@
|
|
|
35
35
|
--menu-item-padding: 10px 14px 10px 12px;
|
|
36
36
|
--menu-item-gap: 6px;
|
|
37
37
|
--menu-separator-gutter: 10px 14px;
|
|
38
|
+
--menu-pill-gutter: 10px;
|
|
39
|
+
--menu-pill-item-padding: 10px 14px 10px 12px;
|
|
40
|
+
--menu-pill-separator-gutter: 10px 14px;
|
|
38
41
|
--menu-checkbox-indicator-size: 24px;
|
|
39
42
|
--menu-label-padding: 4px 14px 10px;
|
|
40
43
|
--menu-label-padding-bottom: 10px;
|
|
@@ -281,6 +281,10 @@
|
|
|
281
281
|
--menu-item-padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2);
|
|
282
282
|
--menu-item-gap: calc(var(--spacing) * 1.5);
|
|
283
283
|
--menu-separator-gutter: var(--menu-gutter) calc(-1 * var(--menu-gutter));
|
|
284
|
+
/* Round corners need rows and text further in than a square list. */
|
|
285
|
+
--menu-pill-gutter: calc(var(--spacing) * 2);
|
|
286
|
+
--menu-pill-item-padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
|
|
287
|
+
--menu-pill-separator-gutter: calc(var(--spacing) * 2) calc(-1 * calc(var(--spacing) * 2));
|
|
284
288
|
--menu-separator-background-color: var(--color-border);
|
|
285
289
|
--menu-radio-indicator-size: var(--font-text-lg-size);
|
|
286
290
|
--menu-radio-indicator-hole-size: var(--font-text-3xs-size);
|