test/ant-design-vue
1
0
Fork 0
mirror of https://gitee.com/ant-design-vue/ant-design-vue.git synced 2024-11-30 02:57:50 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

refactor:steps (#6264)

Browse Source 
* refactor:steps

* fix ...attrs

* fix StepsToken error

* docs:update & refactor: steps type
This commit is contained in:
果冻橙 2023-02-15 14:08:45 +08:00 committed by GitHub
parent 04e3819b0b
commit 3715ded674
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 1193 additions and 1028 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/steps/demo/progress.vue
View File

@ -22,4 +22,9 @@ Steps with progress.
<a-step title="In Progress" sub-title="Left 00:00:08" description="This is a description." />
<a-step title="Waiting" description="This is a description." />
</a-steps>
<a-steps :percent="60" :current="1" size="small">
<a-step title="Finished" description="This is a description." />
<a-step title="In Progress" sub-title="Left 00:00:08" description="This is a description." />
<a-step title="Waiting" description="This is a description." />
</a-steps>
</template>

2
components/steps/index.en-US.md
View File

@ -3,7 +3,7 @@ category: Components
type: Navigation
cols: 1
title: Steps
cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*677sTqCpE3wAAAAAAAAAAAAADrJ8AQ/original
---
`Steps` is a navigation bar that guides users through the steps of a task.

53
components/steps/index.tsx
View File

@ -1,4 +1,4 @@
import type { App, ExtractPropTypes, PropType } from 'vue';
import type { App, ExtractPropTypes } from 'vue';
import { computed, defineComponent } from 'vue';
import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
import CheckOutlined from '@ant-design/icons-vue/CheckOutlined';
@ -13,6 +13,11 @@ import omit from '../_util/omit';
import { VcStepProps } from '../vc-steps/Step';
import type { ProgressDotRender } from '../vc-steps/Steps';
import type { MouseEventHandler } from '../_util/EventInterface';
import { booleanType, stringType, functionType, someType } from '../_util/type';
// CSSINJS
import useStyle from './style';
import { useToken } from '../theme/internal';
export const stepsProps = () => ({
prefixCls: String,
@ -20,28 +25,28 @@ export const stepsProps = () => ({
current: Number,
initial: Number,
percent: Number,
responsive: { type: Boolean, default: undefined },
labelPlacement: String as PropType<'horizontal' | 'vertical'>,
status: String as PropType<'wait' | 'process' | 'finish' | 'error'>,
size: String as PropType<'default' | 'small'>,
direction: String as PropType<'horizontal' | 'vertical'>,
progressDot: {
type: [Boolean, Function] as PropType<boolean | ProgressDotRender>,
default: undefined as boolean | ProgressDotRender,
},
type: String as PropType<'default' | 'navigation'>,
onChange: Function as PropType<(current: number) => void>,
'onUpdate:current': Function as PropType<(current: number) => void>,
responsive: booleanType(),
labelPlacement: stringType<'horizontal' | 'vertical'>(),
status: stringType<'wait' | 'process' | 'finish' | 'error'>(),
size: stringType<'default' | 'small'>(),
direction: stringType<'horizontal' | 'vertical'>(),
progressDot: someType<boolean | ProgressDotRender>(
[Boolean, Function],
undefined as boolean | ProgressDotRender,
),
type: stringType<'default' | 'navigation'>(),
onChange: functionType<(current: number) => void>(),
'onUpdate:current': functionType<(current: number) => void>(),
});
export const stepProps = () => ({
description: PropTypes.any,
icon: PropTypes.any,
status: String as PropType<'wait' | 'process' | 'finish' | 'error'>,
disabled: { type: Boolean, default: undefined },
status: stringType<'wait' | 'process' | 'finish' | 'error'>(),
disabled: booleanType(),
title: PropTypes.any,
subTitle: PropTypes.any,
onClick: Function as PropType<MouseEventHandler>,
onClick: functionType<MouseEventHandler>(),
});
export type StepsProps = Partial<ExtractPropTypes<ReturnType<typeof stepsProps>>>;
@ -61,6 +66,13 @@ const Steps = defineComponent({
// emits: ['update:current', 'change'],
setup(props, { attrs, slots, emit }) {
const { prefixCls, direction: rtlDirection, configProvider } = useConfigInject('steps', props);
// 接入换肤
const [, token] = useToken();
// style
const [wrapSSR, hashId] = useStyle(prefixCls);
const screens = useBreakpoint();
const direction = computed(() =>
props.responsive && screens.value.xs ? 'vertical' : props.direction,
@ -84,11 +96,12 @@ const Steps = defineComponent({
// currently it's hard-coded, since we can't easily read the actually width of icon
const progressWidth = props.size === 'small' ? 32 : 40;
const iconWithProgress = (
<div class={`${prefixCls}-progress-icon`}>
<div class={`${prefixCls.value}-progress-icon`}>
<Progress
type="circle"
percent={props.percent}
width={progressWidth}
strokeColor={token.value.colorPrimary}
strokeWidth={4}
format={() => null}
/>
@ -106,14 +119,16 @@ const Steps = defineComponent({
[`${prefixCls.value}-with-progress`]: props.percent !== undefined,
},
attrs.class,
hashId.value,
);
const icons = {
finish: <CheckOutlined class={`${prefixCls}-finish-icon`} />,
error: <CloseOutlined class={`${prefixCls}-error-icon`} />,
};
return (
return wrapSSR(
<VcSteps
icons={icons}
{...attrs}
{...omit(props, ['percent', 'responsive'])}
direction={direction.value}
prefixCls={prefixCls.value}
@ -121,7 +136,7 @@ const Steps = defineComponent({
class={stepsClassName}
onChange={handleChange}
v-slots={{ ...slots, stepIcon: stepIconRender }}
/>
/>,
);
};
},

2
components/steps/index.zh-CN.md
View File

@ -4,7 +4,7 @@ subtitle: 步骤条
type: 导航
cols: 1
title: Steps
cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*677sTqCpE3wAAAAAAAAAAAAADrJ8AQ/original
---
引导用户按照流程完成任务的导航条。

32
components/steps/style/custom-icon.less
View File

@ -1,32 +0,0 @@
.@{steps-prefix-cls}-item-custom {
> .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-icon {
height: auto;
background: none;
border: 0;
> .@{steps-prefix-cls}-icon {
top: @steps-icon-custom-top;
left: 0.5px;
width: @steps-icon-custom-size;
height: @steps-icon-custom-size;
font-size: @steps-icon-custom-font-size;
line-height: @steps-icon-custom-size;
}
}
&.@{steps-prefix-cls}-item-process {
.@{steps-prefix-cls}-item-icon > .@{steps-prefix-cls}-icon {
color: @process-icon-color;
}
}
}
// Only adjust horizontal customize icon width
.@{steps-prefix-cls} {
&:not(.@{steps-prefix-cls}-vertical) {
.@{steps-prefix-cls}-item-custom {
.@{steps-prefix-cls}-item-icon {
width: auto;
background: none;
}
}
}
}

36
components/steps/style/custom-icon.ts Normal file
View File

@ -0,0 +1,36 @@
import type { CSSObject } from '../../_util/cssinjs';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
const genStepsCustomIconStyle: GenerateStyle<StepsToken, CSSObject> = token => {
const { componentCls, stepsIconCustomTop, stepsIconCustomSize, stepsIconCustomFontSize } = token;
return {
[`${componentCls}-item-custom`]: {
[`> ${componentCls}-item-container > ${componentCls}-item-icon`]: {
height: 'auto',
background: 'none',
border: 0,
[`> ${componentCls}-icon`]: {
top: stepsIconCustomTop,
width: stepsIconCustomSize,
height: stepsIconCustomSize,
fontSize: stepsIconCustomFontSize,
lineHeight: `${stepsIconCustomSize}px`,
},
},
},
// Only adjust horizontal customize icon width
[`&:not(${componentCls}-vertical)`]: {
[`${componentCls}-item-custom`]: {
[`${componentCls}-item-icon`]: {
width: 'auto',
background: 'none',
},
},
},
};
};
export default genStepsCustomIconStyle;

255
components/steps/style/index.less
View File

@ -1,255 +0,0 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
@steps-prefix-cls: ~'@{ant-prefix}-steps';
@process-icon-color: @primary-color;
@process-title-color: @heading-color;
@process-description-color: @text-color;
@process-icon-text-color: @text-color-inverse;
@wait-icon-color: @disabled-color;
@wait-title-color: @text-color-secondary;
@wait-description-color: @wait-title-color;
@wait-tail-color: @process-tail-color;
@finish-icon-color: @process-icon-color;
@finish-title-color: @text-color;
@finish-description-color: @text-color-secondary;
@finish-tail-color: @primary-color;
@error-icon-color: @error-color;
@error-title-color: @error-color;
@error-description-color: @error-color;
@error-tail-color: @wait-tail-color;
@steps-nav-active-color: @primary-color;
.@{steps-prefix-cls} {
.reset-component();
display: flex;
width: 100%;
font-size: 0;
text-align: initial;
}
.@{steps-prefix-cls}-item {
position: relative;
display: inline-block;
flex: 1;
overflow: hidden;
vertical-align: top;
&-container {
outline: none;
}
&:last-child {
flex: none;
}
&:last-child > &-container > &-tail,
&:last-child > &-container > &-content > &-title::after {
display: none;
}
&-icon,
&-content {
display: inline-block;
vertical-align: top;
}
&-icon {
width: @steps-icon-size;
height: @steps-icon-size;
margin: @steps-icon-margin;
font-size: @steps-icon-font-size;
font-family: @font-family;
line-height: @steps-icon-size;
text-align: center;
border: @border-width-base @border-style-base @wait-icon-color;
border-radius: @steps-icon-size;
transition: background-color 0.3s, border-color 0.3s;
.@{steps-prefix-cls}-icon {
position: relative;
top: @steps-icon-top;
color: @primary-color;
line-height: 1;
}
}
&-tail {
position: absolute;
top: 12px;
left: 0;
width: 100%;
padding: 0 10px;
&::after {
display: inline-block;
width: 100%;
height: 1px;
background: @border-color-split;
border-radius: 1px;
transition: background 0.3s;
content: '';
}
}
&-title {
position: relative;
display: inline-block;
padding-right: 16px;
color: @text-color;
font-size: @font-size-lg;
line-height: @steps-title-line-height;
&::after {
position: absolute;
top: (@steps-title-line-height / 2);
left: 100%;
display: block;
width: 9999px;
height: 1px;
background: @wait-tail-color;
content: '';
}
}
&-subtitle {
display: inline;
margin-left: 8px;
color: @text-color-secondary;
font-weight: normal;
font-size: @font-size-base;
}
&-description {
color: @text-color-secondary;
font-size: @font-size-base;
}
.step-item-status(wait);
.step-item-status(process);
&-process > &-container > &-icon {
background: @process-icon-color;
.@{steps-prefix-cls}-icon {
color: @process-icon-text-color;
}
}
&-process > &-container > &-title {
font-weight: 500;
}
.step-item-status(finish);
.step-item-status(error);
&.@{steps-prefix-cls}-next-error .@{steps-prefix-cls}-item-title::after {
background: @error-icon-color;
}
&-disabled {
cursor: not-allowed;
}
}
// ===================== Clickable =====================
.@{steps-prefix-cls} .@{steps-prefix-cls}-item {
&:not(.@{steps-prefix-cls}-item-active) {
& > .@{steps-prefix-cls}-item-container[role='button'] {
cursor: pointer;
.@{steps-prefix-cls}-item {
&-title,
&-subtitle,
&-description,
&-icon .@{steps-prefix-cls}-icon {
transition: color 0.3s;
}
}
&:hover {
.@{steps-prefix-cls}-item {
&-title,
&-subtitle,
&-description {
color: @primary-color;
}
}
}
}
&:not(.@{steps-prefix-cls}-item-process) {
& > .@{steps-prefix-cls}-item-container[role='button']:hover {
.@{steps-prefix-cls}-item {
&-icon {
border-color: @primary-color;
.@{steps-prefix-cls}-icon {
color: @primary-color;
}
}
}
}
}
}
}
.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
.@{steps-prefix-cls}-item {
padding-left: 16px;
white-space: nowrap;
&:first-child {
padding-left: 0;
}
&:last-child .@{steps-prefix-cls}-item-title {
padding-right: 0;
}
&-tail {
display: none;
}
&-description {
max-width: @steps-description-max-width;
white-space: normal;
}
}
}
.step-item-status(@status) {
@icon-color: '@{status}-icon-color';
@title-color: '@{status}-title-color';
@description-color: '@{status}-description-color';
@tail-color: '@{status}-tail-color';
&-@{status} &-icon {
background-color: @steps-background;
border-color: @@icon-color;
> .@{steps-prefix-cls}-icon {
color: @@icon-color;
.@{steps-prefix-cls}-icon-dot {
background: @@icon-color;
}
}
}
&-@{status} > &-container > &-content > &-title {
color: @@title-color;
&::after {
background-color: @@tail-color;
}
}
&-@{status} > &-container > &-content > &-description {
color: @@description-color;
}
&-@{status} > &-container > &-tail::after {
background-color: @@tail-color;
}
}
@import './custom-icon';
@import './small';
@import './vertical';
@import './label-placement';
@import './progress-dot';
@import './nav';
@import './rtl';
@import './progress.less';

412
components/steps/style/index.tsx
View File

@ -1,6 +1,408 @@
import '../../style/index.less';
import './index.less';
import type { CSSObject } from '../../_util/cssinjs';
import type { FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import genStepsCustomIconStyle from './custom-icon';
import genStepsLabelPlacementStyle from './label-placement';
import genStepsNavStyle from './nav';
import genStepsProgressStyle from './progress';
import genStepsProgressDotStyle from './progress-dot';
import genStepsRTLStyle from './rtl';
import genStepsSmallStyle from './small';
import genStepsVerticalStyle from './vertical';
import genStepsInlineStyle from './inline';
import { resetComponent } from '../../_style';
// style dependencies
// deps-lint-skip: grid
import '../../progress/style';
export interface ComponentToken {
descriptionWidth: number;
}
export interface StepsToken extends FullToken<'Steps'> {
// Steps variable default.less
processTailColor: string;
stepsNavArrowColor: string;
stepsIconSize: number;
stepsIconCustomSize: number;
stepsIconCustomTop: number;
stepsIconCustomFontSize: number;
stepsIconTop: number;
stepsIconFontSize: number;
stepsTitleLineHeight: number;
stepsSmallIconSize: number;
stepsDotSize: number;
stepsCurrentDotSize: number;
stepsNavContentMaxWidth: string;
// Steps component less variable
processIconColor: string;
processTitleColor: string;
processDescriptionColor: string;
processIconBgColor: string;
processIconBorderColor: string;
processDotColor: string;
waitIconColor: string;
waitTitleColor: string;
waitDescriptionColor: string;
waitTailColor: string;
waitIconBgColor: string;
waitIconBorderColor: string;
waitDotColor: string;
finishIconColor: string;
finishTitleColor: string;
finishDescriptionColor: string;
finishTailColor: string;
finishIconBgColor: string;
finishIconBorderColor: string;
finishDotColor: string;
errorIconColor: string;
errorTitleColor: string;
errorDescriptionColor: string;
errorTailColor: string;
errorIconBgColor: string;
errorIconBorderColor: string;
errorDotColor: string;
stepsNavActiveColor: string;
stepsProgressSize: number;
// Steps inline variable
inlineDotSize: number;
inlineTitleColor: string;
inlineTailColor: string;
}
enum StepItemStatusEnum {
wait = 'wait',
process = 'process',
finish = 'finish',
error = 'error',
}
const genStepsItemStatusStyle = (status: StepItemStatusEnum, token: StepsToken): CSSObject => {
const prefix = `${token.componentCls}-item`;
const iconColorKey: keyof StepsToken = `${status}IconColor`;
const titleColorKey: keyof StepsToken = `${status}TitleColor`;
const descriptionColorKey: keyof StepsToken = `${status}DescriptionColor`;
const tailColorKey: keyof StepsToken = `${status}TailColor`;
const iconBgColorKey: keyof StepsToken = `${status}IconBgColor`;
const iconBorderColorKey: keyof StepsToken = `${status}IconBorderColor`;
const dotColorKey: keyof StepsToken = `${status}DotColor`;
return {
[`${prefix}-${status} ${prefix}-icon`]: {
backgroundColor: token[iconBgColorKey],
borderColor: token[iconBorderColorKey],
[`> ${token.componentCls}-icon`]: {
color: token[iconColorKey],
[`${token.componentCls}-icon-dot`]: {
background: token[dotColorKey],
},
},
},
[`${prefix}-${status}${prefix}-custom ${prefix}-icon`]: {
[`> ${token.componentCls}-icon`]: {
color: token[dotColorKey],
},
},
[`${prefix}-${status} > ${prefix}-container > ${prefix}-content > ${prefix}-title`]: {
color: token[titleColorKey],
'&::after': {
backgroundColor: token[tailColorKey],
},
},
[`${prefix}-${status} > ${prefix}-container > ${prefix}-content > ${prefix}-description`]: {
color: token[descriptionColorKey],
},
[`${prefix}-${status} > ${prefix}-container > ${prefix}-tail::after`]: {
backgroundColor: token[tailColorKey],
},
};
};
const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
const { componentCls, motionDurationSlow } = token;
const stepsItemCls = `${componentCls}-item`; // .ant-steps-item
return {
[stepsItemCls]: {
position: 'relative',
display: 'inline-block',
flex: 1,
overflow: 'hidden',
verticalAlign: 'top',
'&:last-child': {
flex: 'none',
[`> ${stepsItemCls}-container > ${stepsItemCls}-tail, > ${stepsItemCls}-container > ${stepsItemCls}-content > ${stepsItemCls}-title::after`]:
{
display: 'none',
},
},
},
[`${stepsItemCls}-container`]: {
outline: 'none',
},
[`${stepsItemCls}-icon, ${stepsItemCls}-content`]: {
display: 'inline-block',
verticalAlign: 'top',
},
[`${stepsItemCls}-icon`]: {
width: token.stepsIconSize,
height: token.stepsIconSize,
marginTop: 0,
marginBottom: 0,
marginInlineStart: 0,
marginInlineEnd: token.marginXS,
fontSize: token.stepsIconFontSize,
fontFamily: token.fontFamily,
lineHeight: `${token.stepsIconSize}px`,
textAlign: 'center',
borderRadius: token.stepsIconSize,
border: `${token.lineWidth}px ${token.lineType} transparent`,
transition: `background-color ${motionDurationSlow}, border-color ${motionDurationSlow}`,
[`${componentCls}-icon`]: {
position: 'relative',
top: token.stepsIconTop,
color: token.colorPrimary,
lineHeight: 1,
},
},
[`${stepsItemCls}-tail`]: {
position: 'absolute',
top: token.stepsIconSize / 2 - token.paddingXXS,
insetInlineStart: 0,
width: '100%',
'&::after': {
display: 'inline-block',
width: '100%',
height: token.lineWidth,
background: token.colorSplit,
borderRadius: token.lineWidth,
transition: `background ${motionDurationSlow}`,
content: '""',
},
},
[`${stepsItemCls}-title`]: {
position: 'relative',
display: 'inline-block',
paddingInlineEnd: token.padding,
color: token.colorText,
fontSize: token.fontSizeLG,
lineHeight: `${token.stepsTitleLineHeight}px`,
'&::after': {
position: 'absolute',
top: token.stepsTitleLineHeight / 2,
insetInlineStart: '100%',
display: 'block',
width: 9999,
height: token.lineWidth,
background: token.processTailColor,
content: '""',
},
},
[`${stepsItemCls}-subtitle`]: {
display: 'inline',
marginInlineStart: token.marginXS,
color: token.colorTextDescription,
fontWeight: 'normal',
fontSize: token.fontSize,
},
[`${stepsItemCls}-description`]: {
color: token.colorTextDescription,
fontSize: token.fontSize,
},
...genStepsItemStatusStyle(StepItemStatusEnum.wait, token),
...genStepsItemStatusStyle(StepItemStatusEnum.process, token),
[`${stepsItemCls}-process > ${stepsItemCls}-container > ${stepsItemCls}-title`]: {
fontWeight: token.fontWeightStrong,
},
...genStepsItemStatusStyle(StepItemStatusEnum.finish, token),
...genStepsItemStatusStyle(StepItemStatusEnum.error, token),
[`${stepsItemCls}${componentCls}-next-error > ${componentCls}-item-title::after`]: {
background: token.colorError,
},
[`${stepsItemCls}-disabled`]: {
cursor: 'not-allowed',
},
};
};
// ============================= Clickable ===========================
const genStepsClickableStyle: GenerateStyle<StepsToken, CSSObject> = token => {
const { componentCls, motionDurationSlow } = token;
return {
[`& ${componentCls}-item`]: {
[`&:not(${componentCls}-item-active)`]: {
[`& > ${componentCls}-item-container[role='button']`]: {
cursor: 'pointer',
[`${componentCls}-item`]: {
[`&-title, &-subtitle, &-description, &-icon ${componentCls}-icon`]: {
transition: `color ${motionDurationSlow}`,
},
},
'&:hover': {
[`${componentCls}-item`]: {
[`&-title, &-subtitle, &-description`]: {
color: token.colorPrimary,
},
},
},
},
[`&:not(${componentCls}-item-process)`]: {
[`& > ${componentCls}-item-container[role='button']:hover`]: {
[`${componentCls}-item`]: {
'&-icon': {
borderColor: token.colorPrimary,
[`${componentCls}-icon`]: {
color: token.colorPrimary,
},
},
},
},
},
},
},
[`&${componentCls}-horizontal:not(${componentCls}-label-vertical)`]: {
[`${componentCls}-item`]: {
paddingInlineStart: token.padding,
whiteSpace: 'nowrap',
'&:first-child': {
paddingInlineStart: 0,
},
[`&:last-child ${componentCls}-item-title`]: {
paddingInlineEnd: 0,
},
'&-tail': {
display: 'none',
},
'&-description': {
maxWidth: token.descriptionWidth,
whiteSpace: 'normal',
},
},
},
};
};
const genStepsStyle: GenerateStyle<StepsToken, CSSObject> = token => {
const { componentCls } = token; // .ant-steps
return {
[componentCls]: {
...resetComponent(token),
display: 'flex',
width: '100%',
fontSize: 0,
textAlign: 'initial',
// single Item
...genStepsItemStyle(token),
// Clickable
...genStepsClickableStyle(token),
// custom-icon
...genStepsCustomIconStyle(token),
// small
...genStepsSmallStyle(token),
// vertical
...genStepsVerticalStyle(token),
// label-placement
...genStepsLabelPlacementStyle(token),
// progress-dot
...genStepsProgressDotStyle(token),
// nav
...genStepsNavStyle(token),
// rtl
...genStepsRTLStyle(token),
// progress
...genStepsProgressStyle(token),
// inline
...genStepsInlineStyle(token),
},
};
};
// ============================== Export ==============================
export default genComponentStyleHook(
'Steps',
token => {
const {
wireframe,
colorTextDisabled,
fontSizeHeading3,
fontSize,
controlHeight,
controlHeightLG,
colorTextLightSolid,
colorText,
colorPrimary,
colorTextLabel,
colorTextDescription,
colorTextQuaternary,
colorFillContent,
controlItemBgActive,
colorError,
colorBgContainer,
colorBorderSecondary,
} = token;
const stepsIconSize = token.controlHeight;
const processTailColor = token.colorSplit;
const stepsToken = mergeToken<StepsToken>(token, {
// Steps variable default.less
processTailColor,
stepsNavArrowColor: colorTextDisabled,
stepsIconSize,
stepsIconCustomSize: stepsIconSize,
stepsIconCustomTop: 0,
stepsIconCustomFontSize: controlHeightLG / 2,
stepsIconTop: -0.5, // magic for ui experience
stepsIconFontSize: fontSize,
stepsTitleLineHeight: controlHeight,
stepsSmallIconSize: fontSizeHeading3,
stepsDotSize: controlHeight / 4,
stepsCurrentDotSize: controlHeightLG / 4,
stepsNavContentMaxWidth: 'auto',
// Steps component less variable
processIconColor: colorTextLightSolid,
processTitleColor: colorText,
processDescriptionColor: colorText,
processIconBgColor: colorPrimary,
processIconBorderColor: colorPrimary,
processDotColor: colorPrimary,
waitIconColor: wireframe ? colorTextDisabled : colorTextLabel,
waitTitleColor: colorTextDescription,
waitDescriptionColor: colorTextDescription,
waitTailColor: processTailColor,
waitIconBgColor: wireframe ? colorBgContainer : colorFillContent,
waitIconBorderColor: wireframe ? colorTextDisabled : 'transparent',
waitDotColor: colorTextDisabled,
finishIconColor: colorPrimary,
finishTitleColor: colorText,
finishDescriptionColor: colorTextDescription,
finishTailColor: colorPrimary,
finishIconBgColor: wireframe ? colorBgContainer : controlItemBgActive,
finishIconBorderColor: wireframe ? colorPrimary : controlItemBgActive,
finishDotColor: colorPrimary,
errorIconColor: colorTextLightSolid,
errorTitleColor: colorError,
errorDescriptionColor: colorError,
errorTailColor: processTailColor,
errorIconBgColor: colorError,
errorIconBorderColor: colorError,
errorDotColor: colorError,
stepsNavActiveColor: colorPrimary,
stepsProgressSize: controlHeightLG,
// Steps inline variable
inlineDotSize: 6,
inlineTitleColor: colorTextQuaternary,
inlineTailColor: colorBorderSecondary,
});
return [genStepsStyle(stepsToken)];
},
{
descriptionWidth: 140,
},
);

124
components/steps/style/inline.ts Normal file
View File

@ -0,0 +1,124 @@
import type { CSSObject } from '../../_util/cssinjs';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
const genStepsInlineStyle: GenerateStyle<StepsToken, CSSObject> = token => {
const { componentCls, inlineDotSize, inlineTitleColor, inlineTailColor } = token;
const containerPaddingTop = token.paddingXS + token.lineWidth;
const titleStyle = {
[`${componentCls}-item-container ${componentCls}-item-content ${componentCls}-item-title`]: {
color: inlineTitleColor,
},
};
return {
[`&${componentCls}-inline`]: {
width: 'auto',
display: 'inline-flex',
[`${componentCls}-item`]: {
flex: 'none',
'&-container': {
padding: `${containerPaddingTop}px ${token.paddingXXS}px 0`,
margin: `0 ${token.marginXXS / 2}px`,
borderRadius: token.borderRadiusSM,
cursor: 'pointer',
transition: `background-color ${token.motionDurationMid}`,
'&:hover': {
background: token.controlItemBgHover,
},
[`&[role='button']:hover`]: {
opacity: 1,
},
},
'&-icon': {
width: inlineDotSize,
height: inlineDotSize,
marginInlineStart: `calc(50% - ${inlineDotSize / 2}px)`,
[`> ${componentCls}-icon`]: {
top: 0,
},
[`${componentCls}-icon-dot`]: {
borderRadius: token.fontSizeSM / 4,
},
},
'&-content': {
width: 'auto',
marginTop: token.marginXS - token.lineWidth,
},
'&-title': {
color: inlineTitleColor,
fontSize: token.fontSizeSM,
lineHeight: token.lineHeightSM,
fontWeight: 'normal',
marginBottom: token.marginXXS / 2,
},
'&-description': {
display: 'none',
},
'&-tail': {
marginInlineStart: 0,
top: containerPaddingTop + inlineDotSize / 2,
transform: `translateY(-50%)`,
'&:after': {
width: '100%',
height: token.lineWidth,
borderRadius: 0,
marginInlineStart: 0,
background: inlineTailColor,
},
},
[`&:first-child ${componentCls}-item-tail`]: {
width: '50%',
marginInlineStart: '50%',
},
[`&:last-child ${componentCls}-item-tail`]: {
display: 'block',
width: '50%',
},
'&-wait': {
[`${componentCls}-item-icon ${componentCls}-icon ${componentCls}-icon-dot`]: {
backgroundColor: token.colorBorderBg,
border: `${token.lineWidth}px ${token.lineType} ${inlineTailColor}`,
},
...titleStyle,
},
'&-finish': {
[`${componentCls}-item-tail::after`]: {
backgroundColor: inlineTailColor,
},
[`${componentCls}-item-icon ${componentCls}-icon ${componentCls}-icon-dot`]: {
backgroundColor: inlineTailColor,
border: `${token.lineWidth}px ${token.lineType} ${inlineTailColor}`,
},
...titleStyle,
},
'&-error': titleStyle,
'&-active, &-process': {
[`${componentCls}-item-icon`]: {
width: inlineDotSize,
height: inlineDotSize,
marginInlineStart: `calc(50% - ${inlineDotSize / 2}px)`,
top: 0,
},
...titleStyle,
},
[`&:not(${componentCls}-item-active) > ${componentCls}-item-container[role='button']:hover`]:
{
[`${componentCls}-item-title`]: {
color: inlineTitleColor,
},
},
},
},
};
};
export default genStepsInlineStyle;

45
components/steps/style/label-placement.less
View File

@ -1,45 +0,0 @@
.@{steps-prefix-cls}-label-vertical {
.@{steps-prefix-cls}-item {
overflow: visible;
&-tail {
margin-left: 58px;
padding: 3.5px 24px;
}
&-content {
display: block;
width: ((@steps-icon-size / 2) + 42px) * 2;
margin-top: 8px;
text-align: center;
}
&-icon {
display: inline-block;
margin-left: 42px;
}
&-title {
padding-right: 0;
padding-left: 0;
&::after {
display: none;
}
}
&-subtitle {
display: block;
margin-bottom: 4px;
margin-left: 0;
line-height: @line-height-base;
}
}
&.@{steps-prefix-cls}-small:not(.@{steps-prefix-cls}-dot) {
.@{steps-prefix-cls}-item {
&-icon {
margin-left: 46px;
}
}
}
}

56
components/steps/style/label-placement.ts Normal file
View File

@ -0,0 +1,56 @@
import type { CSSObject } from '../../_util/cssinjs';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = token => {
const { componentCls, stepsIconSize, lineHeight, stepsSmallIconSize } = token;
return {
[`&${componentCls}-label-vertical`]: {
[`${componentCls}-item`]: {
overflow: 'visible',
'&-tail': {
marginInlineStart: stepsIconSize / 2 + token.controlHeightLG,
padding: `${token.paddingXXS}px ${token.paddingLG}px`,
},
'&-content': {
display: 'block',
width: (stepsIconSize / 2 + token.controlHeightLG) * 2,
marginTop: token.marginSM,
textAlign: 'center',
},
'&-icon': {
display: 'inline-block',
marginInlineStart: token.controlHeightLG,
},
'&-title': {
paddingInlineEnd: 0,
paddingInlineStart: 0,
'&::after': {
display: 'none',
},
},
'&-subtitle': {
display: 'block',
marginBottom: token.marginXXS,
marginInlineStart: 0,
lineHeight,
},
},
[`&${componentCls}-small:not(${componentCls}-dot)`]: {
[`${componentCls}-item`]: {
'&-icon': {
marginInlineStart: token.controlHeightLG + (stepsIconSize - stepsSmallIconSize) / 2,
},
},
},
},
};
};
export default genStepsLabelPlacementStyle;

134
components/steps/style/nav.less
View File

@ -1,134 +0,0 @@
.@{steps-prefix-cls}-navigation {
padding-top: 12px;
&.@{steps-prefix-cls}-small {
.@{steps-prefix-cls}-item {
&-container {
margin-left: -12px;
}
}
}
.@{steps-prefix-cls}-item {
overflow: visible;
text-align: center;
&-container {
display: inline-block;
height: 100%;
margin-left: -16px;
padding-bottom: 12px;
text-align: left;
transition: opacity 0.3s;
.@{steps-prefix-cls}-item-content {
max-width: @steps-nav-content-max-width;
}
.@{steps-prefix-cls}-item-title {
max-width: 100%;
padding-right: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&::after {
display: none;
}
}
}
&:not(.@{steps-prefix-cls}-item-active) {
.@{steps-prefix-cls}-item-container[role='button'] {
cursor: pointer;
&:hover {
opacity: 0.85;
}
}
}
&:last-child {
flex: 1;
&::after {
display: none;
}
}
&::after {
position: absolute;
top: 50%;
left: 100%;
display: inline-block;
width: 12px;
height: 12px;
margin-top: -14px;
margin-left: -2px;
border: 1px solid @steps-nav-arrow-color;
border-bottom: none;
border-left: none;
transform: rotate(45deg);
content: '';
}
&::before {
position: absolute;
bottom: 0;
left: 50%;
display: inline-block;
width: 0;
height: 2px;
background-color: @steps-nav-active-color;
transition: width 0.3s, left 0.3s;
transition-timing-function: ease-out;
content: '';
}
}
.@{steps-prefix-cls}-item.@{steps-prefix-cls}-item-active::before {
left: 0;
width: 100%;
}
}
.@{steps-prefix-cls}-navigation.@{steps-prefix-cls}-vertical {
> .@{steps-prefix-cls}-item {
margin-right: 0 !important;
&::before {
display: none;
}
&.@{steps-prefix-cls}-item-active::before {
top: 0;
right: 0;
left: unset;
display: block;
width: 3px;
height: calc(100% - 24px);
}
&::after {
position: relative;
top: -2px;
left: 50%;
display: block;
width: 8px;
height: 8px;
margin-bottom: 8px;
text-align: center;
transform: rotate(135deg);
}
> .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
visibility: hidden;
}
}
}
.@{steps-prefix-cls}-navigation.@{steps-prefix-cls}-horizontal {
> .@{steps-prefix-cls}-item
> .@{steps-prefix-cls}-item-container
> .@{steps-prefix-cls}-item-tail {
visibility: hidden;
}
}

146
components/steps/style/nav.ts Normal file
View File

@ -0,0 +1,146 @@
import type { CSSObject } from '../../_util/cssinjs';
import { textEllipsis } from '../../_style';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {
const {
componentCls,
stepsNavContentMaxWidth,
stepsNavArrowColor,
stepsNavActiveColor,
motionDurationSlow,
} = token;
return {
[`&${componentCls}-navigation`]: {
paddingTop: token.paddingSM,
[`&${componentCls}-small`]: {
[`${componentCls}-item`]: {
'&-container': {
marginInlineStart: -token.marginSM,
},
},
},
[`${componentCls}-item`]: {
overflow: 'visible',
textAlign: 'center',
'&-container': {
display: 'inline-block',
height: '100%',
marginInlineStart: -token.margin,
paddingBottom: token.paddingSM,
textAlign: 'start',
transition: `opacity ${motionDurationSlow}`,
[`${componentCls}-item-content`]: {
maxWidth: stepsNavContentMaxWidth,
},
[`${componentCls}-item-title`]: {
maxWidth: '100%',
paddingInlineEnd: 0,
...textEllipsis,
'&::after': {
display: 'none',
},
},
},
[`&:not(${componentCls}-item-active)`]: {
[`${componentCls}-item-container[role='button']`]: {
cursor: 'pointer',
'&:hover': {
opacity: 0.85,
},
},
},
'&:last-child': {
flex: 1,
'&::after': {
display: 'none',
},
},
'&::after': {
position: 'absolute',
top: `calc(50% - ${token.paddingSM / 2}px)`,
insetInlineStart: '100%',
display: 'inline-block',
width: token.fontSizeIcon,
height: token.fontSizeIcon,
borderTop: `${token.lineWidth}px ${token.lineType} ${stepsNavArrowColor}`,
borderBottom: 'none',
borderInlineStart: 'none',
borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${stepsNavArrowColor}`,
transform: 'translateY(-50%) translateX(-50%) rotate(45deg)',
content: '""',
},
'&::before': {
position: 'absolute',
bottom: 0,
insetInlineStart: '50%',
display: 'inline-block',
width: 0,
height: token.lineWidthBold,
backgroundColor: stepsNavActiveColor,
transition: `width ${motionDurationSlow}, inset-inline-start ${motionDurationSlow}`,
transitionTimingFunction: 'ease-out',
content: '""',
},
},
[`${componentCls}-item${componentCls}-item-active::before`]: {
insetInlineStart: 0,
width: '100%',
},
},
[`&${componentCls}-navigation${componentCls}-vertical`]: {
[`> ${componentCls}-item`]: {
marginInlineEnd: 0,
'&::before': {
display: 'none',
},
[`&${componentCls}-item-active::before`]: {
top: 0,
insetInlineEnd: 0,
insetInlineStart: 'unset',
display: 'block',
width: token.lineWidth * 3,
height: `calc(100% - ${token.marginLG}px)`,
},
'&::after': {
position: 'relative',
insetInlineStart: '50%',
display: 'block',
width: token.controlHeight * 0.25,
height: token.controlHeight * 0.25,
marginBottom: token.marginXS,
textAlign: 'center',
transform: 'translateY(-50%) translateX(-50%) rotate(135deg)',
},
[`> ${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;

113
components/steps/style/progress-dot.less
View File

@ -1,113 +0,0 @@
.@{steps-prefix-cls}-dot,
.@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small {
.@{steps-prefix-cls}-item {
&-title {
line-height: @line-height-base;
}
&-tail {
top: @steps-dot-top;
width: 100%;
margin: 0 0 0 (@steps-description-max-width / 2);
padding: 0;
&::after {
width: ~'calc(100% - 20px)';
height: 3px;
margin-left: 12px;
}
}
&:first-child .@{steps-prefix-cls}-icon-dot {
left: 2px;
}
&-icon {
width: @steps-dot-size;
height: @steps-dot-size;
margin-left: 67px;
padding-right: 0;
line-height: @steps-dot-size;
background: transparent;
border: 0;
.@{steps-prefix-cls}-icon-dot {
position: relative;
float: left;
width: 100%;
height: 100%;
border-radius: 100px;
transition: all 0.3s;
/* expand hover area */
&::after {
position: absolute;
top: -12px;
left: -26px;
width: 60px;
height: 32px;
background: fade(@black, 0.1%);
content: '';
}
}
}
&-content {
width: @steps-description-max-width;
}
&-process .@{steps-prefix-cls}-item-icon {
position: relative;
top: -1px;
width: @steps-current-dot-size;
height: @steps-current-dot-size;
line-height: @steps-current-dot-size;
background: none;
}
&-process .@{steps-prefix-cls}-icon {
&:first-child .@{steps-prefix-cls}-icon-dot {
left: 0;
}
}
}
}
.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
.@{steps-prefix-cls}-item-icon {
margin-top: 13px;
margin-left: 0;
background: none;
}
// https://github.com/ant-design/ant-design/issues/18354
.@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
top: 6.5px;
left: -9px;
margin: 0;
padding: 22px 0 4px;
}
&.@{steps-prefix-cls}-small {
.@{steps-prefix-cls}-item-icon {
margin-top: 10px;
}
.@{steps-prefix-cls}-item
> .@{steps-prefix-cls}-item-container
> .@{steps-prefix-cls}-item-tail {
top: 3.5px;
}
}
.@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot {
left: 0;
}
.@{steps-prefix-cls}-item-content {
width: inherit;
}
.@{steps-prefix-cls}-item-process
.@{steps-prefix-cls}-item-container
.@{steps-prefix-cls}-item-icon
.@{steps-prefix-cls}-icon-dot {
top: -1px;
left: -1px;
}
}

133
components/steps/style/progress-dot.ts Normal file
View File

@ -0,0 +1,133 @@
import type { CSSObject } from '../../_util/cssinjs';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = token => {
const {
componentCls,
descriptionWidth,
lineHeight,
stepsCurrentDotSize,
stepsDotSize,
motionDurationSlow,
} = token;
return {
[`&${componentCls}-dot, &${componentCls}-dot${componentCls}-small`]: {
[`${componentCls}-item`]: {
'&-title': {
lineHeight,
},
'&-tail': {
top: Math.floor((token.stepsDotSize - token.lineWidth * 3) / 2),
width: '100%',
marginTop: 0,
marginBottom: 0,
marginInline: `${descriptionWidth / 2}px 0`,
padding: 0,
'&::after': {
width: `calc(100% - ${token.marginSM * 2}px)`,
height: token.lineWidth * 3,
marginInlineStart: token.marginSM,
},
},
'&-icon': {
width: stepsDotSize,
height: stepsDotSize,
marginInlineStart: (token.descriptionWidth - stepsDotSize) / 2,
paddingInlineEnd: 0,
lineHeight: `${stepsDotSize}px`,
background: 'transparent',
border: 0,
[`${componentCls}-icon-dot`]: {
position: 'relative',
float: 'left',
width: '100%',
height: '100%',
borderRadius: 100, // very large number
transition: `all ${motionDurationSlow}`,
/* expand hover area */
'&::after': {
position: 'absolute',
top: -token.marginSM,
insetInlineStart: (stepsDotSize - token.controlHeightLG * 1.5) / 2,
width: token.controlHeightLG * 1.5,
height: token.controlHeight,
background: 'transparent',
content: '""',
},
},
},
'&-content': {
width: descriptionWidth,
},
[`&-process ${componentCls}-item-icon`]: {
position: 'relative',
top: (stepsDotSize - stepsCurrentDotSize) / 2,
width: stepsCurrentDotSize,
height: stepsCurrentDotSize,
lineHeight: `${stepsCurrentDotSize}px`,
background: 'none',
marginInlineStart: (token.descriptionWidth - stepsCurrentDotSize) / 2,
},
[`&-process ${componentCls}-icon`]: {
[`&:first-child ${componentCls}-icon-dot`]: {
insetInlineStart: 0,
},
},
},
},
[`&${componentCls}-vertical${componentCls}-dot`]: {
[`${componentCls}-item-icon`]: {
marginTop: (token.controlHeight - stepsDotSize) / 2,
marginInlineStart: 0,
background: 'none',
},
[`${componentCls}-item-process ${componentCls}-item-icon`]: {
marginTop: (token.controlHeight - stepsCurrentDotSize) / 2,
top: 0,
insetInlineStart: (stepsDotSize - stepsCurrentDotSize) / 2,
marginInlineStart: 0,
},
// https://github.com/ant-design/ant-design/issues/18354
[`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
top: (token.controlHeight - stepsDotSize) / 2,
insetInlineStart: 0,
margin: 0,
padding: `${stepsDotSize + token.paddingXS}px 0 ${token.paddingXS}px`,
'&::after': {
marginInlineStart: (stepsDotSize - token.lineWidth) / 2,
},
},
[`&${componentCls}-small`]: {
[`${componentCls}-item-icon`]: {
marginTop: (token.controlHeightSM - stepsDotSize) / 2,
},
[`${componentCls}-item-process ${componentCls}-item-icon`]: {
marginTop: (token.controlHeightSM - stepsCurrentDotSize) / 2,
},
[`${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
top: (token.controlHeightSM - stepsDotSize) / 2,
},
},
[`${componentCls}-item:first-child ${componentCls}-icon-dot`]: {
insetInlineStart: 0,
},
[`${componentCls}-item-content`]: {
width: 'inherit',
},
},
};
};
export default genStepsProgressDotStyle;

28
components/steps/style/progress.less
View File

@ -1,28 +0,0 @@
@progress-prefix-cls: ~'@{ant-prefix}-progress';
.@{steps-prefix-cls}-with-progress {
.@{steps-prefix-cls}-item {
padding-top: 4px;
.@{steps-prefix-cls}-item-tail {
top: 4px !important;
}
}
&.@{steps-prefix-cls}-horizontal .@{steps-prefix-cls}-item:first-child {
padding-bottom: 4px;
padding-left: 4px;
}
.@{steps-prefix-cls}-item-icon {
position: relative;
.@{progress-prefix-cls} {
position: absolute;
top: -5px;
right: -5px;
bottom: -5px;
left: -5px;
}
}
}

60
components/steps/style/progress.ts Normal file
View File

@ -0,0 +1,60 @@
import type { CSSObject } from '../../_util/cssinjs';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = token => {
const { antCls, componentCls } = token;
return {
[`&${componentCls}-with-progress`]: {
[`${componentCls}-item`]: {
paddingTop: token.paddingXXS,
[`&-process ${componentCls}-item-container ${componentCls}-item-icon ${componentCls}-icon`]:
{
color: token.processIconColor,
},
},
[`&${componentCls}-vertical > ${componentCls}-item `]: {
paddingInlineStart: token.paddingXXS,
[`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
top: token.marginXXS,
insetInlineStart: token.stepsIconSize / 2 - token.lineWidth + token.paddingXXS,
},
},
[`&, &${componentCls}-small`]: {
[`&${componentCls}-horizontal ${componentCls}-item:first-child`]: {
paddingBottom: token.paddingXXS,
paddingInlineStart: token.paddingXXS,
},
},
[`&${componentCls}-small${componentCls}-vertical > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]:
{
insetInlineStart: token.stepsSmallIconSize / 2 - token.lineWidth + token.paddingXXS,
},
[`&${componentCls}-label-vertical`]: {
[`${componentCls}-item ${componentCls}-item-tail`]: {
top: token.margin - 2 * token.lineWidth,
},
},
[`${componentCls}-item-icon`]: {
position: 'relative',
[`${antCls}-progress`]: {
position: 'absolute',
insetBlockStart:
(token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
insetInlineStart:
(token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
},
},
},
};
};
export default genStepsProgressStyle;

271
components/steps/style/rtl.less
View File

@ -1,271 +0,0 @@
.@{steps-prefix-cls} {
&-rtl {
direction: rtl;
}
}
.@{steps-prefix-cls}-item {
&-icon {
.@{steps-prefix-cls}.@{steps-prefix-cls}-rtl & {
margin-right: 0;
margin-left: 8px;
}
}
&-tail {
.@{steps-prefix-cls}-rtl & {
right: 0;
left: auto;
}
}
&-title {
.@{steps-prefix-cls}-rtl & {
padding-right: 0;
padding-left: 16px;
}
.@{steps-prefix-cls}-item-subtitle {
.@{steps-prefix-cls}-rtl & {
float: left;
margin-right: 8px;
margin-left: 0;
}
}
&::after {
.@{steps-prefix-cls}-rtl & {
right: 100%;
left: auto;
}
}
}
}
.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
.@{steps-prefix-cls}-item {
.@{steps-prefix-cls}-rtl& {
padding-right: 16px;
padding-left: 0;
}
&:first-child {
.@{steps-prefix-cls}-rtl& {
padding-right: 0;
}
}
&:last-child .@{steps-prefix-cls}-item-title {
.@{steps-prefix-cls}-rtl& {
padding-left: 0;
}
}
}
}
// custom-icon
.@{steps-prefix-cls}-item-custom {
.@{steps-prefix-cls}-item-icon {
> .@{steps-prefix-cls}-icon {
.@{steps-prefix-cls}-rtl & {
right: 0.5px;
left: auto;
}
}
}
}
// nav
.@{steps-prefix-cls}-navigation {
&.@{steps-prefix-cls}-small {
.@{steps-prefix-cls}-item {
&-container {
.@{steps-prefix-cls}-rtl& {
margin-right: -12px;
margin-left: 0;
}
}
}
}
.@{steps-prefix-cls}-item {
&-container {
.@{steps-prefix-cls}-rtl& {
margin-right: -16px;
margin-left: 0;
text-align: right;
}
.@{steps-prefix-cls}-item-title {
.@{steps-prefix-cls}-rtl& {
padding-left: 0;
}
}
}
&::after {
.@{steps-prefix-cls}-rtl& {
right: 100%;
left: auto;
margin-right: -2px;
margin-left: 0;
transform: rotate(225deg);
}
}
}
}
// small
.@{steps-prefix-cls}-small {
&.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical)
.@{steps-prefix-cls}-item {
.@{steps-prefix-cls}-rtl& {
padding-right: 12px;
padding-left: 0;
}
&:first-child {
.@{steps-prefix-cls}-rtl& {
padding-right: 0;
}
}
}
.@{steps-prefix-cls}-item-title {
.@{steps-prefix-cls}-rtl& {
padding-right: 0;
padding-left: 12px;
}
}
}
// vertical
.@{steps-prefix-cls}-vertical {
> .@{steps-prefix-cls}-item {
.@{steps-prefix-cls}-item-icon {
.@{steps-prefix-cls}-rtl& {
float: right;
margin-right: 0;
margin-left: @steps-vertical-icon-width;
}
}
}
> .@{steps-prefix-cls}-item
> .@{steps-prefix-cls}-item-container
> .@{steps-prefix-cls}-item-tail {
.@{steps-prefix-cls}-rtl& {
right: @steps-vertical-tail-width;
left: auto;
}
}
&.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item-container {
.@{steps-prefix-cls}-item-tail {
.@{steps-prefix-cls}-rtl& {
right: @steps-vertical-tail-width-sm;
left: auto;
}
}
}
}
// label
.@{steps-prefix-cls}-label-vertical {
.@{steps-prefix-cls}-item {
&-title {
.@{steps-prefix-cls}-rtl& {
padding-left: 0;
}
}
}
}
// progress-dot
.@{steps-prefix-cls}-dot,
.@{steps-prefix-cls}-dot.@{steps-prefix-cls}-small {
.@{steps-prefix-cls}-item {
&-tail {
.@{steps-prefix-cls}-rtl& {
margin: 0 (@steps-description-max-width / 2) 0 0;
}
&::after {
.@{steps-prefix-cls}-rtl& {
margin-right: 12px;
margin-left: 0;
}
}
}
&:first-child .@{steps-prefix-cls}-icon-dot {
.@{steps-prefix-cls}-rtl& {
right: 2px;
left: auto;
}
}
&-icon {
.@{steps-prefix-cls}-rtl& {
margin-right: 67px;
margin-left: 0;
}
.@{steps-prefix-cls}-icon-dot {
.@{steps-prefix-cls}-rtl& {
float: right;
}
/* expand hover area */
&::after {
.@{steps-prefix-cls}-rtl& {
right: -26px;
left: auto;
}
}
}
}
}
}
.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
.@{steps-prefix-cls}-item-icon {
.@{steps-prefix-cls}-rtl& {
margin-right: 0;
margin-left: 16px;
}
}
// https://github.com/ant-design/ant-design/issues/18354
.@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
.@{steps-prefix-cls}-rtl& {
right: -9px;
left: auto;
}
}
.@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot {
.@{steps-prefix-cls}-rtl& {
right: 0;
left: auto;
}
}
.@{steps-prefix-cls}-item-process .@{steps-prefix-cls}-icon-dot {
.@{steps-prefix-cls}-rtl& {
right: -2px;
left: auto;
}
}
}
// RTL Steps with progress
.@{steps-prefix-cls}-rtl.@{steps-prefix-cls}-with-progress.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
.@{steps-prefix-cls}-item:first-child {
padding-right: 4px;
padding-left: 0;
&.@{steps-prefix-cls}-item-active {
padding-right: 4px;
}
}
}

47
components/steps/style/rtl.ts Normal file
View File

@ -0,0 +1,47 @@
import type { CSSObject } from '../../_util/cssinjs';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
const genStepsRTLStyle: GenerateStyle<StepsToken, CSSObject> = token => {
const { componentCls } = token;
return {
[`&${componentCls}-rtl`]: {
direction: 'rtl',
[`${componentCls}-item`]: {
'&-subtitle': {
float: 'left',
},
},
// nav
[`&${componentCls}-navigation`]: {
[`${componentCls}-item::after`]: {
transform: 'rotate(-45deg)',
},
},
// vertical
[`&${componentCls}-vertical`]: {
[`> ${componentCls}-item`]: {
'&::after': {
transform: 'rotate(225deg)',
},
[`${componentCls}-item-icon`]: {
float: 'right',
},
},
},
// progress-dot
[`&${componentCls}-dot`]: {
[`${componentCls}-item-icon ${componentCls}-icon-dot, &${componentCls}-small ${componentCls}-item-icon ${componentCls}-icon-dot`]:
{
float: 'right',
},
},
},
};
};
export default genStepsRTLStyle;

48
components/steps/style/small.less
View File

@ -1,48 +0,0 @@
.@{steps-prefix-cls}-small {
&.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical)
.@{steps-prefix-cls}-item {
padding-left: 12px;
&:first-child {
padding-left: 0;
}
}
.@{steps-prefix-cls}-item-icon {
width: @steps-small-icon-size;
height: @steps-small-icon-size;
margin: @steps-small-icon-margin;
font-size: @font-size-sm;
line-height: @steps-small-icon-size;
text-align: center;
border-radius: @steps-small-icon-size;
}
.@{steps-prefix-cls}-item-title {
padding-right: 12px;
font-size: @font-size-base;
line-height: @steps-small-icon-size;
&::after {
top: (@steps-small-icon-size / 2);
}
}
.@{steps-prefix-cls}-item-description {
color: @text-color-secondary;
font-size: @font-size-base;
}
.@{steps-prefix-cls}-item-tail {
top: 8px;
}
.@{steps-prefix-cls}-item-custom .@{steps-prefix-cls}-item-icon {
width: inherit;
height: inherit;
line-height: inherit;
background: none;
border: 0;
border-radius: 0;
> .@{steps-prefix-cls}-icon {
font-size: @steps-small-icon-size;
line-height: @steps-small-icon-size;
transform: none;
}
}
}

68
components/steps/style/small.ts Normal file
View File

@ -0,0 +1,68 @@
import type { CSSObject } from '../../_util/cssinjs';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
const {
componentCls,
stepsSmallIconSize,
// stepsSmallIconMargin,
fontSizeSM,
fontSize,
colorTextDescription,
} = token;
return {
[`&${componentCls}-small`]: {
[`&${componentCls}-horizontal:not(${componentCls}-label-vertical) ${componentCls}-item`]: {
paddingInlineStart: token.paddingSM,
'&:first-child': {
paddingInlineStart: 0,
},
},
[`${componentCls}-item-icon`]: {
width: stepsSmallIconSize,
height: stepsSmallIconSize,
// margin: stepsSmallIconMargin,
marginTop: 0,
marginBottom: 0,
marginInline: `0 ${token.marginXS}px`,
fontSize: fontSizeSM,
lineHeight: `${stepsSmallIconSize}px`,
textAlign: 'center',
borderRadius: stepsSmallIconSize,
},
[`${componentCls}-item-title`]: {
paddingInlineEnd: token.paddingSM,
fontSize,
lineHeight: `${stepsSmallIconSize}px`,
'&::after': {
top: stepsSmallIconSize / 2,
},
},
[`${componentCls}-item-description`]: {
color: colorTextDescription,
fontSize,
},
[`${componentCls}-item-tail`]: {
top: stepsSmallIconSize / 2 - token.paddingXXS,
},
[`${componentCls}-item-custom ${componentCls}-item-icon`]: {
width: 'inherit',
height: 'inherit',
lineHeight: 'inherit',
background: 'none',
border: 0,
borderRadius: 0,
[`> ${componentCls}-icon`]: {
fontSize: stepsSmallIconSize,
lineHeight: `${stepsSmallIconSize}px`,
transform: 'none',
},
},
},
};
};
export default genStepsSmallStyle;

73
components/steps/style/vertical.less
View File

@ -1,73 +0,0 @@
.@{steps-prefix-cls}-vertical {
display: flex;
flex-direction: column;
> .@{steps-prefix-cls}-item {
display: block;
flex: 1 0 auto;
padding-left: 0;
overflow: visible;
.@{steps-prefix-cls}-item-icon {
float: left;
margin-right: @steps-vertical-icon-width;
}
.@{steps-prefix-cls}-item-content {
display: block;
min-height: 48px;
overflow: hidden;
}
.@{steps-prefix-cls}-item-title {
line-height: @steps-icon-size;
}
.@{steps-prefix-cls}-item-description {
padding-bottom: 12px;
}
}
> .@{steps-prefix-cls}-item
> .@{steps-prefix-cls}-item-container
> .@{steps-prefix-cls}-item-tail {
position: absolute;
top: 0;
left: @steps-vertical-tail-width;
width: 1px;
height: 100%;
padding: @steps-icon-size + 6px 0 6px;
&::after {
width: 1px;
height: 100%;
}
}
> .@{steps-prefix-cls}-item:not(:last-child)
> .@{steps-prefix-cls}-item-container
> .@{steps-prefix-cls}-item-tail {
display: block;
}
> .@{steps-prefix-cls}-item
> .@{steps-prefix-cls}-item-container
> .@{steps-prefix-cls}-item-content
> .@{steps-prefix-cls}-item-title {
&::after {
display: none;
}
}
&.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item-container {
.@{steps-prefix-cls}-item-tail {
position: absolute;
top: 0;
left: @steps-vertical-tail-width-sm;
padding: @steps-small-icon-size + 6px 0 6px;
}
.@{steps-prefix-cls}-item-title {
line-height: @steps-small-icon-size;
}
}
}

72
components/steps/style/vertical.ts Normal file
View File

@ -0,0 +1,72 @@
import type { CSSObject } from '../../_util/cssinjs';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = token => {
const { componentCls, stepsSmallIconSize, stepsIconSize } = token;
return {
[`&${componentCls}-vertical`]: {
display: 'flex',
flexDirection: 'column',
[`> ${componentCls}-item`]: {
display: 'block',
flex: '1 0 auto',
paddingInlineStart: 0,
overflow: 'visible',
[`${componentCls}-item-icon`]: {
float: 'left',
marginInlineEnd: token.margin,
},
[`${componentCls}-item-content`]: {
display: 'block',
minHeight: token.controlHeight * 1.5,
overflow: 'hidden',
},
[`${componentCls}-item-title`]: {
lineHeight: `${stepsIconSize}px`,
},
[`${componentCls}-item-description`]: {
paddingBottom: token.paddingSM,
},
},
[`> ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
position: 'absolute',
top: 0,
insetInlineStart: token.stepsIconSize / 2 - token.lineWidth,
width: token.lineWidth,
height: '100%',
padding: `${stepsIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
'&::after': {
width: token.lineWidth,
height: '100%',
},
},
[`> ${componentCls}-item:not(:last-child) > ${componentCls}-item-container > ${componentCls}-item-tail`]:
{
display: 'block',
},
[` > ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-content > ${componentCls}-item-title`]:
{
'&::after': {
display: 'none',
},
},
[`&${componentCls}-small ${componentCls}-item-container`]: {
[`${componentCls}-item-tail`]: {
position: 'absolute',
top: 0,
insetInlineStart: token.stepsSmallIconSize / 2 - token.lineWidth,
padding: `${stepsSmallIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
},
[`${componentCls}-item-title`]: {
lineHeight: `${stepsSmallIconSize}px`,
},
},
},
};
};
export default genStepsVerticalStyle;

2
components/style.ts
View File

@ -32,7 +32,7 @@ import './cascader/style';
// import './modal/style';
// import './alert/style';
import './time-picker/style';
import './steps/style';
// import './steps/style';
// import './breadcrumb/style';
import './calendar/style';
// import './date-picker/style';

4
components/theme/interface/components.ts
View File

@ -36,7 +36,7 @@ import type { ComponentToken as SkeletonComponentToken } from '../../skeleton/st
import type { ComponentToken as SliderComponentToken } from '../../slider/style';
import type { ComponentToken as SpaceComponentToken } from '../../space/style';
import type { ComponentToken as SpinComponentToken } from '../../spin/style';
// import type { ComponentToken as StepsComponentToken } from '../../steps/style';
import type { ComponentToken as StepsComponentToken } from '../../steps/style';
// import type { ComponentToken as TableComponentToken } from '../../table/style';
// import type { ComponentToken as TabsComponentToken } from '../../tabs/style';
import type { ComponentToken as TagComponentToken } from '../../tag/style';
@ -103,7 +103,7 @@ export interface ComponentTokenMap {
Transfer?: TransferComponentToken;
// Tabs?: TabsComponentToken;
// Calendar?: CalendarComponentToken;
// Steps?: StepsComponentToken;
Steps?: StepsComponentToken;
Menu?: MenuComponentToken;
Modal?: ModalComponentToken;
Message?: MessageComponentToken;