app: add a password_complexity component
This component will replace the previous `password_field` component.
This commit is contained in:
parent
586f8ec543
commit
428ca8755f
10 changed files with 172 additions and 0 deletions
40
app/assets/stylesheets/password_complexity.scss
Normal file
40
app/assets/stylesheets/password_complexity.scss
Normal 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;
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue