app/javascript/components/Stepper/Step.scss
.Step {
z-index: 1;
align-self: vertical-align;
text-align: center;
flex: 0 0 33%;
&.complete {
cursor: pointer;
}
}
.Step__label {
font-size: 14px;
margin-top: 6px;
color: #172340;
font-weight: 200;
}
.Step__circle {
border-radius: 22px;
background-color: #d8d8d8;
margin: auto;
padding: 12px 0;
height: 45px;
width: 45px;
font-size: 20px;
box-sizing: border-box;
color: #172340;
}
.Step--complete {
.Step__circle {
background-color: #b2b5ba;
color: #172340;
}
&:hover {
cursor: pointer;
.Step__label {
color: #172340;
}
.Step__circle {
background-color: #04ccde;
}
}
}
.Step--active {
.Step__circle {
color: white;
background: #04ccde;
}
.Step__label {
color: #172340;
font-weight: bold;
}
}