UNPKG

tdesign-mobile-vue

Version:
191 lines (155 loc) 3.83 kB
@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; } } } }