mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 01:13:58 +08:00
refactor: Steps full token (#35841)
* refactor: steps full token * refactor: progress dot * refactor: no hard code * refactor: token optimization
This commit is contained in:
MadCcc
GitHub
parent
7b73b62c57
commit
a434ec7614
@ -31,6 +31,7 @@ import type { ComponentToken as SelectComponentToken } from '../../select/style'
|
||||
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 TimelineComponentToken } from '../../timeline/style';
|
||||
import type { ComponentToken as TypographyComponentToken } from '../../typography/style';
|
||||
import type { ComponentToken as UploadComponentToken } from '../../upload/style';
|
||||
@ -113,7 +114,7 @@ export interface OverrideToken {
|
||||
Tabs?: {};
|
||||
Calendar?: CalendarComponentToken;
|
||||
Card?: {};
|
||||
Steps?: {};
|
||||
Steps?: StepsComponentToken;
|
||||
Menu?: MenuComponentToken;
|
||||
Modal?: ModalComponentToken;
|
||||
Message?: MessageComponentToken;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { StepsToken } from '.';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
|
||||
const genStepsCustomIconStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
const {
|
||||
@ -16,10 +16,9 @@ const genStepsCustomIconStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
[`> ${componentCls}-item-container > ${componentCls}-item-icon`]: {
|
||||
height: 'auto',
|
||||
background: 'none',
|
||||
border: 0, // FIXME: hardcode in v4
|
||||
border: 0,
|
||||
[`> ${componentCls}-icon`]: {
|
||||
top: stepsIconCustomTop,
|
||||
insetInlineStart: 0.5, // FIXME: hardcode in v4
|
||||
width: stepsIconCustomSize,
|
||||
height: stepsIconCustomSize,
|
||||
fontSize: stepsIconCustomFontSize,
|
||||
|
||||
@ -1,46 +1,35 @@
|
||||
// deps-lint-skip-all
|
||||
// import '../../style/index.less';
|
||||
// import './index.less';
|
||||
|
||||
// style dependencies
|
||||
// deps-lint-skip: grid
|
||||
// import '../../progress/style';
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { resetComponent, genComponentStyleHook, mergeToken } from '../../_util/theme';
|
||||
import type { GenerateStyle, FullToken } from '../../_util/theme';
|
||||
import type { FullToken, GenerateStyle } from '../../_util/theme';
|
||||
import { genComponentStyleHook, mergeToken, resetComponent } from '../../_util/theme';
|
||||
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 genStepsLabelPlacementStyle from './label-placement';
|
||||
import genStepsProgressDotStyle from './progress-dot';
|
||||
import genStepsProgressStyle from './progress';
|
||||
import genStepsNavStyle from './nav';
|
||||
import genStepsRTLStyle from './rtl';
|
||||
|
||||
export interface ComponentToken {
|
||||
descriptionWidth: number;
|
||||
}
|
||||
|
||||
export interface StepsToken extends FullToken<'Steps'> {
|
||||
// Steps variable default.less
|
||||
processTailColor: string;
|
||||
stepsNavArrowColor: string;
|
||||
stepsBackground: string;
|
||||
stepsIconSize: number;
|
||||
stepsIconCustomSize: number;
|
||||
stepsIconCustomTop: number;
|
||||
stepsIconCustomFontSize: number;
|
||||
stepsIconTop: number;
|
||||
stepsIconFontSize: number;
|
||||
stepsIconMargin: string;
|
||||
stepsTitleLineHeight: number;
|
||||
stepsSmallIconSize: number;
|
||||
stepsSmallIconMargin: string;
|
||||
stepsDotSize: number;
|
||||
stepsDotTop: number;
|
||||
stepsCurrentDotSize: number;
|
||||
stepsDescriptionMaxWidth: number;
|
||||
stepsNavContentMaxWidth: string;
|
||||
stepsVerticalIconWidth: number;
|
||||
stepsVerticalTailWidth: number;
|
||||
stepsVerticalTailWidthSm: number;
|
||||
// Steps component less variable
|
||||
processIconColor: string;
|
||||
processTitleColor: string;
|
||||
@ -59,6 +48,7 @@ export interface StepsToken extends FullToken<'Steps'> {
|
||||
errorDescriptionColor: string;
|
||||
errorTailColor: string;
|
||||
stepsNavActiveColor: string;
|
||||
stepsProgressSize: number;
|
||||
}
|
||||
|
||||
enum StepItemStatusEnum {
|
||||
@ -74,10 +64,9 @@ const genStepsItemStatusStyle = (status: StepItemStatusEnum, token: StepsToken):
|
||||
const titleColorKey: keyof StepsToken = `${status}TitleColor`;
|
||||
const descriptionColorKey: keyof StepsToken = `${status}DescriptionColor`;
|
||||
const tailColorKey: keyof StepsToken = `${status}TailColor`;
|
||||
const stepsBackground = '#fff'; // FIXME: hardcode in v4
|
||||
return {
|
||||
[`${prefix}-${status} ${prefix}-icon`]: {
|
||||
backgroundColor: stepsBackground,
|
||||
backgroundColor: token.colorBgComponent,
|
||||
borderColor: token[iconColorKey],
|
||||
[`> ${token.componentCls}-icon`]: {
|
||||
color: token[iconColorKey],
|
||||
@ -131,17 +120,15 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
[`${stepsItemCls}-icon`]: {
|
||||
width: token.stepsIconSize,
|
||||
height: token.stepsIconSize,
|
||||
// margin: token.stepsIconMargin,
|
||||
marginTop: 0, // FIXME: hardcode in v4
|
||||
marginBottom: 0, // FIXME: hardcode in v4
|
||||
marginInline: '0 8px', // FIXME: hardcode in v4
|
||||
marginTop: 0,
|
||||
marginBottom: 0,
|
||||
marginInlineStart: 0,
|
||||
marginInlineEnd: token.marginXS,
|
||||
fontSize: token.stepsIconFontSize,
|
||||
fontFamily: token.fontFamily,
|
||||
lineHeight: `${token.stepsIconSize}px`,
|
||||
textAlign: 'center',
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${new TinyColor('#000')
|
||||
.setAlpha(0.25)
|
||||
.toRgbString()}`, // FIXME: hardcode in v4
|
||||
border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorTextDisabled}`,
|
||||
borderRadius: token.stepsIconSize,
|
||||
transition: `background-color ${motionDurationSlow}, border-color ${motionDurationSlow}`,
|
||||
[`${componentCls}-icon`]: {
|
||||
@ -153,17 +140,16 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
},
|
||||
[`${stepsItemCls}-tail`]: {
|
||||
position: 'absolute',
|
||||
top: 12, // FIXME: hardcode in v4
|
||||
insetInlineStart: 0, // FIXME: hardcode in v4
|
||||
width: '100%', // FIXME: hardcode in v4
|
||||
padding: '0 10px', // FIXME: hardcode in v4
|
||||
top: token.marginSM,
|
||||
insetInlineStart: 0,
|
||||
width: '100%',
|
||||
|
||||
'&::after': {
|
||||
display: 'inline-block',
|
||||
width: '100%', // FIXME: hardcode in v4
|
||||
height: 1, // FIXME: hardcode in v4
|
||||
width: '100%',
|
||||
height: token.lineWidth,
|
||||
background: token.colorSplit,
|
||||
borderRadius: 1, // FIXME: hardcode in v4
|
||||
borderRadius: token.lineWidth,
|
||||
transition: `background ${motionDurationSlow}`,
|
||||
content: '""',
|
||||
},
|
||||
@ -171,7 +157,7 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
[`${stepsItemCls}-title`]: {
|
||||
position: 'relative',
|
||||
display: 'inline-block',
|
||||
paddingInlineEnd: 16, // FIXME: hardcode in v4
|
||||
paddingInlineEnd: token.padding,
|
||||
color: token.colorText,
|
||||
fontSize: token.fontSizeLG,
|
||||
lineHeight: `${token.stepsTitleLineHeight}px`,
|
||||
@ -179,17 +165,17 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
top: token.stepsTitleLineHeight / 2,
|
||||
insetInlineStart: '100%', // FIXME: hardcode in v4
|
||||
insetInlineStart: '100%',
|
||||
display: 'block',
|
||||
width: 9999, // FIXME: hardcode in v4
|
||||
height: 1, // FIXME: hardcode in v4
|
||||
width: 9999,
|
||||
height: token.lineWidth,
|
||||
background: token.processTailColor,
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
[`${stepsItemCls}-subtitle`]: {
|
||||
display: 'inline',
|
||||
marginInlineStart: 8, // FIXME: hardcode in v4
|
||||
marginInlineStart: token.marginXS,
|
||||
color: token.colorTextSecondary,
|
||||
fontWeight: 'normal',
|
||||
fontSize: token.fontSizeBase,
|
||||
@ -208,7 +194,7 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
},
|
||||
},
|
||||
[`${stepsItemCls}-process > ${stepsItemCls}-container > ${stepsItemCls}-title`]: {
|
||||
fontWeight: 500, // FIXME: hardcode in v4
|
||||
fontWeight: token.fontWeightStrong,
|
||||
},
|
||||
...genStepsItemStatusStyle(StepItemStatusEnum.finish, token),
|
||||
...genStepsItemStatusStyle(StepItemStatusEnum.error, token),
|
||||
@ -262,20 +248,20 @@ const genStepsClickableStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
},
|
||||
[`&${componentCls}-horizontal:not(${componentCls}-label-vertical)`]: {
|
||||
[`${componentCls}-item`]: {
|
||||
paddingInlineStart: 16, // FIXME: hardcode in v4
|
||||
paddingInlineStart: token.padding,
|
||||
whiteSpace: 'nowrap',
|
||||
|
||||
'&:first-child': {
|
||||
paddingInlineStart: 0, // FIXME: hardcode in v4
|
||||
paddingInlineStart: 0,
|
||||
},
|
||||
[`&:last-child ${componentCls}-item-title`]: {
|
||||
paddingInlineEnd: 0, // FIXME: hardcode in v4
|
||||
paddingInlineEnd: 0,
|
||||
},
|
||||
'&-tail': {
|
||||
display: 'none',
|
||||
},
|
||||
'&-description': {
|
||||
maxWidth: token.stepsDescriptionMaxWidth,
|
||||
maxWidth: token.descriptionWidth,
|
||||
whiteSpace: 'normal',
|
||||
},
|
||||
},
|
||||
@ -291,7 +277,7 @@ const genStepsStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
...resetComponent(token),
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
fontSize: 0, // FIXME: hardcode in v4
|
||||
fontSize: 0,
|
||||
textAlign: 'initial',
|
||||
// single Item
|
||||
...genStepsItemStyle(token),
|
||||
@ -318,53 +304,52 @@ const genStepsStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Steps', token => {
|
||||
const stepsIconSize = 32; // FIXME: hardcode in v4
|
||||
const processTailColor = token.colorSplit;
|
||||
const processIconColor = token.colorPrimary;
|
||||
export default genComponentStyleHook(
|
||||
'Steps',
|
||||
token => {
|
||||
const stepsIconSize = token.controlHeight;
|
||||
const processTailColor = token.colorSplit;
|
||||
const processIconColor = token.colorPrimary;
|
||||
|
||||
const stepsToken = mergeToken<StepsToken>(token, {
|
||||
// Steps variable default.less
|
||||
processTailColor,
|
||||
stepsNavArrowColor: new TinyColor('#000').setAlpha(0.25).toRgbString(), // fade(@black, 25%),
|
||||
stepsBackground: token.colorBgComponent,
|
||||
stepsIconSize,
|
||||
stepsIconCustomSize: stepsIconSize,
|
||||
stepsIconCustomTop: 0, // FIXME: hardcode in v4
|
||||
stepsIconCustomFontSize: 24, // FIXME: hardcode in v4
|
||||
stepsIconTop: -0.5, // FIXME: hardcode in v4
|
||||
stepsIconFontSize: token.fontSizeLG,
|
||||
stepsIconMargin: '0 8px 0 0', // FIXME: hardcode in v4
|
||||
stepsTitleLineHeight: 32, // FIXME: hardcode in v4
|
||||
stepsSmallIconSize: 24, // FIXME: hardcode in v4
|
||||
stepsSmallIconMargin: '0 8px 0 0', // FIXME: hardcode in v4
|
||||
stepsDotSize: 8, // FIXME: hardcode in v4
|
||||
stepsDotTop: 2, // FIXME: hardcode in v4
|
||||
stepsCurrentDotSize: 10, // FIXME: hardcode in v4
|
||||
stepsDescriptionMaxWidth: 140, // FIXME: hardcode in v4
|
||||
stepsNavContentMaxWidth: 'auto',
|
||||
stepsVerticalIconWidth: 16, // FIXME: hardcode in v4
|
||||
stepsVerticalTailWidth: 16, // FIXME: hardcode in v4
|
||||
stepsVerticalTailWidthSm: 12, // FIXME: hardcode in v4
|
||||
// Steps component less variable
|
||||
processIconColor,
|
||||
processTitleColor: new TinyColor('#000').setAlpha(0.85).toRgbString(), // @heading-color: fade(@black, 85%) FIXME: hardcode in v4
|
||||
processDescriptionColor: token.colorText,
|
||||
processIconTextColor: '#fff', // FIXME: hardcode in v4
|
||||
waitIconColor: new TinyColor('#000').setAlpha(0.25).toRgbString(), // @disabled-color FIXME: hardcode in v4
|
||||
waitTitleColor: token.colorTextSecondary,
|
||||
waitDescriptionColor: token.colorTextSecondary,
|
||||
waitTailColor: processTailColor,
|
||||
finishIconColor: processIconColor,
|
||||
finishTitleColor: token.colorText,
|
||||
finishDescriptionColor: token.colorTextSecondary,
|
||||
finishTailColor: token.colorPrimary,
|
||||
errorIconColor: token.colorError,
|
||||
errorTitleColor: token.colorError,
|
||||
errorDescriptionColor: token.colorError,
|
||||
errorTailColor: processTailColor,
|
||||
stepsNavActiveColor: token.colorPrimary,
|
||||
});
|
||||
const stepsToken = mergeToken<StepsToken>(token, {
|
||||
// Steps variable default.less
|
||||
processTailColor,
|
||||
stepsNavArrowColor: token.colorTextDisabled,
|
||||
stepsIconSize,
|
||||
stepsIconCustomSize: stepsIconSize,
|
||||
stepsIconCustomTop: 0,
|
||||
stepsIconCustomFontSize: token.fontSizeHeading3,
|
||||
stepsIconTop: -0.5, // magic for ui experience
|
||||
stepsIconFontSize: token.fontSizeLG,
|
||||
stepsTitleLineHeight: token.controlHeight,
|
||||
stepsSmallIconSize: token.fontSizeHeading3,
|
||||
stepsDotSize: token.controlHeight / 4,
|
||||
stepsCurrentDotSize: token.controlHeightLG / 4,
|
||||
stepsNavContentMaxWidth: 'auto',
|
||||
// Steps component less variable
|
||||
processIconColor,
|
||||
processTitleColor: token.colorText,
|
||||
processDescriptionColor: token.colorText,
|
||||
processIconTextColor: token.colorTextLightSolid,
|
||||
waitIconColor: token.colorTextDisabled,
|
||||
waitTitleColor: token.colorTextSecondary,
|
||||
waitDescriptionColor: token.colorTextSecondary,
|
||||
waitTailColor: processTailColor,
|
||||
finishIconColor: processIconColor,
|
||||
finishTitleColor: token.colorText,
|
||||
finishDescriptionColor: token.colorTextSecondary,
|
||||
finishTailColor: token.colorPrimary,
|
||||
errorIconColor: token.colorError,
|
||||
errorTitleColor: token.colorError,
|
||||
errorDescriptionColor: token.colorError,
|
||||
errorTailColor: processTailColor,
|
||||
stepsNavActiveColor: token.colorPrimary,
|
||||
stepsProgressSize: token.controlHeightLG,
|
||||
});
|
||||
|
||||
return [genStepsStyle(stepsToken)];
|
||||
});
|
||||
return [genStepsStyle(stepsToken)];
|
||||
},
|
||||
{
|
||||
descriptionWidth: 140,
|
||||
},
|
||||
);
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { StepsToken } from '.';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
|
||||
const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
const { componentCls, stepsIconSize, lineHeight } = token;
|
||||
const { componentCls, stepsIconSize, lineHeight, stepsSmallIconSize } = token;
|
||||
|
||||
return {
|
||||
[`&${componentCls}-label-vertical`]: {
|
||||
@ -11,25 +11,25 @@ const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = token
|
||||
overflow: 'visible',
|
||||
|
||||
'&-tail': {
|
||||
marginInlineStart: 58, // FIXME: hardcode in v4
|
||||
padding: '3.5px 24px', // FIXME: hardcode in v4
|
||||
marginInlineStart: stepsIconSize / 2 + token.controlHeightLG,
|
||||
padding: `${token.paddingXXS}px ${token.paddingLG}px`,
|
||||
},
|
||||
|
||||
'&-content': {
|
||||
display: 'block',
|
||||
width: (stepsIconSize / 2 + 42) * 2, // FIXME: hardcode in v4
|
||||
marginTop: 8, // FIXME: hardcode in v4
|
||||
width: (stepsIconSize / 2 + token.controlHeightLG) * 2,
|
||||
marginTop: token.marginSM,
|
||||
textAlign: 'center',
|
||||
},
|
||||
|
||||
'&-icon': {
|
||||
display: 'inline-block',
|
||||
marginInlineStart: 42, // FIXME: hardcode in v4
|
||||
marginInlineStart: token.controlHeightLG,
|
||||
},
|
||||
|
||||
'&-title': {
|
||||
paddingInlineEnd: 0, // FIXME: hardcode in v4
|
||||
paddingInlineStart: 0, // FIXME: hardcode in v4
|
||||
paddingInlineEnd: 0,
|
||||
paddingInlineStart: 0,
|
||||
|
||||
'&::after': {
|
||||
display: 'none',
|
||||
@ -38,15 +38,15 @@ const genStepsLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject> = token
|
||||
|
||||
'&-subtitle': {
|
||||
display: 'block',
|
||||
marginBottom: 4, // FIXME: hardcode in v4
|
||||
marginInlineStart: 0, // FIXME: hardcode in v4
|
||||
marginBottom: token.marginXXS,
|
||||
marginInlineStart: 0,
|
||||
lineHeight,
|
||||
},
|
||||
},
|
||||
[`&${componentCls}-small:not(${componentCls}-dot)`]: {
|
||||
[`${componentCls}-item`]: {
|
||||
'&-icon': {
|
||||
marginInlineStart: 46, // FIXME: hardcode in v4
|
||||
marginInlineStart: token.controlHeightLG + (stepsIconSize - stepsSmallIconSize) / 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { StepsToken } from '.';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
|
||||
const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
const {
|
||||
@ -13,12 +13,12 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
|
||||
return {
|
||||
[`&${componentCls}-navigation`]: {
|
||||
paddingTop: 12, // FIXME: hardcode in v4
|
||||
paddingTop: token.paddingSM,
|
||||
|
||||
[`&${componentCls}-small`]: {
|
||||
[`${componentCls}-item`]: {
|
||||
'&-container': {
|
||||
marginInlineStart: -12, // FIXME: hardcode in v4
|
||||
marginInlineStart: -token.marginSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -29,9 +29,9 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
|
||||
'&-container': {
|
||||
display: 'inline-block',
|
||||
height: '100%', // FIXME: hardcode in v4
|
||||
marginInlineStart: -16, // FIXME: hardcode in v4
|
||||
paddingBottom: 12, // FIXME: hardcode in v4
|
||||
height: '100%',
|
||||
marginInlineStart: -token.margin,
|
||||
paddingBottom: token.paddingSM,
|
||||
textAlign: 'start',
|
||||
transition: `opacity ${motionDurationSlow}`,
|
||||
|
||||
@ -40,8 +40,8 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
},
|
||||
|
||||
[`${componentCls}-item-title`]: {
|
||||
maxWidth: '100%', // FIXME: hardcode in v4
|
||||
paddingInlineEnd: 0, // FIXME: hardcode in v4
|
||||
maxWidth: '100%',
|
||||
paddingInlineEnd: 0,
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis',
|
||||
@ -57,7 +57,7 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
cursor: 'pointer',
|
||||
|
||||
'&:hover': {
|
||||
opacity: 0.85, // FIXME: hardcode in v4
|
||||
opacity: 0.85,
|
||||
},
|
||||
},
|
||||
},
|
||||
@ -72,28 +72,26 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
top: `calc(50% - ${token.paddingSM / 2}px)`,
|
||||
insetInlineStart: '100%',
|
||||
display: 'inline-block',
|
||||
width: 12, // FIXME: hardcode in v4
|
||||
height: 12, // FIXME: hardcode in v4
|
||||
marginTop: -14, // FIXME: hardcode in v4
|
||||
marginInlineStart: -2, // FIXME: hardcode in v4
|
||||
borderTop: `1px solid ${stepsNavArrowColor}`,
|
||||
width: token.fontSizeIcon,
|
||||
height: token.fontSizeIcon,
|
||||
borderTop: `${token.lineWidth}px ${token.lineType} ${stepsNavArrowColor}`,
|
||||
borderBottom: 'none',
|
||||
borderInlineStart: 'none',
|
||||
borderInlineEnd: `1px solid ${stepsNavArrowColor}`,
|
||||
transform: 'rotate(45deg)',
|
||||
borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${stepsNavArrowColor}`,
|
||||
transform: 'translateY(-50%) translateX(-50%) rotate(45deg)',
|
||||
content: '""',
|
||||
},
|
||||
|
||||
'&::before': {
|
||||
position: 'absolute',
|
||||
bottom: 0, // FIXME: hardcode in v4
|
||||
bottom: 0,
|
||||
insetInlineStart: '50%',
|
||||
display: 'inline-block',
|
||||
width: 0, // FIXME: hardcode in v4
|
||||
height: 2, // FIXME: hardcode in v4
|
||||
width: 0,
|
||||
height: token.lineWidthBold,
|
||||
backgroundColor: stepsNavActiveColor,
|
||||
transition: `width ${motionDurationSlow}, inset-inline-start ${motionDurationSlow}`,
|
||||
transitionTimingFunction: 'ease-out',
|
||||
@ -102,8 +100,8 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
},
|
||||
|
||||
[`${componentCls}-item${componentCls}-item-active::before`]: {
|
||||
insetInlineStart: 0, // FIXME: hardcode in v4
|
||||
width: '100%', // FIXME: hardcode in v4
|
||||
insetInlineStart: 0,
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
|
||||
@ -115,24 +113,23 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
display: 'none',
|
||||
},
|
||||
[`&${componentCls}-item-active::before`]: {
|
||||
top: 0, // FIXME: hardcode in v4
|
||||
insetInlineEnd: 0, // FIXME: hardcode in v4
|
||||
top: 0,
|
||||
insetInlineEnd: 0,
|
||||
insetInlineStart: 'unset',
|
||||
display: 'block',
|
||||
width: 3, // FIXME: hardcode in v4
|
||||
height: 'calc(100% - 24px)',
|
||||
width: token.lineWidth * 3,
|
||||
height: `calc(100% - ${token.marginLG}px)`,
|
||||
},
|
||||
|
||||
'&::after': {
|
||||
position: 'relative',
|
||||
top: -2, // FIXME: hardcode in v4
|
||||
insetInlineStart: '50%',
|
||||
display: 'block',
|
||||
width: 8, // FIXME: hardcode in v4
|
||||
height: 8, // FIXME: hardcode in v4
|
||||
marginBottom: 8, // FIXME: hardcode in v4
|
||||
width: token.controlHeight * 0.25,
|
||||
height: token.controlHeight * 0.25,
|
||||
marginBottom: token.marginXS,
|
||||
textAlign: 'center',
|
||||
transform: 'rotate(135deg)',
|
||||
transform: 'translateY(-50%) translateX(-50%) rotate(135deg)',
|
||||
},
|
||||
[`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
||||
visibility: 'hidden',
|
||||
|
||||
@ -1,13 +1,11 @@
|
||||
import { TinyColor } from '@ctrl/tinycolor';
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { StepsToken } from '.';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
|
||||
const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
const {
|
||||
componentCls,
|
||||
stepsDotTop,
|
||||
stepsDescriptionMaxWidth,
|
||||
descriptionWidth,
|
||||
lineHeight,
|
||||
stepsCurrentDotSize,
|
||||
stepsDotSize,
|
||||
@ -22,107 +20,112 @@ const genStepsProgressDotStyle: GenerateStyle<StepsToken, CSSObject> = token =>
|
||||
},
|
||||
|
||||
'&-tail': {
|
||||
top: stepsDotTop,
|
||||
width: '100%', // FIXME: hardcode in v4
|
||||
// margin: `0 0 0 ${stepsDescriptionMaxWidth / 2}px`, // FIXME: hardcode in v4
|
||||
marginTop: 0, // FIXME: hardcode in v4
|
||||
marginBottom: 0, // FIXME: hardcode in v4
|
||||
marginInline: `${stepsDescriptionMaxWidth / 2}px 0`, // FIXME: hardcode in v4
|
||||
padding: 0, // FIXME: hardcode in v4
|
||||
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% - 20px)', // FIXME: hardcode in v4
|
||||
height: 3, // FIXME: hardcode in v4
|
||||
marginInlineStart: 12, // FIXME: hardcode in v4
|
||||
width: `calc(100% - ${token.marginSM * 2}px)`,
|
||||
height: token.lineWidth * 3,
|
||||
marginInlineStart: token.marginSM,
|
||||
},
|
||||
},
|
||||
[`&:first-child ${componentCls}-icon-dot`]: {
|
||||
insetInlineStart: 2, // FIXME: hardcode in v4
|
||||
},
|
||||
'&-icon': {
|
||||
width: stepsDotSize,
|
||||
height: stepsDotSize,
|
||||
marginInlineStart: 67, // FIXME: hardcode in v4
|
||||
paddingInlineEnd: 0, // FIXME: hardcode in v4
|
||||
marginInlineStart: (token.descriptionWidth - stepsDotSize) / 2,
|
||||
paddingInlineEnd: 0,
|
||||
lineHeight: `${stepsDotSize}px`,
|
||||
background: 'transparent',
|
||||
border: 0, // FIXME: hardcode in v4
|
||||
border: 0,
|
||||
|
||||
[`${componentCls}-icon-dot`]: {
|
||||
position: 'relative',
|
||||
float: 'left',
|
||||
width: '100%', // FIXME: hardcode in v4
|
||||
height: '100%', // FIXME: hardcode in v4
|
||||
borderRadius: 100, // FIXME: hardcode in v4
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
borderRadius: 100, // very large number
|
||||
transition: `all ${motionDurationSlow}`,
|
||||
|
||||
/* expand hover area */
|
||||
'&::after': {
|
||||
position: 'absolute',
|
||||
top: -12, // FIXME: hardcode in v4
|
||||
insetInlineStart: -26, // FIXME: hardcode in v4
|
||||
width: 60, // FIXME: hardcode in v4
|
||||
height: 32, // FIXME: hardcode in v4
|
||||
background: new TinyColor('#000').setAlpha(0.001).toRgbString(), // FIXME: hardcode in v4
|
||||
top: -token.marginSM,
|
||||
insetInlineStart: (stepsDotSize - token.controlHeightLG * 1.5) / 2,
|
||||
width: token.controlHeightLG * 1.5,
|
||||
height: token.controlHeight,
|
||||
background: 'transparent',
|
||||
content: '""',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
'&-content': {
|
||||
width: stepsDescriptionMaxWidth,
|
||||
width: descriptionWidth,
|
||||
},
|
||||
[`&-process ${componentCls}-item-icon`]: {
|
||||
position: 'relative',
|
||||
top: -1, // FIXME: hardcode in v4
|
||||
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, // FIXME: hardcode in v4
|
||||
insetInlineStart: 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[`&${componentCls}-vertical${componentCls}-dot`]: {
|
||||
[`${componentCls}-item-icon`]: {
|
||||
marginTop: 13, // FIXME: hardcode in v4
|
||||
marginInlineStart: 0, // FIXME: hardcode in v4
|
||||
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: 6.5, // FIXME: hardcode in v4
|
||||
insetInlineStart: -9, // FIXME: hardcode in v4
|
||||
margin: 0, // FIXME: hardcode in v4
|
||||
padding: '22px 0 4px', // FIXME: hardcode in v4
|
||||
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: 10, // FIXME: hardcode in v4
|
||||
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: 3.5, // FIXME: hardcode in v4
|
||||
top: (token.controlHeightSM - stepsDotSize) / 2,
|
||||
},
|
||||
},
|
||||
|
||||
[`${componentCls}-item:first-child ${componentCls}-icon-dot`]: {
|
||||
insetInlineStart: 0, // FIXME: hardcode in v4
|
||||
insetInlineStart: 0,
|
||||
},
|
||||
[`${componentCls}-item-content`]: {
|
||||
width: 'inherit',
|
||||
},
|
||||
[`${componentCls}-item-process ${componentCls}-item-container ${componentCls}-item-icon ${componentCls}-icon-dot`]:
|
||||
{
|
||||
top: -1, // FIXME: hardcode in v4
|
||||
insetInlineStart: -1, // FIXME: hardcode in v4
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { StepsToken } from '.';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
|
||||
const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
const { antCls, componentCls } = token;
|
||||
@ -8,16 +8,16 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
return {
|
||||
[`&${componentCls}-with-progress`]: {
|
||||
[`${componentCls}-item`]: {
|
||||
paddingTop: 4, // FIXME: hardcode in v4
|
||||
paddingTop: token.paddingXXS,
|
||||
|
||||
[`${componentCls}-item-tail`]: {
|
||||
top: '4px !important', // FIXME: hardcode in v4
|
||||
top: `${token.marginXXS}px !important`,
|
||||
},
|
||||
},
|
||||
|
||||
[`&${componentCls}-horizontal ${componentCls}-item:first-child`]: {
|
||||
paddingBottom: 4, // FIXME: hardcode in v4
|
||||
paddingInlineStart: 4, // FIXME: hardcode in v4
|
||||
paddingBottom: token.paddingXXS,
|
||||
paddingInlineStart: token.paddingXXS,
|
||||
},
|
||||
|
||||
[`${componentCls}-item-icon`]: {
|
||||
@ -25,10 +25,10 @@ const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
|
||||
[`${antCls}-progress`]: {
|
||||
position: 'absolute',
|
||||
top: -5, // FIXME: hardcode in v4
|
||||
insetInlineEnd: -5, // FIXME: hardcode in v4
|
||||
bottom: -5, // FIXME: hardcode in v4
|
||||
insetInlineStart: -5, // FIXME: hardcode in v4
|
||||
insetBlockStart:
|
||||
(token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
|
||||
insetInlineStart:
|
||||
(token.stepsIconSize - token.stepsProgressSize - token.lineWidth * 2) / 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { StepsToken } from '.';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
|
||||
const genStepsRTLStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
const { componentCls } = token;
|
||||
@ -10,99 +10,18 @@ const genStepsRTLStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
direction: 'rtl',
|
||||
|
||||
[`${componentCls}-item`]: {
|
||||
// '&-icon': {
|
||||
// marginInlineEnd: 0,
|
||||
// marginInlineStart: 8,
|
||||
// },
|
||||
// '&-tail': {
|
||||
// insetInlineEnd: 0,
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
'&-subtitle': {
|
||||
// marginInline: '0 8px',
|
||||
float: 'left',
|
||||
},
|
||||
// '&-title': {
|
||||
// paddingInlineEnd: 0,
|
||||
// paddingInlineStart: 16,
|
||||
|
||||
// '&::after': {
|
||||
// insetInlineEnd: '100%',
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
// },
|
||||
},
|
||||
|
||||
// [`&${componentCls}-horizontal:not(${componentCls}-label-vertical)`]: {
|
||||
// [`${componentCls}-item`]: {
|
||||
// paddingInlineEnd: 16,
|
||||
// paddingInlineStart: 0,
|
||||
|
||||
// '&:first-child': {
|
||||
// paddingInlineEnd: 0,
|
||||
// },
|
||||
|
||||
// [`&:last-child ${componentCls}-item-title`]: {
|
||||
// paddingInlineStart: 0,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
|
||||
// custom-icon
|
||||
// [`${componentCls}-item-custom`]: {
|
||||
// [`${componentCls}-item-icon`]: {
|
||||
// [`> ${componentCls}-icon`]: {
|
||||
// insetInlineEnd: 0.5,
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
|
||||
// nav
|
||||
[`&${componentCls}-navigation`]: {
|
||||
// [`&${componentCls}-small`]: {
|
||||
// [`${componentCls}-item-container`]: {
|
||||
// marginInlineEnd: -12,
|
||||
// marginInlineStart: 0,
|
||||
// },
|
||||
// },
|
||||
|
||||
// [`${componentCls}-item-container`]: {
|
||||
// marginInlineEnd: -16,
|
||||
// marginInlineStart: 0,
|
||||
// textAlign: 'right',
|
||||
|
||||
// [`${componentCls}-item-title`]: {
|
||||
// paddingInlineStart: 0,
|
||||
// },
|
||||
// },
|
||||
|
||||
[`${componentCls}-item::after`]: {
|
||||
// insetInlineEnd: '100%',
|
||||
// insetInlineStart: 'auto',
|
||||
// marginInlineEnd: -2,
|
||||
// marginInlineStart: 0,
|
||||
transform: 'rotate(-45deg)',
|
||||
},
|
||||
},
|
||||
|
||||
// small
|
||||
// [`&${componentCls}-small`]: {
|
||||
// [`&${componentCls}-horizontal:not(${componentCls}-label-vertical) ${componentCls}-item`]: {
|
||||
// paddingInlineEnd: 12,
|
||||
// paddingInlineStart: 0,
|
||||
|
||||
// '&:first-child': {
|
||||
// paddingInlineEnd: 0,
|
||||
// },
|
||||
// },
|
||||
|
||||
// [`${componentCls}-item-title`]: {
|
||||
// paddingInlineEnd: 0,
|
||||
// paddingInlineStart: 12,
|
||||
// },
|
||||
// },
|
||||
|
||||
// vertical
|
||||
[`&${componentCls}-vertical`]: {
|
||||
[`> ${componentCls}-item`]: {
|
||||
@ -111,103 +30,17 @@ const genStepsRTLStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
},
|
||||
[`${componentCls}-item-icon`]: {
|
||||
float: 'right',
|
||||
// marginInlineEnd: 0,
|
||||
// marginInlineStart: stepsVerticalIconWidth,
|
||||
},
|
||||
// [`${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
||||
// insetInlineEnd: stepsVerticalTailWidth,
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
},
|
||||
|
||||
// [`&${componentCls}-small`]: {
|
||||
// [`${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
||||
// insetInlineEnd: stepsVerticalTailWidthSm,
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
// },
|
||||
},
|
||||
|
||||
// label
|
||||
// [`&${componentCls}-label-vertical`]: {
|
||||
// [`${componentCls}-item-title`]: {
|
||||
// paddingInlineStart: 0,
|
||||
// },
|
||||
// },
|
||||
|
||||
// progress-dot
|
||||
[`&${componentCls}-dot`]: {
|
||||
// [`${componentCls}-item-tail, &${componentCls}-small ${componentCls}-item-tail`]: {
|
||||
// margin: `0 ${stepsDescriptionMaxWidth / 2}px 0 0`,
|
||||
// '&::after': {
|
||||
// marginInlineEnd: 12,
|
||||
// marginInlineStart: 0,
|
||||
// },
|
||||
// },
|
||||
|
||||
// [`${componentCls}-item:first-child ${componentCls}-icon-dot`]: {
|
||||
// insetInlineEnd: 2,
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
|
||||
// [`&${componentCls}-small ${componentCls}-item:first-child ${componentCls}-icon-dot`]: {
|
||||
// insetInlineEnd: 2,
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
|
||||
// [`${componentCls}-item-icon, &${componentCls}-small ${componentCls}-item-icon`]: {
|
||||
// marginInlineEnd: 67,
|
||||
// marginInlineStart: 0,
|
||||
// },
|
||||
|
||||
[`${componentCls}-item-icon ${componentCls}-icon-dot, &${componentCls}-small ${componentCls}-item-icon ${componentCls}-icon-dot`]:
|
||||
{
|
||||
float: 'right',
|
||||
},
|
||||
|
||||
/* expand hover area */
|
||||
// [`${componentCls}-item-icon ${componentCls}-icon-dot::after, &${componentCls}-small ${componentCls}-item-icon ${componentCls}-icon-dot::after`]:
|
||||
// {
|
||||
// insetInlineEnd: -26,
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
},
|
||||
|
||||
// [`&${componentCls}-vertical${componentCls}-dot`]: {
|
||||
// [`${componentCls}-item-icon`]: {
|
||||
// marginInlineEnd: 0,
|
||||
// marginInlineStart: 16,
|
||||
// },
|
||||
// [`${componentCls}-item`]: {
|
||||
// https://github.com/ant-design/ant-design/issues/18354
|
||||
// [`> ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
||||
// insetInlineEnd: -9,
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
// [`&:first-child ${componentCls}-icon-dot`]: {
|
||||
// insetInlineEnd: 0,
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
// },
|
||||
// [`${componentCls}-item-process`]: {
|
||||
// [`${componentCls}-icon-dot`]: {
|
||||
// insetInlineEnd: -2,
|
||||
// insetInlineStart: 'auto',
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
|
||||
// RTL Steps with progress
|
||||
// [`&${componentCls}-with-progress${componentCls}-horizontal${componentCls}-label-horizontal`]:
|
||||
// {
|
||||
// [`${componentCls}-item:first-child`]: {
|
||||
// paddingInlineEnd: 4,
|
||||
// paddingInlineStart: 0,
|
||||
// },
|
||||
// [`${componentCls}-item:first-child${componentCls}-item-active`]: {
|
||||
// paddingInlineEnd: 4,
|
||||
// },
|
||||
// },
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { StepsToken } from '.';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
|
||||
const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
const {
|
||||
@ -15,9 +15,9 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
return {
|
||||
[`&${componentCls}-small`]: {
|
||||
[`&${componentCls}-horizontal:not(${componentCls}-label-vertical) ${componentCls}-item`]: {
|
||||
paddingInlineStart: 12, // FIXME: hardcode in v4
|
||||
paddingInlineStart: token.paddingSM,
|
||||
'&:first-child': {
|
||||
paddingInlineStart: 0, // FIXME: hardcode in v4
|
||||
paddingInlineStart: 0,
|
||||
},
|
||||
},
|
||||
|
||||
@ -25,21 +25,21 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
width: stepsSmallIconSize,
|
||||
height: stepsSmallIconSize,
|
||||
// margin: stepsSmallIconMargin,
|
||||
marginTop: 0, // FIXME: hardcode in v4
|
||||
marginBottom: 0, // FIXME: hardcode in v4
|
||||
marginInline: '0 8px', // FIXME: hardcode in v4
|
||||
marginTop: 0,
|
||||
marginBottom: 0,
|
||||
marginInline: `0 ${token.marginXS}px`,
|
||||
fontSize: fontSizeSM,
|
||||
lineHeight: `${stepsSmallIconSize}px`,
|
||||
textAlign: 'center',
|
||||
borderRadius: stepsSmallIconSize,
|
||||
},
|
||||
[`${componentCls}-item-title`]: {
|
||||
paddingInlineEnd: 12, // FIXME: hardcode in v4
|
||||
paddingInlineEnd: token.paddingSM,
|
||||
fontSize: fontSizeBase,
|
||||
lineHeight: `${stepsSmallIconSize}px`,
|
||||
|
||||
'&::after': {
|
||||
top: stepsSmallIconSize / 2, // FIXME: hardcode in v4
|
||||
top: stepsSmallIconSize / 2,
|
||||
},
|
||||
},
|
||||
[`${componentCls}-item-description`]: {
|
||||
@ -47,15 +47,15 @@ const genStepsSmallStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
fontSize: fontSizeBase,
|
||||
},
|
||||
[`${componentCls}-item-tail`]: {
|
||||
top: 8, // FIXME: hardcode in v4
|
||||
top: token.marginXS,
|
||||
},
|
||||
[`${componentCls}-item-custom ${componentCls}-item-icon`]: {
|
||||
width: 'inherit',
|
||||
height: 'inherit',
|
||||
lineHeight: 'inherit',
|
||||
background: 'none',
|
||||
border: 0, // FIXME: hardcode in v4
|
||||
borderRadius: 0, // FIXME: hardcode in v4
|
||||
border: 0,
|
||||
borderRadius: 0,
|
||||
[`> ${componentCls}-icon`]: {
|
||||
fontSize: stepsSmallIconSize,
|
||||
lineHeight: `${stepsSmallIconSize}px`,
|
||||
|
||||
@ -1,16 +1,9 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
import type { StepsToken } from '.';
|
||||
import type { GenerateStyle } from '../../_util/theme';
|
||||
|
||||
const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
const {
|
||||
componentCls,
|
||||
stepsSmallIconSize,
|
||||
stepsVerticalIconWidth,
|
||||
stepsVerticalTailWidth,
|
||||
stepsVerticalTailWidthSm,
|
||||
stepsIconSize,
|
||||
} = token;
|
||||
const { componentCls, stepsSmallIconSize, stepsIconSize } = token;
|
||||
|
||||
return {
|
||||
[`&${componentCls}-vertical`]: {
|
||||
@ -20,36 +13,36 @@ const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
[`> ${componentCls}-item`]: {
|
||||
display: 'block',
|
||||
flex: '1 0 auto',
|
||||
paddingInlineStart: 0, // FIXME: hardcode in v4
|
||||
paddingInlineStart: 0,
|
||||
overflow: 'visible',
|
||||
|
||||
[`${componentCls}-item-icon`]: {
|
||||
float: 'left',
|
||||
marginInlineEnd: stepsVerticalIconWidth,
|
||||
marginInlineEnd: token.margin,
|
||||
},
|
||||
[`${componentCls}-item-content`]: {
|
||||
display: 'block',
|
||||
minHeight: 48, // FIXME: hardcode in v4
|
||||
minHeight: token.controlHeight * 1.5,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
[`${componentCls}-item-title`]: {
|
||||
lineHeight: `${stepsIconSize}px`,
|
||||
},
|
||||
[`${componentCls}-item-description`]: {
|
||||
paddingBottom: 12, // FIXME: hardcode in v4
|
||||
paddingBottom: token.paddingSM,
|
||||
},
|
||||
},
|
||||
[`> ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: {
|
||||
position: 'absolute',
|
||||
top: 0, // FIXME: hardcode in v4
|
||||
insetInlineStart: stepsVerticalTailWidth,
|
||||
width: 1, // FIXME: hardcode in v4
|
||||
height: '100%', // FIXME: hardcode in v4
|
||||
padding: `${stepsIconSize + 6}px 0 6px`, // FIXME: hardcode in v4
|
||||
top: 0,
|
||||
insetInlineStart: token.margin,
|
||||
width: token.lineWidth,
|
||||
height: '100%',
|
||||
padding: `${stepsIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
|
||||
|
||||
'&::after': {
|
||||
width: 1, // FIXME: hardcode in v4
|
||||
height: '100%', // FIXME: hardcode in v4
|
||||
width: token.lineWidth,
|
||||
height: '100%',
|
||||
},
|
||||
},
|
||||
[`> ${componentCls}-item:not(:last-child) > ${componentCls}-item-container > ${componentCls}-item-tail`]:
|
||||
@ -65,9 +58,9 @@ const genStepsVerticalStyle: GenerateStyle<StepsToken, CSSObject> = token => {
|
||||
[`&${componentCls}-small ${componentCls}-item-container`]: {
|
||||
[`${componentCls}-item-tail`]: {
|
||||
position: 'absolute',
|
||||
top: 0, // FIXME: hardcode in v4
|
||||
insetInlineStart: stepsVerticalTailWidthSm,
|
||||
padding: `${stepsSmallIconSize + 6}px 0 6px`, // FIXME: hardcode in v4
|
||||
top: 0,
|
||||
insetInlineStart: token.marginSM,
|
||||
padding: `${stepsSmallIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`,
|
||||
},
|
||||
[`${componentCls}-item-title`]: {
|
||||
lineHeight: `${stepsSmallIconSize}px`,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user