@godxjp/ui 13.17.2 → 13.17.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.
- package/dist/styles/form-layout.css +17 -1
- package/package.json +1 -1
|
@@ -20,14 +20,30 @@
|
|
|
20
20
|
.ui-form-field {
|
|
21
21
|
display: grid;
|
|
22
22
|
gap: var(--field-label-gap);
|
|
23
|
+
/* Fill the container's inline (horizontal) axis in ANY parent — a Form's
|
|
24
|
+
* flex column (.ui-form), a ResponsiveGrid cell, or a bare flex column /
|
|
25
|
+
* block — instead of collapsing to the content's max-content width. This
|
|
26
|
+
* mirrors Ant Design's Form.Item, which sets the item/control to width:100%
|
|
27
|
+
* in vertical layout rather than relying on the parent to stretch it. Without
|
|
28
|
+
* this, a flex-column parent maps `align-self:start` onto the inline axis and
|
|
29
|
+
* the field shrinks to its widest content (a helper-less input collapses to
|
|
30
|
+
* its default ~20ch). Inline layout opts out below (Ant: compact, content-width). */
|
|
31
|
+
inline-size: 100%;
|
|
23
32
|
/* Never stretch to a taller grid-row sibling (e.g. a field carrying a
|
|
24
33
|
* helper/error). Stretching would let .ui-form-field-control's
|
|
25
34
|
* align-content:center vertically centre the control, so a field WITHOUT a
|
|
26
35
|
* helper sits lower than one WITH a helper in the same ResponsiveGrid row.
|
|
27
|
-
* Hugging content keeps every control top-aligned across the row.
|
|
36
|
+
* Hugging content keeps every control top-aligned across the row. This is the
|
|
37
|
+
* BLOCK (vertical) axis only — width is pinned by inline-size:100% above. */
|
|
28
38
|
align-self: start;
|
|
29
39
|
}
|
|
30
40
|
|
|
41
|
+
/* Inline layout is intentionally compact (Ant: layout="inline"): the field
|
|
42
|
+
* hugs its content so a row of inline fields can sit side by side. */
|
|
43
|
+
.ui-form-field[data-layout="inline"] {
|
|
44
|
+
inline-size: auto;
|
|
45
|
+
}
|
|
46
|
+
|
|
31
47
|
.ui-form-field-label {
|
|
32
48
|
display: flex;
|
|
33
49
|
align-items: center;
|