@godxjp/ui 18.12.16 → 18.12.17
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.
|
@@ -12,7 +12,25 @@
|
|
|
12
12
|
.ui-form {
|
|
13
13
|
display: flex;
|
|
14
14
|
flex-direction: column;
|
|
15
|
-
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/* Row rhythm between a Form's own top-level blocks (gh#295) — e.g. the field group's
|
|
18
|
+
* CardContent and its CardFooter action row. MARGIN, not flex `gap`: `gap` only reaches DIRECT
|
|
19
|
+
* children, which is dead the moment a consumer needs a CardFooter Save button to actually
|
|
20
|
+
* submit (it must stay a `<form>` descendant, so Form has to wrap CardContent — the FormFields
|
|
21
|
+
* become grandchildren, past flex `gap`'s reach). Margin-based sibling spacing works at any
|
|
22
|
+
* depth as long as the elements are literal siblings. */
|
|
23
|
+
.ui-form > * + * {
|
|
24
|
+
margin-block-start: var(--form-block-gap);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* Field-to-field row rhythm (gh#295) — MORE SPECIFIC than the rule above (two class selectors
|
|
28
|
+
* beat one), so it wins rather than stacking with it whenever two FormFields are adjacent
|
|
29
|
+
* siblings: Form's own direct children (a plain field list, no Card framing) or nested one
|
|
30
|
+
* level through CardContent (the common Card-framed, Save-button-capable case). This is what
|
|
31
|
+
* makes the rhythm hold regardless of DOM depth — the actual fix for gh#295. */
|
|
32
|
+
.ui-form-field + .ui-form-field {
|
|
33
|
+
margin-block-start: var(--form-field-row-gap);
|
|
16
34
|
}
|
|
17
35
|
|
|
18
36
|
/* Vertical (default + collapsed state): label stacked above the control column, LEFT-aligned.
|
|
@@ -12,4 +12,16 @@
|
|
|
12
12
|
|
|
13
13
|
/* Column gap between the label and its control in horizontal/inline layout. */
|
|
14
14
|
--form-label-gap: var(--space-4); /* 16px */
|
|
15
|
+
|
|
16
|
+
/* Row rhythm between a Form's own top-level blocks (gh#295) — e.g. the field group's
|
|
17
|
+
* CardContent and its CardFooter action row, or two FormFields that happen to be Form's OWN
|
|
18
|
+
* direct children (no Card framing). Unchanged from the historical value. */
|
|
19
|
+
--form-block-gap: var(--space-4); /* 16px */
|
|
20
|
+
|
|
21
|
+
/* Field-to-field row rhythm (gh#295) — mirrors --descriptions-row-gap so a read-only value
|
|
22
|
+
* mixed in via `FormField.staticText` (gh#294) and a real Descriptions block share ONE canonical
|
|
23
|
+
* rhythm. Applied via margin-based sibling spacing on FormField itself (not Form's flex `gap`,
|
|
24
|
+
* which only reaches DIRECT children — dead in the common `Form > CardContent > FormField*`
|
|
25
|
+
* composition every real Save-button form needs), so it holds at any DOM depth relative to Form. */
|
|
26
|
+
--form-field-row-gap: var(--space-3); /* 12px */
|
|
15
27
|
}
|