@uncinq/css-components 1.22.1 → 1.24.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.
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
--icon-margin-inline-start: 0;
|
|
5
5
|
--icon-size: var(--btn-font-size);
|
|
6
6
|
|
|
7
|
-
align-items:
|
|
7
|
+
align-items: baseline;
|
|
8
8
|
appearance: none;
|
|
9
9
|
background-color: var(--btn-color-background);
|
|
10
10
|
border: var(--btn-border-width) var(--btn-border-style) var(--btn-color-border);
|
|
@@ -26,6 +26,12 @@
|
|
|
26
26
|
text-transform: var(--btn-text-transform);
|
|
27
27
|
text-underline-offset: var(--text-decoration-offset);
|
|
28
28
|
|
|
29
|
+
&::before,
|
|
30
|
+
&::after,
|
|
31
|
+
> svg {
|
|
32
|
+
align-self: center;
|
|
33
|
+
}
|
|
34
|
+
|
|
29
35
|
&:focus-visible {
|
|
30
36
|
outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-color-outline);
|
|
31
37
|
outline-offset: var(--focus-outline-offset, 2px);
|
package/css/components/form.css
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
.form {
|
|
4
4
|
display: grid;
|
|
5
5
|
gap: var(--gap);
|
|
6
|
-
grid-template-columns: repeat(auto-fill, minmax(max(var(--form-col-min-width, 25ch), calc(50% - var(--gap) / 2)), 1fr));
|
|
6
|
+
grid-template-columns: repeat(auto-fill, minmax(min(max(var(--form-col-min-width, 25ch), calc(50% - var(--gap) / 2)), 100%), 1fr));
|
|
7
7
|
|
|
8
8
|
.help {
|
|
9
9
|
color: var(--help-color-text);
|
|
@@ -82,6 +82,7 @@
|
|
|
82
82
|
justify-content: revert-layer;
|
|
83
83
|
margin-inline: revert-layer;
|
|
84
84
|
overflow-x: revert-layer;
|
|
85
|
+
overflow-y: revert-layer;
|
|
85
86
|
padding-inline: revert-layer;
|
|
86
87
|
scroll-snap-type: revert-layer;
|
|
87
88
|
|
|
@@ -99,6 +100,7 @@
|
|
|
99
100
|
justify-content: revert-layer;
|
|
100
101
|
margin-inline: revert-layer;
|
|
101
102
|
overflow-x: revert-layer;
|
|
103
|
+
overflow-y: revert-layer;
|
|
102
104
|
padding-inline: revert-layer;
|
|
103
105
|
scroll-snap-type: revert-layer;
|
|
104
106
|
|
|
@@ -116,6 +118,7 @@
|
|
|
116
118
|
justify-content: revert-layer;
|
|
117
119
|
margin-inline: revert-layer;
|
|
118
120
|
overflow-x: revert-layer;
|
|
121
|
+
overflow-y: revert-layer;
|
|
119
122
|
padding-inline: revert-layer;
|
|
120
123
|
scroll-snap-type: revert-layer;
|
|
121
124
|
|
|
@@ -133,6 +136,7 @@
|
|
|
133
136
|
justify-content: revert-layer;
|
|
134
137
|
margin-inline: revert-layer;
|
|
135
138
|
overflow-x: revert-layer;
|
|
139
|
+
overflow-y: revert-layer;
|
|
136
140
|
padding-inline: revert-layer;
|
|
137
141
|
scroll-snap-type: revert-layer;
|
|
138
142
|
|
package/docs/forms/form.md
CHANGED
|
@@ -36,12 +36,14 @@ Each field is a plain `div`. There is no `.form-group` or `.field` class: the gr
|
|
|
36
36
|
```css
|
|
37
37
|
grid-template-columns: repeat(
|
|
38
38
|
auto-fill,
|
|
39
|
-
minmax(max(var(--form-col-min-width, 25ch), calc(50% - var(--gap) / 2)), 1fr)
|
|
39
|
+
minmax(min(max(var(--form-col-min-width, 25ch), calc(50% - var(--gap) / 2)), 100%), 1fr)
|
|
40
40
|
);
|
|
41
41
|
```
|
|
42
42
|
|
|
43
43
|
The `max()` is doing two jobs at once. It sets a **floor** of `25ch`, below which a field is too narrow to use, and it sets each track to at least half the width minus half the gap, which **caps** the result at two columns however wide the container gets.
|
|
44
44
|
|
|
45
|
+
The outer `min(…, 100%)` keeps that floor from ever exceeding the form itself. `ch` is the width of the font's `0`, so with a wide typeface `25ch` can be wider than a phone screen (Termina's `0` is 0.94em, making `25ch` 376px at 16px), and without the clamp the single column would overflow its container and widen the page.
|
|
46
|
+
|
|
45
47
|
A three-column form is almost never what you want, because it breaks the vertical reading order of a sequence of fields: the eye has to move right twice before dropping a line, and nothing in the layout says which order the fields belong in.
|
|
46
48
|
|
|
47
49
|
Change the floor with `--form-col-min-width`. Raising it past 50% forces a single column, which is a reasonable way to write a narrow form without a variant class.
|