2023-11-13 09:38:05 +08:00
|
|
|
import { unit, type CSSObject } from '@ant-design/cssinjs';
|
2022-07-28 20:33:10 +08:00
|
|
|
import type { MenuToken } from '.';
|
2023-06-06 16:11:18 +08:00
|
|
|
import { textEllipsis } from '../../style';
|
2022-11-23 20:22:38 +08:00
|
|
|
import type { GenerateStyle } from '../../theme/internal';
|
2022-05-23 10:58:30 +08:00
|
|
|
|
2022-11-15 22:08:30 +08:00
|
|
|
const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
|
2022-10-18 17:04:06 +08:00
|
|
|
const {
|
|
|
|
componentCls,
|
2023-07-17 10:13:22 +08:00
|
|
|
itemHeight,
|
2022-10-18 17:04:06 +08:00
|
|
|
itemMarginInline,
|
|
|
|
padding,
|
|
|
|
menuArrowSize,
|
2022-11-30 18:56:36 +08:00
|
|
|
marginXS,
|
2023-07-17 10:13:22 +08:00
|
|
|
itemMarginBlock,
|
2022-10-18 17:04:06 +08:00
|
|
|
} = token;
|
2022-05-23 10:58:30 +08:00
|
|
|
|
2023-11-13 09:38:05 +08:00
|
|
|
const paddingWithArrow = token.calc(menuArrowSize).add(padding).add(marginXS).equal();
|
2022-05-23 10:58:30 +08:00
|
|
|
|
|
|
|
return {
|
|
|
|
[`${componentCls}-item`]: {
|
|
|
|
position: 'relative',
|
2023-06-06 16:11:18 +08:00
|
|
|
overflow: 'hidden',
|
2022-05-23 10:58:30 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
|
2023-07-17 10:13:22 +08:00
|
|
|
height: itemHeight,
|
2023-11-13 09:38:05 +08:00
|
|
|
lineHeight: `${unit(itemHeight)}`,
|
2022-05-23 10:58:30 +08:00
|
|
|
paddingInline: padding,
|
|
|
|
overflow: 'hidden',
|
|
|
|
textOverflow: 'ellipsis',
|
2022-10-18 17:04:06 +08:00
|
|
|
marginInline: itemMarginInline,
|
2023-07-17 10:13:22 +08:00
|
|
|
marginBlock: itemMarginBlock,
|
2023-11-13 09:38:05 +08:00
|
|
|
width: token.subMenuTitleWidth,
|
2022-10-18 17:04:06 +08:00
|
|
|
},
|
|
|
|
|
2022-05-23 10:58:30 +08:00
|
|
|
[`> ${componentCls}-item,
|
|
|
|
> ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
|
2023-07-17 10:13:22 +08:00
|
|
|
height: itemHeight,
|
2023-11-13 09:38:05 +08:00
|
|
|
lineHeight: `${unit(itemHeight)}`,
|
2022-05-23 10:58:30 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-item-group-list ${componentCls}-submenu-title,
|
|
|
|
${componentCls}-submenu-title`]: {
|
|
|
|
paddingInlineEnd: paddingWithArrow,
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2022-11-15 22:08:30 +08:00
|
|
|
const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
|
2022-05-23 10:58:30 +08:00
|
|
|
const {
|
|
|
|
componentCls,
|
|
|
|
iconCls,
|
2023-07-17 10:13:22 +08:00
|
|
|
itemHeight,
|
2022-05-23 10:58:30 +08:00
|
|
|
colorTextLightSolid,
|
|
|
|
dropdownWidth,
|
|
|
|
controlHeightLG,
|
2022-11-17 23:31:41 +08:00
|
|
|
motionDurationMid,
|
2022-05-23 10:58:30 +08:00
|
|
|
motionEaseOut,
|
|
|
|
paddingXL,
|
2023-05-17 11:13:00 +08:00
|
|
|
itemMarginInline,
|
2022-05-23 10:58:30 +08:00
|
|
|
fontSizeLG,
|
|
|
|
motionDurationSlow,
|
|
|
|
paddingXS,
|
2022-08-26 16:05:16 +08:00
|
|
|
boxShadowSecondary,
|
2023-07-17 10:13:22 +08:00
|
|
|
collapsedWidth,
|
|
|
|
collapsedIconSize,
|
2022-05-23 10:58:30 +08:00
|
|
|
} = token;
|
|
|
|
|
2022-11-12 16:27:31 +08:00
|
|
|
const inlineItemStyle: CSSObject = {
|
2023-07-17 10:13:22 +08:00
|
|
|
height: itemHeight,
|
2023-11-13 09:38:05 +08:00
|
|
|
lineHeight: `${unit(itemHeight)}`,
|
2022-11-12 16:27:31 +08:00
|
|
|
listStylePosition: 'inside',
|
|
|
|
listStyleType: 'disc',
|
|
|
|
};
|
|
|
|
|
2022-05-23 10:58:30 +08:00
|
|
|
return [
|
|
|
|
{
|
|
|
|
[componentCls]: {
|
|
|
|
[`&-inline, &-vertical`]: {
|
|
|
|
[`&${componentCls}-root`]: {
|
|
|
|
boxShadow: 'none',
|
|
|
|
},
|
|
|
|
|
|
|
|
...getVerticalInlineStyle(token),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-submenu-popup`]: {
|
|
|
|
[`${componentCls}-vertical`]: {
|
|
|
|
...getVerticalInlineStyle(token),
|
2022-08-26 16:05:16 +08:00
|
|
|
boxShadow: boxShadowSecondary,
|
2022-05-23 10:58:30 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// Vertical only
|
|
|
|
{
|
|
|
|
[`${componentCls}-submenu-popup ${componentCls}-vertical${componentCls}-sub`]: {
|
|
|
|
minWidth: dropdownWidth,
|
2023-11-13 09:38:05 +08:00
|
|
|
maxHeight: `calc(100vh - ${unit(token.calc(controlHeightLG).mul(2.5).equal())})`,
|
2022-05-23 10:58:30 +08:00
|
|
|
padding: '0',
|
|
|
|
overflow: 'hidden',
|
|
|
|
borderInlineEnd: 0,
|
|
|
|
|
|
|
|
// https://github.com/ant-design/ant-design/issues/22244
|
|
|
|
// https://github.com/ant-design/ant-design/issues/26812
|
|
|
|
"&:not([class*='-active'])": {
|
|
|
|
overflowX: 'hidden',
|
|
|
|
overflowY: 'auto',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// Inline Only
|
|
|
|
{
|
|
|
|
[`${componentCls}-inline`]: {
|
|
|
|
width: '100%',
|
|
|
|
|
|
|
|
// Motion enhance for first level
|
|
|
|
[`&${componentCls}-root`]: {
|
|
|
|
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
|
|
|
|
display: 'flex',
|
|
|
|
alignItems: 'center',
|
|
|
|
transition: [
|
|
|
|
`border-color ${motionDurationSlow}`,
|
|
|
|
`background ${motionDurationSlow}`,
|
2022-11-17 23:31:41 +08:00
|
|
|
`padding ${motionDurationMid} ${motionEaseOut}`,
|
2022-12-25 22:55:47 +08:00
|
|
|
].join(','),
|
2022-05-23 10:58:30 +08:00
|
|
|
|
|
|
|
[`> ${componentCls}-title-content`]: {
|
|
|
|
flex: 'auto',
|
|
|
|
minWidth: 0,
|
|
|
|
overflow: 'hidden',
|
|
|
|
textOverflow: 'ellipsis',
|
|
|
|
},
|
|
|
|
|
|
|
|
'> *': {
|
|
|
|
flex: 'none',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// >>>>> Sub
|
|
|
|
[`${componentCls}-sub${componentCls}-inline`]: {
|
|
|
|
padding: 0,
|
|
|
|
border: 0,
|
|
|
|
borderRadius: 0,
|
|
|
|
boxShadow: 'none',
|
|
|
|
|
2022-11-12 16:27:31 +08:00
|
|
|
[`& > ${componentCls}-submenu > ${componentCls}-submenu-title`]: inlineItemStyle,
|
2022-05-23 10:58:30 +08:00
|
|
|
|
|
|
|
[`& ${componentCls}-item-group-title`]: {
|
|
|
|
paddingInlineStart: paddingXL,
|
|
|
|
},
|
|
|
|
},
|
2022-11-12 16:27:31 +08:00
|
|
|
|
|
|
|
// >>>>> Item
|
|
|
|
[`${componentCls}-item`]: inlineItemStyle,
|
2022-05-23 10:58:30 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// Inline Collapse Only
|
|
|
|
{
|
|
|
|
[`${componentCls}-inline-collapsed`]: {
|
2023-07-17 10:13:22 +08:00
|
|
|
width: collapsedWidth,
|
2022-05-23 10:58:30 +08:00
|
|
|
|
|
|
|
[`&${componentCls}-root`]: {
|
|
|
|
[`${componentCls}-item, ${componentCls}-submenu ${componentCls}-submenu-title`]: {
|
|
|
|
[`> ${componentCls}-inline-collapsed-noicon`]: {
|
|
|
|
fontSize: fontSizeLG,
|
|
|
|
textAlign: 'center',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`> ${componentCls}-item,
|
|
|
|
> ${componentCls}-item-group > ${componentCls}-item-group-list > ${componentCls}-item,
|
|
|
|
> ${componentCls}-item-group > ${componentCls}-item-group-list > ${componentCls}-submenu > ${componentCls}-submenu-title,
|
|
|
|
> ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
|
|
|
|
insetInlineStart: 0,
|
2023-11-13 09:38:05 +08:00
|
|
|
paddingInline: `calc(50% - ${unit(token.calc(fontSizeLG).div(2).equal())} - ${unit(
|
|
|
|
itemMarginInline,
|
|
|
|
)})`,
|
2022-05-23 10:58:30 +08:00
|
|
|
textOverflow: 'clip',
|
|
|
|
|
2023-01-07 21:50:09 +08:00
|
|
|
[`
|
|
|
|
${componentCls}-submenu-arrow,
|
|
|
|
${componentCls}-submenu-expand-icon
|
|
|
|
`]: {
|
2022-05-23 10:58:30 +08:00
|
|
|
opacity: 0,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-item-icon, ${iconCls}`]: {
|
|
|
|
margin: 0,
|
2023-07-17 10:13:22 +08:00
|
|
|
fontSize: collapsedIconSize,
|
2023-11-13 09:38:05 +08:00
|
|
|
lineHeight: `${unit(itemHeight)}`,
|
2022-05-23 10:58:30 +08:00
|
|
|
|
|
|
|
'+ span': {
|
|
|
|
display: 'inline-block',
|
|
|
|
opacity: 0,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-item-icon, ${iconCls}`]: {
|
|
|
|
display: 'inline-block',
|
|
|
|
},
|
|
|
|
|
|
|
|
'&-tooltip': {
|
|
|
|
pointerEvents: 'none',
|
|
|
|
|
|
|
|
[`${componentCls}-item-icon, ${iconCls}`]: {
|
|
|
|
display: 'none',
|
|
|
|
},
|
|
|
|
|
|
|
|
'a, a:hover': {
|
|
|
|
color: colorTextLightSolid,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-item-group-title`]: {
|
2022-10-28 16:44:19 +08:00
|
|
|
...textEllipsis,
|
2022-05-23 10:58:30 +08:00
|
|
|
paddingInline: paddingXS,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
];
|
|
|
|
};
|
|
|
|
|
|
|
|
export default getVerticalStyle;
|