448 lines
9.6 KiB
Plaintext
448 lines
9.6 KiB
Plaintext
@import '../common/index.less';
|
|
|
|
@connector-default-icon-width: 24px;
|
|
@connector-normal-icon-width: 40px;
|
|
@step-item-inner-max-width: 214px;
|
|
@dot-steps-anchor-width: 12px;
|
|
@title-content-margin-top: 5px;
|
|
@title-color: rgba(0, 0, 0, 0.9);
|
|
@title-color--default: rgba(0, 0, 0, 0.26);
|
|
@step-error-title-color: @error-color;
|
|
@step-error-bg-color: @error-color;
|
|
@step-default-bg-color: #c5c5c5;
|
|
|
|
@step-item-icon-color: #c5c5c5;
|
|
@step-item-descrition-color: rgba(0, 0, 0, 0.4);
|
|
@step-line-color: #c5c5c5;
|
|
|
|
@step: ~'@{prefix}-step';
|
|
@steps: ~'@{step}s';
|
|
@item: ~'@{steps}-item';
|
|
|
|
.step-item-basic() {
|
|
.@{item} {
|
|
flex: 1;
|
|
vertical-align: top;
|
|
position: relative;
|
|
|
|
&__inner {
|
|
position: relative;
|
|
}
|
|
|
|
&__icon {
|
|
z-index: 1;
|
|
vertical-align: top;
|
|
font-size: @font-size-base;
|
|
position: relative;
|
|
color: @border-level-2-color;
|
|
|
|
&-number {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: @connector-default-icon-width;
|
|
height: @connector-default-icon-width;
|
|
text-align: center;
|
|
border: 1px solid @step-item-icon-color;
|
|
border-radius: 50%;
|
|
background-color: #fff;
|
|
color: @step-item-icon-color;
|
|
}
|
|
|
|
&-slot {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: @connector-default-icon-width + 2px;
|
|
height: @connector-default-icon-width + 2px;
|
|
text-align: center;
|
|
color: @step-item-icon-color;
|
|
}
|
|
}
|
|
|
|
&__content {
|
|
text-align: center;
|
|
}
|
|
|
|
&__title {
|
|
position: relative;
|
|
// color: @title-color;
|
|
color: @title-color--default;
|
|
text-align: center;
|
|
line-height: 22px;
|
|
font-size: @font-size-base;
|
|
text-align: center;
|
|
margin-bottom: 4px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
&__description {
|
|
color: @step-item-descrition-color;
|
|
line-height: 20px;
|
|
font-size: @font-size-s;
|
|
}
|
|
|
|
&__extra:not(:empty) {
|
|
margin-top: @spacer;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 连接线
|
|
.connector-default(@direction; @isReverse:false) {
|
|
& when (@direction = horizontal) {
|
|
&.@{step}--not-last-child {
|
|
.@{item}__inner {
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
height: 1px;
|
|
background: @primary-color;
|
|
position: absolute;
|
|
transform: translateY(-50%);
|
|
width: 100%;
|
|
top: (@connector-default-icon-width / 2 + 1px);
|
|
// left: calc(50% + @connector-default-icon-width / 2 + 1px);
|
|
left: 50%;
|
|
}
|
|
&.@{item}__inner--large:after {
|
|
top: calc(@connector-normal-icon-width / 2);
|
|
// left: calc(50% + @connector-normal-icon-width / 2 + 1px);
|
|
}
|
|
}
|
|
|
|
&.@{step}--readonly {
|
|
.@{item}--process,
|
|
.@{item}--error,
|
|
.@{item}--default {
|
|
.@{item}__inner:after {
|
|
background: @step-line-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
& when(@direction = vertical) {
|
|
&.@{step}--not-last-child {
|
|
.@{item}__inner {
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
height: 100%;
|
|
width: 1px;
|
|
background: @step-line-color;
|
|
transform: translateX(-50%);
|
|
position: absolute;
|
|
left: (@connector-default-icon-width / 2 + 1px);
|
|
top: (@connector-default-icon-width / 2 + 1px);
|
|
}
|
|
}
|
|
|
|
.@{item}--finish {
|
|
.@{item}__inner:after {
|
|
background: @primary-color;
|
|
}
|
|
}
|
|
|
|
.@{item}--default {
|
|
.@{item}__inner:after {
|
|
background: @step-default-bg-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.default-number-status(@anchor-status) {
|
|
& when(@anchor-status = default) {
|
|
.@{item}__icon-number {
|
|
border-color: @step-default-bg-color;
|
|
color: @step-default-bg-color;
|
|
}
|
|
}
|
|
& when(@anchor-status = finish) {
|
|
.@{item}__icon-number {
|
|
border-color: @primary-color;
|
|
color: @primary-color;
|
|
}
|
|
}
|
|
& when(@anchor-status = process) {
|
|
.@{item}__icon-number {
|
|
background: @primary-color;
|
|
color: @text-anti-primary-color;
|
|
border-color: @primary-color;
|
|
}
|
|
}
|
|
& when(@anchor-status = error) {
|
|
.@{item}__icon-number {
|
|
color: @step-error-bg-color;
|
|
border-color: @step-error-bg-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 子步骤状态
|
|
.default-sub-status(@status) {
|
|
& when(@status = default) {
|
|
color: #c5c5c5;
|
|
.@{item}-sub-dot-item {
|
|
background-color: #c5c5c5;
|
|
}
|
|
}
|
|
& when(@status = finish) {
|
|
color: #000000;
|
|
.@{item}-sub-dot-item {
|
|
background-color: @primary-color;
|
|
}
|
|
}
|
|
& when(@status = process) {
|
|
color: @primary-color;
|
|
.@{item}-sub-dot-item {
|
|
background-color: @primary-color;
|
|
}
|
|
}
|
|
& when(@status = error) {
|
|
color: @step-error-bg-color;
|
|
.@{item}-sub-dot-item {
|
|
background-color: @step-error-bg-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.step-item-basic();
|
|
|
|
:host {
|
|
flex: 1;
|
|
vertical-align: top;
|
|
position: relative;
|
|
align-self: flex-start;
|
|
width: inherit;
|
|
}
|
|
|
|
.@{step} {
|
|
&--horizontal {
|
|
// 内容最大宽度
|
|
.@{item}__content {
|
|
max-width: 80px;
|
|
margin-top: @spacer;
|
|
}
|
|
|
|
.@{item} {
|
|
&__inner {
|
|
.@{item}-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
&--finish {
|
|
.default-number-status(finish);
|
|
.@{item}__title {
|
|
color: @title-color;
|
|
}
|
|
}
|
|
|
|
&--process {
|
|
.default-number-status(process);
|
|
.@{item}__title {
|
|
color: @primary-color;
|
|
}
|
|
}
|
|
|
|
&--error {
|
|
.default-number-status(error);
|
|
.@{item}__title {
|
|
color: @step-error-title-color;
|
|
}
|
|
}
|
|
|
|
&--default {
|
|
.default-number-status(default);
|
|
.@{item}__title,
|
|
.@{item}__description {
|
|
color: @title-color--default;
|
|
}
|
|
}
|
|
}
|
|
|
|
.connector-default(horizontal);
|
|
}
|
|
|
|
&--vertical {
|
|
.@{item} {
|
|
position: relative;
|
|
|
|
&-wrapper {
|
|
&:only-child {
|
|
padding-bottom: 50rpx;
|
|
}
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
&-wrapper + .@{item}__sub-wrapper:not(:empty) {
|
|
padding-top: 32rpx;
|
|
padding-bottom: 48rpx;
|
|
}
|
|
|
|
&-sub {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 40rpx;
|
|
align-items: center;
|
|
padding-bottom: 8rpx;
|
|
font-size: 24rpx;
|
|
color: @primary-color;
|
|
font-weight: 500;
|
|
|
|
&-dot {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: @connector-default-icon-width;
|
|
text-align: center;
|
|
border: 1px solid transparent;
|
|
color: @step-item-icon-color;
|
|
z-index: 2;
|
|
|
|
&-item {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
// background-color: @primary-color;
|
|
}
|
|
}
|
|
|
|
.@{item}-sub__content {
|
|
margin-left: @spacer;
|
|
}
|
|
}
|
|
|
|
&-sub-status {
|
|
// 'default' | 'process' | 'finish' | 'error';
|
|
&--default {
|
|
.default-sub-status(default);
|
|
}
|
|
&--finish {
|
|
.default-sub-status(finish);
|
|
}
|
|
|
|
&--process {
|
|
.default-sub-status(process);
|
|
}
|
|
|
|
&--error {
|
|
.default-sub-status(error);
|
|
}
|
|
}
|
|
|
|
.@{item}-sub:last-child {
|
|
padding-bottom: 0rpx;
|
|
}
|
|
|
|
&__content {
|
|
margin-left: @spacer;
|
|
margin-right: @spacer * 2;
|
|
flex: 1;
|
|
}
|
|
|
|
&__title {
|
|
text-align: left;
|
|
margin-top: @title-content-margin-top;
|
|
line-height: @font-size-base;
|
|
margin-bottom: @spacer;
|
|
}
|
|
|
|
&__description {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
&.@{prefix}-step--default-anchor {
|
|
.@{item} {
|
|
&--default {
|
|
.default-number-status(default);
|
|
}
|
|
|
|
&--finish {
|
|
.default-number-status(finish);
|
|
.@{item}__title {
|
|
color: @title-color;
|
|
}
|
|
}
|
|
|
|
&--process {
|
|
.default-number-status(process);
|
|
.@{item}__title {
|
|
color: @primary-color;
|
|
}
|
|
}
|
|
|
|
&--error {
|
|
.default-number-status(error);
|
|
.@{item}__title {
|
|
color: @error-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.connector-default(vertical);
|
|
}
|
|
|
|
&.@{step}--dot-anchor {
|
|
.@{item} {
|
|
&__icon {
|
|
&-dot {
|
|
display: block;
|
|
width: @dot-steps-anchor-width;
|
|
height: @dot-steps-anchor-width;
|
|
box-sizing: border-box;
|
|
border: 2px solid @primary-color;
|
|
border-radius: 50%;
|
|
margin-top: 1px;
|
|
}
|
|
}
|
|
|
|
// 子步骤dot宽度要和icon部分保持一致
|
|
&-sub {
|
|
&-dot {
|
|
width: @dot-steps-anchor-width;
|
|
box-sizing: border-box;
|
|
border: 2px solid transparent;
|
|
}
|
|
}
|
|
|
|
&__title {
|
|
margin-top: 0;
|
|
color: @title-color;
|
|
}
|
|
}
|
|
|
|
&.@{step}--not-last-child {
|
|
.@{item}__inner::after {
|
|
content: '';
|
|
display: block;
|
|
height: calc(100% - @dot-steps-anchor-width);
|
|
width: 1px;
|
|
background: @border-level-2-color;
|
|
transform: translateX(50%);
|
|
position: absolute;
|
|
left: (@dot-steps-anchor-width / 2 - 1rpx);
|
|
top: @dot-steps-anchor-width + 1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.@{steps} {
|
|
&-item__icon-number--large {
|
|
width: @connector-normal-icon-width;
|
|
height: @connector-normal-icon-width;
|
|
}
|
|
}
|