braid-design-system
Version:
Themeable design system for the SEEK Group
61 lines (60 loc) • 2.46 kB
JavaScript
"use strict";
const fileScope = require("@vanilla-extract/css/fileScope");
const css = require("@vanilla-extract/css");
const cssUtils = require("@vanilla-extract/css-utils");
const lib_components_private_animationTimeout_cjs = require("../animationTimeout.cjs");
const lib_themes_vars_css_cjs = require("../../../themes/vars.css.cjs");
fileScope.setFileScope("src/lib/components/private/Popover/Popover.css.ts", "braid-design-system");
const backdrop = css.style({
width: "100vw",
height: "100vh"
}, "backdrop");
const triggerVars = {
top: css.createVar("triggerVars_top"),
left: css.createVar("triggerVars_left"),
bottom: css.createVar("triggerVars_bottom"),
right: css.createVar("triggerVars_right")
};
const horizontalOffset = css.createVar("horizontalOffset");
const dynamicHeight = css.createVar("dynamicHeight");
const popoverPosition = css.style({
vars: {
[dynamicHeight]: "100svh"
},
top: cssUtils.calc(triggerVars.bottom).multiply("1px").toString(),
bottom: cssUtils.calc(css.fallbackVar(dynamicHeight, "100vh")).subtract(cssUtils.calc(triggerVars.top).multiply("1px")).toString(),
left: cssUtils.calc(triggerVars.left).add(horizontalOffset).multiply("1px").toString(),
right: cssUtils.calc(triggerVars.right).add(horizontalOffset).multiply("1px").toString()
}, "popoverPosition");
const placementModifier = css.createVar("placementModifier");
const invertPlacement = css.style({
vars: {
[placementModifier]: "-1"
}
}, "invertPlacement");
const transitionThreshold = "xxsmall";
const popupAnimation = css.keyframes({
from: {
opacity: 0,
transform: `translateY(${cssUtils.calc(lib_themes_vars_css_cjs.vars.space[transitionThreshold]).multiply(css.fallbackVar(placementModifier, "1"))})`
}
}, "popupAnimation");
const animation = css.style({
animationName: popupAnimation,
animationFillMode: "both",
animationTimingFunction: "ease",
animationDuration: "0.125s",
animationDelay: `${lib_components_private_animationTimeout_cjs.animationTimeout}ms`
}, "animation");
const delayVisibility = css.style({
animationDelay: "250ms"
}, "delayVisibility");
fileScope.endFileScope();
exports.animation = animation;
exports.backdrop = backdrop;
exports.delayVisibility = delayVisibility;
exports.horizontalOffset = horizontalOffset;
exports.invertPlacement = invertPlacement;
exports.popoverPosition = popoverPosition;
exports.transitionThreshold = transitionThreshold;
exports.triggerVars = triggerVars;