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

34 lines
895 B
SCSS

@import "colors";
@import "constants";
$strength-bg: #EEEEEE;
$weak-strength-color: $lighter-red;
$medium-strength-color: $orange;
$strong-strength-color: $green;
.password-strength {
margin-top: -24px;
width: 100%;
min-height: 22px;
background: $strength-bg;
display: block;
margin-bottom: $default-spacer;
text-align: center;
&.strength-1 {
background: linear-gradient(to right, $weak-strength-color 0%, $weak-strength-color 25%, $strength-bg 25%, $strength-bg 100%);
}
&.strength-2 {
background: linear-gradient(to right, $medium-strength-color 0%, $medium-strength-color 50%, $strength-bg 50%, $strength-bg 100%);
}
&.strength-3 {
background: linear-gradient(to right, $medium-strength-color 0%, $medium-strength-color 75%, $strength-bg 75%, $strength-bg 100%);
}
&.strength-4 {
background: $strong-strength-color;
color: #FFFFFF;
}
}