2023-11-13 09:38:05 +08:00
|
|
|
import { unit } from '@ant-design/cssinjs';
|
2024-04-08 14:04:08 +08:00
|
|
|
|
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-19 13:47:33 +08:00
|
|
|
const getHorizontalStyle: GenerateStyle<MenuToken> = (token) => {
|
2022-05-23 10:58:30 +08:00
|
|
|
const {
|
|
|
|
componentCls,
|
|
|
|
motionDurationSlow,
|
2023-07-17 10:13:22 +08:00
|
|
|
horizontalLineHeight,
|
2022-08-08 15:57:18 +08:00
|
|
|
colorSplit,
|
2022-05-23 10:58:30 +08:00
|
|
|
lineWidth,
|
|
|
|
lineType,
|
2023-07-17 10:13:22 +08:00
|
|
|
itemPaddingInline,
|
2022-05-23 10:58:30 +08:00
|
|
|
} = token;
|
|
|
|
|
|
|
|
return {
|
|
|
|
[`${componentCls}-horizontal`]: {
|
2023-07-17 10:13:22 +08:00
|
|
|
lineHeight: horizontalLineHeight,
|
2022-05-23 10:58:30 +08:00
|
|
|
border: 0,
|
2023-11-13 09:38:05 +08:00
|
|
|
borderBottom: `${unit(lineWidth)} ${lineType} ${colorSplit}`,
|
2022-05-23 10:58:30 +08:00
|
|
|
boxShadow: 'none',
|
|
|
|
|
|
|
|
'&::after': {
|
|
|
|
display: 'block',
|
|
|
|
clear: 'both',
|
|
|
|
height: 0,
|
|
|
|
content: '"\\20"',
|
|
|
|
},
|
|
|
|
|
|
|
|
// ======================= Item =======================
|
|
|
|
[`${componentCls}-item, ${componentCls}-submenu`]: {
|
|
|
|
position: 'relative',
|
|
|
|
display: 'inline-block',
|
|
|
|
verticalAlign: 'bottom',
|
2023-07-17 10:13:22 +08:00
|
|
|
paddingInline: itemPaddingInline,
|
2022-05-23 10:58:30 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
[`> ${componentCls}-item:hover,
|
|
|
|
> ${componentCls}-item-active,
|
|
|
|
> ${componentCls}-submenu ${componentCls}-submenu-title:hover`]: {
|
|
|
|
backgroundColor: 'transparent',
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
|
|
|
|
transition: [`border-color ${motionDurationSlow}`, `background ${motionDurationSlow}`].join(
|
|
|
|
',',
|
|
|
|
),
|
|
|
|
},
|
|
|
|
|
|
|
|
// ===================== Sub Menu =====================
|
|
|
|
[`${componentCls}-submenu-arrow`]: {
|
|
|
|
display: 'none',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
export default getHorizontalStyle;
|