@jsekulowicz/ds-components 0.13.1 → 0.13.2
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/custom-elements.json
CHANGED
|
@@ -852,7 +852,7 @@
|
|
|
852
852
|
{
|
|
853
853
|
"kind": "variable",
|
|
854
854
|
"name": "scrollFadeStyles",
|
|
855
|
-
"default": "css` /* @property registration so the scroll-driven keyframe can interpolate the fades as colours. Near-instant flips keep the transitions binary. */ @property --ds-scroll-fade-top { syntax: '<color>'; inherits: false; initial-value: rgb(0 0 0); } @property --ds-scroll-fade-bottom { syntax: '<color>'; inherits: false; initial-value: rgb(0 0 0); } @keyframes ds-scroll-fade { 0% { --ds-scroll-fade-top: rgb(0 0 0); --ds-scroll-fade-bottom: rgb(0 0 0); } 0.001%, 99.999% { --ds-scroll-fade-top: rgb(0 0 0 / 0); --ds-scroll-fade-bottom: rgb(0 0 0 / 0); } 100% { --ds-scroll-fade-top: rgb(0 0 0 / 0); --ds-scroll-fade-bottom: rgb(0 0 0); } } `"
|
|
855
|
+
"default": "css` /* @property registration so the scroll-driven keyframe can interpolate the fades as colours. Near-instant flips keep the transitions binary. */ @property --ds-scroll-fade-top { syntax: '<color>'; inherits: false; initial-value: rgb(0 0 0); } @property --ds-scroll-fade-bottom { syntax: '<color>'; inherits: false; initial-value: rgb(0 0 0); } @keyframes ds-scroll-fade { 0% { --ds-scroll-fade-top: rgb(0 0 0); --ds-scroll-fade-bottom: rgb(0 0 0 / 0); } 0.001%, 99.999% { --ds-scroll-fade-top: rgb(0 0 0 / 0); --ds-scroll-fade-bottom: rgb(0 0 0 / 0); } 100% { --ds-scroll-fade-top: rgb(0 0 0 / 0); --ds-scroll-fade-bottom: rgb(0 0 0); } } `"
|
|
856
856
|
}
|
|
857
857
|
],
|
|
858
858
|
"exports": [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll-fade.styles.d.ts","sourceRoot":"","sources":["../../src/shared/scroll-fade.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"scroll-fade.styles.d.ts","sourceRoot":"","sources":["../../src/shared/scroll-fade.styles.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,gBAAgB,yBA2B5B,CAAC"}
|
|
@@ -1,12 +1,7 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
// Shared scroll-driven fade. Registers the fade-colour custom properties and a
|
|
3
|
-
// keyframe that flips them
|
|
4
|
-
//
|
|
5
|
-
// inactive (so the fade stays hidden), but some engines instead clamp it to 0%
|
|
6
|
-
// — leaving a phantom bottom fade on content that doesn't actually scroll. By
|
|
7
|
-
// making 0% the no-fade state, a panel that fits its content never fades on any
|
|
8
|
-
// engine. The 100% (scrolled-to-bottom) keyframe still shows the top fade since
|
|
9
|
-
// that position is only reachable when the content really is scrollable. Add
|
|
3
|
+
// keyframe that flips them at the scroll extremes — top fade hidden at
|
|
4
|
+
// scroll-top, bottom fade hidden at scroll-end, both visible in between. Add
|
|
10
5
|
// `scrollFadeStyles` to a component's styles, then on the scroll container:
|
|
11
6
|
// scrollbar-width: none;
|
|
12
7
|
// mask-image: linear-gradient(to bottom,
|
|
@@ -32,7 +27,7 @@ export const scrollFadeStyles = css `
|
|
|
32
27
|
@keyframes ds-scroll-fade {
|
|
33
28
|
0% {
|
|
34
29
|
--ds-scroll-fade-top: rgb(0 0 0);
|
|
35
|
-
--ds-scroll-fade-bottom: rgb(0 0 0);
|
|
30
|
+
--ds-scroll-fade-bottom: rgb(0 0 0 / 0);
|
|
36
31
|
}
|
|
37
32
|
0.001%, 99.999% {
|
|
38
33
|
--ds-scroll-fade-top: rgb(0 0 0 / 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll-fade.styles.js","sourceRoot":"","sources":["../../src/shared/scroll-fade.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,+EAA+E;AAC/E,
|
|
1
|
+
{"version":3,"file":"scroll-fade.styles.js","sourceRoot":"","sources":["../../src/shared/scroll-fade.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,+EAA+E;AAC/E,uEAAuE;AACvE,6EAA6E;AAC7E,4EAA4E;AAC5E,2BAA2B;AAC3B,2CAA2C;AAC3C,iDAAiD;AACjD,qDAAqD;AACrD,sCAAsC;AACtC,sCAAsC;AACtC,8EAA8E;AAC9E,6DAA6D;AAC7D,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BlC,CAAC"}
|
package/package.json
CHANGED