2022-05-23 10:58:30 +08:00
|
|
|
import type { CSSObject } from '@ant-design/cssinjs';
|
2022-10-28 16:44:19 +08:00
|
|
|
import { textEllipsis } from '../../style';
|
2022-07-28 20:33:10 +08:00
|
|
|
import type { MenuToken } from '.';
|
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,
|
|
|
|
menuItemHeight,
|
|
|
|
itemMarginInline,
|
|
|
|
padding,
|
|
|
|
menuArrowSize,
|
|
|
|
fontSize,
|
2022-11-25 16:00:01 +08:00
|
|
|
marginXXS,
|
2022-10-18 17:04:06 +08:00
|
|
|
} = token;
|
2022-05-23 10:58:30 +08:00
|
|
|
|
|
|
|
const paddingWithArrow = menuArrowSize + fontSize;
|
|
|
|
|
|
|
|
return {
|
|
|
|
[`${componentCls}-item`]: {
|
|
|
|
position: 'relative',
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
|
|
|
|
height: menuItemHeight,
|
|
|
|
lineHeight: `${menuItemHeight}px`,
|
|
|
|
paddingInline: padding,
|
|
|
|
overflow: 'hidden',
|
|
|
|
textOverflow: 'ellipsis',
|
|
|
|
|
2022-10-18 17:04:06 +08:00
|
|
|
marginInline: itemMarginInline,
|
2022-11-25 16:00:01 +08:00
|
|
|
marginBlock: marginXXS,
|
2022-10-18 17:04:06 +08:00
|
|
|
width: `calc(100% - ${itemMarginInline * 2}px)`,
|
|
|
|
},
|
|
|
|
|
2022-11-20 01:08:15 +08:00
|
|
|
// disable margin collapsed
|
|
|
|
[`${componentCls}-submenu`]: {
|
|
|
|
paddingBottom: 0.02,
|
|
|
|
},
|
|
|
|
|
2022-05-23 10:58:30 +08:00
|
|
|
[`> ${componentCls}-item,
|
|
|
|
> ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
|
|
|
|
height: menuItemHeight,
|
|
|
|
lineHeight: `${menuItemHeight}px`,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${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,
|
|
|
|
menuItemHeight,
|
|
|
|
colorTextLightSolid,
|
|
|
|
dropdownWidth,
|
|
|
|
controlHeightLG,
|
2022-11-17 23:31:41 +08:00
|
|
|
motionDurationMid,
|
2022-05-23 10:58:30 +08:00
|
|
|
motionEaseOut,
|
|
|
|
paddingXL,
|
2022-11-17 18:37:48 +08:00
|
|
|
fontSizeSM,
|
2022-05-23 10:58:30 +08:00
|
|
|
fontSizeLG,
|
|
|
|
motionDurationSlow,
|
|
|
|
paddingXS,
|
2022-08-26 16:05:16 +08:00
|
|
|
boxShadowSecondary,
|
2022-05-23 10:58:30 +08:00
|
|
|
} = token;
|
|
|
|
|
2022-11-12 16:27:31 +08:00
|
|
|
const inlineItemStyle: CSSObject = {
|
|
|
|
height: menuItemHeight,
|
|
|
|
lineHeight: `${menuItemHeight}px`,
|
|
|
|
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,
|
|
|
|
maxHeight: `calc(100vh - ${controlHeightLG * 2.5}px)`,
|
|
|
|
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-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`]: {
|
|
|
|
width: menuItemHeight * 2,
|
|
|
|
|
|
|
|
[`&${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,
|
2022-11-17 18:37:48 +08:00
|
|
|
paddingInline: `calc(50% - ${fontSizeSM}px)`,
|
2022-05-23 10:58:30 +08:00
|
|
|
textOverflow: 'clip',
|
|
|
|
|
|
|
|
[`${componentCls}-submenu-arrow`]: {
|
|
|
|
opacity: 0,
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-item-icon, ${iconCls}`]: {
|
|
|
|
margin: 0,
|
|
|
|
fontSize: fontSizeLG,
|
|
|
|
lineHeight: `${menuItemHeight}px`,
|
|
|
|
|
|
|
|
'+ 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;
|