@mantine/core/esm/components/Card/Card.styles.js

React components library focused on usability, accessibility and developer experience

import { createMemoStyles } from '../../theme/create-memo-styles.js';
import { getSizeValue } from '../../theme/utils/get-size-value/get-size-value.js';

var useStyles = createMemoStyles({
  card: ({ theme, radius, padding }) => {
    const spacing = getSizeValue({ size: padding, sizes: theme.spacing });
    const borderRadius = getSizeValue({ size: radius, sizes: theme.radius });
    return {
      position: "relative",
      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.white,
      "& [data-mantine-image]": {
        width: `calc(100% + ${spacing * 2}px) !important`,
        marginLeft: -spacing,
        marginRight: -spacing,
        "&:first-child": {
          borderTopRightRadius: borderRadius,
          borderTopLeftRadius: borderRadius,
          marginBottom: spacing,
          marginTop: -spacing
        },
        "&:last-child": {
          borderBottomRightRadius: borderRadius,
          borderBottomLeftRadius: borderRadius,
          marginTop: spacing,
          marginBottom: -spacing
        },
        "&:first-child:last-child": {
          marginTop: -spacing,
          marginBottom: -spacing
        }
      },
      "& [data-mantine-divider]": {
        borderTopColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[2],
        marginLeft: -spacing,
        marginRight: -spacing,
        marginBottom: spacing / 2,
        marginTop: spacing / 2
      }
    };
  }
});

export default useStyles;
//# sourceMappingURL=Card.styles.js.map