init
This commit is contained in:
271
uni_modules/nutui-uni/components/step/index.scss
Normal file
271
uni_modules/nutui-uni/components/step/index.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user