@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
74 lines (73 loc) • 1.83 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const uikitStyles = require("@hitachivantara/uikit-styles");
const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSkeleton", {
root: {
backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
width: "fit-content",
"& > *": {
visibility: "hidden"
}
},
content: {
opacity: 0,
animation: "fadeIn 0.5s ease forwards",
"@keyframes fadeIn": {
to: {
opacity: 1
}
}
},
circle: {
borderRadius: uikitStyles.theme.radii.full
},
square: {
borderRadius: uikitStyles.theme.radii.base
},
text: {
borderRadius: uikitStyles.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,
${uikitStyles.theme.colors.border},
transparent
)`,
content: "''",
position: "absolute",
transform: "translateX(-100%)",
inset: 0,
// Animation taken from Material UI:
// https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Skeleton/Skeleton.js
"@keyframes wave": {
"0%": {
transform: "translateX(-100%)"
},
"50%": {
transform: "translateX(100%)"
},
"100%": {
transform: "translateX(100%)"
}
}
}
}
});
exports.staticClasses = staticClasses;
exports.useClasses = useClasses;