app: add a password_complexity component

This component will replace the previous `password_field` component.
This commit is contained in:
Pierre de La Morinerie 2021-08-31 16:14:32 +00:00
parent 586f8ec543
commit 428ca8755f
10 changed files with 172 additions and 0 deletions

View file

@ -0,0 +1,40 @@
@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;
}
}