mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

fix: submenu style (#39093)

Browse Source
This commit is contained in:
MadCcc 2022-11-30 18:56:36 +08:00 committed by GitHub
parent aa92f02911
commit 876b4f3b9a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 139 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,5 @@
import { TinyColor } from '@ctrl/tinycolor';
import type { CSSObject } from '@ant-design/cssinjs';
import { genCollapseMotion, initSlideMotion, initZoomMotion } from '../../style/motion';
import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
@ -66,6 +67,135 @@ export interface MenuToken extends FullToken<'Menu'> {
menuSubMenuBg: string;
}
const genMenuItemStyle = (token: MenuToken): CSSObject => {
const {
componentCls,
fontSize,
motionDurationSlow,
motionDurationMid,
motionEaseInOut,
motionEaseOut,
iconCls,
controlHeightSM,
} = token;
return {
// >>>>> Item
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
position: 'relative',
display: 'block',
margin: 0,
whiteSpace: 'nowrap',
cursor: 'pointer',
transition: [
`border-color ${motionDurationSlow}`,
`background ${motionDurationSlow}`,
`padding ${motionDurationSlow} ${motionEaseInOut}`,
].join(','),
[`${componentCls}-item-icon, ${iconCls}`]: {
minWidth: fontSize,
fontSize,
transition: [
`font-size ${motionDurationMid} ${motionEaseOut}`,
`margin ${motionDurationSlow} ${motionEaseInOut}`,
`color ${motionDurationSlow}`,
].join(','),
'+ span': {
marginInlineStart: controlHeightSM - fontSize,
opacity: 1,
transition: [
`opacity ${motionDurationSlow} ${motionEaseInOut}`,
`margin ${motionDurationSlow}`,
`color ${motionDurationSlow}`,
].join(','),
},
},
[`${componentCls}-item-icon`]: {
...resetIcon(),
},
[`&${componentCls}-item-only-child`]: {
[`> ${iconCls}, > ${componentCls}-item-icon`]: {
marginInlineEnd: 0,
},
},
},
// Disabled state sets text to gray and nukes hover/tab effects
[`${componentCls}-item-disabled, ${componentCls}-submenu-disabled`]: {
background: 'none !important',
cursor: 'not-allowed',
'&::after': {
borderColor: 'transparent !important',
},
a: {
color: 'inherit !important',
},
[`> ${componentCls}-submenu-title`]: {
color: 'inherit !important',
cursor: 'not-allowed',
},
},
};
};
const genSubMenuArrowStyle = (token: MenuToken): CSSObject => {
const {
componentCls,
motionDurationSlow,
motionEaseInOut,
borderRadius,
menuArrowSize,
menuArrowOffset,
} = token;
return {
[`${componentCls}-submenu`]: {
[`&-expand-icon, &-arrow`]: {
position: 'absolute',
top: '50%',
insetInlineEnd: token.margin,
width: menuArrowSize,
color: 'currentcolor',
transform: 'translateY(-50%)',
transition: `transform ${motionDurationSlow} ${motionEaseInOut}`,
},
'&-arrow': {
// →
'&::before, &::after': {
position: 'absolute',
width: menuArrowSize * 0.6,
height: menuArrowSize * 0.15,
backgroundColor: 'currentcolor',
borderRadius,
transition: [
`background ${motionDurationSlow} ${motionEaseInOut}`,
`transform ${motionDurationSlow} ${motionEaseInOut}`,
`top ${motionDurationSlow} ${motionEaseInOut}`,
`color ${motionDurationSlow} ${motionEaseInOut}`,
].join(','),
content: '""',
},
'&::before': {
transform: `rotate(45deg) translateY(-${menuArrowOffset})`,
},
'&::after': {
transform: `rotate(-45deg) translateY(${menuArrowOffset})`,
},
},
},
};
};
// =============================== Base ===============================
const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
const {
@ -75,19 +205,15 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
motionDurationSlow,
motionDurationMid,
motionEaseInOut,
motionEaseOut,
lineHeight,
paddingXS,
padding,
colorSplit,
lineWidth,
iconCls,
zIndexPopup,
borderRadius,
borderRadiusLG,
radiusSubMenuItem,
menuArrowSize,
controlHeightSM,
menuArrowOffset,
lineType,
menuPanelMaskInset,
@ -206,69 +332,8 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
},
},
// >>>>> Item
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
position: 'relative',
display: 'block',
margin: 0,
// paddingInline: menuItemPaddingInline,
whiteSpace: 'nowrap',
cursor: 'pointer',
transition: [
`border-color ${motionDurationSlow}`,
`background ${motionDurationSlow}`,
`padding ${motionDurationSlow} ${motionEaseInOut}`,
].join(','),
[`${componentCls}-item-icon, ${iconCls}`]: {
minWidth: fontSize,
fontSize,
transition: [
`font-size ${motionDurationMid} ${motionEaseOut}`,
`margin ${motionDurationSlow} ${motionEaseInOut}`,
`color ${motionDurationSlow}`,
].join(','),
'+ span': {
marginInlineStart: controlHeightSM - fontSize,
opacity: 1,
transition: [
`opacity ${motionDurationSlow} ${motionEaseInOut}`,
`margin ${motionDurationSlow}`,
`color ${motionDurationSlow}`,
].join(','),
},
},
[`${componentCls}-item-icon`]: {
...resetIcon(),
},
[`&${componentCls}-item-only-child`]: {
[`> ${iconCls}, > ${componentCls}-item-icon`]: {
marginInlineEnd: 0,
},
},
},
// Disabled state sets text to gray and nukes hover/tab effects
[`${componentCls}-item-disabled, ${componentCls}-submenu-disabled`]: {
background: 'none !important',
cursor: 'not-allowed',
'&::after': {
borderColor: 'transparent !important',
},
a: {
color: 'inherit !important',
},
[`> ${componentCls}-submenu-title`]: {
color: 'inherit !important',
cursor: 'not-allowed',
},
},
// Item
...genMenuItemStyle(token),
[`${componentCls}-item-group`]: {
[`${componentCls}-item-group-list`]: {
@ -312,7 +377,10 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
[`> ${componentCls}`]: {
borderRadius: borderRadiusLG,
[`> ${componentCls}-item`]: {
...genMenuItemStyle(token),
...genSubMenuArrowStyle(token),
[`${componentCls}-item, ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
borderRadius: radiusSubMenuItem,
},
@ -322,43 +390,7 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
},
},
[`${componentCls}-submenu`]: {
[`&-expand-icon, &-arrow`]: {
position: 'absolute',
top: '50%',
insetInlineEnd: token.margin,
width: menuArrowSize,
color: 'currentcolor',
transform: 'translateY(-50%)',
transition: `transform ${motionDurationSlow} ${motionEaseInOut}`,
},
'&-arrow': {
// →
'&::before, &::after': {
position: 'absolute',
width: menuArrowSize * 0.6,
height: menuArrowSize * 0.15,
backgroundColor: 'currentcolor',
borderRadius,
transition: [
`background ${motionDurationSlow} ${motionEaseInOut}`,
`transform ${motionDurationSlow} ${motionEaseInOut}`,
`top ${motionDurationSlow} ${motionEaseInOut}`,
`color ${motionDurationSlow} ${motionEaseInOut}`,
].join(','),
content: '""',
},
'&::before': {
transform: `rotate(45deg) translateY(-${menuArrowOffset})`,
},
'&::after': {
transform: `rotate(-45deg) translateY(${menuArrowOffset})`,
},
},
},
...genSubMenuArrowStyle(token),
[`&-inline-collapsed ${componentCls}-submenu-arrow,
&-inline ${componentCls}-submenu-arrow`]: {

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

@ -10,11 +10,11 @@ const getVerticalInlineStyle: GenerateStyle<MenuToken, CSSObject> = (token) => {
itemMarginInline,
padding,
menuArrowSize,
fontSize,
marginXS,
marginXXS,
} = token;
const paddingWithArrow = menuArrowSize + fontSize;
const paddingWithArrow = padding + menuArrowSize + marginXS;
return {
[`${componentCls}-item`]: {