@blockscout/ui-toolkit
Version:
A comprehensive collection of reusable Chakra UI components and theme system for Blockscout's projects
59 lines (58 loc) • 1.86 kB
TypeScript
export declare const recipe: import('@chakra-ui/react').RecipeDefinition<{
loading: {
reset: {};
};
state: {
loading: {
borderRadius: "base";
boxShadow: "none";
backgroundClip: "padding-box";
cursor: "default";
color: "transparent";
borderWidth: "0px";
pointerEvents: "none";
userSelect: "none";
'& > *': {
visibility: "hidden";
};
};
};
variant: {
pulse: {
background: "bg.emphasized";
animation: "pulse";
animationDuration: "var(--duration, 1.2s)";
};
shine: {
opacity: number;
'--animate-from': "100%";
'--animate-to': "-100%";
'--start-color': "colors.skeleton.bg.start";
'--end-color': "colors.skeleton.bg.end";
position: "relative";
overflow: "hidden";
backgroundColor: "var(--start-color)";
animation: "none";
'&::after': {
content: "\"\"";
position: "absolute";
inset: "0";
left: "0";
width: "100%";
pointerEvents: "none";
willChange: "transform";
transform: "translateX(-100%)";
backgroundImage: "linear-gradient(90deg, transparent 0%, transparent 32%, var(--end-color) 46%, var(--end-color) 54%, transparent 68%, transparent 100%)";
animation: "skeletonShimmer var(--duration, 2s) linear infinite";
};
_motionReduce: {
'&::after': {
animation: "none";
};
};
};
none: {
animation: "none";
};
};
}>;