@uncinq/css-components 1.15.2 → 1.15.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/css/utilities/scrollsnap.css +26 -3
- package/package.json +1 -1
|
@@ -23,8 +23,31 @@
|
|
|
23
23
|
*
|
|
24
24
|
* Bleed: --container-bleed, published by .container in @uncinq/css-base — one
|
|
25
25
|
* gutter while the container spans the viewport, 0 once it caps, so the row
|
|
26
|
-
* never pulls out into dead space it cannot cross.
|
|
27
|
-
*
|
|
26
|
+
* never pulls out into dead space it cannot cross.
|
|
27
|
+
*
|
|
28
|
+
* The property inherits, so it reaches the row from a .container however far
|
|
29
|
+
* up it sits, and the fallback is the answer to "no .container above me at
|
|
30
|
+
* all". Margin and padding take DIFFERENT fallbacks, because outside a
|
|
31
|
+
* container they answer two different questions:
|
|
32
|
+
*
|
|
33
|
+
* margin — how far may I pull out of my parent? Unknown, so 0. Nothing
|
|
34
|
+
* published a bleed, the parent may be a card or a column with no
|
|
35
|
+
* room to give, and pulling a gutter out of it is a guess that
|
|
36
|
+
* overflows. Inside a container the published value decides, and
|
|
37
|
+
* at a capped rung that is 0 too.
|
|
38
|
+
* padding — how far in from MY edge should the first item sit? A gutter,
|
|
39
|
+
* the same breathing room every other box gets. A full-bleed block
|
|
40
|
+
* (.block-full, padding-inline: 0) spans the viewport with no
|
|
41
|
+
* inset of its own, so without this the cards touch the screen.
|
|
42
|
+
*
|
|
43
|
+
* Inside a container the two collapse back to one value — --container-bleed is
|
|
44
|
+
* defined, both read it, and the padding puts back inside the scroll box
|
|
45
|
+
* exactly what the negative margin took out, landing the first item on the
|
|
46
|
+
* container's content edge.
|
|
47
|
+
*
|
|
48
|
+
* scroll-margin-inline follows the PADDING, not the margin: it is what makes
|
|
49
|
+
* an item snap flush with the content edge instead of the padding edge, so it
|
|
50
|
+
* has to cancel the padding whatever the margin does.
|
|
28
51
|
*/
|
|
29
52
|
@layer utilities {
|
|
30
53
|
.scrollsnap,
|
|
@@ -36,7 +59,7 @@
|
|
|
36
59
|
grid-auto-flow: column;
|
|
37
60
|
grid-template-columns: none;
|
|
38
61
|
justify-content: start;
|
|
39
|
-
margin-inline: calc(var(--container-bleed,
|
|
62
|
+
margin-inline: calc(var(--container-bleed, 0px) * -1);
|
|
40
63
|
overflow-x: auto;
|
|
41
64
|
padding-inline: var(--container-bleed, var(--gutter));
|
|
42
65
|
scroll-snap-type: x mandatory;
|