40 lines
888 B
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;
|
|
}
|
|
}
|