2023-11-17 15:33:28 +08:00
|
|
|
import { unit, type CSSObject } from '@ant-design/cssinjs';
|
2022-10-28 16:44:19 +08:00
|
|
|
import { textEllipsis } from '../../style';
|
2022-04-19 11:28:06 +08:00
|
|
|
import type { StepsToken } from '.';
|
2022-11-23 20:22:38 +08:00
|
|
|
import type { GenerateStyle } from '../../theme/internal';
|
2022-04-19 11:28:06 +08:00
|
|
|
|
2022-11-19 13:47:33 +08:00
|
|
|
const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
|
2022-04-19 11:28:06 +08:00
|
|
|
const {
|
|
|
|
componentCls,
|
2023-05-09 19:24:50 +08:00
|
|
|
navContentMaxWidth,
|
|
|
|
navArrowColor,
|
2022-04-19 11:28:06 +08:00
|
|
|
stepsNavActiveColor,
|
|
|
|
motionDurationSlow,
|
|
|
|
} = token;
|
|
|
|
|
|
|
|
return {
|
|
|
|
[`&${componentCls}-navigation`]: {
|
2022-06-01 11:19:05 +08:00
|
|
|
paddingTop: token.paddingSM,
|
2022-04-19 11:28:06 +08:00
|
|
|
|
|
|
|
[`&${componentCls}-small`]: {
|
|
|
|
[`${componentCls}-item`]: {
|
|
|
|
'&-container': {
|
2023-11-17 15:33:28 +08:00
|
|
|
marginInlineStart: token.calc(token.marginSM).mul(-1).equal(),
|
2022-04-19 11:28:06 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-item`]: {
|
|
|
|
overflow: 'visible',
|
|
|
|
textAlign: 'center',
|
|
|
|
|
|
|
|
'&-container': {
|
|
|
|
display: 'inline-block',
|
2022-06-01 11:19:05 +08:00
|
|
|
height: '100%',
|
2023-11-17 15:33:28 +08:00
|
|
|
marginInlineStart: token.calc(token.margin).mul(-1).equal(),
|
2022-06-01 11:19:05 +08:00
|
|
|
paddingBottom: token.paddingSM,
|
2022-04-19 11:28:06 +08:00
|
|
|
textAlign: 'start',
|
|
|
|
transition: `opacity ${motionDurationSlow}`,
|
|
|
|
|
|
|
|
[`${componentCls}-item-content`]: {
|
2023-05-09 19:24:50 +08:00
|
|
|
maxWidth: navContentMaxWidth,
|
2022-04-19 11:28:06 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-item-title`]: {
|
2022-06-01 11:19:05 +08:00
|
|
|
maxWidth: '100%',
|
|
|
|
paddingInlineEnd: 0,
|
2022-10-28 16:44:19 +08:00
|
|
|
...textEllipsis,
|
2022-04-19 11:28:06 +08:00
|
|
|
|
|
|
|
'&::after': {
|
|
|
|
display: 'none',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`&:not(${componentCls}-item-active)`]: {
|
|
|
|
[`${componentCls}-item-container[role='button']`]: {
|
|
|
|
cursor: 'pointer',
|
|
|
|
|
|
|
|
'&:hover': {
|
2022-06-01 11:19:05 +08:00
|
|
|
opacity: 0.85,
|
2022-04-19 11:28:06 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
'&:last-child': {
|
|
|
|
flex: 1,
|
|
|
|
|
|
|
|
'&::after': {
|
|
|
|
display: 'none',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
'&::after': {
|
|
|
|
position: 'absolute',
|
2023-11-17 15:33:28 +08:00
|
|
|
top: `calc(50% - ${unit(token.calc(token.paddingSM).div(2).equal())})`,
|
2022-04-19 11:28:06 +08:00
|
|
|
insetInlineStart: '100%',
|
|
|
|
display: 'inline-block',
|
2022-06-01 11:19:05 +08:00
|
|
|
width: token.fontSizeIcon,
|
|
|
|
height: token.fontSizeIcon,
|
2023-11-17 15:33:28 +08:00
|
|
|
borderTop: `${unit(token.lineWidth)} ${token.lineType} ${navArrowColor}`,
|
2022-04-19 11:28:06 +08:00
|
|
|
borderBottom: 'none',
|
|
|
|
borderInlineStart: 'none',
|
2023-11-17 15:33:28 +08:00
|
|
|
borderInlineEnd: `${unit(token.lineWidth)} ${token.lineType} ${navArrowColor}`,
|
2022-06-01 11:19:05 +08:00
|
|
|
transform: 'translateY(-50%) translateX(-50%) rotate(45deg)',
|
2022-04-19 11:28:06 +08:00
|
|
|
content: '""',
|
|
|
|
},
|
|
|
|
|
|
|
|
'&::before': {
|
|
|
|
position: 'absolute',
|
2022-06-01 11:19:05 +08:00
|
|
|
bottom: 0,
|
2022-04-19 11:28:06 +08:00
|
|
|
insetInlineStart: '50%',
|
|
|
|
display: 'inline-block',
|
2022-06-01 11:19:05 +08:00
|
|
|
width: 0,
|
|
|
|
height: token.lineWidthBold,
|
2022-04-19 11:28:06 +08:00
|
|
|
backgroundColor: stepsNavActiveColor,
|
|
|
|
transition: `width ${motionDurationSlow}, inset-inline-start ${motionDurationSlow}`,
|
|
|
|
transitionTimingFunction: 'ease-out',
|
|
|
|
content: '""',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`${componentCls}-item${componentCls}-item-active::before`]: {
|
2022-06-01 11:19:05 +08:00
|
|
|
insetInlineStart: 0,
|
|
|
|
width: '100%',
|
2022-04-19 11:28:06 +08:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`&${componentCls}-navigation${componentCls}-vertical`]: {
|
|
|
|
[`> ${componentCls}-item`]: {
|
2022-11-01 15:06:38 +08:00
|
|
|
marginInlineEnd: 0,
|
2022-04-19 11:28:06 +08:00
|
|
|
|
|
|
|
'&::before': {
|
|
|
|
display: 'none',
|
|
|
|
},
|
|
|
|
[`&${componentCls}-item-active::before`]: {
|
2022-06-01 11:19:05 +08:00
|
|
|
top: 0,
|
|
|
|
insetInlineEnd: 0,
|
2022-04-19 11:28:06 +08:00
|
|
|
insetInlineStart: 'unset',
|
|
|
|
display: 'block',
|
2023-11-17 15:33:28 +08:00
|
|
|
width: token.calc(token.lineWidth).mul(3).equal(),
|
|
|
|
height: `calc(100% - ${unit(token.marginLG)})`,
|
2022-04-19 11:28:06 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
'&::after': {
|
|
|
|
position: 'relative',
|
|
|
|
insetInlineStart: '50%',
|
|
|
|
display: 'block',
|
2023-11-17 15:33:28 +08:00
|
|
|
width: token.calc(token.controlHeight).mul(0.25).equal(),
|
|
|
|
height: token.calc(token.controlHeight).mul(0.25).equal(),
|
2022-06-01 11:19:05 +08:00
|
|
|
marginBottom: token.marginXS,
|
2022-04-19 11:28:06 +08:00
|
|
|
textAlign: 'center',
|
2022-06-01 11:19:05 +08:00
|
|
|
transform: 'translateY(-50%) translateX(-50%) rotate(135deg)',
|
2022-04-19 11:28:06 +08:00
|
|
|
},
|
2023-09-02 00:11:52 +08:00
|
|
|
|
|
|
|
'&:last-child': {
|
|
|
|
'&::after': {
|
|
|
|
display: 'none',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2022-04-19 11:28:06 +08:00
|
|
|
[`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
|
|
|
visibility: 'hidden',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
[`&${componentCls}-navigation${componentCls}-horizontal`]: {
|
|
|
|
[`> ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
|
|
|
visibility: 'hidden',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
export default genStepsNavStyle;
|