@aplus-frontend/ui
Version:
75 lines (72 loc) • 1.41 kB
JavaScript
import { keyframes as n } from "@emotion/css";
import { genComponentStyleHook as e } from "../../utils/cssinjs/index.mjs";
function r() {
const t = n`
0% {
opacity: 0;
}
100% {
opacity: 1;
}
`, o = n`
0% {
opacity: 1;
}
100% {
opacity: 0;
}
`;
return [t, o];
}
const s = (t) => {
const [o, i] = r(), { componentCls: a } = t;
return {
[a]: {
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
[`${a}__mask`]: {
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
color: "#000",
transform: "translateZ(0)"
},
[`${a}__mask--disabled`]: {
color: "transparent"
},
[`${a}__mask-inner`]: {
width: "100%",
height: "100%",
backgroundColor: "currentcolor",
opacity: t.maskOpacity
},
[`${a}-fade`]: {
"&-enter-active": {
animationName: o,
animationDuration: t.maskAnimationDuration
},
"&-leave-active": {
animationName: i,
animationDuration: t.maskAnimationDuration
}
}
}
};
}, p = e(
"Mask",
(t) => [s(t)],
{ maskAnimationDuration: "0.25s", maskOpacity: 0.45 },
{
skipUnit: ["maskOpacity"]
}
);
export {
p as default,
r as genFadeKeyFrames,
s as genMaskStyle
};