,
,
(
-
+
);
diff --git a/components/steps/style/horizontal.ts b/components/steps/style/horizontal.ts
new file mode 100644
index 0000000000..1c1c6b3e32
--- /dev/null
+++ b/components/steps/style/horizontal.ts
@@ -0,0 +1,19 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+
+import type { StepsToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+
+const genHorizontalStyle: GenerateStyle = (token) => {
+ const { componentCls } = token;
+ const stepsItemCls = `${componentCls}-item`; // .ant-steps-item
+
+ return {
+ [`${componentCls}-horizontal`]: {
+ [`${stepsItemCls}-tail`]: {
+ transform: 'translateY(-50%)',
+ },
+ },
+ };
+};
+
+export default genHorizontalStyle;
diff --git a/components/steps/style/index.ts b/components/steps/style/index.ts
index ddece39f8f..e467049702 100644
--- a/components/steps/style/index.ts
+++ b/components/steps/style/index.ts
@@ -6,6 +6,7 @@ import { genFocusOutline, resetComponent } from '../../style';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genStyleHooks, mergeToken } from '../../theme/internal';
import genStepsCustomIconStyle from './custom-icon';
+import genStepsHorizontalStyle from './horizontal';
import genStepsInlineStyle from './inline';
import genStepsLabelPlacementStyle from './label-placement';
import genStepsNavStyle from './nav';
@@ -241,7 +242,7 @@ const genStepsItemStyle: GenerateStyle = (token) => {
},
[`${stepsItemCls}-tail`]: {
position: 'absolute',
- top: token.calc(token.iconSize).div(2).sub(token.paddingXXS).equal(),
+ top: token.calc(token.iconSize).div(2).equal(),
insetInlineStart: 0,
width: '100%',
@@ -383,6 +384,8 @@ const genStepsStyle: GenerateStyle = (token) => {
...genStepsSmallStyle(token),
// vertical
...genStepsVerticalStyle(token),
+ // horizontal
+ ...genStepsHorizontalStyle(token),
// label-placement
...genStepsLabelPlacementStyle(token),
// progress-dot
diff --git a/components/steps/style/label-placement.ts b/components/steps/style/label-placement.ts
index 26f2ad09dc..48c1b1fa0a 100644
--- a/components/steps/style/label-placement.ts
+++ b/components/steps/style/label-placement.ts
@@ -14,7 +14,7 @@ const genStepsLabelPlacementStyle: GenerateStyle = (token
'&-tail': {
marginInlineStart: token.calc(iconSize).div(2).add(token.controlHeightLG).equal(),
- padding: `${unit(token.paddingXXS)} ${unit(token.paddingLG)}`,
+ padding: `0 ${unit(token.paddingLG)}`,
},
'&-content': {
diff --git a/components/steps/style/progress.ts b/components/steps/style/progress.ts
index 380183b94e..4f86bd97cf 100644
--- a/components/steps/style/progress.ts
+++ b/components/steps/style/progress.ts
@@ -4,53 +4,57 @@ import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
const genStepsProgressStyle: GenerateStyle = (token) => {
- const { antCls, componentCls } = token;
+ const {
+ antCls,
+ componentCls,
+ iconSize,
+ iconSizeSM,
+ processIconColor,
+ marginXXS,
+ lineWidthBold,
+ lineWidth,
+ paddingXXS,
+ } = token;
+
+ const progressSize = token.calc(iconSize).add(token.calc(lineWidthBold).mul(4).equal()).equal();
+ const progressSizeSM = token
+ .calc(iconSizeSM)
+ .add(token.calc(token.lineWidth).mul(4).equal())
+ .equal();
return {
[`&${componentCls}-with-progress`]: {
[`${componentCls}-item`]: {
- paddingTop: token.paddingXXS,
+ paddingTop: paddingXXS,
[`&-process ${componentCls}-item-container ${componentCls}-item-icon ${componentCls}-icon`]:
{
- color: token.processIconColor,
+ color: processIconColor,
},
},
[`&${componentCls}-vertical > ${componentCls}-item `]: {
- paddingInlineStart: token.paddingXXS,
+ paddingInlineStart: paddingXXS,
[`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
- top: token.marginXXS,
- insetInlineStart: token
- .calc(token.iconSize)
- .div(2)
- .sub(token.lineWidth)
- .add(token.paddingXXS)
- .equal(),
+ top: marginXXS,
+ insetInlineStart: token.calc(iconSize).div(2).sub(lineWidth).add(paddingXXS).equal(),
},
},
[`&, &${componentCls}-small`]: {
[`&${componentCls}-horizontal ${componentCls}-item:first-child`]: {
- paddingBottom: token.paddingXXS,
- paddingInlineStart: token.paddingXXS,
+ paddingBottom: paddingXXS,
+ paddingInlineStart: paddingXXS,
},
},
[`&${componentCls}-small${componentCls}-vertical > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]:
{
- insetInlineStart: token
- .calc(token.iconSizeSM)
- .div(2)
- .sub(token.lineWidth)
- .add(token.paddingXXS)
- .equal(),
+ insetInlineStart: token.calc(iconSizeSM).div(2).sub(lineWidth).add(paddingXXS).equal(),
},
- [`&${componentCls}-label-vertical`]: {
- [`${componentCls}-item ${componentCls}-item-tail`]: {
- top: token.calc(token.margin).sub(token.calc(token.lineWidth).mul(2).equal()).equal(),
- },
+ [`&${componentCls}-label-vertical ${componentCls}-item ${componentCls}-item-tail`]: {
+ top: token.calc(iconSize).div(2).add(paddingXXS).equal(),
},
[`${componentCls}-item-icon`]: {
@@ -58,26 +62,26 @@ const genStepsProgressStyle: GenerateStyle = (token) => {
[`${antCls}-progress`]: {
position: 'absolute',
- insetBlockStart: token
- .calc(
- token
- .calc(token.iconSize)
- .sub(token.stepsProgressSize)
- .sub(token.calc(token.lineWidth).mul(2).equal())
- .equal(),
- )
- .div(2)
- .equal(),
- insetInlineStart: token
- .calc(
- token
- .calc(token.iconSize)
- .sub(token.stepsProgressSize)
- .sub(token.calc(token.lineWidth).mul(2).equal())
- .equal(),
- )
- .div(2)
- .equal(),
+ insetInlineStart: '50%',
+ top: '50%',
+ transform: 'translate(-50%, -50%)',
+
+ '&-inner': {
+ width: `${progressSize} !important`,
+ height: `${progressSize} !important`,
+ },
+ },
+ },
+
+ // ============================== Small size ==============================
+ [`&${componentCls}-small`]: {
+ [`&${componentCls}-label-vertical ${componentCls}-item ${componentCls}-item-tail`]: {
+ top: token.calc(iconSizeSM).div(2).add(paddingXXS).equal(),
+ },
+
+ [`${componentCls}-item-icon ${antCls}-progress-inner`]: {
+ width: `${progressSizeSM} !important`,
+ height: `${progressSizeSM} !important`,
},
},
},