@wulperstudio/cms/node/layouts/LayoutDashboard/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.MenuArea = exports.Main = exports.HeaderArea = exports.BodyArea = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _material = require("@mui/material");
var ITEM_VARIANT_MODE = {
  "float": {
    backgroundColor: 'transparent'
  },
  divider: {},
  "default": {}
};
var Root = exports.Root = (0, _material.styled)('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'variantMode';
  }
})(function (_ref) {
  var theme = _ref.theme,
    variantMode = _ref.variantMode;
  return (0, _defineProperty2["default"])({
    backgroundColor: theme.palette.background.paper,
    // padding: variantMode === 'float' ? '10px' : '0px',
    columnGap: variantMode === 'float' ? '20px' : '0px',
    width: '100%',
    height: '100%',
    overflow: 'auto',
    display: 'grid',
    gridTemplateColumns: 'auto 1fr',
    gridTemplateRows: '1fr'
  }, theme.breakpoints.down('lg'), {
    gridTemplateColumns: '1fr',
    gridTemplateRows: 'auto 1fr',
    overflow: 'unset',
    gridTemplateAreas: "\n      \"menu\"\n      \"content\"\n    "
  });
});
var MenuArea = exports.MenuArea = (0, _material.styled)('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'variantMode';
  }
})(function (_ref3) {
  var theme = _ref3.theme,
    variantMode = _ref3.variantMode;
  var layout = ITEM_VARIANT_MODE[variantMode] || {};
  return Object.assign((0, _defineProperty2["default"])({
    backgroundColor: theme.palette.background["default"],
    borderRight: variantMode === 'divider' ? "1px solid ".concat(theme.palette.background.paper) : 'none'
  }, theme.breakpoints.down(900), {
    position: 'sticky',
    top: '0',
    zIndex: theme.zIndex.appBar
  }), layout);
});
var HeaderArea = exports.HeaderArea = (0, _material.styled)('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'variantMode';
  }
})(function (_ref4) {
  var theme = _ref4.theme,
    variantMode = _ref4.variantMode;
  var layout = ITEM_VARIANT_MODE[variantMode] || {};
  return Object.assign({
    backgroundColor: theme.palette.background["default"],
    borderBottom: variantMode === 'divider' ? "1px solid ".concat(theme.palette.background.paper) : 'none'
  }, layout);
});
var BodyArea = exports.BodyArea = (0, _material.styled)('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'variantMode';
  }
})(function (_ref5) {
  var theme = _ref5.theme,
    variantMode = _ref5.variantMode;
  var layout = ITEM_VARIANT_MODE[variantMode] || {};
  return Object.assign((0, _defineProperty2["default"])({
    height: '100%',
    overflow: 'auto',
    backgroundColor: theme.palette.background["default"]
  }, theme.breakpoints.down(900), {
    overflow: 'unset'
  }), layout);
});
var Main = exports.Main = (0, _material.styled)('main')(function (_ref6) {
  var theme = _ref6.theme;
  return (0, _defineProperty2["default"])({
    display: 'grid',
    gridTemplateColumns: '1fr',
    gridTemplateRows: '80px 1fr',
    height: '100%',
    overflow: 'auto'
  }, theme.breakpoints.down('lg'), {
    gridTemplateColumns: '1fr',
    gridTemplateRows: 'auto 1fr',
    overflow: 'unset'
  });
});