braid-design-system
Version:
Themeable design system for the SEEK Group
90 lines (89 loc) • 2.28 kB
JavaScript
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { style, styleVariants, fallbackVar, createVar } from "@vanilla-extract/css";
setFileScope("src/lib/components/private/ScrollContainer/ScrollContainer.css.ts", "braid-design-system");
const container = style({
WebkitOverflowScrolling: "touch",
WebkitMaskComposite: "destination-in",
// Fallback for browsers that don't support mask-composite
maskComposite: "intersect"
}, "container");
const hideScrollbar = style({
scrollbarWidth: "none",
msOverflowStyle: "none",
"::-webkit-scrollbar": {
width: 0,
height: 0
}
}, "hideScrollbar");
const scrollOverlaySize = createVar("scrollOverlaySize");
const fadeSize = styleVariants({
small: {
vars: {
[scrollOverlaySize]: "40px"
}
},
medium: {
vars: {
[scrollOverlaySize]: "60px"
}
},
large: {
vars: {
[scrollOverlaySize]: "80px"
}
}
}, "fadeSize");
const direction = 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 = createVar("left");
const right = createVar("right");
const top = createVar("top");
const bottom = createVar("bottom");
const mask = style({
maskImage: [`linear-gradient(to bottom, transparent 0, black ${fallbackVar(top, "0")})`, `linear-gradient(to right, transparent 0, black ${fallbackVar(left, "0")})`, `linear-gradient(to left, transparent 0, black ${fallbackVar(right, "0")})`, `linear-gradient(to top, transparent 0, black ${fallbackVar(bottom, "0")})`].join(",")
}, "mask");
const maskLeft = style({
vars: {
[left]: scrollOverlaySize
}
}, "maskLeft");
const maskRight = style({
vars: {
[right]: scrollOverlaySize
}
}, "maskRight");
const maskTop = style({
vars: {
[top]: scrollOverlaySize
}
}, "maskTop");
const maskBottom = style({
vars: {
[bottom]: scrollOverlaySize
}
}, "maskBottom");
endFileScope();
export {
container,
direction,
fadeSize,
hideScrollbar,
mask,
maskBottom,
maskLeft,
maskRight,
maskTop
};