@ant-design/pro-layout/lib/components/PageContainer/style/index.js

@ant-design/pro-layout

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useStyle = useStyle;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _proProvider = require("@ant-design/pro-provider");
var _map = [576, 768, 992, 1200].map(function (bp) {
    return "@media (max-width: ".concat(bp, "px)");
  }),
  _map2 = (0, _slicedToArray2.default)(_map, 4),
  sm = _map2[0],
  md = _map2[1],
  lg = _map2[2],
  xl = _map2[3];
var genPageContainerStyle = function genPageContainerStyle(token) {
  var _token$layout, _token$layout2, _token$layout3, _token$layout4, _token$layout$pageCon, _token$layout5, _token$layout$pageCon2, _token$layout6, _token$layout7, _token$layout8, _token$layout$pageCon3, _token$layout9, _token$layout$pageCon4, _token$layout10, _token$layout$pageCon5, _token$layout11, _token$layout$pageCon6, _token$layout12;
  return (0, _defineProperty2.default)({}, token.componentCls, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
    position: 'relative',
    '&-children-container': {
      paddingBlockStart: 0,
      paddingBlockEnd: (_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.pageContainer) === null || _token$layout === void 0 ? void 0 : _token$layout.paddingBlockPageContainerContent,
      paddingInline: (_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.pageContainer) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.paddingInlinePageContainerContent
    },
    '&-children-container-no-header': {
      paddingBlockStart: (_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.pageContainer) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.paddingBlockPageContainerContent
    },
    '&-affix': (0, _defineProperty2.default)({}, "".concat(token.antCls, "-affix"), (0, _defineProperty2.default)({}, "".concat(token.componentCls, "-warp"), {
      backgroundColor: (_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.pageContainer) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.colorBgPageContainerFixed,
      transition: 'background-color 0.3s',
      boxShadow: '0 2px 8px #f0f1f2'
    }))
  }, '& &-warp-page-header', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
    paddingBlockStart: ((_token$layout$pageCon = (_token$layout5 = token.layout) === null || _token$layout5 === void 0 || (_token$layout5 = _token$layout5.pageContainer) === null || _token$layout5 === void 0 ? void 0 : _token$layout5.paddingBlockPageContainerContent) !== null && _token$layout$pageCon !== void 0 ? _token$layout$pageCon : 40) / 4,
    paddingBlockEnd: ((_token$layout$pageCon2 = (_token$layout6 = token.layout) === null || _token$layout6 === void 0 || (_token$layout6 = _token$layout6.pageContainer) === null || _token$layout6 === void 0 ? void 0 : _token$layout6.paddingBlockPageContainerContent) !== null && _token$layout$pageCon2 !== void 0 ? _token$layout$pageCon2 : 40) / 2,
    paddingInlineStart: (_token$layout7 = token.layout) === null || _token$layout7 === void 0 || (_token$layout7 = _token$layout7.pageContainer) === null || _token$layout7 === void 0 ? void 0 : _token$layout7.paddingInlinePageContainerContent,
    paddingInlineEnd: (_token$layout8 = token.layout) === null || _token$layout8 === void 0 || (_token$layout8 = _token$layout8.pageContainer) === null || _token$layout8 === void 0 ? void 0 : _token$layout8.paddingInlinePageContainerContent
  }, "& ~ ".concat(token.proComponentsCls, "-grid-content"), (0, _defineProperty2.default)({}, "".concat(token.proComponentsCls, "-page-container-children-content"), {
    paddingBlock: ((_token$layout$pageCon3 = (_token$layout9 = token.layout) === null || _token$layout9 === void 0 || (_token$layout9 = _token$layout9.pageContainer) === null || _token$layout9 === void 0 ? void 0 : _token$layout9.paddingBlockPageContainerContent) !== null && _token$layout$pageCon3 !== void 0 ? _token$layout$pageCon3 : 24) / 3
  })), "".concat(token.antCls, "-page-header-breadcrumb"), {
    paddingBlockStart: ((_token$layout$pageCon4 = (_token$layout10 = token.layout) === null || _token$layout10 === void 0 || (_token$layout10 = _token$layout10.pageContainer) === null || _token$layout10 === void 0 ? void 0 : _token$layout10.paddingBlockPageContainerContent) !== null && _token$layout$pageCon4 !== void 0 ? _token$layout$pageCon4 : 40) / 4 + 10
  }), "".concat(token.antCls, "-page-header-heading"), {
    paddingBlockStart: ((_token$layout$pageCon5 = (_token$layout11 = token.layout) === null || _token$layout11 === void 0 || (_token$layout11 = _token$layout11.pageContainer) === null || _token$layout11 === void 0 ? void 0 : _token$layout11.paddingBlockPageContainerContent) !== null && _token$layout$pageCon5 !== void 0 ? _token$layout$pageCon5 : 40) / 4
  }), "".concat(token.antCls, "-page-header-footer"), {
    marginBlockStart: ((_token$layout$pageCon6 = (_token$layout12 = token.layout) === null || _token$layout12 === void 0 || (_token$layout12 = _token$layout12.pageContainer) === null || _token$layout12 === void 0 ? void 0 : _token$layout12.paddingBlockPageContainerContent) !== null && _token$layout$pageCon6 !== void 0 ? _token$layout$pageCon6 : 40) / 4
  })), '&-detail', (0, _defineProperty2.default)({
    display: 'flex'
  }, sm, {
    display: 'block'
  })), '&-main', {
    width: '100%'
  }), '&-row', (0, _defineProperty2.default)({
    display: 'flex',
    width: '100%'
  }, md, {
    display: 'block'
  })), '&-content', {
    flex: 'auto',
    width: '100%'
  }), '&-extraContent', (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
    flex: '0 1 auto',
    minWidth: '242px',
    marginInlineStart: 88,
    textAlign: 'end'
  }, xl, {
    marginInlineStart: 44
  }), lg, {
    marginInlineStart: 20
  }), md, {
    marginInlineStart: 0,
    textAlign: 'start'
  }), sm, {
    marginInlineStart: 0
  })));
};
function useStyle(prefixCls, componentsToken) {
  return (0, _proProvider.useStyle)('ProLayoutPageContainer', function (token) {
    var _token$layout13;
    var proCardToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
      componentCls: ".".concat(prefixCls),
      layout: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token === null || token === void 0 ? void 0 : token.layout), {}, {
        pageContainer: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token === null || token === void 0 || (_token$layout13 = token.layout) === null || _token$layout13 === void 0 ? void 0 : _token$layout13.pageContainer), componentsToken)
      })
    });
    return [genPageContainerStyle(proCardToken)];
  });
}