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