refactor:steps (#6264)
* refactor:steps * fix ...attrs * fix StepsToken error * docs:update & refactor: steps typepull/6265/head^2
果冻橙
2 years ago
committed by
GitHub
parent
04e3819b0b
commit
3715ded674
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
@ -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';
|
||||
@ -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,
|
||||
},
|
||||
);
|
||||
|
||||
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
Loading…
Reference in new issue