@jsekulowicz/ds-components 0.13.0 → 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
|
@@ -7445,7 +7445,7 @@
|
|
|
7445
7445
|
{
|
|
7446
7446
|
"kind": "variable",
|
|
7447
7447
|
"name": "tableScrollBodyStyles",
|
|
7448
|
-
"default": "css` :host([scroll-body]) { display: flex; flex-direction: column; min-height: 0; } :host([scroll-body]) .scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; /* No overscroll bounce — the rubber-band at the top/bottom looks glitchy against the pinned header and the offset scroll-fade. */ overscroll-behavior: none; scrollbar-width: none; mask-image: linear-gradient( to bottom, rgb(0 0 0) 0, rgb(0 0 0) var(--ds-table-header-height), var(--ds-scroll-fade-top, rgb(0 0 0)) var(--ds-table-header-height), rgb(0 0 0) calc(var(--ds-table-header-height) * 2), rgb(0 0 0) calc(100% - var(--ds-table-header-height)), var(--ds-scroll-fade-bottom, rgb(0 0 0)) 100% ); animation: ds-scroll-fade linear; animation-timeline: scroll(self); } :host([scroll-body]) .scroll::-webkit-scrollbar { display: none; } :host([scroll-body]) thead th { position: sticky; top: 0; z-index: 1; box-sizing: border-box; block-size: var(--ds-table-header-height); } `"
|
|
7448
|
+
"default": "css` :host([scroll-body]) { display: flex; flex-direction: column; min-height: 0; } :host([scroll-body]) .scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; /* No overscroll bounce — the rubber-band at the top/bottom looks glitchy against the pinned header and the offset scroll-fade. */ overscroll-behavior: none; scrollbar-width: none; mask-image: linear-gradient( to bottom, rgb(0 0 0) 0, rgb(0 0 0) var(--ds-table-header-height), var(--ds-scroll-fade-top, rgb(0 0 0)) var(--ds-table-header-height), rgb(0 0 0) calc(var(--ds-table-header-height) * 2), rgb(0 0 0) calc(100% - var(--ds-table-header-height)), var(--ds-scroll-fade-bottom, rgb(0 0 0)) 100% ); animation: ds-scroll-fade linear; animation-timeline: scroll(self); } :host([scroll-body]) .scroll::-webkit-scrollbar { display: none; } :host([scroll-body]) thead th { position: sticky; top: 0; z-index: 1; box-sizing: border-box; block-size: var(--ds-table-header-height); } /* Stacked (mobile) layout hides the header and renders rows as cards, so the top fade must NOT be offset by the header height — fade from the very top like ds-dialog / ds-drawer. */ @container (max-width: ${mobileBreakpoint}) { :host([scroll-body]:not([responsive='scroll'])) .scroll { mask-image: linear-gradient( to bottom, var(--ds-scroll-fade-top, rgb(0 0 0)) 0, rgb(0 0 0) var(--ds-table-header-height), rgb(0 0 0) calc(100% - var(--ds-table-header-height)), var(--ds-scroll-fade-bottom, rgb(0 0 0)) 100% ); } } `"
|
|
7449
7449
|
}
|
|
7450
7450
|
],
|
|
7451
7451
|
"exports": [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-scroll-body.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-scroll-body.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"table-scroll-body.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-scroll-body.styles.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,qBAAqB,yBAmDjC,CAAC"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
1
|
+
import { css, unsafeCSS } from 'lit';
|
|
2
|
+
import { breakpoint } from '@jsekulowicz/ds-tokens';
|
|
3
|
+
const mobileBreakpoint = unsafeCSS(breakpoint.sm);
|
|
2
4
|
// `scroll-body`: the body scrolls under a pinned header. The scrollbar is
|
|
3
5
|
// hidden and overflow is signalled by the shared scroll-driven fade (see
|
|
4
6
|
// shared/scroll-fade.styles). The header is pinned to a fixed
|
|
@@ -43,5 +45,20 @@ export const tableScrollBodyStyles = css `
|
|
|
43
45
|
box-sizing: border-box;
|
|
44
46
|
block-size: var(--ds-table-header-height);
|
|
45
47
|
}
|
|
48
|
+
|
|
49
|
+
/* Stacked (mobile) layout hides the header and renders rows as cards, so the
|
|
50
|
+
top fade must NOT be offset by the header height — fade from the very top
|
|
51
|
+
like ds-dialog / ds-drawer. */
|
|
52
|
+
@container (max-width: ${mobileBreakpoint}) {
|
|
53
|
+
:host([scroll-body]:not([responsive='scroll'])) .scroll {
|
|
54
|
+
mask-image: linear-gradient(
|
|
55
|
+
to bottom,
|
|
56
|
+
var(--ds-scroll-fade-top, rgb(0 0 0)) 0,
|
|
57
|
+
rgb(0 0 0) var(--ds-table-header-height),
|
|
58
|
+
rgb(0 0 0) calc(100% - var(--ds-table-header-height)),
|
|
59
|
+
var(--ds-scroll-fade-bottom, rgb(0 0 0)) 100%
|
|
60
|
+
);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
46
63
|
`;
|
|
47
64
|
//# sourceMappingURL=table-scroll-body.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-scroll-body.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table-scroll-body.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"table-scroll-body.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table-scroll-body.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;AAElD,0EAA0E;AAC1E,yEAAyE;AACzE,8DAA8D;AAC9D,gFAAgF;AAChF,4EAA4E;AAC5E,0EAA0E;AAC1E,8EAA8E;AAC9E,4DAA4D;AAC5D,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAwCb,gBAAgB;;;;;;;;;;;CAW1C,CAAC"}
|
package/package.json
CHANGED