openclassify/addons/default/visiosoft/advs-module/resources/css/step.scss
2020-11-12 10:52:43 +03:00

87 lines
1.6 KiB
SCSS

#stepProgressBar {
counter-reset: step;
.step {
text-align: center;
min-width: 0;
&.current {
&::after {
background: linear-gradient(to right, #209579 50%, #dfdfdf 50%);
}
.bullet {
color: #209579;
background-color: #fff;
border: .2rem solid #209579;
@media only screen and (min-width: 768px) {
border: .3rem solid #209579;
}
}
.step-text {
font-weight: 500;
}
& ~ * {
&::after {
background-color: #dfdfdf;
}
.bullet {
color: #999;
background-color: #DFDFDF;
}
}
}
&::after {
content: '';
position: absolute;
height: .16rem;
top: 0.96rem;
left: 0;
z-index: -1;
width: 100%;
background-color: #209579;
@media only screen and (min-width: 768px) {
height: .3rem;
top: 1.4rem;
}
}
.bullet {
height: 2rem;
width: 2rem;
border-radius: 100%;
color: #fff;
display: inline-block;
position: relative;
line-height: 20px;
background-color: #209579;
@media only screen and (min-width: 768px) {
height: 3rem;
width: 3rem;
}
&::before {
content: counter(step);
counter-increment: step;
font-size: 14px;
font-weight: 600;
@media only screen and (min-width: 768px) {
font-size: 20px;
}
}
}
.step-text {
color: #999;
font-size: 12px;
@media only screen and (min-width: 768px) {
font-size: initial;
}
}
}
}