2022-05-23 10:58:30 +08:00
|
|
|
import type { CSSInterpolation } from '@ant-design/cssinjs';
|
2023-11-13 10:15:07 +08:00
|
|
|
|
2022-07-28 20:33:10 +08:00
|
|
|
import type { MenuToken } from '.';
|
2023-06-06 16:11:18 +08:00
|
|
|
import { genFocusOutline } from '../../style';
|
2022-05-23 10:58:30 +08:00
|
|
|
|
2022-09-09 10:53:03 +08:00
|
|
|
const accessibilityFocus = (token: MenuToken) => ({
|
|
|
|
...genFocusOutline(token),
|
|
|
|
});
|
2022-05-23 10:58:30 +08:00
|
|
|
|
2022-09-19 22:17:26 +08:00
|
|
|
const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation => {
|
2022-05-23 10:58:30 +08:00
|
|
|
const {
|
|
|
|
componentCls,
|
2023-06-06 16:11:18 +08:00
|
|
|
itemColor,
|
|
|
|
itemSelectedColor,
|
|
|
|
groupTitleColor,
|
|
|
|
itemBg,
|
|
|
|
subMenuItemBg,
|
|
|
|
itemSelectedBg,
|
|
|
|
activeBarHeight,
|
|
|
|
activeBarWidth,
|
|
|
|
activeBarBorderWidth,
|
2022-05-23 10:58:30 +08:00
|
|
|
motionDurationSlow,
|
|
|
|
motionEaseInOut,
|
|
|
|
motionEaseOut,
|
2023-07-17 10:13:22 +08:00
|
|
|
itemPaddingInline,
|
2022-11-17 23:31:41 +08:00
|
|
|
motionDurationMid,
|
2023-06-06 16:11:18 +08:00
|
|
|
itemHoverColor,
|
2022-05-23 10:58:30 +08:00
|
|
|
lineType,
|
2022-08-03 20:04:58 +08:00
|
|
|
colorSplit,
|
2022-05-23 10:58:30 +08:00
|
|
|
|
|
|
|
// Disabled
|
2023-06-06 16:11:18 +08:00
|
|
|
itemDisabledColor,
|
2022-05-23 10:58:30 +08:00
|
|
|
|
|
|
|
// Danger
|
2023-06-06 16:11:18 +08:00
|
|
|
dangerItemColor,
|
|
|
|
dangerItemHoverColor,
|
|
|
|
dangerItemSelectedColor,
|
|
|
|
dangerItemActiveBg,
|
|
|
|
dangerItemSelectedBg,
|
2022-10-18 17:04:06 +08:00
|
|
|
|
2023-06-06 16:11:18 +08:00
|
|
|
itemHoverBg,
|
2023-07-19 18:52:07 +08:00
|
|
|
itemActiveBg,
|
2022-11-25 16:00:01 +08:00
|
|
|
menuSubMenuBg,
|
2023-01-09 16:50:08 +08:00
|
|
|
|
|
|
|
// Horizontal
|
2023-06-06 16:11:18 +08:00
|
|
|
horizontalItemSelectedColor,
|
|
|
|
horizontalItemSelectedBg,
|
|
|
|
horizontalItemBorderRadius,
|
|
|
|
horizontalItemHoverBg,
|
2023-07-17 10:13:22 +08:00
|
|
|
|
|
|
|
popupBg,
|
2022-05-23 10:58:30 +08:00
|
|
|
} = token;
|
|
|
|
|
|
|
|
return {
|
2023-03-27 10:08:22 +08:00
|
|
|
[`${componentCls}-${themeSuffix}, ${componentCls}-${themeSuffix} > ${componentCls}`]: {
|
2023-06-06 16:11:18 +08:00
|
|
|
color: itemColor,
|
|
|
|
background: itemBg,
|
2022-05-23 10:58:30 +08:00
|
|
|
|
|
|
|
[`&${componentCls}-root:focus-visible`]: {
|
|
|
|
...accessibilityFocus(token),
|
|
|
|
},
|
|
|
|
|
|
|
|
// ======================== Item ========================
|
|
|
|
[`${componentCls}-item-group-title`]: {
|
2023-06-06 16:11:18 +08:00
|
|
|
color: groupTitleColor,
|
2022-05-23 10:58:30 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-submenu-selected`]: {
|
|
|
|
[`> ${componentCls}-submenu-title`]: {
|
2023-06-06 16:11:18 +08:00
|
|
|
color: itemSelectedColor,
|
2022-05-23 10:58:30 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// Disabled
|
|
|
|
[`${componentCls}-item-disabled, ${componentCls}-submenu-disabled`]: {
|
2023-06-06 16:11:18 +08:00
|
|
|
color: `${itemDisabledColor} !important`,
|
2022-05-23 10:58:30 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
// Hover
|
2023-07-19 18:52:07 +08:00
|
|
|
[`${componentCls}-item:not(${componentCls}-item-selected):not(${componentCls}-submenu-selected)`]:
|
|
|
|
{
|
|
|
|
[`&:hover, > ${componentCls}-submenu-title:hover`]: {
|
|
|
|
color: itemHoverColor,
|
|
|
|
},
|
2022-05-23 10:58:30 +08:00
|
|
|
},
|
|
|
|
|
2022-10-18 17:04:06 +08:00
|
|
|
[`&:not(${componentCls}-horizontal)`]: {
|
|
|
|
[`${componentCls}-item:not(${componentCls}-item-selected)`]: {
|
|
|
|
'&:hover': {
|
2023-06-06 16:11:18 +08:00
|
|
|
backgroundColor: itemHoverBg,
|
2022-10-18 17:04:06 +08:00
|
|
|
},
|
|
|
|
|
2022-11-10 22:03:34 +08:00
|
|
|
'&:active': {
|
2023-07-19 18:52:07 +08:00
|
|
|
backgroundColor: itemActiveBg,
|
2022-10-18 17:04:06 +08:00
|
|
|
},
|
|
|
|
},
|
2023-01-09 16:50:08 +08:00
|
|
|
|
2022-10-18 17:04:06 +08:00
|
|
|
[`${componentCls}-submenu-title`]: {
|
2022-11-10 22:03:34 +08:00
|
|
|
'&:hover': {
|
2023-06-06 16:11:18 +08:00
|
|
|
backgroundColor: itemHoverBg,
|
2022-10-18 17:04:06 +08:00
|
|
|
},
|
|
|
|
|
2022-11-10 22:03:34 +08:00
|
|
|
'&:active': {
|
2023-07-19 18:52:07 +08:00
|
|
|
backgroundColor: itemActiveBg,
|
2022-10-18 17:04:06 +08:00
|
|
|
},
|
|
|
|
},
|
2022-05-23 10:58:30 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
// Danger - only Item has
|
|
|
|
[`${componentCls}-item-danger`]: {
|
2023-06-06 16:11:18 +08:00
|
|
|
color: dangerItemColor,
|
2022-05-23 10:58:30 +08:00
|
|
|
|
|
|
|
[`&${componentCls}-item:hover`]: {
|
|
|
|
[`&:not(${componentCls}-item-selected):not(${componentCls}-submenu-selected)`]: {
|
2023-06-06 16:11:18 +08:00
|
|
|
color: dangerItemHoverColor,
|
2022-05-23 10:58:30 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`&${componentCls}-item:active`]: {
|
2023-06-06 16:11:18 +08:00
|
|
|
background: dangerItemActiveBg,
|
2022-05-23 10:58:30 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-item a`]: {
|
|
|
|
'&, &:hover': {
|
|
|
|
color: 'inherit',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-item-selected`]: {
|
2023-06-06 16:11:18 +08:00
|
|
|
color: itemSelectedColor,
|
2022-05-23 10:58:30 +08:00
|
|
|
|
|
|
|
// Danger
|
|
|
|
[`&${componentCls}-item-danger`]: {
|
2023-06-06 16:11:18 +08:00
|
|
|
color: dangerItemSelectedColor,
|
2022-05-23 10:58:30 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
[`a, a:hover`]: {
|
|
|
|
color: 'inherit',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2023-01-09 16:50:08 +08:00
|
|
|
[`& ${componentCls}-item-selected`]: {
|
2023-06-06 16:11:18 +08:00
|
|
|
backgroundColor: itemSelectedBg,
|
2022-05-23 10:58:30 +08:00
|
|
|
|
|
|
|
// Danger
|
|
|
|
[`&${componentCls}-item-danger`]: {
|
2023-06-06 16:11:18 +08:00
|
|
|
backgroundColor: dangerItemSelectedBg,
|
2022-05-23 10:58:30 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
|
2022-09-05 21:26:04 +08:00
|
|
|
[`&:not(${componentCls}-item-disabled):focus-visible`]: {
|
2022-05-23 10:58:30 +08:00
|
|
|
...accessibilityFocus(token),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`&${componentCls}-submenu > ${componentCls}`]: {
|
2022-11-25 16:00:01 +08:00
|
|
|
backgroundColor: menuSubMenuBg,
|
2022-05-23 10:58:30 +08:00
|
|
|
},
|
|
|
|
|
2023-11-13 10:15:07 +08:00
|
|
|
[`&${componentCls}-submenu-popup > ${componentCls}`]: {
|
|
|
|
backgroundColor: popupBg,
|
|
|
|
},
|
|
|
|
|
2022-05-23 10:58:30 +08:00
|
|
|
[`&${componentCls}-popup > ${componentCls}`]: {
|
2023-07-17 10:13:22 +08:00
|
|
|
backgroundColor: popupBg,
|
2022-05-23 10:58:30 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
// ====================== Horizontal ======================
|
|
|
|
[`&${componentCls}-horizontal`]: {
|
2022-11-21 12:03:17 +08:00
|
|
|
...(themeSuffix === 'dark'
|
|
|
|
? {
|
|
|
|
borderBottom: 0,
|
|
|
|
}
|
|
|
|
: {}),
|
|
|
|
|
2022-05-23 10:58:30 +08:00
|
|
|
[`> ${componentCls}-item, > ${componentCls}-submenu`]: {
|
2023-06-06 16:11:18 +08:00
|
|
|
top: activeBarBorderWidth,
|
|
|
|
marginTop: -activeBarBorderWidth,
|
2022-05-23 10:58:30 +08:00
|
|
|
marginBottom: 0,
|
2023-06-06 16:11:18 +08:00
|
|
|
borderRadius: horizontalItemBorderRadius,
|
2022-05-23 10:58:30 +08:00
|
|
|
|
|
|
|
'&::after': {
|
|
|
|
position: 'absolute',
|
2023-07-17 10:13:22 +08:00
|
|
|
insetInline: itemPaddingInline,
|
2022-05-23 10:58:30 +08:00
|
|
|
bottom: 0,
|
2023-06-06 16:11:18 +08:00
|
|
|
borderBottom: `${activeBarHeight}px solid transparent`,
|
2022-05-23 10:58:30 +08:00
|
|
|
transition: `border-color ${motionDurationSlow} ${motionEaseInOut}`,
|
|
|
|
content: '""',
|
|
|
|
},
|
|
|
|
|
2022-07-28 20:33:10 +08:00
|
|
|
[`&:hover, &-active, &-open`]: {
|
2023-06-06 16:11:18 +08:00
|
|
|
background: horizontalItemHoverBg,
|
2022-07-28 20:33:10 +08:00
|
|
|
'&::after': {
|
2023-06-06 16:11:18 +08:00
|
|
|
borderBottomWidth: activeBarHeight,
|
|
|
|
borderBottomColor: horizontalItemSelectedColor,
|
2022-07-28 20:33:10 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
[`&-selected`]: {
|
2023-06-06 16:11:18 +08:00
|
|
|
color: horizontalItemSelectedColor,
|
|
|
|
backgroundColor: horizontalItemSelectedBg,
|
2023-07-19 18:52:07 +08:00
|
|
|
'&:hover': {
|
|
|
|
backgroundColor: horizontalItemSelectedBg,
|
|
|
|
},
|
2022-05-23 10:58:30 +08:00
|
|
|
'&::after': {
|
2023-06-06 16:11:18 +08:00
|
|
|
borderBottomWidth: activeBarHeight,
|
|
|
|
borderBottomColor: horizontalItemSelectedColor,
|
2022-05-23 10:58:30 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// ================== Inline & Vertical ===================
|
|
|
|
//
|
|
|
|
[`&${componentCls}-root`]: {
|
2022-05-26 01:36:39 +08:00
|
|
|
[`&${componentCls}-inline, &${componentCls}-vertical`]: {
|
2023-06-06 16:11:18 +08:00
|
|
|
borderInlineEnd: `${activeBarBorderWidth}px ${lineType} ${colorSplit}`,
|
2022-05-23 10:58:30 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
// ======================== Inline ========================
|
|
|
|
[`&${componentCls}-inline`]: {
|
|
|
|
// Sub
|
|
|
|
[`${componentCls}-sub${componentCls}-inline`]: {
|
2023-06-06 16:11:18 +08:00
|
|
|
background: subMenuItemBg,
|
2022-05-23 10:58:30 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
// Item
|
2022-10-18 17:04:06 +08:00
|
|
|
[`${componentCls}-item, ${componentCls}-submenu-title`]:
|
2023-06-06 16:11:18 +08:00
|
|
|
activeBarBorderWidth && activeBarWidth
|
2022-10-18 17:04:06 +08:00
|
|
|
? {
|
2023-06-06 16:11:18 +08:00
|
|
|
width: `calc(100% + ${activeBarBorderWidth}px)`,
|
2022-10-18 17:04:06 +08:00
|
|
|
}
|
|
|
|
: {},
|
2022-05-23 10:58:30 +08:00
|
|
|
|
|
|
|
[`${componentCls}-item`]: {
|
|
|
|
position: 'relative',
|
|
|
|
|
|
|
|
'&::after': {
|
|
|
|
position: 'absolute',
|
|
|
|
insetBlock: 0,
|
|
|
|
insetInlineEnd: 0,
|
2023-06-06 16:11:18 +08:00
|
|
|
borderInlineEnd: `${activeBarWidth}px solid ${itemSelectedColor}`,
|
2022-05-23 10:58:30 +08:00
|
|
|
transform: 'scaleY(0.0001)',
|
|
|
|
opacity: 0,
|
|
|
|
transition: [
|
2022-11-17 23:31:41 +08:00
|
|
|
`transform ${motionDurationMid} ${motionEaseOut}`,
|
|
|
|
`opacity ${motionDurationMid} ${motionEaseOut}`,
|
2022-05-23 10:58:30 +08:00
|
|
|
].join(','),
|
|
|
|
content: '""',
|
|
|
|
},
|
|
|
|
|
|
|
|
// Danger
|
|
|
|
[`&${componentCls}-item-danger`]: {
|
|
|
|
'&::after': {
|
2023-06-06 16:11:18 +08:00
|
|
|
borderInlineEndColor: dangerItemSelectedColor,
|
2022-05-23 10:58:30 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-selected, ${componentCls}-item-selected`]: {
|
|
|
|
'&::after': {
|
|
|
|
transform: 'scaleY(1)',
|
|
|
|
opacity: 1,
|
|
|
|
transition: [
|
2022-11-17 23:31:41 +08:00
|
|
|
`transform ${motionDurationMid} ${motionEaseInOut}`,
|
|
|
|
`opacity ${motionDurationMid} ${motionEaseInOut}`,
|
2022-05-23 10:58:30 +08:00
|
|
|
].join(','),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
export default getThemeStyle;
|