tdesign-mobile-vue
Version:
tdesign-mobile-vue
191 lines (155 loc) • 3.83 kB
text/less
@import "../../base.less";
@import "./_var.less";
@import "./_mixin.less";
.@{prefix}-steps {
display: flex;
width: 100%;
.step-item-basic();
// 水平方向
&--horizontal {
// 内容最大宽度
.@{prefix}-step-content {
max-width: 80px;
margin-top: @spacer;
}
.connector-default(horizontal);
.@{prefix}-step {
&--default {
.default-number-status(default);
}
&--finish {
.default-number-status(finish);
}
&--process {
.default-number-status(process);
}
&--error {
.default-number-status(error);
}
}
&.@{prefix}-steps--icon-anchor {
.@{prefix}-step {
&-icon {
&__number {
display: flex;
width: @step-horizontal-icon-width;
height: @step-horizontal-icon-width;
box-sizing: border-box;
border: 1px solid @brand-color;
border-radius: 50%;
margin-top: 1px;
}
}
}
.@{prefix}-step:not(:last-child) {
.@{prefix}-step__inner:after {
content: "";
display: block;
height: 1px;
background-color: @brand-color-5;
position: absolute;
width: calc(100% - @step-horizontal-icon-width);
left: calc(50% + @step-horizontal-icon-width / 2);
top: (@step-horizontal-icon-width / 2);
}
}
}
}
// 垂直
&--vertical {
flex-direction: column;
align-items: flex-start;
.@{prefix}-step {
position: relative;
&__inner {
flex-direction: row;
align-items: flex-start;
}
&-content {
margin-left: @spacer;
}
&-title {
text-align: left;
margin-top: @step-title-content-margin-top;
margin-bottom: @spacer;
line-height: @font-size-base;
}
&-description {
text-align: left;
}
&-extra {
margin-bottom: 19px;
}
}
&.@{prefix}-steps--default-anchor {
.@{prefix}-step {
&--default {
.default-number-status(default);
}
&--finish {
.default-number-status(finish);
}
&--process {
.default-number-status(process);
}
&--error {
.default-number-status(error);
.@{prefix}-step-title {
color: @error-color;
}
}
}
}
.connector-default(vertical);
&.@{prefix}-steps--dot-anchor {
.@{prefix}-step {
&-icon {
&__dot {
display: block;
width: @step-dot-anchor-width;
height: @step-dot-anchor-width;
box-sizing: border-box;
border: 1px solid @brand-color;
border-radius: 50%;
margin-top: 1px;
}
}
&-title {
margin-top: 0;
}
}
.@{prefix}-step:not(:last-child) {
.@{prefix}-step__inner:after {
content: "";
display: block;
height: calc(100% - @step-dot-anchor-width);
width: 1px;
background-color: @gray-color-5;
position: absolute;
left: calc(@step-dot-anchor-width / 2 - .5px);
top: calc(@step-dot-anchor-width + .5px);
}
}
}
}
&--readonly {
.@{prefix}-step-title {
color: @text-color-disabled;
}
.@{prefix}-step-description {
color: @text-color-disabled;
}
.@{prefix}-step--error,
.@{prefix}-step--process,
.@{prefix}-step--finish {
.@{prefix}-step-description {
color: @text-color-placeholder;
}
}
.@{prefix}-step--finish {
.@{prefix}-step-title {
color: @text-color-primary;
}
}
}
}