accounts-frontend/packages/app/components/ui/stepper/stepper.scss

83 lines
1.2 KiB
SCSS
Raw Normal View History

@import '~app/components/ui/colors.scss';
2017-07-22 21:27:38 +05:30
.steps {
height: 40px;
display: flex;
align-items: center;
2017-07-22 21:27:38 +05:30
}
.step {
position: relative;
text-align: right;
width: 100%;
2017-07-22 21:27:38 +05:30
height: 4px;
background: #d8d5ce;
2017-07-22 21:27:38 +05:30
&:first-child {
width: 12px;
}
2017-07-22 21:27:38 +05:30
&:before {
content: '';
display: block;
2017-07-22 21:27:38 +05:30
position: absolute;
height: 4px;
left: 0;
right: 100%;
top: 50%;
margin-top: -2px;
2017-07-22 21:27:38 +05:30
background: #aaa;
transition: 0.4s ease 0.1s;
}
2017-07-22 21:27:38 +05:30
&:after {
content: '';
display: inline-block;
position: relative;
top: -7px;
z-index: 1;
2017-07-22 21:27:38 +05:30
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 {
transition-delay: 0.3s;
}
2017-07-22 21:27:38 +05:30
}
.greenSteps {
.activeStep {
&:after {
background: $green;
border-color: darker($green);
}
}
}
.violetSteps {
.activeStep {
&:after {
background: $violet;
border-color: darker($violet);
}
}
}