@unicity/design-system/dist/components/Skeleton/Skeleton.style.js

A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support

import { styled } from '@mui/material/styles';
import { Skeleton } from '@mui/material';
export const StyledSkeleton = styled(Skeleton)(({ theme }) => ({
    backgroundColor: theme.palette.action.hover,
    borderRadius: theme.shape.borderRadius,
    '&.MuiSkeleton-pulse': {
        animation: 'skeleton-pulse 1.5s ease-in-out 0.5s infinite',
    },
    '&.MuiSkeleton-wave': {
        overflow: 'hidden',
        position: 'relative',
        '&::after': {
            animation: 'skeleton-wave 1.6s linear 0.5s infinite',
            background: `linear-gradient(90deg, transparent, ${theme.palette.action.selected}, transparent)`,
            content: '""',
            position: 'absolute',
            transform: 'translateX(-100%)',
            bottom: 0,
            left: 0,
            right: 0,
            top: 0,
        },
    },
    '@keyframes skeleton-pulse': {
        '0%': {
            opacity: 1,
        },
        '50%': {
            opacity: 0.4,
        },
        '100%': {
            opacity: 1,
        },
    },
    '@keyframes skeleton-wave': {
        '0%': {
            transform: 'translateX(-100%)',
        },
        '50%': {
            transform: 'translateX(100%)',
        },
        '100%': {
            transform: 'translateX(100%)',
        },
    },
}));
//# sourceMappingURL=Skeleton.style.js.map