@splendidlabz/styles 4.12.0 → 4.13.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.
package/package.json
CHANGED
|
@@ -43,10 +43,17 @@
|
|
|
43
43
|
@apply divider-between-y;
|
|
44
44
|
|
|
45
45
|
> * {
|
|
46
|
+
flex-grow: 1;
|
|
46
47
|
border-width: 0;
|
|
47
48
|
border-radius: 0;
|
|
48
49
|
}
|
|
49
50
|
|
|
51
|
+
/* Opt-in equal columns. :where() keeps single-class specificity so a
|
|
52
|
+
responsive flip to card-divided-vertical resets flex-basis cleanly. */
|
|
53
|
+
&:where(.equal) > * {
|
|
54
|
+
flex-basis: 0;
|
|
55
|
+
}
|
|
56
|
+
|
|
50
57
|
> :where(:not(:first-child)) {
|
|
51
58
|
border-left-width: var(--border-width);
|
|
52
59
|
border-color: var(--_bc, var(--border-color));
|
|
@@ -70,6 +77,8 @@
|
|
|
70
77
|
@apply divider-between-x;
|
|
71
78
|
|
|
72
79
|
> * {
|
|
80
|
+
flex-grow: 0;
|
|
81
|
+
flex-basis: auto;
|
|
73
82
|
border-width: 0;
|
|
74
83
|
border-radius: 0;
|
|
75
84
|
}
|
|
@@ -58,50 +58,136 @@
|
|
|
58
58
|
@utility tablist-underline {
|
|
59
59
|
gap: 0;
|
|
60
60
|
|
|
61
|
-
|
|
61
|
+
/* Structural pseudos wrapped in :where() so static and responsive placement
|
|
62
|
+
compose by source order (see tablist-card-divided for the full rationale). */
|
|
63
|
+
:where(.tab) {
|
|
62
64
|
border-width: 0;
|
|
63
65
|
border-radius: 0;
|
|
64
66
|
}
|
|
65
67
|
|
|
66
|
-
|
|
68
|
+
&:where(.tablist-top) :where(.tab) {
|
|
67
69
|
border-bottom-width: var(--border-width);
|
|
68
70
|
}
|
|
69
71
|
|
|
70
|
-
|
|
72
|
+
&:where(.tablist-left) :where(.tab) {
|
|
71
73
|
border-right-width: var(--border-width);
|
|
72
74
|
}
|
|
73
75
|
|
|
74
|
-
|
|
76
|
+
&:where(.tablist-right) :where(.tab) {
|
|
75
77
|
border-left-width: var(--border-width);
|
|
76
78
|
}
|
|
79
|
+
|
|
80
|
+
/* Responsive placement. The class rules above are the static/old-browser
|
|
81
|
+
fallback; these react to the live --placement so a tablist that flips
|
|
82
|
+
placement at a breakpoint moves its underline to the new edge. Each block
|
|
83
|
+
zeroes the other two edges so no stale underline from the static rule
|
|
84
|
+
survives the flip. */
|
|
85
|
+
@container style(--placement: top) {
|
|
86
|
+
:where(.tab) {
|
|
87
|
+
border-bottom-width: var(--border-width);
|
|
88
|
+
border-right-width: 0;
|
|
89
|
+
border-left-width: 0;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@container style(--placement: left) {
|
|
94
|
+
:where(.tab) {
|
|
95
|
+
border-right-width: var(--border-width);
|
|
96
|
+
border-bottom-width: 0;
|
|
97
|
+
border-left-width: 0;
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
@container style(--placement: right) {
|
|
102
|
+
:where(.tab) {
|
|
103
|
+
border-left-width: var(--border-width);
|
|
104
|
+
border-bottom-width: 0;
|
|
105
|
+
border-right-width: 0;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
77
108
|
}
|
|
78
109
|
|
|
79
110
|
@utility tablist-tab {
|
|
80
|
-
.tab {
|
|
111
|
+
:where(.tab) {
|
|
81
112
|
position: relative;
|
|
82
113
|
z-index: 1;
|
|
83
114
|
}
|
|
84
115
|
|
|
85
|
-
|
|
116
|
+
/* Static/old-browser fallback. Structural selectors wrapped in :where() so
|
|
117
|
+
the container queries below compose by source order. Edge removal uses the
|
|
118
|
+
-width longhand (not the `border-*: 0` shorthand) so it leaves border-style
|
|
119
|
+
intact — otherwise a responsive flip could restore an edge's width while
|
|
120
|
+
its style stayed `none` and nothing would render. */
|
|
121
|
+
&:where(.tablist-top) :where(.tab) {
|
|
86
122
|
top: var(--border-width);
|
|
87
|
-
border-bottom: 0;
|
|
123
|
+
border-bottom-width: 0;
|
|
88
124
|
border-end-start-radius: 0;
|
|
89
125
|
border-end-end-radius: 0;
|
|
90
126
|
}
|
|
91
127
|
|
|
92
|
-
|
|
128
|
+
&:where(.tablist-left) :where(.tab) {
|
|
93
129
|
right: var(--border-width);
|
|
94
|
-
border-right: 0;
|
|
130
|
+
border-right-width: 0;
|
|
95
131
|
border-start-end-radius: 0;
|
|
96
132
|
border-end-end-radius: 0;
|
|
97
133
|
}
|
|
98
134
|
|
|
99
|
-
|
|
135
|
+
&:where(.tablist-right) :where(.tab) {
|
|
100
136
|
left: var(--border-width);
|
|
101
|
-
border-left: 0;
|
|
137
|
+
border-left-width: 0;
|
|
102
138
|
border-start-start-radius: 0;
|
|
103
139
|
border-end-start-radius: 0;
|
|
104
140
|
}
|
|
141
|
+
|
|
142
|
+
/* Responsive placement. Each block fully restates the tab treatment for its
|
|
143
|
+
placement: the active offset (other two reset to 0), the removed edge (other
|
|
144
|
+
removable edges restored to --border-width), and the two flattened corners
|
|
145
|
+
(the rest restored to --radius). This makes a breakpoint flip land cleanly
|
|
146
|
+
with no stale offset, missing edge, or squared corner from the static rule. */
|
|
147
|
+
@container style(--placement: top) {
|
|
148
|
+
:where(.tab) {
|
|
149
|
+
top: var(--border-width);
|
|
150
|
+
right: 0;
|
|
151
|
+
left: 0;
|
|
152
|
+
border-bottom-width: 0;
|
|
153
|
+
border-right-width: var(--border-width);
|
|
154
|
+
border-left-width: var(--border-width);
|
|
155
|
+
border-start-start-radius: var(--radius);
|
|
156
|
+
border-start-end-radius: var(--radius);
|
|
157
|
+
border-end-start-radius: 0;
|
|
158
|
+
border-end-end-radius: 0;
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
@container style(--placement: left) {
|
|
163
|
+
:where(.tab) {
|
|
164
|
+
right: var(--border-width);
|
|
165
|
+
top: 0;
|
|
166
|
+
left: 0;
|
|
167
|
+
border-right-width: 0;
|
|
168
|
+
border-bottom-width: var(--border-width);
|
|
169
|
+
border-left-width: var(--border-width);
|
|
170
|
+
border-start-start-radius: var(--radius);
|
|
171
|
+
border-end-start-radius: var(--radius);
|
|
172
|
+
border-start-end-radius: 0;
|
|
173
|
+
border-end-end-radius: 0;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
@container style(--placement: right) {
|
|
178
|
+
:where(.tab) {
|
|
179
|
+
left: var(--border-width);
|
|
180
|
+
top: 0;
|
|
181
|
+
right: 0;
|
|
182
|
+
border-left-width: 0;
|
|
183
|
+
border-bottom-width: var(--border-width);
|
|
184
|
+
border-right-width: var(--border-width);
|
|
185
|
+
border-start-end-radius: var(--radius);
|
|
186
|
+
border-end-end-radius: var(--radius);
|
|
187
|
+
border-start-start-radius: 0;
|
|
188
|
+
border-end-start-radius: 0;
|
|
189
|
+
}
|
|
190
|
+
}
|
|
105
191
|
}
|
|
106
192
|
|
|
107
193
|
@utility tablist-card-divided {
|
|
@@ -110,50 +196,105 @@
|
|
|
110
196
|
gap: 0;
|
|
111
197
|
padding: 0;
|
|
112
198
|
|
|
199
|
+
/* Structural pseudos are wrapped in :where() so every rule stays at the
|
|
200
|
+
specificity of a single class. Placement treatments then compose purely by
|
|
201
|
+
source order: when a tablist both carries a static placement class and
|
|
202
|
+
flips --placement responsively, the last matching block's resets win
|
|
203
|
+
cleanly with no leftover corners or doubled dividers. */
|
|
204
|
+
|
|
113
205
|
&:where(.tablist-top) {
|
|
114
206
|
:where(.tab) {
|
|
115
207
|
border-width: 0;
|
|
116
208
|
border-radius: 0;
|
|
117
209
|
|
|
118
|
-
&:not(:first-child) {
|
|
210
|
+
&:where(:not(:first-child)) {
|
|
119
211
|
border-left-width: var(--border-width);
|
|
120
212
|
border-color: var(--_bc, var(--border-color));
|
|
121
213
|
}
|
|
122
214
|
|
|
123
|
-
&:first-child {
|
|
124
|
-
border-radius: 0;
|
|
215
|
+
&:where(:first-child) {
|
|
125
216
|
border-top-left-radius: calc(var(--radius) - var(--border-width));
|
|
126
217
|
border-bottom-left-radius: calc(var(--radius) - var(--border-width));
|
|
127
218
|
}
|
|
128
219
|
|
|
129
|
-
&:last-child {
|
|
130
|
-
border-radius: 0;
|
|
220
|
+
&:where(:last-child) {
|
|
131
221
|
border-top-right-radius: calc(var(--radius) - var(--border-width));
|
|
132
222
|
border-bottom-right-radius: calc(var(--radius) - var(--border-width));
|
|
133
223
|
}
|
|
134
224
|
}
|
|
135
225
|
}
|
|
136
226
|
|
|
137
|
-
|
|
138
|
-
|
|
227
|
+
&:where(.tablist-left),
|
|
228
|
+
&:where(.tablist-right) {
|
|
139
229
|
:where(.tab) {
|
|
140
230
|
border-width: 0;
|
|
141
231
|
border-radius: 0;
|
|
142
|
-
}
|
|
143
232
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
233
|
+
&:where(:not(:first-child)) {
|
|
234
|
+
border-top-width: var(--border-width);
|
|
235
|
+
border-color: var(--_bc, var(--border-color));
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
&:where(:first-child) {
|
|
239
|
+
border-top-left-radius: calc(var(--radius) - var(--border-width));
|
|
240
|
+
border-top-right-radius: calc(var(--radius) - var(--border-width));
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
&:where(:last-child) {
|
|
244
|
+
border-bottom-left-radius: calc(var(--radius) - var(--border-width));
|
|
245
|
+
border-bottom-right-radius: calc(var(--radius) - var(--border-width));
|
|
246
|
+
}
|
|
147
247
|
}
|
|
248
|
+
}
|
|
148
249
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
250
|
+
/* Responsive placement.
|
|
251
|
+
The class rules above cover static placement in every browser. These
|
|
252
|
+
container style queries react to the live --placement value, so a tablist
|
|
253
|
+
that flips placement at a breakpoint (tablist-top max-bp:tablist-left)
|
|
254
|
+
also flips its divided-border treatment. They win over the class rules by
|
|
255
|
+
source order in supporting browsers; older browsers ignore them and keep
|
|
256
|
+
the static treatment. */
|
|
257
|
+
@container style(--placement: top) {
|
|
258
|
+
:where(.tab) {
|
|
259
|
+
border-width: 0;
|
|
260
|
+
border-radius: 0;
|
|
261
|
+
|
|
262
|
+
&:where(:not(:first-child)) {
|
|
263
|
+
border-left-width: var(--border-width);
|
|
264
|
+
border-color: var(--_bc, var(--border-color));
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
&:where(:first-child) {
|
|
268
|
+
border-top-left-radius: calc(var(--radius) - var(--border-width));
|
|
269
|
+
border-bottom-left-radius: calc(var(--radius) - var(--border-width));
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
&:where(:last-child) {
|
|
273
|
+
border-top-right-radius: calc(var(--radius) - var(--border-width));
|
|
274
|
+
border-bottom-right-radius: calc(var(--radius) - var(--border-width));
|
|
275
|
+
}
|
|
152
276
|
}
|
|
277
|
+
}
|
|
153
278
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
border-
|
|
279
|
+
@container style(--placement: left) or style(--placement: right) {
|
|
280
|
+
:where(.tab) {
|
|
281
|
+
border-width: 0;
|
|
282
|
+
border-radius: 0;
|
|
283
|
+
|
|
284
|
+
&:where(:not(:first-child)) {
|
|
285
|
+
border-top-width: var(--border-width);
|
|
286
|
+
border-color: var(--_bc, var(--border-color));
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
&:where(:first-child) {
|
|
290
|
+
border-top-left-radius: calc(var(--radius) - var(--border-width));
|
|
291
|
+
border-top-right-radius: calc(var(--radius) - var(--border-width));
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
&:where(:last-child) {
|
|
295
|
+
border-bottom-left-radius: calc(var(--radius) - var(--border-width));
|
|
296
|
+
border-bottom-right-radius: calc(var(--radius) - var(--border-width));
|
|
297
|
+
}
|
|
157
298
|
}
|
|
158
299
|
}
|
|
159
300
|
}
|