@ant-design/pro-layout/es/style/index.js

@ant-design/pro-layout

import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
import { version } from 'antd';
var getVersion = function getVersion() {
  var _process, _process$env;
  if (typeof process === 'undefined') return version;
  return ((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.ANTD_VERSION) || version;
};

/**
 * 主要区别：
 * 需要手动引入 import 'antd/dist/antd.css';
 * 需要重置 menu 的样式
 * @param token
 * @returns
 */
var compatibleStyle = function compatibleStyle(token) {
  var _getVersion, _token$layout, _token$layout$sider, _token$layout2, _token$layout2$sider, _token$layout3, _token$layout3$sider, _$concat, _token$layout4, _token$layout4$sider, _token$layout5, _token$layout5$sider, _token$layout6, _token$layout6$sider, _token$layout7, _token$layout7$sider, _token$layout8, _token$layout8$header, _token$layout9, _token$layout9$sider, _$concat$concat, _token$layout10, _token$layout10$sider, _token$layout11, _token$layout11$sider, _token$layout12, _token$layout12$sider, _token$layout13, _token$layout13$sider, _token$layout14, _token$layout14$sider, _token$layout15, _token$layout15$heade, _token$layout16, _token$layout16$heade, _token$layout17, _token$layout17$heade, _token$layout18, _token$layout18$heade, _token$layout19, _token$layout19$heade, _$concat5, _$concat6, _token$layout20, _token$layout20$heade, _token$layout21, _token$layout21$heade, _token$layout22, _token$layout22$heade, _token$layout23, _token$layout23$heade, _token$layout24, _token$layout24$heade, _token$layout25, _token$layout25$heade, _$concat8, _$concat9, _token$componentCls, _token$layout26, _token$layout26$sider, _token$layout27, _token$layout27$sider, _token$layout28, _token$layout28$sider, _token$layout29, _token$layout29$sider, _token$layout30, _token$layout30$sider, _$concat$concat2, _$concat11, _ref;
  if ((_getVersion = getVersion()) !== null && _getVersion !== void 0 && _getVersion.startsWith('5')) {
    return {};
  }
  return _ref = {}, _defineProperty(_ref, token.componentCls, (_token$componentCls = {
    width: '100%',
    height: '100%'
  }, _defineProperty(_token$componentCls, "".concat(token.proComponentsCls, "-base-menu"), (_$concat6 = {
    color: token === null || token === void 0 ? void 0 : (_token$layout = token.layout) === null || _token$layout === void 0 ? void 0 : (_token$layout$sider = _token$layout.sider) === null || _token$layout$sider === void 0 ? void 0 : _token$layout$sider.colorTextMenu
  }, _defineProperty(_$concat6, "".concat(token.antCls, "-menu-sub"), {
    backgroundColor: 'transparent!important',
    color: token === null || token === void 0 ? void 0 : (_token$layout2 = token.layout) === null || _token$layout2 === void 0 ? void 0 : (_token$layout2$sider = _token$layout2.sider) === null || _token$layout2$sider === void 0 ? void 0 : _token$layout2$sider.colorTextMenu
  }), _defineProperty(_$concat6, "& ".concat(token.antCls, "-layout"), {
    backgroundColor: 'transparent',
    width: '100%'
  }), _defineProperty(_$concat6, "".concat(token.antCls, "-menu-submenu-expand-icon, ").concat(token.antCls, "-menu-submenu-arrow"), {
    color: 'inherit'
  }), _defineProperty(_$concat6, "&".concat(token.antCls, "-menu"), (_$concat = {
    color: token === null || token === void 0 ? void 0 : (_token$layout3 = token.layout) === null || _token$layout3 === void 0 ? void 0 : (_token$layout3$sider = _token$layout3.sider) === null || _token$layout3$sider === void 0 ? void 0 : _token$layout3$sider.colorTextMenu
  }, _defineProperty(_$concat, "".concat(token.antCls, "-menu-item"), {
    '*': {
      transition: 'none !important'
    }
  }), _defineProperty(_$concat, "".concat(token.antCls, "-menu-item a"), {
    color: 'inherit'
  }), _$concat)), _defineProperty(_$concat6, "&".concat(token.antCls, "-menu-inline"), _defineProperty({}, "".concat(token.antCls, "-menu-selected::after,").concat(token.antCls, "-menu-item-selected::after"), {
    display: 'none'
  })), _defineProperty(_$concat6, "".concat(token.antCls, "-menu-sub ").concat(token.antCls, "-menu-inline"), {
    backgroundColor: 'transparent!important'
  }), _defineProperty(_$concat6, "".concat(token.antCls, "-menu-item:active, \n        ").concat(token.antCls, "-menu-submenu-title:active"), {
    backgroundColor: 'transparent!important'
  }), _defineProperty(_$concat6, "&".concat(token.antCls, "-menu-light"), _defineProperty({}, "".concat(token.antCls, "-menu-item:hover, \n            ").concat(token.antCls, "-menu-item-active,\n            ").concat(token.antCls, "-menu-submenu-active, \n            ").concat(token.antCls, "-menu-submenu-title:hover"), _defineProperty({
    color: token === null || token === void 0 ? void 0 : (_token$layout4 = token.layout) === null || _token$layout4 === void 0 ? void 0 : (_token$layout4$sider = _token$layout4.sider) === null || _token$layout4$sider === void 0 ? void 0 : _token$layout4$sider.colorTextMenuActive,
    borderRadius: token.borderRadius
  }, "".concat(token.antCls, "-menu-submenu-arrow"), {
    color: token === null || token === void 0 ? void 0 : (_token$layout5 = token.layout) === null || _token$layout5 === void 0 ? void 0 : (_token$layout5$sider = _token$layout5.sider) === null || _token$layout5$sider === void 0 ? void 0 : _token$layout5$sider.colorTextMenuActive
  }))), _defineProperty(_$concat6, "&".concat(token.antCls, "-menu:not(").concat(token.antCls, "-menu-horizontal)"), (_$concat$concat = {}, _defineProperty(_$concat$concat, "".concat(token.antCls, "-menu-item-selected"), {
    backgroundColor: token === null || token === void 0 ? void 0 : (_token$layout6 = token.layout) === null || _token$layout6 === void 0 ? void 0 : (_token$layout6$sider = _token$layout6.sider) === null || _token$layout6$sider === void 0 ? void 0 : _token$layout6$sider.colorBgMenuItemSelected,
    borderRadius: token.borderRadius
  }), _defineProperty(_$concat$concat, "".concat(token.antCls, "-menu-item:hover, \n            ").concat(token.antCls, "-menu-item-active,\n            ").concat(token.antCls, "-menu-submenu-title:hover"), _defineProperty({
    color: token === null || token === void 0 ? void 0 : (_token$layout7 = token.layout) === null || _token$layout7 === void 0 ? void 0 : (_token$layout7$sider = _token$layout7.sider) === null || _token$layout7$sider === void 0 ? void 0 : _token$layout7$sider.colorTextMenuActive,
    borderRadius: token.borderRadius,
    backgroundColor: "".concat(token === null || token === void 0 ? void 0 : (_token$layout8 = token.layout) === null || _token$layout8 === void 0 ? void 0 : (_token$layout8$header = _token$layout8.header) === null || _token$layout8$header === void 0 ? void 0 : _token$layout8$header.colorBgMenuItemHover, " !important")
  }, "".concat(token.antCls, "-menu-submenu-arrow"), {
    color: token === null || token === void 0 ? void 0 : (_token$layout9 = token.layout) === null || _token$layout9 === void 0 ? void 0 : (_token$layout9$sider = _token$layout9.sider) === null || _token$layout9$sider === void 0 ? void 0 : _token$layout9$sider.colorTextMenuActive
  })), _$concat$concat)), _defineProperty(_$concat6, "".concat(token.antCls, "-menu-item-selected"), {
    color: token === null || token === void 0 ? void 0 : (_token$layout10 = token.layout) === null || _token$layout10 === void 0 ? void 0 : (_token$layout10$sider = _token$layout10.sider) === null || _token$layout10$sider === void 0 ? void 0 : _token$layout10$sider.colorTextMenuSelected
  }), _defineProperty(_$concat6, "".concat(token.antCls, "-menu-submenu-selected"), {
    color: token === null || token === void 0 ? void 0 : (_token$layout11 = token.layout) === null || _token$layout11 === void 0 ? void 0 : (_token$layout11$sider = _token$layout11.sider) === null || _token$layout11$sider === void 0 ? void 0 : _token$layout11$sider.colorTextMenuSelected
  }), _defineProperty(_$concat6, "&".concat(token.antCls, "-menu:not(").concat(token.antCls, "-menu-inline) ").concat(token.antCls, "-menu-submenu-open"), {
    color: token === null || token === void 0 ? void 0 : (_token$layout12 = token.layout) === null || _token$layout12 === void 0 ? void 0 : (_token$layout12$sider = _token$layout12.sider) === null || _token$layout12$sider === void 0 ? void 0 : _token$layout12$sider.colorTextMenuSelected
  }), _defineProperty(_$concat6, "&".concat(token.antCls, "-menu-vertical"), _defineProperty({}, "".concat(token.antCls, "-menu-submenu-selected"), {
    borderRadius: token.borderRadius,
    color: token === null || token === void 0 ? void 0 : (_token$layout13 = token.layout) === null || _token$layout13 === void 0 ? void 0 : (_token$layout13$sider = _token$layout13.sider) === null || _token$layout13$sider === void 0 ? void 0 : _token$layout13$sider.colorTextMenuSelected
  })), _defineProperty(_$concat6, "".concat(token.antCls, "-menu-submenu:hover > ").concat(token.antCls, "-menu-submenu-title > ").concat(token.antCls, "-menu-submenu-arrow"), {
    color: token === null || token === void 0 ? void 0 : (_token$layout14 = token.layout) === null || _token$layout14 === void 0 ? void 0 : (_token$layout14$sider = _token$layout14.sider) === null || _token$layout14$sider === void 0 ? void 0 : _token$layout14$sider.colorTextMenuActive
  }), _defineProperty(_$concat6, "&".concat(token.antCls, "-menu-horizontal"), (_$concat5 = {}, _defineProperty(_$concat5, "".concat(token.antCls, "-menu-item:hover,\n          ").concat(token.antCls, "-menu-submenu:hover,\n          ").concat(token.antCls, "-menu-item-active,\n          ").concat(token.antCls, "-menu-submenu-active"), {
    borderRadius: 4,
    transition: 'none',
    color: token === null || token === void 0 ? void 0 : (_token$layout15 = token.layout) === null || _token$layout15 === void 0 ? void 0 : (_token$layout15$heade = _token$layout15.header) === null || _token$layout15$heade === void 0 ? void 0 : _token$layout15$heade.colorTextMenuActive,
    backgroundColor: "".concat(token === null || token === void 0 ? void 0 : (_token$layout16 = token.layout) === null || _token$layout16 === void 0 ? void 0 : (_token$layout16$heade = _token$layout16.header) === null || _token$layout16$heade === void 0 ? void 0 : _token$layout16$heade.colorBgMenuItemHover, " !important")
  }), _defineProperty(_$concat5, "".concat(token.antCls, "-menu-item-open,\n          ").concat(token.antCls, "-menu-submenu-open,\n          ").concat(token.antCls, "-menu-item-selected,\n          ").concat(token.antCls, "-menu-submenu-selected"), _defineProperty({
    backgroundColor: token === null || token === void 0 ? void 0 : (_token$layout17 = token.layout) === null || _token$layout17 === void 0 ? void 0 : (_token$layout17$heade = _token$layout17.header) === null || _token$layout17$heade === void 0 ? void 0 : _token$layout17$heade.colorBgMenuItemSelected,
    borderRadius: token.borderRadius,
    transition: 'none',
    color: "".concat(token === null || token === void 0 ? void 0 : (_token$layout18 = token.layout) === null || _token$layout18 === void 0 ? void 0 : (_token$layout18$heade = _token$layout18.header) === null || _token$layout18$heade === void 0 ? void 0 : _token$layout18$heade.colorTextMenuSelected, " !important")
  }, "".concat(token.antCls, "-menu-submenu-arrow"), {
    color: "".concat(token === null || token === void 0 ? void 0 : (_token$layout19 = token.layout) === null || _token$layout19 === void 0 ? void 0 : (_token$layout19$heade = _token$layout19.header) === null || _token$layout19$heade === void 0 ? void 0 : _token$layout19$heade.colorTextMenuSelected, " !important")
  })), _defineProperty(_$concat5, "> ".concat(token.antCls, "-menu-item, > ").concat(token.antCls, "-menu-submenu"), {
    paddingInline: 16,
    marginInline: 4
  }), _defineProperty(_$concat5, "> ".concat(token.antCls, "-menu-item::after, > ").concat(token.antCls, "-menu-submenu::after"), {
    display: 'none'
  }), _$concat5)), _$concat6)), _defineProperty(_token$componentCls, "".concat(token.proComponentsCls, "-top-nav-header-base-menu"), (_$concat9 = {}, _defineProperty(_$concat9, "&".concat(token.antCls, "-menu"), _defineProperty({
    color: token === null || token === void 0 ? void 0 : (_token$layout20 = token.layout) === null || _token$layout20 === void 0 ? void 0 : (_token$layout20$heade = _token$layout20.header) === null || _token$layout20$heade === void 0 ? void 0 : _token$layout20$heade.colorTextMenu
  }, "".concat(token.antCls, "-menu-item a"), {
    color: 'inherit'
  })), _defineProperty(_$concat9, "&".concat(token.antCls, "-menu-light"), (_$concat8 = {}, _defineProperty(_$concat8, "".concat(token.antCls, "-menu-item:hover, \n            ").concat(token.antCls, "-menu-item-active,\n            ").concat(token.antCls, "-menu-submenu-active, \n            ").concat(token.antCls, "-menu-submenu-title:hover"), _defineProperty({
    color: token === null || token === void 0 ? void 0 : (_token$layout21 = token.layout) === null || _token$layout21 === void 0 ? void 0 : (_token$layout21$heade = _token$layout21.header) === null || _token$layout21$heade === void 0 ? void 0 : _token$layout21$heade.colorTextMenuActive,
    borderRadius: token.borderRadius,
    transition: 'none',
    backgroundColor: token === null || token === void 0 ? void 0 : (_token$layout22 = token.layout) === null || _token$layout22 === void 0 ? void 0 : (_token$layout22$heade = _token$layout22.header) === null || _token$layout22$heade === void 0 ? void 0 : _token$layout22$heade.colorBgMenuItemSelected
  }, "".concat(token.antCls, "-menu-submenu-arrow"), {
    color: token === null || token === void 0 ? void 0 : (_token$layout23 = token.layout) === null || _token$layout23 === void 0 ? void 0 : (_token$layout23$heade = _token$layout23.header) === null || _token$layout23$heade === void 0 ? void 0 : _token$layout23$heade.colorTextMenuActive
  })), _defineProperty(_$concat8, "".concat(token.antCls, "-menu-item-selected"), {
    color: token === null || token === void 0 ? void 0 : (_token$layout24 = token.layout) === null || _token$layout24 === void 0 ? void 0 : (_token$layout24$heade = _token$layout24.header) === null || _token$layout24$heade === void 0 ? void 0 : _token$layout24$heade.colorTextMenuSelected,
    borderRadius: token.borderRadius,
    backgroundColor: token === null || token === void 0 ? void 0 : (_token$layout25 = token.layout) === null || _token$layout25 === void 0 ? void 0 : (_token$layout25$heade = _token$layout25.header) === null || _token$layout25$heade === void 0 ? void 0 : _token$layout25$heade.colorBgMenuItemSelected
  }), _$concat8)), _$concat9)), _token$componentCls)), _defineProperty(_ref, "".concat(token.antCls, "-menu-sub").concat(token.antCls, "-menu-inline"), {
    backgroundColor: 'transparent!important'
  }), _defineProperty(_ref, "".concat(token.antCls, "-menu-submenu-popup"), (_$concat11 = {
    backgroundColor: 'rgba(255, 255, 255, 0.42)',
    '-webkit-backdrop-filter': 'blur(8px)',
    backdropFilter: 'blur(8px)'
  }, _defineProperty(_$concat11, "".concat(token.antCls, "-menu"), _defineProperty({
    background: 'transparent !important',
    backgroundColor: 'transparent !important'
  }, "".concat(token.antCls, "-menu-item:active, \n        ").concat(token.antCls, "-menu-submenu-title:active"), {
    backgroundColor: 'transparent!important'
  })), _defineProperty(_$concat11, "".concat(token.antCls, "-menu-item-selected"), {
    color: token === null || token === void 0 ? void 0 : (_token$layout26 = token.layout) === null || _token$layout26 === void 0 ? void 0 : (_token$layout26$sider = _token$layout26.sider) === null || _token$layout26$sider === void 0 ? void 0 : _token$layout26$sider.colorTextMenuSelected
  }), _defineProperty(_$concat11, "".concat(token.antCls, "-menu-submenu-selected"), {
    color: token === null || token === void 0 ? void 0 : (_token$layout27 = token.layout) === null || _token$layout27 === void 0 ? void 0 : (_token$layout27$sider = _token$layout27.sider) === null || _token$layout27$sider === void 0 ? void 0 : _token$layout27$sider.colorTextMenuSelected
  }), _defineProperty(_$concat11, "".concat(token.antCls, "-menu:not(").concat(token.antCls, "-menu-horizontal)"), (_$concat$concat2 = {}, _defineProperty(_$concat$concat2, "".concat(token.antCls, "-menu-item-selected"), {
    backgroundColor: 'rgba(0, 0, 0, 0.04)',
    borderRadius: token.borderRadius,
    color: token === null || token === void 0 ? void 0 : (_token$layout28 = token.layout) === null || _token$layout28 === void 0 ? void 0 : (_token$layout28$sider = _token$layout28.sider) === null || _token$layout28$sider === void 0 ? void 0 : _token$layout28$sider.colorTextMenuSelected
  }), _defineProperty(_$concat$concat2, "".concat(token.antCls, "-menu-item:hover, \n          ").concat(token.antCls, "-menu-item-active,\n          ").concat(token.antCls, "-menu-submenu-title:hover"), _defineProperty({
    color: token === null || token === void 0 ? void 0 : (_token$layout29 = token.layout) === null || _token$layout29 === void 0 ? void 0 : (_token$layout29$sider = _token$layout29.sider) === null || _token$layout29$sider === void 0 ? void 0 : _token$layout29$sider.colorTextMenuActive,
    borderRadius: token.borderRadius
  }, "".concat(token.antCls, "-menu-submenu-arrow"), {
    color: token === null || token === void 0 ? void 0 : (_token$layout30 = token.layout) === null || _token$layout30 === void 0 ? void 0 : (_token$layout30$sider = _token$layout30.sider) === null || _token$layout30$sider === void 0 ? void 0 : _token$layout30$sider.colorTextMenuActive
  })), _$concat$concat2)), _$concat11)), _ref;
};
var genProLayoutStyle = function genProLayoutStyle(token) {
  var _token$layout31, _token$layout31$pageC, _token$layout32, _token$layout32$pageC, _token$layout33, _token$layout33$pageC, _token$layout34, _token$componentCls2, _ref2;
  return _ref2 = {}, _defineProperty(_ref2, "".concat(token.antCls, "-layout"), {
    backgroundColor: 'transparent !important'
  }), _defineProperty(_ref2, token.componentCls, (_token$componentCls2 = {}, _defineProperty(_token$componentCls2, "& ".concat(token.antCls, "-layout"), {
    display: 'flex',
    backgroundColor: 'transparent',
    width: '100%'
  }), _defineProperty(_token$componentCls2, "".concat(token.componentCls, "-content"), {
    display: 'flex',
    flexDirection: 'column',
    width: '100%',
    backgroundColor: (token === null || token === void 0 ? void 0 : (_token$layout31 = token.layout) === null || _token$layout31 === void 0 ? void 0 : (_token$layout31$pageC = _token$layout31.pageContainer) === null || _token$layout31$pageC === void 0 ? void 0 : _token$layout31$pageC.colorBgPageContainer) || 'transparent',
    position: 'relative',
    paddingBlock: token === null || token === void 0 ? void 0 : (_token$layout32 = token.layout) === null || _token$layout32 === void 0 ? void 0 : (_token$layout32$pageC = _token$layout32.pageContainer) === null || _token$layout32$pageC === void 0 ? void 0 : _token$layout32$pageC.paddingBlockPageContainerContent,
    paddingInline: token === null || token === void 0 ? void 0 : (_token$layout33 = token.layout) === null || _token$layout33 === void 0 ? void 0 : (_token$layout33$pageC = _token$layout33.pageContainer) === null || _token$layout33$pageC === void 0 ? void 0 : _token$layout33$pageC.paddingInlinePageContainerContent,
    '&-has-page-container': {
      padding: 0
    }
  }), _defineProperty(_token$componentCls2, "".concat(token.componentCls, "-container"), {
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    minWidth: 0,
    minHeight: 0,
    backgroundColor: 'transparent'
  }), _defineProperty(_token$componentCls2, "".concat(token.componentCls, "-bg-list"), {
    pointerEvents: 'none',
    position: 'fixed',
    overflow: 'hidden',
    insetBlockStart: 0,
    insetInlineStart: 0,
    zIndex: 0,
    height: '100%',
    width: '100%',
    background: token === null || token === void 0 ? void 0 : (_token$layout34 = token.layout) === null || _token$layout34 === void 0 ? void 0 : _token$layout34.bgLayout
  }), _token$componentCls2)), _defineProperty(_ref2, "".concat(token.antCls, "-menu-submenu-popup"), {
    backgroundColor: 'rgba(255, 255, 255, 0.42)',
    '-webkit-backdrop-filter': 'blur(8px)',
    backdropFilter: 'blur(8px)'
  }), _ref2;
};
export function useStyle(prefixCls) {
  return useAntdStyle('ProLayout', function (token) {
    var proLayoutToken = _objectSpread(_objectSpread({}, token), {}, {
      componentCls: ".".concat(prefixCls)
    });
    return [genProLayoutStyle(proLayoutToken), compatibleStyle(proLayoutToken)];
  });
}