@godxjp/ui 18.15.2 → 18.15.3
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.
|
@@ -258,13 +258,25 @@
|
|
|
258
258
|
padding-top: var(--card-space-body-y);
|
|
259
259
|
}
|
|
260
260
|
|
|
261
|
-
/* Flush / tight body — symmetric plain header band
|
|
262
|
-
|
|
261
|
+
/* Flush / tight body — symmetric plain header band.
|
|
262
|
+
*
|
|
263
|
+
* NOT written as `:has(…[data-tight]:not(:has(tabs-list)))`: the Selectors 4 spec forbids
|
|
264
|
+
* `:has()` anywhere inside `:has()`, and Chrome drops the WHOLE rule as invalid
|
|
265
|
+
* (CSS.supports=false, measured on Chrome 151) — the symmetric band never applied. Same
|
|
266
|
+
* failure class as the headerAlign selector (505f0e6): in the file, correct-looking, selects
|
|
267
|
+
* nothing. So: apply to every tight body, then the tabs case below restores the shell top. */
|
|
268
|
+
[data-slot="card"]:has([data-slot="card-content"][data-tight])
|
|
263
269
|
[data-slot="card-header"]:not([data-banded]) {
|
|
264
270
|
padding-top: var(--card-space-body-y);
|
|
265
271
|
padding-bottom: var(--card-space-body-y);
|
|
266
272
|
}
|
|
267
273
|
|
|
274
|
+
/* Tabs in a tight body: only the bottom band is managed (rule below) — keep the shell top. */
|
|
275
|
+
[data-slot="card"]:has([data-slot="card-content"][data-tight] [data-slot="tabs-list"])
|
|
276
|
+
[data-slot="card-header"]:not([data-banded]) {
|
|
277
|
+
padding-top: var(--card-space-shell-y, var(--card-space-inset));
|
|
278
|
+
}
|
|
279
|
+
|
|
268
280
|
[data-slot="card"]:has([data-slot="card-content"][data-tight] [data-slot="tabs-list"])
|
|
269
281
|
[data-slot="card-header"] {
|
|
270
282
|
padding-bottom: var(--card-space-body-y);
|
|
@@ -283,15 +295,20 @@
|
|
|
283
295
|
padding-bottom: var(--card-space-body-y);
|
|
284
296
|
}
|
|
285
297
|
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
298
|
+
/* NOT `:has(header:has(action):not(:has(description)))` — nested `:has()` is spec-invalid
|
|
299
|
+
* and Chrome drops the whole rule (measured, Chrome 151), so the toolbar body never lost its
|
|
300
|
+
* top padding. Valid equivalent: zero it for any header-hosted action, then the described
|
|
301
|
+
* (non-toolbar) header restores the gap in the equal-specificity rule after this one. */
|
|
302
|
+
[data-slot="card"]:has([data-slot="card-header"] [data-slot="card-action"])
|
|
291
303
|
[data-slot="card-content"]:not([data-tight]) {
|
|
292
304
|
padding-top: 0;
|
|
293
305
|
}
|
|
294
306
|
|
|
307
|
+
[data-slot="card"]:has([data-slot="card-header"] [data-slot="card-description"])
|
|
308
|
+
[data-slot="card-content"]:not([data-tight]) {
|
|
309
|
+
padding-top: var(--card-space-body-y);
|
|
310
|
+
}
|
|
311
|
+
|
|
295
312
|
/* Header-only card — terminal slot owns bottom shell */
|
|
296
313
|
[data-slot="card"]:not(:has([data-slot="card-content"], [data-slot="card-footer"]))
|
|
297
314
|
[data-slot="card-header"] {
|
|
@@ -349,11 +349,15 @@
|
|
|
349
349
|
|
|
350
350
|
/* A bordered table sitting FLUSH inside a Card already has the card's frame around it —
|
|
351
351
|
* its own outer frame doubles up as two nested rounded borders (measured on
|
|
352
|
-
* customer-inquiries detail: TABLE 1px inside .ui-card 1px, gh#305). Drop
|
|
353
|
-
*
|
|
354
|
-
*
|
|
352
|
+
* customer-inquiries detail: TABLE 1px inside .ui-card 1px, gh#305). Drop the three edges
|
|
353
|
+
* that coincide with the card frame, but KEEP border-block-start: the top edge meets the
|
|
354
|
+
* CardHeader area, not the card border, and without it the header band floats with no
|
|
355
|
+
* separating line (measured on a rental detail's 出荷伝票一覧 section, gh#306). The
|
|
356
|
+
* vertical column rules above and TableRow's horizontal rules stay, so the grid inside
|
|
357
|
+
* the card is unchanged. A bordered table NOT in a flush card keeps its full frame. */
|
|
355
358
|
[data-slot="card-content"][data-flush] .ui-table-bordered {
|
|
356
359
|
border: 0;
|
|
360
|
+
border-block-start: 1px solid var(--table-border-color, hsl(var(--border)));
|
|
357
361
|
}
|
|
358
362
|
}
|
|
359
363
|
|