@hitachivantara/uikit-react-core
Version:
UI Kit Core React components.
51 lines (50 loc) • 1.33 kB
JavaScript
import { theme } from "@hitachivantara/uikit-styles";
import { createClasses } from "@hitachivantara/uikit-react-utils";
//#region src/Skeleton/Skeleton.styles.tsx
var { staticClasses, useClasses } = createClasses("HvSkeleton", {
root: {
backgroundColor: theme.colors.bgPageSecondary,
width: "fit-content",
"& > *": { visibility: "hidden" }
},
content: {
opacity: 0,
animation: "fadeIn 0.5s ease forwards",
"@keyframes fadeIn": { to: { opacity: 1 } }
},
circle: { borderRadius: theme.radii.full },
square: { borderRadius: theme.radii.base },
text: {
borderRadius: theme.radii.full,
width: "100%",
height: "1.5em"
},
pulse: {
animation: "pulse 2s infinite",
"@keyframes pulse": { "50%": { opacity: "0.5" } }
},
wave: {
overflow: "hidden",
position: "relative",
"&::after": {
animation: "wave 2s linear 0.5s infinite",
background: `linear-gradient(
90deg,
transparent,
${theme.colors.border},
transparent
)`,
content: "''",
position: "absolute",
transform: "translateX(-100%)",
inset: 0,
"@keyframes wave": {
"0%": { transform: "translateX(-100%)" },
"50%": { transform: "translateX(100%)" },
"100%": { transform: "translateX(100%)" }
}
}
}
});
//#endregion
export { staticClasses, useClasses };