@import '../style/var';
|
|
.van-step {
|
position: relative;
|
flex: 1;
|
color: @step-text-color;
|
font-size: @step-font-size;
|
|
&__circle {
|
display: block;
|
width: @step-circle-size;
|
height: @step-circle-size;
|
background-color: @step-circle-color;
|
border-radius: 50%;
|
}
|
|
&__line {
|
position: absolute;
|
background-color: @step-line-color;
|
transition: background-color @animation-duration-base;
|
}
|
|
&--horizontal {
|
float: left;
|
|
&:first-child {
|
.van-step__title {
|
margin-left: 0;
|
transform: none;
|
}
|
}
|
|
&:last-child {
|
position: absolute;
|
right: 1px;
|
width: auto;
|
|
.van-step__title {
|
margin-left: 0;
|
transform: none;
|
}
|
|
.van-step__circle-container {
|
right: -9px;
|
left: auto;
|
}
|
}
|
|
.van-step__circle-container {
|
position: absolute;
|
top: 30px;
|
left: -@padding-xs;
|
z-index: 1;
|
padding: 0 @padding-xs;
|
background-color: @white;
|
transform: translateY(-50%);
|
}
|
|
.van-step__title {
|
display: inline-block;
|
margin-left: 3px;
|
font-size: @step-horizontal-title-font-size;
|
transform: translateX(-50%);
|
|
@media (max-width: 321px) {
|
font-size: @step-horizontal-title-font-size - 1px;
|
}
|
}
|
|
.van-step__line {
|
top: 30px;
|
left: 0;
|
width: 100%;
|
height: 1px;
|
}
|
|
.van-step__icon {
|
display: block;
|
font-size: @step-icon-size;
|
}
|
|
.van-step--process {
|
color: @step-process-text-color;
|
}
|
}
|
|
&--vertical {
|
display: block;
|
float: none;
|
padding: 10px 10px 10px 0;
|
line-height: @line-height-sm;
|
|
&:not(:last-child)::after {
|
border-bottom-width: 1px;
|
}
|
|
.van-step__circle-container {
|
position: absolute;
|
top: 19px;
|
left: -15px;
|
z-index: 1;
|
font-size: @step-icon-size;
|
line-height: 1;
|
transform: translate(-50%, -50%);
|
}
|
|
.van-step__line {
|
top: 16px;
|
left: -15px;
|
width: 1px;
|
height: 100%;
|
}
|
}
|
|
&:last-child {
|
.van-step__line {
|
width: 0;
|
}
|
}
|
|
&--finish {
|
color: @step-finish-text-color;
|
|
.van-step__circle,
|
.van-step__line {
|
background-color: @step-finish-line-color;
|
}
|
}
|
|
&__icon,
|
&__title {
|
transition: color @animation-duration-base;
|
|
&--active,
|
&--finish {
|
color: @step-active-color;
|
}
|
}
|
}
|
