@uncinq/css-components 1.26.0 → 1.26.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.
|
@@ -20,6 +20,11 @@
|
|
|
20
20
|
*
|
|
21
21
|
* Item width: --items-min-width (or --max-width-item), capped by
|
|
22
22
|
* --items-carousel-max-width so the next item always peeks in.
|
|
23
|
+
* --items-carousel-min-width, unset by default, overrides the first for every
|
|
24
|
+
* carousel at once: set on :root, it gives them all one width whatever their
|
|
25
|
+
* grid says, and a component re-declaring it on itself keeps its own. It is
|
|
26
|
+
* only read while the row scrolls, so the grid it turns back into keeps
|
|
27
|
+
* --items-min-width.
|
|
23
28
|
*
|
|
24
29
|
* Bleed: --container-bleed, published by .container in @uncinq/css-base — one
|
|
25
30
|
* gutter while the container spans the viewport, 0 once it caps, so the row
|
|
@@ -55,7 +60,7 @@
|
|
|
55
60
|
.scrollsnap-md,
|
|
56
61
|
.scrollsnap-lg,
|
|
57
62
|
.scrollsnap-xl {
|
|
58
|
-
grid-auto-columns: min(var(--items-min-width, var(--max-width-item)), var(--items-carousel-max-width, 75vw));
|
|
63
|
+
grid-auto-columns: min(var(--items-carousel-min-width, var(--items-min-width, var(--max-width-item))), var(--items-carousel-max-width, 75vw));
|
|
59
64
|
grid-auto-flow: column;
|
|
60
65
|
grid-template-columns: none;
|
|
61
66
|
justify-content: start;
|
package/docs/content/items.md
CHANGED
|
@@ -73,4 +73,4 @@ Add a [`.scrollsnap-*`](../../utilities/scrollsnap/) class to the same element.
|
|
|
73
73
|
<div class="items scrollsnap-md">...</div>
|
|
74
74
|
```
|
|
75
75
|
|
|
76
|
-
The carousel reads the same `--items-min-width`, so item width stays consistent between the two modes.
|
|
76
|
+
The carousel reads the same `--items-min-width`, so item width stays consistent between the two modes, unless `--items-carousel-min-width` gives the carousels a width of their own (see [Scrollsnap](../../utilities/scrollsnap/#one-width-for-every-carousel)).
|
|
@@ -53,13 +53,33 @@ Above its rung, every property is set to `revert-layer` rather than to a second
|
|
|
53
53
|
|
|
54
54
|
```css
|
|
55
55
|
grid-auto-columns: min(
|
|
56
|
-
var(--items-min-width, var(--max-width-item)),
|
|
56
|
+
var(--items-carousel-min-width, var(--items-min-width, var(--max-width-item))),
|
|
57
57
|
var(--items-carousel-max-width, 75vw)
|
|
58
58
|
);
|
|
59
59
|
```
|
|
60
60
|
|
|
61
61
|
Items take `--items-min-width`, the same value that drives the grid, capped by `--items-carousel-max-width` (default `75vw`). The cap is what guarantees the next item always peeks in, which is the affordance that tells a reader the row scrolls at all. Without it, a wide item on a narrow screen would fill the viewport and the carousel would look like a static card.
|
|
62
62
|
|
|
63
|
+
### One width for every carousel
|
|
64
|
+
|
|
65
|
+
`--items-carousel-min-width` is unset by default, so each carousel keeps the width its own grid gives it. Set it to give every carousel the same width, whatever their grid says:
|
|
66
|
+
|
|
67
|
+
```css
|
|
68
|
+
@layer tokens {
|
|
69
|
+
:root {
|
|
70
|
+
--items-carousel-min-width: 25ch;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
It inherits, so it can be set on a section rather than on `:root` to cover only the carousels inside it. A component that has to keep its own width hands it back on itself, which wins over the inherited value:
|
|
76
|
+
|
|
77
|
+
```css
|
|
78
|
+
.logos { --items-carousel-min-width: var(--items-min-width); }
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
It is only read while the row scrolls. Above its rung the grid comes back with `--items-min-width`, so the carousels can be narrowed without touching the grids they turn back into.
|
|
82
|
+
|
|
63
83
|
## The bleed, and why margin and padding disagree
|
|
64
84
|
|
|
65
85
|
The row pulls out to the screen edge using `--container-bleed`, published by `.container` in [css-base](../../../css-base/layouts/container/#the---container-bleed-contract). The property inherits, so it reaches the row from a `.container` however far up it sits.
|