tdesign-react/esm/style/web/components/steps/_var.less

TDesign Component for React

// 组件变量
// 名称可按如下规则定义：
// <component>-[type]-[attrtype]-<attr>-[status]

// component:组件名，如button，
// type: 组件类型，如 button 的次要按钮（line）
// attrtype: 属性的具体应用场景。如颜色，用于背景（bg）、文本（text）、边框（border）等
// attr: 属性名称，如color、height、radius等
// status: 表示组件状态或尺寸，如 hover、disabled、s、l 等

// 如：@button-line-bg-color-hover
// 如：@button-line-height-s

// 点状步骤条相关
@steps-circle-height: 22px;
@steps-circle-width: 22px;
@steps-item-title-margin-bottom: @comp-margin-xs;
@steps-item-description-margin: @comp-margin-xs;
@steps-item-content-margin-top: @comp-margin-xs;
@steps-item-content-margin-top-vertical: @comp-margin-xxs;
@steps-item-margin-right: @comp-margin-s;
@steps-item-icon-margin-right: @comp-margin-s;
@steps-title-padding-right: @comp-margin-s;
@steps-dot-item-icon-margin-bottom: @comp-margin-xs;
@steps-item-content-margin-left-vertical: 0px;
@steps-item-padding-bottom-vertical: @comp-margin-xxl;
@steps-item-margin-bottom-vertical: 5px;
@steps-item-icon-number-line-height: 1px;
@steps-item-icon-number-line-width: 1px;
@steps-item-icon-number-line-top: 35px;
@steps-item-connector-line-width: calc(100% - 16px);
@steps-title-line-height: 24px;
@steps-description-line-height: 22px;
@steps-dot-item-icon-height: 8px;
@steps-dot-item-icon-width: 8px;
@steps-item-icon-number-line-left: 11px;
@steps-dot-anchor-position-top: 8px;
@steps-dot-content-width: 140px;
@steps-dot-connector-position-top-horizontal: 2.5px;
@steps-dot-connector-position-left-horizontal: calc(@steps-dot-content-width / 2 + @spacer);
@steps-dot-connector-position-top-vertical: 17px;
@steps-dot-connector-position-left-vertical: 3.5px;
@steps-dot-connector-position-left-vertical-reverse: 3.5px;

// 描边宽度
@step-stroke-width: 1px;
@steps-line-width: 2px;
@steps-line-height: 2px;
//字体字重
@steps-title-font-weight: normal; //add

//字体
@steps-item-icon-font-size: @font-size-base;
@steps-item-t-icon-font-size-default: calc(@font-size-base + 10px);
@steps-title-font-size-anchor: @font-size-l;
@steps-description-font-size: @font-size-base;
@steps-default-step-icon-font-size: @font-size-l;

//位置
@steps-item-content-text-align-horizontal: center;
@steps-item-inner-align-items: center;

//颜色description
@steps-description-color-default: @text-color-placeholder;
@steps-description-color-finish: @text-color-secondary;
@steps-description-color-process: @text-color-secondary;
@steps-description-color-error: @text-color-secondary;

// title
@steps-title-color-default: @text-color-placeholder;
@steps-title-color-finish: @text-color-primary;
@steps-title-color-process: @brand-color;
@steps-title-color-error: @error-color;

// icon
@steps-item-icon-color: @text-color-placeholder;
@steps-item-icon-border-color-default: @text-color-placeholder;
@steps-item-icon-border-color-finish: @brand-color;
@steps-item-icon-border-color-error: @error-color;

// item-icon anchor 状态
@steps-item-icon-anchor-number-color-error: @error-color;
@steps-item-icon-anchor-number-border-color-error: @error-color;
@steps-item-icon-anchor-color: @brand-color;
@steps-item-icon-anchor-color-error: @error-color;

//item-icon  dot状态
@steps-item-icon-dot-border-color-finish: @brand-color;
@steps-item-icon-dot-bg-color-process: @brand-color;
@steps-item-icon-dot-border-color-process: @brand-color;
@steps-item-icon-dot-bg-color-error: @error-color;
@steps-item-icon-dot-border-color-error: @error-color;
@steps-item-icon-dot-border-color-default: @text-color-placeholder;

// number 颜色
@steps-item-icon-number-color-default: @text-color-placeholder;
@steps-item-icon-number-color-process: @text-color-anti;
@steps-item-icon-number-bg-color-process: @brand-color;
@steps-item-icon-number-border-color-process: @brand-color;
@steps-item-icon-number-color-error: #000;

//line 锚点连接线  horizontal
@steps-line-bg-color-horizontal-default: @text-color-placeholder;
@steps-line-bg-color-horizontal-finish: @brand-color;
//line 锚点连接线 vertical
@steps-line-bg-color-vertical-default: @text-color-placeholder;
@steps-line-bg-color-vertical-finish: @brand-color;
@steps-line-bg-color-vertical-process: @brand-color;

//点状连接线 vertical
@steps-line-dot-bg-color-vertical-default: @text-color-placeholder;
@steps-line-dot-bg-color-vertical-finish: @brand-color;
@steps-line-dot-bg-color-vertical-process: @brand-color;