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

Wulper Studio Library Components CMS

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Root = exports.Box = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _material = require("@mui/material");
/* eslint-disable no-nested-ternary */

var Root = exports.Root = (0, _material.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 (0, _defineProperty2["default"])({
    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'
  });
});
var Box = exports.Box = (0, _material.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 (0, _defineProperty2["default"])({
    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'
  });
});