185 lines
7.7 KiB
JavaScript
185 lines
7.7 KiB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
import { Keyframes } from '@ant-design/cssinjs';
|
|
import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
|
|
export var proLayoutTitleHide = new Keyframes('antBadgeLoadingCircle', {
|
|
'0%': {
|
|
display: 'none',
|
|
opacity: 0,
|
|
overflow: 'hidden'
|
|
},
|
|
'80%': {
|
|
overflow: 'hidden'
|
|
},
|
|
'100%': {
|
|
display: 'unset',
|
|
opacity: 1
|
|
}
|
|
});
|
|
var genSiderMenuStyle = function genSiderMenuStyle(token) {
|
|
var _token$layout, _token$layout2, _token$layout3, _token$layout4, _token$layout5, _token$layout6, _token$layout7, _token$layout8, _token$layout9, _token$layout10, _token$layout11, _token$layout12;
|
|
return _defineProperty({}, "".concat(token.proComponentsCls, "-layout"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(token.antCls, "-layout-sider").concat(token.componentCls), {
|
|
background: ((_token$layout = token.layout) === null || _token$layout === void 0 || (_token$layout = _token$layout.sider) === null || _token$layout === void 0 ? void 0 : _token$layout.colorMenuBackground) || 'transparent'
|
|
}), token.componentCls, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
|
|
position: 'relative',
|
|
boxSizing: 'border-box',
|
|
'&-menu': {
|
|
position: 'relative',
|
|
zIndex: 10,
|
|
minHeight: '100%'
|
|
}
|
|
}, "& ".concat(token.antCls, "-layout-sider-children"), {
|
|
position: 'relative',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
height: '100%',
|
|
paddingInline: (_token$layout2 = token.layout) === null || _token$layout2 === void 0 || (_token$layout2 = _token$layout2.sider) === null || _token$layout2 === void 0 ? void 0 : _token$layout2.paddingInlineLayoutMenu,
|
|
paddingBlock: (_token$layout3 = token.layout) === null || _token$layout3 === void 0 || (_token$layout3 = _token$layout3.sider) === null || _token$layout3 === void 0 ? void 0 : _token$layout3.paddingBlockLayoutMenu,
|
|
borderInlineEnd: "1px solid ".concat(token.colorSplit),
|
|
marginInlineEnd: -1
|
|
}), "".concat(token.antCls, "-menu"), _defineProperty(_defineProperty({}, "".concat(token.antCls, "-menu-item-group-title"), {
|
|
fontSize: token.fontSizeSM,
|
|
paddingBottom: 4
|
|
}), "".concat(token.antCls, "-menu-item:not(").concat(token.antCls, "-menu-item-selected):hover"), {
|
|
color: (_token$layout4 = token.layout) === null || _token$layout4 === void 0 || (_token$layout4 = _token$layout4.sider) === null || _token$layout4 === void 0 ? void 0 : _token$layout4.colorTextMenuItemHover
|
|
})), '&-logo', {
|
|
position: 'relative',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingInline: 12,
|
|
paddingBlock: 16,
|
|
color: (_token$layout5 = token.layout) === null || _token$layout5 === void 0 || (_token$layout5 = _token$layout5.sider) === null || _token$layout5 === void 0 ? void 0 : _token$layout5.colorTextMenu,
|
|
cursor: 'pointer',
|
|
borderBlockEnd: "1px solid ".concat((_token$layout6 = token.layout) === null || _token$layout6 === void 0 || (_token$layout6 = _token$layout6.sider) === null || _token$layout6 === void 0 ? void 0 : _token$layout6.colorMenuItemDivider),
|
|
'> a': {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
minHeight: 22,
|
|
fontSize: 22,
|
|
'> img': {
|
|
display: 'inline-block',
|
|
height: 22,
|
|
verticalAlign: 'middle'
|
|
},
|
|
'> h1': {
|
|
display: 'inline-block',
|
|
height: 22,
|
|
marginBlock: 0,
|
|
marginInlineEnd: 0,
|
|
marginInlineStart: 6,
|
|
color: (_token$layout7 = token.layout) === null || _token$layout7 === void 0 || (_token$layout7 = _token$layout7.sider) === null || _token$layout7 === void 0 ? void 0 : _token$layout7.colorTextMenuTitle,
|
|
animationName: proLayoutTitleHide,
|
|
animationDuration: '.4s',
|
|
animationTimingFunction: 'ease',
|
|
fontWeight: 600,
|
|
fontSize: 16,
|
|
lineHeight: '22px',
|
|
verticalAlign: 'middle'
|
|
}
|
|
},
|
|
'&-collapsed': _defineProperty({
|
|
flexDirection: 'column-reverse',
|
|
margin: 0,
|
|
padding: 12
|
|
}, "".concat(token.proComponentsCls, "-layout-apps-icon"), {
|
|
marginBlockEnd: 8,
|
|
fontSize: 16,
|
|
transition: 'font-size 0.2s ease-in-out,color 0.2s ease-in-out'
|
|
})
|
|
}), '&-actions', {
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
marginBlock: 4,
|
|
marginInline: 0,
|
|
color: (_token$layout8 = token.layout) === null || _token$layout8 === void 0 || (_token$layout8 = _token$layout8.sider) === null || _token$layout8 === void 0 ? void 0 : _token$layout8.colorTextMenu,
|
|
'&-collapsed': {
|
|
flexDirection: 'column-reverse',
|
|
paddingBlock: 0,
|
|
paddingInline: 8,
|
|
fontSize: 16,
|
|
transition: 'font-size 0.3s ease-in-out'
|
|
},
|
|
'&-list': {
|
|
color: (_token$layout9 = token.layout) === null || _token$layout9 === void 0 || (_token$layout9 = _token$layout9.sider) === null || _token$layout9 === void 0 ? void 0 : _token$layout9.colorTextMenuSecondary,
|
|
'&-collapsed': {
|
|
marginBlockEnd: 8,
|
|
animationName: 'none'
|
|
},
|
|
'&-item': {
|
|
paddingInline: 6,
|
|
paddingBlock: 6,
|
|
lineHeight: '16px',
|
|
fontSize: 16,
|
|
cursor: 'pointer',
|
|
borderRadius: token.borderRadius,
|
|
'&:hover': {
|
|
background: token.colorBgTextHover
|
|
}
|
|
}
|
|
},
|
|
'&-avatar': {
|
|
fontSize: 14,
|
|
paddingInline: 8,
|
|
paddingBlock: 8,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: token.marginXS,
|
|
borderRadius: token.borderRadius,
|
|
'& *': {
|
|
cursor: 'pointer'
|
|
},
|
|
'&:hover': {
|
|
background: token.colorBgTextHover
|
|
}
|
|
}
|
|
}), '&-hide-menu-collapsed', {
|
|
insetInlineStart: "-".concat(token.proLayoutCollapsedWidth - 12, "px"),
|
|
position: 'absolute'
|
|
}), '&-extra', {
|
|
marginBlockEnd: 16,
|
|
marginBlock: 0,
|
|
marginInline: 16,
|
|
'&-no-logo': {
|
|
marginBlockStart: 16
|
|
}
|
|
}), '&-links', {
|
|
width: '100%',
|
|
ul: {
|
|
height: 'auto'
|
|
}
|
|
}), '&-link-menu', {
|
|
border: 'none',
|
|
boxShadow: 'none',
|
|
background: 'transparent'
|
|
}), '&-footer', {
|
|
color: (_token$layout10 = token.layout) === null || _token$layout10 === void 0 || (_token$layout10 = _token$layout10.sider) === null || _token$layout10 === void 0 ? void 0 : _token$layout10.colorTextMenuSecondary,
|
|
paddingBlockEnd: 16,
|
|
fontSize: token.fontSize,
|
|
animationName: proLayoutTitleHide,
|
|
animationDuration: '.4s',
|
|
animationTimingFunction: 'ease'
|
|
})), "".concat(token.componentCls).concat(token.componentCls, "-fixed"), {
|
|
position: 'fixed',
|
|
insetBlockStart: 0,
|
|
insetInlineStart: 0,
|
|
zIndex: '100',
|
|
height: '100%',
|
|
'&-mix': {
|
|
height: "calc(100% - ".concat(((_token$layout11 = token.layout) === null || _token$layout11 === void 0 || (_token$layout11 = _token$layout11.header) === null || _token$layout11 === void 0 ? void 0 : _token$layout11.heightLayoutHeader) || 56, "px)"),
|
|
insetBlockStart: "".concat(((_token$layout12 = token.layout) === null || _token$layout12 === void 0 || (_token$layout12 = _token$layout12.header) === null || _token$layout12 === void 0 ? void 0 : _token$layout12.heightLayoutHeader) || 56, "px")
|
|
}
|
|
}));
|
|
};
|
|
export function useStyle(prefixCls, _ref2) {
|
|
var proLayoutCollapsedWidth = _ref2.proLayoutCollapsedWidth;
|
|
return useAntdStyle('ProLayoutSiderMenu', function (token) {
|
|
var siderMenuToken = _objectSpread(_objectSpread({}, token), {}, {
|
|
componentCls: ".".concat(prefixCls),
|
|
proLayoutCollapsedWidth: proLayoutCollapsedWidth
|
|
});
|
|
return [genSiderMenuStyle(siderMenuToken)];
|
|
});
|
|
} |