@unicity/design-system/dist/components/IconButton/IconButton.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 { IconButton } from '@mui/material';
export const StyledIconButton = styled(IconButton, {
    shouldForwardProp: (prop) => prop !== 'variant' && prop !== 'pulse',
})(({ theme, variant, pulse }) => ({
    borderRadius: theme.shape.borderRadius,
    transition: theme.transitions.create([
        'background-color',
        'box-shadow',
        'border-color',
        'transform',
    ], {
        duration: theme.transitions.duration.short,
    }),
    ...(variant === 'contained' && {
        backgroundColor: theme.palette.primary.main,
        color: theme.palette.primary.contrastText,
        '&:hover': {
            backgroundColor: theme.palette.primary.dark,
        },
    }),
    ...(variant === 'outlined' && {
        border: `1px solid ${theme.palette.divider}`,
        '&:hover': {
            backgroundColor: theme.palette.action.hover,
            borderColor: theme.palette.primary.main,
        },
    }),
    ...(variant === 'text' && {
        '&:hover': {
            backgroundColor: theme.palette.action.hover,
        },
    }),
    ...(pulse && {
        animation: 'icon-button-pulse 2s infinite',
        '@keyframes icon-button-pulse': {
            '0%': {
                transform: 'scale(1)',
            },
            '70%': {
                transform: 'scale(1.05)',
            },
            '100%': {
                transform: 'scale(1)',
            },
        },
    }),
}));
//# sourceMappingURL=IconButton.style.js.map