test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

feat: menu support css variable theme (#45750)

Browse Source 
* feat: layout support cssVar

* feat: menu support cssVar

* feat: menu support cssVar

* feat: menu support cssVar

* feat: menu support cssVar

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code
This commit is contained in:
kiner-tang(文辉) 2023-11-13 09:38:05 +08:00 committed by GitHub
parent 047bc53920
commit 3128539211
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 209 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/menu/menu.tsx
View File

@ -18,6 +18,8 @@ import type { MenuContextProps, MenuTheme } from './MenuContext';
import MenuContext from './MenuContext';
import OverrideContext from './OverrideContext';
import useStyle from './style';
import useCSSVar from './style/cssVar';
import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
export interface MenuProps extends Omit<RcMenuProps, 'items'> {
theme?: MenuTheme;
@ -120,7 +122,9 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
};
const prefixCls = getPrefixCls('menu', customizePrefixCls || overrideObj.prefixCls);
const [wrapSSR, hashId] = useStyle(prefixCls, !override);
const [, hashId] = useStyle(prefixCls, !override);
const rootCls = useCSSVarCls(prefixCls);
const wrapCSSVar = useCSSVar(rootCls);
const menuClassName = classNames(`${prefixCls}-${theme}`, menu?.className, className);
// ====================== Expand Icon ========================
@ -156,7 +160,7 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
);
// ========================= Render ==========================
return wrapSSR(
return wrapCSSVar(
<OverrideContext.Provider value={null}>
<MenuContext.Provider value={contextValue}>
<RcMenu
@ -179,7 +183,7 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
defaultMotions={defaultMotions}
expandIcon={mergedExpandIcon}
ref={ref}
rootClassName={classNames(rootClassName, hashId, overrideObj.rootClassName)}
rootClassName={classNames(rootClassName, hashId, overrideObj.rootClassName, rootCls)}
>
{mergedChildren}
</RcMenu>

8
components/menu/style/cssVar.ts Normal file
View File

@ -0,0 +1,8 @@
import { genCSSVarRegister } from '../../theme/internal';
import { prepareComponentToken } from '.';
export default genCSSVarRegister('Menu', prepareComponentToken, {
unitless: {
groupTitleLineHeight: true,
},
});

3
components/menu/style/horizontal.tsx
View File

@ -1,3 +1,4 @@
import { unit } from '@ant-design/cssinjs';
import type { MenuToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
@ -16,7 +17,7 @@ const getHorizontalStyle: GenerateStyle<MenuToken> = (token) => {
[`${componentCls}-horizontal`]: {
lineHeight: horizontalLineHeight,
border: 0,
borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
borderBottom: `${unit(lineWidth)} ${lineType} ${colorSplit}`,
boxShadow: 'none',
'&::after': {

303
components/menu/style/index.tsx
View File

@ -1,14 +1,20 @@
import type { CSSObject } from '@ant-design/cssinjs';
import { unit, type CSSObject } from '@ant-design/cssinjs';
import { TinyColor } from '@ctrl/tinycolor';
import type { CSSProperties } from 'react';
import { clearFix, resetComponent, resetIcon } from '../../style';
import { genCollapseMotion, initSlideMotion, initZoomMotion } from '../../style/motion';
import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../theme/internal';
import type {
FullToken,
GenerateStyle,
GetDefaultToken,
UseComponentStyleResult,
} from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import getHorizontalStyle from './horizontal';
import getRTLStyle from './rtl';
import getThemeStyle from './theme';
import getVerticalStyle from './vertical';
import type { CssUtil } from 'antd-style';
/** Component only token. Which will handle additional calculation of alias token */
export interface ComponentToken {
@ -35,7 +41,7 @@ export interface ComponentToken {
* @desc 分组标题文字高度
* @descEN line-height of group title
*/
groupTitleLineHeight: CSSProperties['lineHeight'];
groupTitleLineHeight: string | number;
/**
* @desc 分组标题文字大小
* @descEN font-size of group title
@ -357,12 +363,14 @@ export interface ComponentToken {
* @descEN Background of active danger menu item in dark mode
*/
darkDangerItemActiveBg: string;
/** @internal */
subMenuTitleWidth: number | string;
}
export interface MenuToken extends FullToken<'Menu'> {
menuHorizontalHeight: number;
menuArrowSize: number;
menuArrowOffset: string;
menuHorizontalHeight: number | string;
menuArrowSize: number | string;
menuArrowOffset: number | string;
menuPanelMaskInset: number;
menuSubMenuBg: string;
}
@ -471,8 +479,8 @@ const genSubMenuArrowStyle = (token: MenuToken): CSSObject => {
// →
'&::before, &::after': {
position: 'absolute',
width: menuArrowSize * 0.6,
height: menuArrowSize * 0.15,
width: token.calc(menuArrowSize).mul(0.6).equal(),
height: token.calc(menuArrowSize).mul(0.15).equal(),
backgroundColor: 'currentcolor',
borderRadius,
transition: [
@ -485,11 +493,13 @@ const genSubMenuArrowStyle = (token: MenuToken): CSSObject => {
},
'&::before': {
transform: `rotate(45deg) translateY(-${menuArrowOffset})`,
transform: `rotate(45deg) translateY(${unit(
token.calc(menuArrowOffset).mul(-1).equal(),
)})`,
},
'&::after': {
transform: `rotate(-45deg) translateY(${menuArrowOffset})`,
transform: `rotate(-45deg) translateY(${unit(menuArrowOffset)})`,
},
},
},
@ -570,7 +580,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
},
[`${componentCls}-item-group-title`]: {
padding: `${paddingXS}px ${padding}px`,
padding: `${unit(paddingXS)} ${unit(padding)}`,
fontSize: groupTitleFontSize,
lineHeight: groupTitleLineHeight,
transition: `all ${motionDurationSlow}`,
@ -646,7 +656,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
padding: 0,
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
paddingInline: `${fontSize * 2}px ${padding}px`,
paddingInline: `${unit(token.calc(fontSize).mul(2).equal())} ${unit(padding)}`,
},
},
},
@ -667,7 +677,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
// https://github.com/ant-design/ant-design/issues/13955
'&::before': {
position: 'absolute',
inset: `${menuPanelMaskInset}px 0 0`,
inset: `${unit(menuPanelMaskInset)} 0 0`,
zIndex: -1,
width: '100%',
height: '100%',
@ -760,25 +770,29 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
&-inline ${componentCls}-submenu-arrow`]: {
// ↓
'&::before': {
transform: `rotate(-45deg) translateX(${menuArrowOffset})`,
transform: `rotate(-45deg) translateX(${unit(menuArrowOffset)})`,
},
'&::after': {
transform: `rotate(45deg) translateX(-${menuArrowOffset})`,
transform: `rotate(45deg) translateX(${unit(
token.calc(menuArrowOffset).mul(-1).equal(),
)})`,
},
},
[`${componentCls}-submenu-open${componentCls}-submenu-inline > ${componentCls}-submenu-title > ${componentCls}-submenu-arrow`]:
{
// ↑
transform: `translateY(-${menuArrowSize * 0.2}px)`,
transform: `translateY(${unit(token.calc(menuArrowSize).mul(0.2).mul(-1).equal())})`,
'&::after': {
transform: `rotate(-45deg) translateX(-${menuArrowOffset})`,
transform: `rotate(-45deg) translateX(${unit(
token.calc(menuArrowOffset).mul(-1).equal(),
)})`,
},
'&::before': {
transform: `rotate(45deg) translateX(${menuArrowOffset})`,
transform: `rotate(45deg) translateX(${unit(menuArrowOffset)})`,
},
},
},
@ -795,6 +809,127 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
];
};
export const prepareComponentToken: GetDefaultToken<'Menu'> = (token) => {
const {
colorPrimary,
colorError,
colorTextDisabled,
colorErrorBg,
colorText,
colorTextDescription,
colorBgContainer,
colorFillAlter,
colorFillContent,
lineWidth,
lineWidthBold,
controlItemBgActive,
colorBgTextHover,
controlHeightLG,
lineHeight,
colorBgElevated,
marginXXS,
padding,
fontSize,
controlHeightSM,
fontSizeLG,
colorTextLightSolid,
colorErrorHover,
} = token;
const colorTextDark = new TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString();
return {
dropdownWidth: 160,
zIndexPopup: token.zIndexPopupBase + 50,
radiusItem: token.borderRadiusLG,
itemBorderRadius: token.borderRadiusLG,
radiusSubMenuItem: token.borderRadiusSM,
subMenuItemBorderRadius: token.borderRadiusSM,
colorItemText: colorText,
itemColor: colorText,
colorItemTextHover: colorText,
itemHoverColor: colorText,
colorItemTextHoverHorizontal: colorPrimary,
horizontalItemHoverColor: colorPrimary,
colorGroupTitle: colorTextDescription,
groupTitleColor: colorTextDescription,
colorItemTextSelected: colorPrimary,
itemSelectedColor: colorPrimary,
colorItemTextSelectedHorizontal: colorPrimary,
horizontalItemSelectedColor: colorPrimary,
colorItemBg: colorBgContainer,
itemBg: colorBgContainer,
colorItemBgHover: colorBgTextHover,
itemHoverBg: colorBgTextHover,
colorItemBgActive: colorFillContent,
itemActiveBg: controlItemBgActive,
colorSubItemBg: colorFillAlter,
subMenuItemBg: colorFillAlter,
colorItemBgSelected: controlItemBgActive,
itemSelectedBg: controlItemBgActive,
colorItemBgSelectedHorizontal: 'transparent',
horizontalItemSelectedBg: 'transparent',
colorActiveBarWidth: 0,
activeBarWidth: 0,
colorActiveBarHeight: lineWidthBold,
activeBarHeight: lineWidthBold,
colorActiveBarBorderSize: lineWidth,
activeBarBorderWidth: lineWidth,
// Disabled
colorItemTextDisabled: colorTextDisabled,
itemDisabledColor: colorTextDisabled,
// Danger
colorDangerItemText: colorError,
dangerItemColor: colorError,
colorDangerItemTextHover: colorError,
dangerItemHoverColor: colorError,
colorDangerItemTextSelected: colorError,
dangerItemSelectedColor: colorError,
colorDangerItemBgActive: colorErrorBg,
dangerItemActiveBg: colorErrorBg,
colorDangerItemBgSelected: colorErrorBg,
dangerItemSelectedBg: colorErrorBg,
itemMarginInline: token.marginXXS,
horizontalItemBorderRadius: 0,
horizontalItemHoverBg: 'transparent',
itemHeight: controlHeightLG,
groupTitleLineHeight: lineHeight,
collapsedWidth: controlHeightLG * 2,
popupBg: colorBgElevated,
itemMarginBlock: marginXXS,
itemPaddingInline: padding,
horizontalLineHeight: `${controlHeightLG * 1.15}px`,
iconSize: fontSize,
iconMarginInlineEnd: controlHeightSM - fontSize,
collapsedIconSize: fontSizeLG,
groupTitleFontSize: fontSize,
// Disabled
darkItemDisabledColor: new TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(),
// Dark
darkItemColor: colorTextDark,
darkDangerItemColor: colorError,
darkItemBg: '#001529',
darkSubMenuItemBg: '#000c17',
darkItemSelectedColor: colorTextLightSolid,
darkItemSelectedBg: colorPrimary,
darkDangerItemSelectedBg: colorError,
darkItemHoverBg: 'transparent',
darkGroupTitleColor: colorTextDark,
darkItemHoverColor: colorTextLightSolid,
darkDangerItemHoverColor: colorErrorHover,
darkDangerItemSelectedColor: colorTextLightSolid,
darkDangerItemActiveBg: colorError,
subMenuTitleWidth: `calc(100% - ${token.marginXXS * 2}px)`,
};
};
// ============================== Export ==============================
export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResult => {
const useOriginHook = genComponentStyleHook(
@ -827,15 +962,20 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
darkDangerItemActiveBg,
} = token;
const menuArrowSize = (fontSize / 7) * 5;
const menuArrowSize = token.calc(fontSize).div(7).mul(5).equal();
// Menu Token
const menuToken = mergeToken<MenuToken>(token, {
const menuToken = mergeToken<MenuToken & CssUtil>(token, {
menuArrowSize,
menuHorizontalHeight: controlHeightLG * 1.15,
menuArrowOffset: `${menuArrowSize * 0.25}px`,
menuHorizontalHeight: token.calc(controlHeightLG).mul(1.15).equal(),
menuArrowOffset: token.calc(menuArrowSize).mul(0.25).equal(),
menuPanelMaskInset: -7, // Still a hardcode here since it's offset by rc-align
menuSubMenuBg: colorBgElevated,
calc: token.calc,
subMenuTitleWidth:
token.activeBarWidth && token.activeBarBorderWidth
? `calc(100% + ${token.activeBarBorderWidth}px)`
: `calc(100% - ${token.marginXXS * 2}px)`,
});
const menuDarkToken = mergeToken<MenuToken>(menuToken, {
@ -894,124 +1034,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
initZoomMotion(menuToken, 'zoom-big'),
];
},
(token) => {
const {
colorPrimary,
colorError,
colorTextDisabled,
colorErrorBg,
colorText,
colorTextDescription,
colorBgContainer,
colorFillAlter,
colorFillContent,
lineWidth,
lineWidthBold,
controlItemBgActive,
colorBgTextHover,
controlHeightLG,
lineHeight,
colorBgElevated,
marginXXS,
padding,
fontSize,
controlHeightSM,
fontSizeLG,
colorTextLightSolid,
colorErrorHover,
} = token;
const colorTextDark = new TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString();
return {
dropdownWidth: 160,
zIndexPopup: token.zIndexPopupBase + 50,
radiusItem: token.borderRadiusLG,
itemBorderRadius: token.borderRadiusLG,
radiusSubMenuItem: token.borderRadiusSM,
subMenuItemBorderRadius: token.borderRadiusSM,
colorItemText: colorText,
itemColor: colorText,
colorItemTextHover: colorText,
itemHoverColor: colorText,
colorItemTextHoverHorizontal: colorPrimary,
horizontalItemHoverColor: colorPrimary,
colorGroupTitle: colorTextDescription,
groupTitleColor: colorTextDescription,
colorItemTextSelected: colorPrimary,
itemSelectedColor: colorPrimary,
colorItemTextSelectedHorizontal: colorPrimary,
horizontalItemSelectedColor: colorPrimary,
colorItemBg: colorBgContainer,
itemBg: colorBgContainer,
colorItemBgHover: colorBgTextHover,
itemHoverBg: colorBgTextHover,
colorItemBgActive: colorFillContent,
itemActiveBg: controlItemBgActive,
colorSubItemBg: colorFillAlter,
subMenuItemBg: colorFillAlter,
colorItemBgSelected: controlItemBgActive,
itemSelectedBg: controlItemBgActive,
colorItemBgSelectedHorizontal: 'transparent',
horizontalItemSelectedBg: 'transparent',
colorActiveBarWidth: 0,
activeBarWidth: 0,
colorActiveBarHeight: lineWidthBold,
activeBarHeight: lineWidthBold,
colorActiveBarBorderSize: lineWidth,
activeBarBorderWidth: lineWidth,
// Disabled
colorItemTextDisabled: colorTextDisabled,
itemDisabledColor: colorTextDisabled,
// Danger
colorDangerItemText: colorError,
dangerItemColor: colorError,
colorDangerItemTextHover: colorError,
dangerItemHoverColor: colorError,
colorDangerItemTextSelected: colorError,
dangerItemSelectedColor: colorError,
colorDangerItemBgActive: colorErrorBg,
dangerItemActiveBg: colorErrorBg,
colorDangerItemBgSelected: colorErrorBg,
dangerItemSelectedBg: colorErrorBg,
itemMarginInline: token.marginXXS,
horizontalItemBorderRadius: 0,
horizontalItemHoverBg: 'transparent',
itemHeight: controlHeightLG,
groupTitleLineHeight: lineHeight,
collapsedWidth: controlHeightLG * 2,
popupBg: colorBgElevated,
itemMarginBlock: marginXXS,
itemPaddingInline: padding,
horizontalLineHeight: `${controlHeightLG * 1.15}px`,
iconSize: fontSize,
iconMarginInlineEnd: controlHeightSM - fontSize,
collapsedIconSize: fontSizeLG,
groupTitleFontSize: fontSize,
// Disabled
darkItemDisabledColor: new TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(),
// Dark
darkItemColor: colorTextDark,
darkDangerItemColor: colorError,
darkItemBg: '#001529',
darkSubMenuItemBg: '#000c17',
darkItemSelectedColor: colorTextLightSolid,
darkItemSelectedBg: colorPrimary,
darkDangerItemSelectedBg: colorError,
darkItemHoverBg: 'transparent',
darkGroupTitleColor: colorTextDark,
darkItemHoverColor: colorTextLightSolid,
darkDangerItemHoverColor: colorErrorHover,
darkDangerItemSelectedColor: colorTextLightSolid,
darkDangerItemActiveBg: colorError,
};
},
prepareComponentToken,
{
deprecatedTokens: [
['colorGroupTitle', 'groupTitleColor'],

12
components/menu/style/rtl.tsx
View File

@ -1,7 +1,13 @@
import type { CssUtil } from 'antd-style';
import type { MenuToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
import { unit } from '@ant-design/cssinjs';
const getRTLStyle: GenerateStyle<MenuToken> = ({ componentCls, menuArrowOffset }) => ({
const getRTLStyle: GenerateStyle<MenuToken & CssUtil> = ({
componentCls,
menuArrowOffset,
calc,
}) => ({
[`${componentCls}-rtl`]: {
direction: 'rtl',
},
@ -15,11 +21,11 @@ const getRTLStyle: GenerateStyle<MenuToken> = ({ componentCls, menuArrowOffset }
${componentCls}-submenu-rtl ${componentCls}-vertical`]: {
[`${componentCls}-submenu-arrow`]: {
'&::before': {
transform: `rotate(-45deg) translateY(-${menuArrowOffset})`,
transform: `rotate(-45deg) translateY(${unit(calc(menuArrowOffset).mul(-1).equal())})`,
},
'&::after': {
transform: `rotate(45deg) translateY(${menuArrowOffset})`,
transform: `rotate(45deg) translateY(${unit(menuArrowOffset)})`,
},
},
},

20
components/menu/style/theme.tsx
View File

@ -1,4 +1,5 @@
import type { CSSInterpolation } from '@ant-design/cssinjs';
import { unit, type CSSInterpolation } from '@ant-design/cssinjs';
import type { MenuToken } from '.';
import { genFocusOutline } from '../../style';
@ -172,7 +173,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
[`> ${componentCls}-item, > ${componentCls}-submenu`]: {
top: activeBarBorderWidth,
marginTop: -activeBarBorderWidth,
marginTop: token.calc(activeBarBorderWidth).mul(-1).equal(),
marginBottom: 0,
borderRadius: horizontalItemBorderRadius,
@ -180,7 +181,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
position: 'absolute',
insetInline: itemPaddingInline,
bottom: 0,
borderBottom: `${activeBarHeight}px solid transparent`,
borderBottom: `${unit(activeBarHeight)} solid transparent`,
transition: `border-color ${motionDurationSlow} ${motionEaseInOut}`,
content: '""',
},
@ -210,7 +211,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
//
[`&${componentCls}-root`]: {
[`&${componentCls}-inline, &${componentCls}-vertical`]: {
borderInlineEnd: `${activeBarBorderWidth}px ${lineType} ${colorSplit}`,
borderInlineEnd: `${unit(activeBarBorderWidth)} ${lineType} ${colorSplit}`,
},
},
@ -222,12 +223,9 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
},
// Item
[`${componentCls}-item, ${componentCls}-submenu-title`]:
activeBarBorderWidth && activeBarWidth
? {
width: `calc(100% + ${activeBarBorderWidth}px)`,
}
: {},
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
width: token.subMenuTitleWidth,
},
[`${componentCls}-item`]: {
position: 'relative',
@ -236,7 +234,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
position: 'absolute',
insetBlock: 0,
insetInlineEnd: 0,
borderInlineEnd: `${activeBarWidth}px solid ${itemSelectedColor}`,
borderInlineEnd: `${unit(activeBarWidth)} solid ${itemSelectedColor}`,
transform: 'scaleY(0.0001)',
opacity: 0,
transition: [

20
components/menu/style/vertical.tsx
View File

@ -1,4 +1,4 @@
import type { CSSObject } from '@ant-design/cssinjs';
import { unit, type CSSObject } from '@ant-design/cssinjs';
import type { MenuToken } from '.';
import { textEllipsis } from '../../style';
import type { GenerateStyle } from '../../theme/internal';
@ -14,7 +14,7 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
itemMarginBlock,
} = token;
const paddingWithArrow = padding + menuArrowSize + marginXS;
const paddingWithArrow = token.calc(menuArrowSize).add(padding).add(marginXS).equal();
return {
[`${componentCls}-item`]: {
@ -24,19 +24,19 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
height: itemHeight,
lineHeight: `${itemHeight}px`,
lineHeight: `${unit(itemHeight)}`,
paddingInline: padding,
overflow: 'hidden',
textOverflow: 'ellipsis',
marginInline: itemMarginInline,
marginBlock: itemMarginBlock,
width: `calc(100% - ${itemMarginInline * 2}px)`,
width: token.subMenuTitleWidth,
},
[`> ${componentCls}-item,
> ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
height: itemHeight,
lineHeight: `${itemHeight}px`,
lineHeight: `${unit(itemHeight)}`,
},
[`${componentCls}-item-group-list ${componentCls}-submenu-title,
@ -68,7 +68,7 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
const inlineItemStyle: CSSObject = {
height: itemHeight,
lineHeight: `${itemHeight}px`,
lineHeight: `${unit(itemHeight)}`,
listStylePosition: 'inside',
listStyleType: 'disc',
};
@ -97,7 +97,7 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
{
[`${componentCls}-submenu-popup ${componentCls}-vertical${componentCls}-sub`]: {
minWidth: dropdownWidth,
maxHeight: `calc(100vh - ${controlHeightLG * 2.5}px)`,
maxHeight: `calc(100vh - ${unit(token.calc(controlHeightLG).mul(2.5).equal())})`,
padding: '0',
overflow: 'hidden',
borderInlineEnd: 0,
@ -178,7 +178,9 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
> ${componentCls}-item-group > ${componentCls}-item-group-list > ${componentCls}-submenu > ${componentCls}-submenu-title,
> ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
insetInlineStart: 0,
paddingInline: `calc(50% - ${fontSizeLG / 2}px - ${itemMarginInline}px)`,
paddingInline: `calc(50% - ${unit(token.calc(fontSizeLG).div(2).equal())} - ${unit(
itemMarginInline,
)})`,
textOverflow: 'clip',
[`
@ -191,7 +193,7 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
[`${componentCls}-item-icon, ${iconCls}`]: {
margin: 0,
fontSize: collapsedIconSize,
lineHeight: `${itemHeight}px`,
lineHeight: `${unit(itemHeight)}`,
'+ span': {
display: 'inline-block',