accounts-frontend/src/components/ui/stepper/stepper.scss

68 lines
1.2 KiB
SCSS
Raw Normal View History

2017-07-22 21:27:38 +05:30
@import '~components/ui/colors.scss';
.steps {
height: 40px;
display: flex;
align-items: center;
}
.step {
position: relative;
text-align: right;
width: 100%;
height: 4px;
background: #d8d5ce;
&:first-child {
width: 12px;
}
&:before {
content: '';
display: block;
position: absolute;
height: 4px;
left: 0;
right: 100%;
top: 50%;
margin-top: -2px;
background: #aaa;
transition: 0.4s ease 0.1s;
}
&:after {
content: '';
display: inline-block;
position: relative;
top: -7px;
z-index: 1;
width: 12px;
height: 12px;
border-radius: 100%;
box-sizing: border-box;
2017-07-22 21:27:38 +05:30
background: #aaa;
border: 2px solid #aaa;
transition: background 0.4s ease,
border-color 0.4s cubic-bezier(0.19, 1, 0.22, 1); // easeOutExpo
2017-07-22 21:27:38 +05:30
}
}
.activeStep {
&:before {
right: 0;
transition-delay: unset;
2017-07-22 21:27:38 +05:30
}
&:after {
background: $green;
border-color: darker($green);
2017-07-22 21:27:38 +05:30
transition-delay: 0.3s;
}
}