@godxjp/ui 16.1.1 → 16.2.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.
|
@@ -153,7 +153,8 @@
|
|
|
153
153
|
|
|
154
154
|
[data-slot="card-header"][data-banded] {
|
|
155
155
|
padding-inline: var(--card-space-inset);
|
|
156
|
-
padding
|
|
156
|
+
/* Divided band → symmetric vertical padding (border-aware). */
|
|
157
|
+
padding-block: var(--card-space-divided-y);
|
|
157
158
|
gap: var(--card-space-gap);
|
|
158
159
|
}
|
|
159
160
|
|
|
@@ -252,7 +253,10 @@
|
|
|
252
253
|
overflow: hidden;
|
|
253
254
|
}
|
|
254
255
|
|
|
255
|
-
|
|
256
|
+
/* A header BELOW a cover gets a top gap to clear the media — but a BANDED header is a
|
|
257
|
+
* self-contained divider band that must stay symmetric (border-aware), so it keeps its
|
|
258
|
+
* own `--card-space-divided-y` block padding instead of this one-sided top gap. */
|
|
259
|
+
[data-slot="card"]:has([data-slot="card-cover"]) [data-slot="card-header"]:not([data-banded]) {
|
|
256
260
|
padding-top: var(--card-space-body-y);
|
|
257
261
|
}
|
|
258
262
|
|
|
@@ -278,6 +282,14 @@
|
|
|
278
282
|
padding-block: 0;
|
|
279
283
|
}
|
|
280
284
|
|
|
285
|
+
/* A non-banded header before a FLUSH full-bleed table supplies its OWN bottom gap: the table's
|
|
286
|
+
* content padding is zeroed above, so without this the title/subtitle butt against the header
|
|
287
|
+
* row. Match the header's top inset so the header block reads balanced top↕bottom. */
|
|
288
|
+
[data-slot="card"]:has([data-slot="card-content"][data-flush] table)
|
|
289
|
+
[data-slot="card-header"]:not([data-banded]) {
|
|
290
|
+
padding-bottom: var(--card-space-body-y);
|
|
291
|
+
}
|
|
292
|
+
|
|
281
293
|
[data-slot="card-content"][data-tight] {
|
|
282
294
|
padding-top: 0;
|
|
283
295
|
}
|
|
@@ -325,7 +337,8 @@
|
|
|
325
337
|
|
|
326
338
|
[data-slot="card-footer"][data-separated] {
|
|
327
339
|
border-top: 1px solid hsl(var(--card-border));
|
|
328
|
-
padding
|
|
340
|
+
/* Divided band → symmetric vertical padding (border-aware), in sync with a banded header. */
|
|
341
|
+
padding-block: var(--card-space-divided-y);
|
|
329
342
|
justify-content: flex-end;
|
|
330
343
|
}
|
|
331
344
|
|
|
@@ -5,6 +5,12 @@
|
|
|
5
5
|
--card-space-header-y: var(--space-stack-sm);
|
|
6
6
|
--card-space-body-y: var(--space-section-active);
|
|
7
7
|
--card-space-footer-y: var(--space-stack-sm);
|
|
8
|
+
/* DIVIDED-section vertical padding (rule #44/#45). A header/footer that carries a
|
|
9
|
+
* divider border (banded header, separated footer) reads as its own band, so it gets
|
|
10
|
+
* SYMMETRIC top+bottom padding — distinct from a plain header that flows into the body
|
|
11
|
+
* (top inset, no bottom). One themeable knob keeps the header- and footer-band rhythm in
|
|
12
|
+
* sync; a service theme tunes the band density here instead of forking per-slot CSS. */
|
|
13
|
+
--card-space-divided-y: var(--card-space-header-y);
|
|
8
14
|
--card-space-gap: var(--space-stack-xs);
|
|
9
15
|
--card-title-font-size: var(--font-size-base);
|
|
10
16
|
--card-title-line-height: var(--line-height-tight);
|