@wulperstudio/cms/modern/layouts/LayoutDashboard/styled.js

Wulper Studio Library Components CMS

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { styled } from '@mui/material';
var ITEM_VARIANT_MODE = {
  "float": {
    backgroundColor: 'transparent'
  },
  divider: {},
  "default": {}
};
export var Root = styled('div', {
  shouldForwardProp: function shouldForwardProp(prop) {
    return prop !== 'variantMode';
  }
})(function (_ref) {
  var theme = _ref.theme,
    variantMode = _ref.variantMode;
  return _defineProperty({
    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    "
  });
});
export var MenuArea = 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(_defineProperty({
    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);
});
export var HeaderArea = 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);
});
export var BodyArea = 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(_defineProperty({
    height: '100%',
    overflow: 'auto',
    backgroundColor: theme.palette.background["default"]
  }, theme.breakpoints.down(900), {
    overflow: 'unset'
  }), layout);
});
export var Main = styled('main')(function (_ref6) {
  var theme = _ref6.theme;
  return _defineProperty({
    display: 'grid',
    gridTemplateColumns: '1fr',
    gridTemplateRows: '80px 1fr',
    height: '100%',
    overflow: 'auto'
  }, theme.breakpoints.down('lg'), {
    gridTemplateColumns: '1fr',
    gridTemplateRows: 'auto 1fr',
    overflow: 'unset'
  });
});