braid-design-system
Version:
Themeable design system for the SEEK Group
84 lines (83 loc) • 1.96 kB
JavaScript
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
import { styleVariants, style, keyframes } from "@vanilla-extract/css";
import { responsiveStyle } from "../../css/responsiveStyle.mjs";
import { vars } from "../../themes/vars.css.mjs";
setFileScope("src/lib/components/Loader/Loader.css.ts", "braid-design-system");
const rootSize = styleVariants(vars.textSize, ({
mobile,
tablet
}) => responsiveStyle({
mobile: {
height: mobile.capHeight
},
tablet: {
height: tablet.capHeight
}
}), "rootSize");
const size = styleVariants(vars.textSize, ({
mobile,
tablet
}) => responsiveStyle({
mobile: {
height: mobile.fontSize
},
tablet: {
height: tablet.fontSize
}
}), "size");
const currentColor = style({
fill: "currentcolor"
}, "currentColor");
const bounce = keyframes({
"33%": {
transform: `translateY(-1.4em)`
},
"66%": {
transform: `translateY(1.4em)`
}
}, "bounce");
const bounceAnimation = style({
animationName: bounce,
animationFillMode: "both",
animationIterationCount: "infinite",
animationTimingFunction: "ease-in-out",
animationDuration: "0.6s"
}, "bounceAnimation");
const animationDelayInMs = 70;
const circle = style([bounceAnimation, style({
transform: `translateY(1.4em)`,
selectors: {
[`&:nth-child(1)`]: {
animationDelay: `${animationDelayInMs * 2}ms`
},
[`&:nth-child(2)`]: {
animationDelay: `${animationDelayInMs}ms`
}
}
}, "circle")], "circle");
const animationDelayValueInMs = 800;
const fade = keyframes({
from: {
opacity: 0
},
to: {
opacity: 1
}
}, "fade");
const delay = style({
opacity: 0,
animationName: fade,
animationIterationCount: "1",
animationFillMode: "forwards",
animationTimingFunction: "ease-in",
animationDuration: "0.25s",
animationDelay: `${animationDelayValueInMs}ms`
}, "delay");
endFileScope();
export {
circle,
currentColor,
delay,
rootSize,
size
};