@wulperstudio/cms/organisms/CardImage/styled.js

Wulper Studio Library Components CMS

import { styled } from '@mui/material';
export var WrapperComponent = styled('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'urlImage' && prop !== 'variant';
  }
})(function (_ref) {
  var urlImage = _ref.urlImage,
    variant = _ref.variant;
  return {
    boxSizing: 'border-box',
    width: '100%',
    maxWidth: 310,
    height: '100%',
    maxHeight: '100%',
    borderRadius: 10,
    backgroundImage: variant === 'fixed' ? "url(".concat(urlImage, ")") : undefined,
    backgroundPosition: variant === 'fixed' ? 'center center' : undefined,
    backgroundRepeat: variant === 'fixed' ? 'no-repeat' : undefined,
    backgroundSize: variant === 'fixed' ? 'cover' : undefined,
    padding: '15px 10px',
    display: 'flex',
    flexDirection: variant === 'fixed' ? 'row' : 'column',
    justifyContent: 'center',
    alignItems: variant === 'fixed' ? 'flex-end' : 'center',
    rowGap: 10
  };
});
export var WrapperCard = styled('div')({
  width: '100%'
});
export var WrapperImage = styled('div')(function (_ref2) {
  var theme = _ref2.theme;
  return {
    position: 'relative',
    borderRadius: 10,
    width: 280,
    height: 340,
    '&::before': {
      content: "''",
      position: 'absolute',
      width: '100%',
      height: '100%',
      border: "5px solid ".concat(theme.palette.primary.main),
      transform: 'rotate(4deg)',
      zIndex: -1,
      borderRadius: 'inherit'
    }
  };
});
export var Image = styled('img')({
  objectFit: 'cover',
  objectPosition: 'center',
  borderRadius: 10
});