@wulperstudio/cms/layouts/LayoutFlex/styled.js

Wulper Studio Library Components CMS

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
/* eslint-disable no-nested-ternary */
import { styled } from '@mui/material';
export var Root = styled('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'position' && prop !== 'urlImg' && prop !== 'backgroundColor' && prop !== 'gridTemplateRows';
  }
})(function (_ref) {
  var theme = _ref.theme,
    position = _ref.position,
    urlImg = _ref.urlImg,
    backgroundColor = _ref.backgroundColor,
    gridTemplateRows = _ref.gridTemplateRows,
    layout = _ref.layout;
  return _defineProperty({
    height: '100%',
    width: '100%',
    backgroundImage: "url(".concat(urlImg, ")") || 'url(https://source.unsplash.com/random)',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundColor: backgroundColor,
    display: 'grid',
    gridTemplateRows: gridTemplateRows || 'auto 1fr',
    justifyContent: position,
    overflow: 'auto',
    alignItems: layout === 'modal' ? 'center' : 'undefined'
  }, theme.breakpoints.down('lg'), {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gridTemplateRows: 'auto 1fr',
    backgroundImage: 'none',
    overflow: 'unset'
  });
});
export var Box = styled('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'position' && prop !== 'width' && prop !== 'alignItemsY' && prop !== 'borderRadius' && prop !== 'boxShadow' && prop !== 'backgroundColor';
  }
})(function (_ref3) {
  var theme = _ref3.theme,
    position = _ref3.position,
    width = _ref3.width,
    alignItemsY = _ref3.alignItemsY,
    backgroundColor = _ref3.backgroundColor,
    boxShadow = _ref3.boxShadow,
    borderRadius = _ref3.borderRadius,
    padding = _ref3.padding,
    margin = _ref3.margin,
    layout = _ref3.layout;
  return _defineProperty({
    height: position === 'start' || position === 'end' ? '100%' : layout === 'modal' ? '90vh' : '100%',
    width: width != null ? width : '40vw',
    backgroundColor: backgroundColor != null ? backgroundColor : '#fff',
    boxShadow: boxShadow,
    borderRadius: position === 'start' || position === 'end' ? '0px' : borderRadius || '10px',
    display: 'flex',
    justifyContent: 'center',
    alignItems: alignItemsY != null ? alignItemsY : 'center',
    overflow: 'auto',
    padddin: padding || '0px',
    margin: margin || '0px',
    position: 'relative'
  }, theme.breakpoints.down('lg'), {
    width: '100%',
    height: '100%',
    overflow: 'unset'
  });
});