demarches-normaliennes/app/assets/stylesheets/new_design/password_strength.scss

40 lines
888 B
SCSS

@import "colors";
@import "constants";
$strength-bg: #EEEEEE;
$strength-color-0: $lighter-red;
$strength-color-1: #FF5000;
$strength-color-2: $orange;
$strength-color-3: #FFD000;
$strength-color-4: $green;
.password-strength {
margin-top: -24px;
width: 100%;
height: 12px;
background: $strength-bg;
display: block;
margin-bottom: $default-spacer;
text-align: center;
border-radius: 8px;
&.strength-0 {
background: linear-gradient(to right, $strength-color-0 00%, $strength-bg 20%);
}
&.strength-1 {
background: linear-gradient(to right, $strength-color-1 20%, $strength-bg 40%);
}
&.strength-2 {
background: linear-gradient(to right, $strength-color-2 40%, $strength-bg 60%);
}
&.strength-3 {
background: linear-gradient(to right, $strength-color-3 60%, $strength-bg 80%);
}
&.strength-4 {
background: $strength-color-4;
}
}