DGNum/demarches-normaliennes
14
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

#3928 redesign of password panel (complexity bar & explanation)

Browse source
This commit is contained in:
maatinito 2019-06-19 12:32:01 -10:00 committed by Pierre de La Morinerie
parent 0b0ef8a318
commit 3bf32b6d43
2 changed files with 17 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/stylesheets/new_design/forms.scss
View file

@ -312,8 +312,8 @@
}
.explication {
margin-bottom: 2 * $default-padding;
padding: $default-padding;
margin-bottom: $default-padding;
padding: $default-padding / 2;
background-color: $light-grey;
p:not(:last-child) {

24
app/assets/stylesheets/new_design/password_strength.scss
View file

@ -2,33 +2,39 @@
@import "constants";
$strength-bg: #EEEEEE;
$weak-strength-color: $lighter-red;
$medium-strength-color: $orange;
$strong-strength-color: $green;
$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%;
min-height: 22px;
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, $weak-strength-color 0%, $weak-strength-color 25%, $strength-bg 25%, $strength-bg 100%);
background: linear-gradient(to right, $strength-color-1 20%, $strength-bg 40%);
}
&.strength-2 {
background: linear-gradient(to right, $medium-strength-color 0%, $medium-strength-color 50%, $strength-bg 50%, $strength-bg 100%);
background: linear-gradient(to right, $strength-color-2 40%, $strength-bg 60%);
}
&.strength-3 {
background: linear-gradient(to right, $medium-strength-color 0%, $medium-strength-color 75%, $strength-bg 75%, $strength-bg 100%);
background: linear-gradient(to right, $strength-color-3 60%, $strength-bg 80%);
}
&.strength-4 {
background: $strong-strength-color;
color: #FFFFFF;
background: $strength-color-4;
}
}