@unicity/design-system/dist/components/Card/Card.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 { Card } from '@mui/material';
export const StyledCard = styled(Card, {
    shouldForwardProp: (prop) => prop !== 'hoverable',
})(({ theme, hoverable }) => ({
    borderRadius: `calc(${theme.shape.borderRadius}px * 2)`,
    transition: theme.transitions.create([
        'box-shadow',
        'transform',
    ], {
        duration: theme.transitions.duration.short,
    }),
    ...(hoverable && {
        cursor: 'pointer',
        '&:hover': {
            transform: 'translateY(-2px)',
            boxShadow: theme.shadows[8],
        },
    }),
    '& .MuiCardHeader-root': {
        paddingBottom: theme.spacing(1),
        '& .MuiCardHeader-title': {
            fontSize: theme.typography.h6.fontSize,
            fontWeight: theme.typography.fontWeightMedium,
            color: theme.palette.text.primary,
        },
        '& .MuiCardHeader-subheader': {
            fontSize: theme.typography.body2.fontSize,
            color: theme.palette.text.secondary,
        },
    },
    '& .MuiCardContent-root': {
        paddingTop: theme.spacing(1),
        paddingBottom: theme.spacing(2),
        '&:last-child': {
            paddingBottom: theme.spacing(2),
        },
    },
    '& .MuiCardActions-root': {
        padding: theme.spacing(1, 2, 2, 2),
        justifyContent: 'flex-end',
        '& .MuiButton-root': {
            marginLeft: theme.spacing(1),
        },
    },
}));
//# sourceMappingURL=Card.style.js.map