This commit is contained in:
2026-05-25 17:08:18 +08:00
parent df501f6151
commit f1259b71b5
9178 changed files with 1626125 additions and 0 deletions
+5
View File
@@ -0,0 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
declare const genHorizontalStyle: GenerateStyle<StepsToken, CSSObject>;
export default genHorizontalStyle;
+35
View File
@@ -0,0 +1,35 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _genStyleUtils = require("../../theme/util/genStyleUtils");
const genHorizontalStyle = token => {
const {
componentCls,
antCls
} = token;
const itemCls = `${componentCls}-item`;
const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
return {
[`${componentCls}-horizontal`]: {
[`> ${itemCls}`]: {
flex: '1 1 auto',
minWidth: token.iconSize,
[`${itemCls}-rail`]: {
[varName('horizontal-rail-margin')]: `calc(${varRef('icon-size-max')} / 2 + ${varRef('item-wrapper-padding-top')})`,
position: 'static',
marginTop: varRef('horizontal-rail-margin'),
width: 'auto',
borderBlockStartWidth: varRef('rail-size'),
flex: 1,
minWidth: 0,
alignSelf: 'flex-start',
transform: 'translateY(-50%)'
}
}
}
};
};
var _default = exports.default = genHorizontalStyle;
+5
View File
@@ -0,0 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
declare const genIconStyle: GenerateStyle<StepsToken, CSSObject>;
export default genIconStyle;
+50
View File
@@ -0,0 +1,50 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _genStyleUtils = require("../../theme/util/genStyleUtils");
const genIconStyle = token => {
const {
componentCls,
customIconFontSize,
motionDurationSlow,
iconSize,
lineWidth,
lineType,
antCls
} = token;
const itemCls = `${componentCls}-item`;
const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
return {
[componentCls]: {
[varName('icon-size')]: iconSize,
[varName('icon-border-width')]: lineWidth,
[`${itemCls}-icon`]: {
width: varRef('icon-size'),
height: varRef('icon-size'),
margin: 0,
flex: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: token.iconFontSize,
fontFamily: token.fontFamily,
lineHeight: varRef('icon-size'),
textAlign: 'center',
borderRadius: varRef('icon-size'),
border: `${varRef('icon-border-width')} ${lineType} transparent`,
transition: ['background-color', 'border', 'color', 'inset', 'transform'].map(key => `${key} ${motionDurationSlow}`).join(', '),
zIndex: 1
},
// ==================== Custom ====================
[`${itemCls}-custom ${itemCls}-icon`]: {
background: 'none',
border: 0,
fontSize: customIconFontSize
}
}
};
};
var _default = exports.default = genIconStyle;
+78
View File
@@ -0,0 +1,78 @@
import type { CSSProperties } from 'react';
import type { FullToken, GetDefaultToken } from '../../theme/internal';
export interface ComponentToken {
/**
* @desc 描述区域最大宽度
* @descEN Max width of description area
* @deprecated This value has been removed by default since v6
*/
descriptionMaxWidth?: number;
/**
* @desc 自定义图标容器尺寸
* @descEN Size of custom icon container
*/
customIconSize: number;
/**
* @desc 自定义图标 top
* @descEN Top of custom icon
*/
customIconTop: number;
/**
* @desc 自定义图标大小
* @descEN Font size of custom icon
*/
customIconFontSize: number;
/**
* @desc 图标容器尺寸
* @descEN Size of icon container
*/
iconSize: number;
/**
* @desc 图标 top
* @descEN Top of icon
*/
iconTop: number;
/**
* @desc 图标大小
* @descEN Size of icon
*/
iconFontSize: number;
/**
* @desc 点状步骤点大小
* @descEN Size of dot
*/
dotSize: number;
/**
* @desc 点状步骤点当前大小
* @descEN Current size of dot
*/
dotCurrentSize: number;
/**
* @desc 可跳转步骤条箭头颜色
* @descEN Color of arrow in nav
*/
navArrowColor: string;
/**
* @desc 可跳转步骤条内容最大宽度
* @descEN Max width of nav content
*/
navContentMaxWidth: CSSProperties['maxWidth'];
/**
* @desc 小号步骤条图标大小
* @descEN Size of small steps icon
*/
iconSizeSM: number;
/**
* TODO: deprecated warning since not used anymore
* @desc 标题行高
* @descEN Line height of title
* @deprecated Not used anymore
*/
titleLineHeight: number | string;
}
export interface StepsToken extends FullToken<'Steps'> {
inlineDotSize: number;
}
export declare const prepareComponentToken: GetDefaultToken<'Steps'>;
declare const _default: (prefixCls: string, rootCls?: string) => readonly [string, string];
export default _default;
+132
View File
@@ -0,0 +1,132 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.prepareComponentToken = exports.default = void 0;
var _style = require("../../style");
var _internal = require("../../theme/internal");
var _genStyleUtils = require("../../theme/util/genStyleUtils");
var _horizontal = _interopRequireDefault(require("./horizontal"));
var _icon = _interopRequireDefault(require("./icon"));
var _inline = _interopRequireDefault(require("./inline"));
var _labelPlacement = _interopRequireDefault(require("./label-placement"));
var _nav = _interopRequireDefault(require("./nav"));
var _panel = _interopRequireDefault(require("./panel"));
var _progress = _interopRequireDefault(require("./progress"));
var _progressDot = _interopRequireDefault(require("./progress-dot"));
var _rtl = _interopRequireDefault(require("./rtl"));
var _small = _interopRequireDefault(require("./small"));
var _status = _interopRequireDefault(require("./status"));
var _vertical = _interopRequireDefault(require("./vertical"));
const genBasicStyle = token => {
const {
componentCls,
antCls
} = token;
const itemCls = `${componentCls}-item`;
const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
return {
[componentCls]: {
[varName('title-font-size')]: token.fontSizeLG,
[varName('title-line-height')]: token.lineHeightLG,
[varName('subtitle-font-size')]: token.fontSize,
[varName('subtitle-line-height')]: token.lineHeight,
[varName('item-wrapper-padding-top')]: '0px',
[varName('rail-size')]: token.lineWidth,
[varName('rail-line-style')]: token.lineType,
...(0, _style.resetComponent)(token),
display: 'flex',
flexWrap: 'nowrap',
alignItems: 'flex-start',
[itemCls]: {
flex: 'none',
position: 'relative'
},
[`${itemCls}-wrapper`]: {
display: 'flex',
flexWrap: 'nowrap',
paddingTop: varRef('item-wrapper-padding-top')
},
// Icon
// Check `./icon.ts`
// Header
[`${itemCls}-header`]: {
display: 'flex',
flexWrap: 'nowrap',
alignItems: 'center'
},
// >>> Title
[`${itemCls}-title`]: {
color: token.colorText,
fontSize: varRef('title-font-size'),
lineHeight: varRef('title-line-height'),
wordBreak: 'break-word'
},
// >>> Sub Title
[`${itemCls}-subtitle`]: {
color: token.colorTextDescription,
fontWeight: 'normal',
fontSize: varRef('subtitle-font-size'),
lineHeight: varRef('subtitle-line-height'),
marginInlineStart: token.marginXS,
wordBreak: 'break-word'
},
// Content
[`${itemCls}-content`]: {
color: token.colorTextDescription,
fontSize: token.fontSize,
lineHeight: token.lineHeight,
wordBreak: 'break-word'
},
// Rail
[`${itemCls}-rail`]: {
borderStyle: varRef('rail-line-style'),
borderWidth: 0
},
// Motion
[`${itemCls}-title, ${itemCls}-subtitle, ${itemCls}-content, ${itemCls}-rail`]: {
transition: `all ${token.motionDurationSlow}`
},
// ========================== Ellipsis ==========================
[`&${componentCls}-ellipsis`]: {
[`${itemCls}-title, ${itemCls}-subtitle, ${itemCls}-content`]: _style.textEllipsis
},
// ========================= Clickable ==========================
[`${itemCls}[role='button']:not(${itemCls}-active):hover`]: {
cursor: 'pointer'
}
}
};
};
// ============================== Export ==============================
const prepareComponentToken = token => ({
titleLineHeight: token.controlHeight,
customIconSize: token.controlHeight,
customIconTop: 0,
customIconFontSize: token.controlHeightSM,
iconSize: token.controlHeight,
iconTop: -0.5,
// magic for ui experience
iconFontSize: token.fontSize,
iconSizeSM: token.fontSizeHeading3,
dotSize: token.controlHeight / 4,
dotCurrentSize: token.controlHeightLG / 4,
navArrowColor: token.colorTextDisabled,
navContentMaxWidth: 'unset',
descriptionMaxWidth: undefined,
// should be `undefined` to create css var
waitIconColor: token.wireframe ? token.colorTextDisabled : token.colorTextLabel,
waitIconBgColor: token.wireframe ? token.colorBgContainer : token.colorFillContent,
waitIconBorderColor: token.wireframe ? token.colorTextDisabled : 'transparent',
finishIconBgColor: token.wireframe ? token.colorBgContainer : token.controlItemBgActive,
finishIconBorderColor: token.wireframe ? token.colorPrimary : token.controlItemBgActive
});
exports.prepareComponentToken = prepareComponentToken;
var _default = exports.default = (0, _internal.genStyleHooks)('Steps', token => {
const stepsToken = (0, _internal.mergeToken)(token, {
inlineDotSize: 6
});
return [genBasicStyle(stepsToken), (0, _icon.default)(stepsToken), (0, _vertical.default)(stepsToken), (0, _horizontal.default)(stepsToken), (0, _labelPlacement.default)(stepsToken), (0, _small.default)(stepsToken), (0, _progressDot.default)(stepsToken), (0, _status.default)(stepsToken), (0, _nav.default)(stepsToken), (0, _panel.default)(stepsToken), (0, _inline.default)(stepsToken), (0, _progress.default)(stepsToken), (0, _rtl.default)(stepsToken)];
}, prepareComponentToken);
+5
View File
@@ -0,0 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
declare const genInlineStyle: GenerateStyle<StepsToken, CSSObject>;
export default genInlineStyle;
+78
View File
@@ -0,0 +1,78 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _genStyleUtils = require("../../theme/util/genStyleUtils");
const genInlineStyle = token => {
const {
componentCls,
inlineDotSize,
paddingXS,
lineWidth,
antCls,
calc
} = token;
const containerPaddingTop = calc(paddingXS).add(lineWidth).equal();
const itemCls = `${componentCls}-item`;
const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
return {
[`${componentCls}-inline`]: {
[varName('items-offset')]: '0',
[varName('item-wrapper-padding-top')]: containerPaddingTop,
display: 'inline-flex',
'&:before': {
content: '""',
flex: varRef('items-offset')
},
[itemCls]: {
// ========================= Variable =========================
// Item
[varName('title-vertical-row-gap')]: paddingXS,
// Icon
[varName('icon-size')]: inlineDotSize,
[varName('icon-size-active')]: inlineDotSize,
// Title
[varName('title-font-size')]: token.fontSizeSM,
[varName('title-line-height')]: token.lineHeightSM,
[varName('item-title-color')]: token.colorTextSecondary,
[varName('subtitle-font-size')]: token.fontSizeSM,
[varName('subtitle-line-height')]: token.lineHeightSM,
[varName('item-subtitle-color')]: token.colorTextQuaternary,
// Rail
[varName('rail-size')]: token.lineWidth,
[varName('title-horizontal-rail-gap')]: '0px',
// ========================== Styles ==========================
flex: 1,
'&-wrapper': {
paddingInline: token.paddingXXS,
marginInline: token.calc(token.marginXXS).div(2).equal(),
borderRadius: token.borderRadiusSM,
cursor: 'pointer',
transition: `background-color ${token.motionDurationMid}`,
'&:hover': {
background: token.controlItemBgHover
}
},
// Icon
'&-icon': {
[`${itemCls}-icon-dot`]: {
'&:after': {
display: 'none'
}
}
},
// Header
'&-title': {
fontWeight: 'normal',
whiteSpace: 'nowrap'
},
'&-content': {
display: 'none'
}
}
}
};
};
var _default = exports.default = genInlineStyle;
@@ -0,0 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
declare const genLabelPlacementStyle: GenerateStyle<StepsToken, CSSObject>;
export default genLabelPlacementStyle;
+142
View File
@@ -0,0 +1,142 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _genStyleUtils = require("../../theme/util/genStyleUtils");
var _util = require("./util");
const genLabelPlacementStyle = token => {
const {
componentCls,
descriptionMaxWidth,
marginXS,
fontHeightLG,
margin,
paddingSM,
marginXXS,
antCls,
calc
} = token;
const itemCls = `${componentCls}-item`;
const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
return {
// ====================== Shared ======================
[componentCls]: {
// Dot Steps active icon size is 2px larger than the default icon size
[varName('icon-size-max')]: `max(${varRef('icon-size')}, ${varRef('icon-size-active', varRef('icon-size'))})`,
// Icon
[`${itemCls}-icon`]: {
marginBlockStart: `calc((${varRef('heading-height')} - ${varRef('icon-size')}) / 2)`
}
},
// ==================== Horizontal ====================
[`${componentCls}-title-horizontal`]: {
[varName('title-horizontal-item-margin')]: margin,
[varName('title-horizontal-rail-margin')]: margin,
[varName('title-horizontal-title-height')]: fontHeightLG,
[varName('heading-height')]: `max(${varRef('icon-size')}, ${varRef('title-horizontal-title-height')})`,
// Horizontal only
[`&${componentCls}-horizontal, &${componentCls}-horizontal-alternate`]: {
[`${itemCls}:not(:first-child)`]: {
marginInlineStart: varRef('title-horizontal-item-margin')
},
[`${itemCls}:last-child`]: {
flex: '0 1 auto'
},
[`${itemCls}-wrapper`]: {
columnGap: token.marginXS
}
},
// Vertical only
[`&${componentCls}-vertical`]: {
[`${itemCls}-wrapper`]: {
columnGap: token.margin
},
[`${itemCls}-empty-header`]: {
[`${itemCls}-header`]: {
minHeight: 'auto'
},
[`${itemCls}-content`]: {
marginTop: calc(varRef('heading-height')).sub(token.fontHeight).div(2).equal()
}
}
},
// Shared
[`${itemCls}-section`]: {
flex: 1,
minWidth: 0
},
[`${itemCls}-header`]: {
minHeight: varRef('heading-height')
},
[`${itemCls}-title`]: {
flex: '0 1 auto'
},
[`${itemCls}-content`]: {
maxWidth: descriptionMaxWidth
},
[`${itemCls}-subtitle`]: {
flex: '0 9999 auto'
},
[`&${componentCls}-horizontal ${itemCls}-rail`]: {
[varName('item-wrapper-padding-top')]: '0px',
flex: '1 1 0%',
marginInlineStart: varRef('title-horizontal-rail-margin')
}
},
// ===================== Vertical =====================
[`${componentCls}-title-vertical`]: {
[varName('title-vertical-row-gap')]: paddingSM,
[varName('title-horizontal-rail-gap')]: marginXXS,
[varName('heading-height')]: varRef('icon-size-max'),
[`> ${itemCls}`]: {
flex: '1 1 0%',
[`${itemCls}-wrapper`]: {
flexDirection: 'column',
rowGap: varRef('title-vertical-row-gap'),
alignItems: 'center'
},
// Section
[`${itemCls}-section`]: {
alignSelf: 'stretch'
},
// Header
[`${itemCls}-header`]: {
flexDirection: 'column',
alignItems: 'center'
},
// >>> title & subtitle & Content
[`${itemCls}-title, ${itemCls}-subtitle, ${itemCls}-content`]: {
textAlign: 'center',
maxWidth: '100%'
},
[`${itemCls}-subtitle`]: {
margin: 0
},
// >>> rail
[`${itemCls}-rail`]: {
position: 'absolute',
top: 0,
width: `calc(100% - ${varRef('icon-size')} - ${varRef('title-horizontal-rail-gap')} * 2)`,
insetInlineStart: `calc(50% + ${varRef('icon-size')} / 2 + ${varRef('title-horizontal-rail-gap')})`
}
},
// With descriptionMaxWidth
...(0, _util.getItemWithWidthStyle)(token, marginXS, {
[`${itemCls}:last-child`]: {
flex: 'none'
},
// Icon
[`${itemCls}-icon`]: {
alignSelf: 'flex-start'
},
// Section
[`${itemCls}-section`]: {
width: descriptionMaxWidth
}
})
}
};
};
var _default = exports.default = genLabelPlacementStyle;
+5
View File
@@ -0,0 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
declare const genLegacyNavStyle: GenerateStyle<StepsToken, CSSObject>;
export default genLegacyNavStyle;
+130
View File
@@ -0,0 +1,130 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _cssinjs = require("@ant-design/cssinjs");
var _genStyleUtils = require("../../theme/util/genStyleUtils");
const genLegacyNavStyle = token => {
const {
componentCls,
fontSizeIcon,
navContentMaxWidth,
navArrowColor,
colorPrimary,
motionDurationSlow,
antCls,
calc
} = token;
const itemCls = `${componentCls}-item`;
const stepsNavActiveColor = colorPrimary;
const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
return {
[`${componentCls}${componentCls}-navigation`]: {
// ==========================================================
// == Shared ==
// ==========================================================
// ========================== Item ==========================
[itemCls.repeat(4)]: {
display: 'flex',
justifyContent: 'center',
position: 'relative',
flex: 1,
marginInlineStart: 0,
[`${itemCls}-wrapper`]: {
paddingBlock: token.paddingSM
},
// Section
[`${itemCls}-section`]: {
maxWidth: navContentMaxWidth
},
// Rail
[`${itemCls}-rail`]: {
display: 'none'
},
// ======================== Active ========================
'&:before': {
position: 'absolute',
display: 'block',
backgroundColor: stepsNavActiveColor,
transition: `all ${motionDurationSlow}`,
transitionTimingFunction: 'ease-out',
content: '""'
},
'&:not(:last-child):after': {
position: 'absolute',
display: 'block',
borderTop: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${navArrowColor}`,
borderBottom: 'none',
borderInlineStart: 'none',
borderInlineEnd: `${(0, _cssinjs.unit)(token.lineWidth)} ${token.lineType} ${navArrowColor}`,
content: '""'
},
// Reset active item style to same as default
[`&${itemCls}-active`]: {
[varName('item-content-active-color')]: varRef('item-content-color'),
[varName('item-icon-active-bg-color')]: varRef('item-icon-bg-color'),
[varName('item-icon-active-border-color')]: varRef('item-icon-border-color'),
[varName('item-icon-active-text-color')]: varRef('item-icon-text-color')
}
},
// ==========================================================
// == Horizontal ==
// ==========================================================
[`&${componentCls}-horizontal`]: {
[itemCls]: {
'&:before': {
bottom: 0,
insetInlineStart: '50%',
width: 0,
height: token.lineWidthBold
},
[`&${itemCls}-active:before`]: {
insetInlineStart: 0,
width: '100%'
},
'&:not(:last-child):after': {
top: `50%`,
insetInlineStart: calc(fontSizeIcon).div(2).mul(-1).add('100%').equal(),
width: fontSizeIcon,
height: fontSizeIcon,
transform: 'translateY(-50%) rotate(45deg)'
}
}
},
// ==========================================================
// == Vertical ==
// ==========================================================
[`&${componentCls}-vertical`]: {
[itemCls.repeat(4)]: {
[`${itemCls}-content`]: {
padding: 0
},
'&:before': {
insetInlineEnd: 0,
top: '50%',
width: token.lineWidthBold,
height: 0
},
[`&${itemCls}-active::before`]: {
top: 0,
height: '100%'
},
'&:not(:last-child):after': {
left: {
_skip_check_: true,
value: '50%'
},
top: '100%',
width: calc(fontSizeIcon).div(3).mul(2).equal(),
height: calc(fontSizeIcon).div(3).mul(2).equal(),
transform: 'translateY(-50%) translateX(-50%) rotate(135deg)'
}
}
}
// ========================= Legacy =========================
}
};
};
var _default = exports.default = genLegacyNavStyle;
+5
View File
@@ -0,0 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
declare const genPanelStyle: GenerateStyle<StepsToken, CSSObject>;
export default genPanelStyle;
+161
View File
@@ -0,0 +1,161 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _cssinjs = require("@ant-design/cssinjs");
var _genStyleUtils = require("../../theme/util/genStyleUtils");
const genPanelStyle = token => {
const {
componentCls,
lineWidthBold,
borderRadius,
borderRadiusSM,
motionDurationMid,
paddingXS,
lineType,
paddingSM,
antCls,
calc
} = token;
const itemCls = `${componentCls}-item`;
const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
const borderStyle = `${(0, _cssinjs.unit)(lineWidthBold)} ${lineType} ${varRef('panel-border-color')}`;
return {
[`${componentCls}${componentCls}-panel`]: [
// ==========================================================
// == Clean up ==
// ==========================================================
{
// ====================== Shared ======================
[`${itemCls}-rail`]: {
display: 'none'
},
// ==================== Horizontal ====================
[`&${componentCls}-horizontal`]: {
alignItems: 'stretch',
[itemCls]: {
flex: 1,
margin: 0
}
}
},
// ==========================================================
// == Template ==
// ==========================================================
{
'&': {
[varName('panel-padding')]: paddingSM,
[varName('item-border-radius')]: borderRadius,
[itemCls]: {
// Panel background
[varName('panel-bg-color')]: varRef('item-icon-bg-color'),
[varName('panel-border-color')]: varRef('item-icon-border-color'),
[varName('panel-active-bg-color')]: varRef('item-icon-active-bg-color'),
[varName('panel-active-border-color')]: varRef('item-icon-active-border-color'),
[varName('panel-title-height')]: `calc(${varRef('title-font-size')} * ${varRef('title-line-height')})`,
// Base height = padding * 2 + iconSize + contentHeight
[varName('item-base-height')]: calc(varRef('panel-padding')).mul(2).add(varRef('icon-size')).add(varRef('panel-title-height')).equal(),
[varName('item-base-width')]: `calc(${varRef('item-base-height')} * 0.7071)`,
transition: `background-color ${motionDurationMid}`
}
},
// ======================= Icon =======================
[`${itemCls}-icon`]: {
display: 'none'
},
// ====================== Header ======================
[`${itemCls}-header`]: {
minHeight: 'auto'
},
// ====================== Arrow =======================
[`${componentCls}-panel-arrow`]: {
position: 'absolute',
top: calc(lineWidthBold).mul(-1).equal(),
insetInlineStart: '100%',
zIndex: 1,
height: calc(lineWidthBold).mul(2).add('100%').equal(),
width: varRef('item-base-width'),
overflow: 'visible',
strokeLinecap: 'round',
path: {
fill: varRef('panel-bg-color'),
stroke: varRef('panel-border-color'),
strokeWidth: lineWidthBold,
vectorEffect: 'non-scaling-stroke',
transition: `fill ${motionDurationMid}`
}
},
[`${itemCls}:last-child ${componentCls}-panel-arrow`]: {
display: 'none'
},
// ======================= Item =======================
[itemCls]: {
padding: varRef('panel-padding'),
background: varRef('panel-bg-color'),
position: 'relative',
borderBlock: borderStyle,
'&:not(:first-child)': {
paddingInlineStart: `calc(${varRef('panel-padding')} + ${varRef('item-base-width')})`
},
'&:first-child': {
borderInlineStart: borderStyle,
borderStartStartRadius: varRef('item-border-radius'),
borderEndStartRadius: varRef('item-border-radius')
},
'&:last-child': {
borderInlineEnd: borderStyle,
borderStartEndRadius: varRef('item-border-radius'),
borderEndEndRadius: varRef('item-border-radius')
},
'&-active': {
background: varRef('panel-active-bg-color'),
borderColor: varRef('panel-active-border-color'),
[`${componentCls}-panel-arrow`]: {
path: {
fill: varRef('panel-active-bg-color'),
stroke: varRef('panel-active-border-color')
}
},
[`${itemCls}-title, ${itemCls}-subtitle, ${itemCls}-content`]: {
color: varRef('item-icon-active-text-color')
}
}
}
},
// ==========================================================
// == Size ==
// ==========================================================
{
[`&${componentCls}-small`]: {
[varName('panel-padding')]: paddingXS,
[varName('item-border-radius')]: borderRadiusSM
}
},
// ==========================================================
// == Filled ==
// ==========================================================
{
[`&${componentCls}-filled`]: {
[itemCls]: {
'&:not(:first-child)': {
clipPath: `polygon(${[`${(0, _cssinjs.unit)(lineWidthBold)} 0`, `calc(100% + ${varRef('item-base-width')}) 0`, `calc(100% + ${varRef('item-base-width')}) 100%`, `${(0, _cssinjs.unit)(lineWidthBold)} 100%`, `calc(${varRef('item-base-width')} + ${(0, _cssinjs.unit)(lineWidthBold)}) 50%`].join(',')})`
}
}
}
},
// ==========================================================
// == Outlined ==
// ==========================================================
{
[`&${componentCls}-outlined`]: {
[`${componentCls}-panel-arrow`]: {
top: calc(lineWidthBold).div(2).mul(-1).equal(),
height: calc(lineWidthBold).add('100%').equal()
}
}
}]
};
};
var _default = exports.default = genPanelStyle;
+5
View File
@@ -0,0 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
declare const genDotStyle: GenerateStyle<StepsToken, CSSObject>;
export default genDotStyle;
+63
View File
@@ -0,0 +1,63 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _genStyleUtils = require("../../theme/util/genStyleUtils");
var _util = require("./util");
const genDotStyle = token => {
const {
componentCls,
iconSize,
dotSize,
dotCurrentSize,
marginXXS,
lineWidthBold,
fontSizeSM,
antCls
} = token;
const itemCls = `${componentCls}-item`;
const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
return {
[`${componentCls}${componentCls}-dot`]: {
[varName('icon-size-active')]: dotCurrentSize,
[varName('icon-size')]: dotSize,
[varName('dot-icon-size')]: dotSize,
[varName('dot-icon-border-width')]: lineWidthBold,
[varName('rail-size')]: lineWidthBold,
[varName('icon-border-width')]: lineWidthBold,
// ========================= Shared ==========================
// Icon
[`${itemCls}-custom ${itemCls}-icon`]: {
fontSize: fontSizeSM
},
[`${itemCls}-icon`]: {
position: 'relative',
'&:after': {
content: '""',
width: iconSize,
height: iconSize,
display: 'block',
position: 'absolute',
top: '50%',
left: {
_skip_check_: true,
value: '50%'
},
transform: 'translate(-50%, -50%)'
}
},
// // >>> active
[`${itemCls}-active ${itemCls}-icon`]: {
[varName('icon-size')]: varRef('icon-size-active')
},
// ======================= Horizontal ========================
[`&${componentCls}-horizontal`]: {
// With descriptionMaxWidth
[`&, &${componentCls}-small`]: (0, _util.getItemWithWidthStyle)(token, marginXXS)
}
}
};
};
var _default = exports.default = genDotStyle;
+5
View File
@@ -0,0 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
declare const genStepsProgressStyle: GenerateStyle<StepsToken, CSSObject>;
export default genStepsProgressStyle;
+58
View File
@@ -0,0 +1,58 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _genStyleUtils = require("../../theme/util/genStyleUtils");
const genStepsProgressStyle = token => {
const {
calc,
antCls,
componentCls,
lineWidthBold,
motionDurationSlow
} = token;
const itemCls = `${componentCls}-item`;
const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
const enhanceSize = calc(lineWidthBold).add(lineWidthBold).equal();
return {
[`${componentCls}${componentCls}-with-progress`]: {
[varName('item-wrapper-padding-top')]: enhanceSize,
[`${itemCls}${itemCls}-process`]: {
[`${itemCls}-icon`]: {
position: 'relative'
}
},
[`${itemCls}-progress-icon`]: {
'&-svg': {
[varName('svg-size')]: calc(enhanceSize).mul(2).add(varRef('icon-size')).equal(),
[varName('icon-size-ptg-unitless')]: `calc(100 / tan(atan2(${varRef('svg-size')}, 1px)))`,
fontSize: varRef('svg-size'),
lineHeight: varRef('icon-size-ptg-unitless'),
position: 'absolute',
inset: calc(enhanceSize).mul(-1).equal(),
width: 'auto',
height: 'auto'
},
'&-circle': {
lineHeight: varRef('icon-size-ptg-unitless'),
strokeWidth: calc(varRef('icon-size-ptg-unitless')).mul(lineWidthBold).equal(),
[varName('progress-radius')]: calc(varRef('svg-size')).sub(lineWidthBold).mul(varRef('icon-size-ptg-unitless')).div(2).equal(),
r: varRef('progress-radius'),
fill: 'none',
cx: 50,
cy: 50,
transition: `all ${motionDurationSlow} ease-in-out`,
'&-rail': {
stroke: token.colorSplit
},
'&-ptg': {
stroke: token.colorPrimary
}
}
}
}
};
};
var _default = exports.default = genStepsProgressStyle;
+5
View File
@@ -0,0 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
declare const genRTLStyle: GenerateStyle<StepsToken, CSSObject>;
export default genRTLStyle;
+42
View File
@@ -0,0 +1,42 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _cssinjs = require("@ant-design/cssinjs");
var _genStyleUtils = require("../../theme/util/genStyleUtils");
const genRTLStyle = token => {
const {
componentCls,
lineWidthBold,
antCls
} = token;
const itemCls = `${componentCls}-item`;
const [, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
return {
[`${componentCls}${componentCls}-rtl`]: {
direction: 'rtl',
// nav
[`&${componentCls}-navigation${componentCls}-horizontal`]: {
[`${itemCls}:after`]: {
transform: 'translateY(-50%) rotate(-45deg)'
}
},
// panel
[`&${componentCls}-panel`]: {
[`${componentCls}-panel-arrow`]: {
transform: `scaleX(-1)`
},
[`&${componentCls}-filled`]: {
[itemCls]: {
'&:not(:first-child)': {
clipPath: `polygon(${[`calc(0px - ${varRef('item-base-width')}) 0px`, `calc(100% - ${(0, _cssinjs.unit)(lineWidthBold)}) 0px`, `calc(100% - ${varRef('item-base-width')} - ${(0, _cssinjs.unit)(lineWidthBold)}) 50%`, `calc(100% - ${(0, _cssinjs.unit)(lineWidthBold)}) 100%`, `calc(0px - ${varRef('item-base-width')}) 100%`].join(',')})`
}
}
}
}
}
};
};
var _default = exports.default = genRTLStyle;
+5
View File
@@ -0,0 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
declare const genSmallStyle: GenerateStyle<StepsToken, CSSObject>;
export default genSmallStyle;
+36
View File
@@ -0,0 +1,36 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _genStyleUtils = require("../../theme/util/genStyleUtils");
var _util = require("./util");
const genSmallStyle = token => {
const {
componentCls,
iconSizeSM,
fontSize,
lineHeight,
marginXS,
fontHeight,
marginSM,
paddingXS,
antCls
} = token;
const [varName] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
return {
[`${componentCls}${componentCls}-small`]: {
[varName('icon-size')]: iconSizeSM,
[varName('title-horizontal-item-margin')]: marginSM,
[varName('title-vertical-row-gap')]: paddingXS,
[varName('title-font-size')]: fontSize,
[varName('title-line-height')]: lineHeight,
[varName('title-horizontal-rail-margin')]: marginXS,
[varName('title-horizontal-title-height')]: fontHeight,
// Horizontal: label vertical
[`&${componentCls}-horizontal${componentCls}-title-vertical`]: (0, _util.getItemWithWidthStyle)(token, marginXS)
}
};
};
var _default = exports.default = genSmallStyle;
+9
View File
@@ -0,0 +1,9 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
export declare const STATUS_WAIT = "wait";
export declare const STATUS_PROCESS = "process";
export declare const STATUS_FINISH = "finish";
export declare const STATUS_ERROR = "error";
declare const genStatusStyle: GenerateStyle<StepsToken, CSSObject>;
export default genStatusStyle;
+295
View File
@@ -0,0 +1,295 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.STATUS_WAIT = exports.STATUS_PROCESS = exports.STATUS_FINISH = exports.STATUS_ERROR = void 0;
var _genStyleUtils = require("../../theme/util/genStyleUtils");
const STATUS_WAIT = exports.STATUS_WAIT = 'wait';
const STATUS_PROCESS = exports.STATUS_PROCESS = 'process';
const STATUS_FINISH = exports.STATUS_FINISH = 'finish';
const STATUS_ERROR = exports.STATUS_ERROR = 'error';
const genStatusStyle = token => {
const {
componentCls,
colorTextDisabled,
colorTextLightSolid,
colorPrimary,
colorTextLabel,
colorError,
colorErrorHover,
colorErrorBgFilledHover,
colorFillTertiary,
colorErrorBg,
colorPrimaryBgHover,
colorPrimaryBg,
colorText,
colorTextDescription,
colorBgContainer,
colorPrimaryHover,
lineType,
antCls
} = token;
const itemCls = `${componentCls}-item`;
const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
return {
[componentCls]: [{
// ========================= Variable =========================
[itemCls]: {
// Normal
// >>> line
[varName('item-solid-line-color')]: '#000',
// >>> text
[varName('item-title-color')]: '#000',
[varName('item-content-color')]: '#000',
[varName('item-subtitle-color')]: varRef('item-content-color'),
// >>> icon
[varName('item-icon-custom-color')]: '#000',
[varName('item-icon-bg-color')]: '#000',
[varName('item-icon-border-color')]: '#000',
[varName('item-icon-text-color')]: '#fff',
// >>> dot
[varName('item-icon-dot-color')]: '#000',
[varName('item-icon-dot-bg-color')]: varRef('item-icon-dot-color'),
[varName('item-icon-dot-border-color')]: varRef('item-icon-dot-color'),
// Hover
// >>> text
[varName('item-text-hover-color')]: '#000',
// >>> icon
[varName('item-icon-bg-hover-color')]: varRef('item-icon-bg-color'),
[varName('item-icon-border-hover-color')]: varRef('item-icon-border-color'),
[varName('item-icon-text-hover-color')]: varRef('item-icon-text-color'),
// Active
// >>> text
[varName('item-content-active-color')]: varRef('item-content-color'),
// >>> icon
[varName('item-icon-active-bg-color')]: varRef('item-icon-bg-color'),
[varName('item-icon-active-border-color')]: varRef('item-icon-border-color'),
[varName('item-icon-active-text-color')]: varRef('item-icon-text-color'),
// Status
[varName('item-process-rail-line-style')]: lineType
},
// ========================= Template =========================
// Normal
// >>> line
[`${itemCls}-rail`]: {
borderColor: varRef('item-solid-line-color')
},
// >>> icon
[`${itemCls}-custom ${itemCls}-icon`]: {
color: varRef('item-icon-custom-color')
},
// >>> text
[`${itemCls}-title`]: {
color: varRef('item-title-color')
},
[`${itemCls}-subtitle`]: {
color: varRef('item-subtitle-color')
},
[`${itemCls}-content`]: {
color: varRef('item-content-color')
},
// Active
// >>> icon
[`${itemCls}-active ${itemCls}-icon`]: {
//
},
// >>> text
[`${itemCls}-active ${itemCls}-content`]: {
color: varRef('item-content-active-color')
},
// Hover
// >>> text
[`${itemCls}[role='button']:not(${itemCls}-active):hover`]: {
[`${itemCls}-title, ${itemCls}-content`]: {
color: varRef('item-text-hover-color')
}
},
// Not dot
[`&:not(${componentCls}-dot)`]: {
[`${itemCls}:not(${itemCls}-custom)`]: {
[`${itemCls}-icon`]: {
background: varRef('item-icon-bg-color'),
borderColor: varRef('item-icon-border-color'),
color: varRef('item-icon-text-color')
},
// Hover
[`&[role='button']:not(${itemCls}-active):hover`]: {
[`${itemCls}-icon`]: {
background: varRef('item-icon-bg-hover-color'),
borderColor: varRef('item-icon-border-hover-color'),
color: varRef('item-icon-text-hover-color')
}
},
// Active
[`&${itemCls}-active`]: {
[`${itemCls}-icon`]: {
background: varRef('item-icon-active-bg-color'),
borderColor: varRef('item-icon-active-border-color'),
color: varRef('item-icon-active-text-color')
}
}
}
},
// Dot
[`&${componentCls}-dot`]: {
[`${itemCls}-icon`]: {
background: varRef('item-icon-dot-bg-color'),
borderColor: varRef('item-icon-dot-border-color'),
color: varRef('item-icon-dot-color'),
[`&${itemCls}-icon-dot-custom`]: {
background: 'transparent',
border: 'none'
}
}
}
}, {
// ========================== Shared ==========================
// Wait
[`${itemCls}-${STATUS_WAIT}`]: {
[varName('item-icon-custom-color')]: colorTextDisabled,
[varName('item-title-color')]: colorTextDescription,
[varName('item-content-color')]: colorTextDescription,
[varName('item-content-active-color')]: colorText,
[varName('item-text-hover-color')]: colorPrimaryHover
},
[`${itemCls}-rail-${STATUS_WAIT}`]: {
[varName('item-solid-line-color')]: colorTextDisabled
},
// Process
[`${itemCls}-${STATUS_PROCESS}`]: {
[varName('item-icon-custom-color')]: colorPrimary,
[varName('item-title-color')]: colorText,
[varName('item-content-color')]: colorTextDescription,
[varName('item-content-active-color')]: colorText,
[varName('item-text-hover-color')]: colorPrimaryHover
},
[`${itemCls}-rail-${STATUS_PROCESS}`]: {
[varName('item-solid-line-color')]: colorPrimary,
// Special for Timeline usage
[varName('rail-line-style')]: varRef('item-process-rail-line-style')
},
// Finish
[`${itemCls}-${STATUS_FINISH}`]: {
[varName('item-icon-custom-color')]: colorPrimary,
[varName('item-title-color')]: colorText,
[varName('item-content-color')]: colorTextDescription,
[varName('item-content-active-color')]: colorText,
[varName('item-text-hover-color')]: colorPrimaryHover
},
[`${itemCls}-rail-${STATUS_FINISH}`]: {
[varName('item-solid-line-color')]: colorPrimary
},
// Error
[`${itemCls}-${STATUS_ERROR}`]: {
[varName('item-icon-custom-color')]: colorError,
[varName('item-title-color')]: colorError,
[varName('item-content-color')]: colorError,
[varName('item-content-active-color')]: colorError,
[varName('item-text-hover-color')]: colorErrorHover
},
[`${itemCls}-rail-${STATUS_ERROR}`]: {
[varName('item-solid-line-color')]: colorError
}
}, {
// ========================== Filled ==========================
[`&${componentCls}-filled`]: {
[itemCls]: {
[varName('item-icon-dot-border-color')]: 'transparent'
},
// Wait
[`${itemCls}-${STATUS_WAIT}`]: {
[varName('item-icon-bg-color')]: colorFillTertiary,
[varName('item-icon-border-color')]: 'transparent',
[varName('item-icon-text-color')]: colorTextLabel,
[varName('item-icon-dot-bg-color')]: colorTextDisabled,
// Hover
[varName('item-icon-bg-hover-color')]: colorPrimaryBgHover,
[varName('item-icon-border-hover-color')]: 'transparent',
[varName('item-icon-text-hover-color')]: colorPrimary,
// Active
[varName('item-icon-active-bg-color')]: colorPrimary,
[varName('item-icon-active-border-color')]: 'transparent',
[varName('item-icon-active-text-color')]: colorTextLightSolid
},
// Finish & Process
[`${itemCls}-${STATUS_PROCESS}, ${itemCls}-${STATUS_FINISH}`]: {
[varName('item-icon-bg-color')]: colorPrimaryBg,
[varName('item-icon-border-color')]: 'transparent',
[varName('item-icon-text-color')]: colorPrimary,
[varName('item-icon-dot-bg-color')]: colorPrimary,
// Hover
[varName('item-icon-bg-hover-color')]: colorPrimaryBgHover,
[varName('item-icon-border-hover-color')]: 'transparent',
[varName('item-icon-text-hover-color')]: colorPrimary,
// Active
[varName('item-icon-active-bg-color')]: colorPrimary,
[varName('item-icon-active-border-color')]: 'transparent',
[varName('item-icon-active-text-color')]: colorTextLightSolid
},
// Error
[`${itemCls}-${STATUS_ERROR}`]: {
[varName('item-icon-bg-color')]: colorErrorBg,
[varName('item-icon-border-color')]: 'transparent',
[varName('item-icon-text-color')]: colorError,
[varName('item-icon-dot-bg-color')]: colorError,
// Hover
[varName('item-icon-bg-hover-color')]: colorErrorBgFilledHover,
[varName('item-icon-border-hover-color')]: 'transparent',
[varName('item-icon-text-hover-color')]: colorError,
// Active
[varName('item-icon-active-bg-color')]: colorError,
[varName('item-icon-active-border-color')]: 'transparent',
[varName('item-icon-active-text-color')]: colorTextLightSolid
}
}
}, {
// ========================= Outlined =========================
[`&${componentCls}-outlined`]: {
[itemCls]: {
[varName('item-icon-dot-bg-color')]: 'transparent'
},
// Wait
[`${itemCls}-${STATUS_WAIT}`]: {
[varName('item-icon-bg-color')]: colorBgContainer,
[varName('item-icon-border-color')]: colorTextDisabled,
[varName('item-icon-text-color')]: colorTextDisabled,
[varName('item-icon-dot-color')]: colorTextDisabled,
// Hover
[varName('item-icon-bg-hover-color')]: 'transparent',
[varName('item-icon-border-hover-color')]: colorPrimaryHover,
[varName('item-icon-text-hover-color')]: colorPrimaryHover,
// Active
[varName('item-icon-active-bg-color')]: colorFillTertiary
},
// Finish & Process
[`${itemCls}-${STATUS_PROCESS}, ${itemCls}-${STATUS_FINISH}`]: {
[varName('item-icon-bg-color')]: colorBgContainer,
[varName('item-icon-border-color')]: colorPrimary,
[varName('item-icon-text-color')]: colorPrimary,
[varName('item-icon-dot-color')]: colorPrimary,
// Hover
[varName('item-icon-bg-hover-color')]: 'transparent',
[varName('item-icon-border-hover-color')]: colorPrimaryHover,
[varName('item-icon-text-hover-color')]: colorPrimaryHover,
// Active
[varName('item-icon-active-bg-color')]: colorPrimaryBg
},
// Error
[`${itemCls}-${STATUS_ERROR}`]: {
[varName('item-icon-bg-color')]: colorBgContainer,
[varName('item-icon-border-color')]: colorError,
[varName('item-icon-text-color')]: colorError,
[varName('item-icon-dot-color')]: colorError,
// Hover
[varName('item-icon-bg-hover-color')]: 'transparent',
[varName('item-icon-border-hover-color')]: colorErrorHover,
[varName('item-icon-text-hover-color')]: colorErrorHover,
// Active
[varName('item-icon-active-bg-color')]: colorErrorBg
}
}
}]
};
};
var _default = exports.default = genStatusStyle;
+7
View File
@@ -0,0 +1,7 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { StepsToken } from '.';
/**
* Force override the width related styles.
* This should be multiple since will conflict with other `rail` styles.
*/
export declare const getItemWithWidthStyle: (token: StepsToken, marginSize: number, optionalStyle?: CSSObject) => CSSObject;
+39
View File
@@ -0,0 +1,39 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getItemWithWidthStyle = void 0;
var _genStyleUtils = require("../../theme/util/genStyleUtils");
function withoutVar(cssVar) {
return (cssVar || '--ant-not-exist').replace(/var\((.*)\)/, '$1');
}
/**
* Force override the width related styles.
* This should be multiple since will conflict with other `rail` styles.
*/
const getItemWithWidthStyle = (token, marginSize, optionalStyle) => {
const {
calc,
componentCls,
descriptionMaxWidth,
antCls
} = token;
const itemCls = `${componentCls}-item`;
const [, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
return {
[`@container style(${withoutVar(descriptionMaxWidth)})`]: [{
// Icon
[`${itemCls}-icon`]: {
marginInlineStart: calc(descriptionMaxWidth).sub(varRef('icon-size')).div(2).equal()
},
// >>> Rail
[`${itemCls}-rail`]: {
width: 'auto',
insetInlineStart: calc(descriptionMaxWidth).add(varRef('icon-size')).div(2).add(marginSize).equal(),
insetInlineEnd: calc(descriptionMaxWidth).sub(varRef('icon-size')).div(2).sub(marginSize).mul(-1).equal()
}
}, optionalStyle]
};
};
exports.getItemWithWidthStyle = getItemWithWidthStyle;
+5
View File
@@ -0,0 +1,5 @@
import type { CSSObject } from '@ant-design/cssinjs';
import type { StepsToken } from '.';
import type { GenerateStyle } from '../../theme/internal';
declare const genVerticalStyle: GenerateStyle<StepsToken, CSSObject>;
export default genVerticalStyle;
+49
View File
@@ -0,0 +1,49 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _genStyleUtils = require("../../theme/util/genStyleUtils");
const genVerticalStyle = token => {
const {
componentCls,
marginXXS,
paddingSM,
controlHeight,
antCls,
calc
} = token;
const itemCls = `${componentCls}-item`;
const [varName, varRef] = (0, _genStyleUtils.genCssVar)(antCls, 'cmp-steps');
return {
[`${componentCls}-vertical`]: {
[varName('vertical-rail-margin')]: calc(marginXXS).mul(1.5).equal(),
flexDirection: 'column',
alignItems: 'stretch',
// Item
[`> ${itemCls}`]: {
minHeight: calc(controlHeight).mul(1.5).equal(),
paddingBottom: paddingSM,
'&:last-child': {
paddingBottom: 0
},
// Icon
[`${itemCls}-icon`]: {
marginInlineStart: `calc((${varRef('icon-size-max')} - ${varRef('icon-size')}) / 2)`
},
// >>> Rail
[`${itemCls}-rail`]: {
[varName('rail-offset')]: calc(varRef('heading-height')).sub(varRef('icon-size')).div(2).equal(),
borderInlineStartWidth: varRef('rail-size'),
position: 'absolute',
top: calc(varRef('icon-size')).add(varRef('item-wrapper-padding-top')).add(varRef('rail-offset')).add(varRef('vertical-rail-margin')).equal(),
insetInlineStart: calc(varRef('icon-size-max')).div(2).equal(),
bottom: calc(varRef('vertical-rail-margin')).sub(varRef('rail-offset')).equal(),
marginInlineStart: `calc(${varRef('rail-size')} / -2)`
}
}
}
};
};
var _default = exports.default = genVerticalStyle;