braid-design-system
Version:
Themeable design system for the SEEK Group
89 lines (88 loc) • 2.48 kB
JavaScript
;
const fileScope = require("@vanilla-extract/css/fileScope");
const css = require("@vanilla-extract/css");
fileScope.setFileScope("src/lib/components/private/ScrollContainer/ScrollContainer.css.ts", "braid-design-system");
const container = css.style({
WebkitOverflowScrolling: "touch",
WebkitMaskComposite: "destination-in",
// Fallback for browsers that don't support mask-composite
maskComposite: "intersect"
}, "container");
const hideScrollbar = css.style({
scrollbarWidth: "none",
msOverflowStyle: "none",
"::-webkit-scrollbar": {
width: 0,
height: 0
}
}, "hideScrollbar");
const scrollOverlaySize = css.createVar("scrollOverlaySize");
const fadeSize = css.styleVariants({
small: {
vars: {
[scrollOverlaySize]: "40px"
}
},
medium: {
vars: {
[scrollOverlaySize]: "60px"
}
},
large: {
vars: {
[scrollOverlaySize]: "80px"
}
}
}, "fadeSize");
const direction = css.styleVariants({
horizontal: {
overflowX: "auto",
overflowY: "hidden",
// Ensures content doesn't clip when inside nested flex containers with stretched siblings
minHeight: "fit-content"
},
vertical: {
overflowX: "hidden",
overflowY: "auto"
},
all: {
overflow: "auto"
}
}, "direction");
const left = css.createVar("left");
const right = css.createVar("right");
const top = css.createVar("top");
const bottom = css.createVar("bottom");
const mask = css.style({
maskImage: [`linear-gradient(to bottom, transparent 0, black ${css.fallbackVar(top, "0")})`, `linear-gradient(to right, transparent 0, black ${css.fallbackVar(left, "0")})`, `linear-gradient(to left, transparent 0, black ${css.fallbackVar(right, "0")})`, `linear-gradient(to top, transparent 0, black ${css.fallbackVar(bottom, "0")})`].join(",")
}, "mask");
const maskLeft = css.style({
vars: {
[left]: scrollOverlaySize
}
}, "maskLeft");
const maskRight = css.style({
vars: {
[right]: scrollOverlaySize
}
}, "maskRight");
const maskTop = css.style({
vars: {
[top]: scrollOverlaySize
}
}, "maskTop");
const maskBottom = css.style({
vars: {
[bottom]: scrollOverlaySize
}
}, "maskBottom");
fileScope.endFileScope();
exports.container = container;
exports.direction = direction;
exports.fadeSize = fadeSize;
exports.hideScrollbar = hideScrollbar;
exports.mask = mask;
exports.maskBottom = maskBottom;
exports.maskLeft = maskLeft;
exports.maskRight = maskRight;
exports.maskTop = maskTop;