@plexui/styles 0.1.1 → 0.1.2
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/Checkbox/Checkbox.module.css +2 -2
- package/dist/es/components/Dialog/Dialog.module.css +11 -6
- package/dist/es/components/Menu/Menu.module.css +0 -1
- package/dist/es/components/Select/Select.module.css +0 -1
- package/dist/es/components/Slider/Slider.module.css +8 -0
- package/dist/es/styles/touch.css +17 -0
- package/package.json +1 -1
|
@@ -157,8 +157,8 @@ background-color: var(--gray-800);
|
|
|
157
157
|
}
|
|
158
158
|
|
|
159
159
|
/* Ghost variant — checkmark uses text color instead of white */
|
|
160
|
-
[data-variant="ghost"] .CheckMark::before,
|
|
161
|
-
[data-variant="ghost"] .CheckMark::after {
|
|
160
|
+
.Checkbox[data-variant="ghost"] .CheckMark::before,
|
|
161
|
+
.Checkbox[data-variant="ghost"] .CheckMark::after {
|
|
162
162
|
background: var(--gray-900);
|
|
163
163
|
}
|
|
164
164
|
|
|
@@ -33,7 +33,8 @@
|
|
|
33
33
|
--dialog-panel-width: var(--dialog-width, 480px);
|
|
34
34
|
--dialog-panel-height: auto;
|
|
35
35
|
--dialog-panel-max-height: calc(100dvh - 2rem);
|
|
36
|
-
--dialog-panel-
|
|
36
|
+
--dialog-panel-corner: var(--radius-xl);
|
|
37
|
+
--dialog-panel-radius: var(--dialog-panel-corner);
|
|
37
38
|
--dialog-panel-padding-bottom: 1.25rem;
|
|
38
39
|
--dialog-panel-hidden-transform: scale(0.95) translateY(8px);
|
|
39
40
|
|
|
@@ -52,7 +53,9 @@
|
|
|
52
53
|
|
|
53
54
|
.Content:focus {
|
|
54
55
|
outline: none;
|
|
55
|
-
}.
|
|
56
|
+
}.Content[data-pill] {
|
|
57
|
+
--dialog-panel-corner: var(--dialog-radius-pill, 24px);
|
|
58
|
+
}.Panel {
|
|
56
59
|
position: relative;
|
|
57
60
|
display: flex;
|
|
58
61
|
flex-direction: column;
|
|
@@ -107,7 +110,7 @@
|
|
|
107
110
|
--dialog-content-align: flex-end;
|
|
108
111
|
--dialog-content-padding: 0;
|
|
109
112
|
--dialog-panel-width: 100%;
|
|
110
|
-
--dialog-panel-radius: var(--
|
|
113
|
+
--dialog-panel-radius: var(--dialog-panel-corner) var(--dialog-panel-corner) 0 0;
|
|
111
114
|
--dialog-panel-padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
|
|
112
115
|
--dialog-panel-hidden-transform: translateY(100%);
|
|
113
116
|
}.Content:where([data-placement="start"], [data-placement="end"]) {
|
|
@@ -143,7 +146,7 @@
|
|
|
143
146
|
--dialog-panel-width: var(--dialog-width, 480px);
|
|
144
147
|
--dialog-panel-height: auto;
|
|
145
148
|
--dialog-panel-max-height: calc(100dvh - 2rem);
|
|
146
|
-
--dialog-panel-radius: var(--
|
|
149
|
+
--dialog-panel-radius: var(--dialog-panel-corner);
|
|
147
150
|
--dialog-panel-padding-bottom: 1.25rem;
|
|
148
151
|
--dialog-panel-hidden-transform: scale(0.95) translateY(8px);
|
|
149
152
|
}
|
|
@@ -155,7 +158,7 @@
|
|
|
155
158
|
--dialog-panel-width: 100%;
|
|
156
159
|
--dialog-panel-height: auto;
|
|
157
160
|
--dialog-panel-max-height: calc(100dvh - 2rem);
|
|
158
|
-
--dialog-panel-radius: var(--
|
|
161
|
+
--dialog-panel-radius: var(--dialog-panel-corner) var(--dialog-panel-corner) 0 0;
|
|
159
162
|
--dialog-panel-padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
|
|
160
163
|
--dialog-panel-hidden-transform: translateY(100%);
|
|
161
164
|
}
|
|
@@ -196,7 +199,9 @@
|
|
|
196
199
|
.CloseButton:focus-visible {
|
|
197
200
|
outline: 2px solid var(--color-text);
|
|
198
201
|
outline-offset: 2px;
|
|
199
|
-
}.
|
|
202
|
+
}.Content[data-pill] .CloseButton {
|
|
203
|
+
border-radius: var(--radius-full);
|
|
204
|
+
}.CloseIcon {
|
|
200
205
|
display: block;
|
|
201
206
|
}.Header {
|
|
202
207
|
display: flex;
|
|
@@ -8,6 +8,14 @@
|
|
|
8
8
|
opacity 250ms ease;
|
|
9
9
|
visibility: visible;
|
|
10
10
|
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/* Without hover the reset could never appear */
|
|
14
|
+
@media (hover: none) {
|
|
15
|
+
.SliderWrap .Reset[data-hide="false"] {
|
|
16
|
+
opacity: 1;
|
|
17
|
+
visibility: visible;
|
|
18
|
+
}
|
|
11
19
|
}.Slider {
|
|
12
20
|
position: relative;
|
|
13
21
|
display: flex;
|
package/dist/es/styles/touch.css
CHANGED
|
@@ -50,6 +50,23 @@
|
|
|
50
50
|
--sidebar-menu-sub-item-font-size: 17px;
|
|
51
51
|
--sidebar-menu-sub-item-line-height: 22px;
|
|
52
52
|
--sidebar-icon-size: 20px;
|
|
53
|
+
|
|
54
|
+
--table-cell-font-size: 15px;
|
|
55
|
+
--table-cell-line-height: 20px;
|
|
56
|
+
|
|
57
|
+
--switch-track-width: 64px;
|
|
58
|
+
--switch-track-height: 28px;
|
|
59
|
+
--switch-thumb-offset: 2px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
html [data-mobile-placement="bottom"] {
|
|
63
|
+
--dialog-panel-radius: 38px 38px 0 0;
|
|
64
|
+
--dialog-panel-max-height: calc(100dvh - 10px);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
html [data-mobile-placement="center"] {
|
|
68
|
+
--dialog-panel-width: 300px;
|
|
69
|
+
--dialog-panel-radius: 34px;
|
|
53
70
|
}
|
|
54
71
|
|
|
55
72
|
html [role="radiogroup"] {
|