This commit is contained in:
2026-01-05 12:47:14 +08:00
commit 1fc846fae3
1614 changed files with 162035 additions and 0 deletions

View File

@@ -0,0 +1,271 @@
.nut-step {
flex: 1;
font-size: 0;
text-align: center;
&-head {
position: relative;
display: flex;
justify-content: center;
margin-bottom: 12px;
}
&-line {
position: absolute;
top: 11px;
right: -50%;
left: 50%;
display: inline-block;
height: 1px;
background: $steps-base-line-color;
}
&-icon {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: $steps-base-icon-width;
height: $steps-base-icon-height;
font-size: $steps-base-icon-font-size;
line-height: $steps-base-icon-line-height;
&-inner {
display: flex;
align-items: center;
justify-content: center;
}
.nut-icon {
width: $steps-base-icon-font-size;
height: $steps-base-icon-font-size;
}
&.is-icon {
border-style: solid;
border-width: 1px;
border-radius: 50%;
}
}
&-main {
display: inline-block;
padding-right: 10%;
padding-left: 10%;
text-align: center;
}
&-title {
display: block;
margin-bottom: $steps-base-title-margin-bottom;
font-size: $steps-base-title-font-size;
color: $steps-base-title-color;
}
&-content {
display: block;
font-size: $steps-base-content-font-size;
color: $steps-base-content-color;
}
&:last-child {
.nut-step-line {
display: none;
}
}
&.nut-step-finish {
.nut-step-head {
color: $steps-finish-head-color;
border-color: $steps-finish-head-border-color;
}
.nut-step-icon.is-icon {
background-color: $steps-finish-icon-text-color;
}
.nut-step-line {
background: $steps-finish-line-background;
}
.nut-step-title {
color: $steps-finish-title-color;
}
}
&.nut-step-process {
.nut-step-head {
color: $steps-process-head-color;
border-color: $steps-process-head-border-color;
}
.nut-step-icon.is-icon {
background-color: $steps-process-icon-text-color;
}
.nut-step-title {
color: $steps-process-title-color;
}
}
&.nut-step-wait {
.nut-step-head {
color: $steps-wait-head-color;
border-color: $steps-wait-head-border-color;
}
.nut-step-icon.is-icon {
color: $steps-wait-icon-text-color;
background-color: $steps-wait-icon-bg-color;
.nut-icon {
color: $steps-wait-icon-color;
}
}
.nut-step-content {
color: $steps-wait-content-color;
}
}
}
.nut-steps-horizontal {
&.nut-steps-dot {
.nut-step-head {
margin-top: 7px;
margin-bottom: 0;
}
.nut-step-line {
top: 50%;
bottom: -50%;
}
.nut-step-icon {
box-sizing: content-box;
width: 8px;
height: 8px;
background: $primary-color;
border-radius: 50%;
}
.nut-step-wait {
.nut-step-icon {
background-color: $steps-wait-icon-bg-color;
}
.nut-step-content {
color: $steps-wait-content-color;
}
}
.nut-step-finish {
.nut-step-icon {
background-color: $primary-color;
}
}
.nut-step-process {
.nut-step-icon {
position: relative;
background-color: $primary-color;
&::before {
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
width: 14px;
height: 14px;
margin-top: -7px;
margin-left: -7px;
content: "";
background-color: $primary-color-end;
border-radius: 50%;
opacity: 0.23;
}
}
}
}
}
.nut-steps-vertical {
.nut-step {
display: flex;
height: 33.34%;
}
.nut-step-line {
position: absolute;
display: inline-block;
width: 1px;
height: 100%;
background: #909ca4;
}
.nut-step-main {
display: inline-block;
padding-left: 6%;
text-align: left;
}
&.nut-steps-dot {
.nut-step-head {
margin-top: 7px;
margin-bottom: 0;
}
.nut-step-line {
top: 7px;
right: -50%;
left: 50%;
}
.nut-step-icon {
box-sizing: content-box;
width: 8px;
height: 8px;
background: $primary-color;
border-radius: 50%;
}
.nut-step-wait {
.nut-step-icon {
background-color: $steps-wait-icon-bg-color;
}
.nut-step-content {
color: $steps-wait-content-color;
}
}
.nut-step-finish {
.nut-step-icon {
background-color: $primary-color;
}
}
.nut-step-process {
.nut-step-icon {
position: relative;
background-color: $primary-color;
&::before {
position: absolute;
top: 50%;
left: 50%;
display: inline-block;
width: 14px;
height: 14px;
margin-top: -7px;
margin-left: -7px;
content: "";
background-color: $primary-color-end;
border-radius: 50%;
opacity: 0.23;
}
}
}
}
}