Commit 615f5644 authored by alexpott's avatar alexpott

Issue #2247049 by sqndr, herom, LewisNyman: Redesign password strength...

Issue #2247049 by sqndr, herom, LewisNyman: Redesign password strength indicator so it's less fragile.
parent 80152b7d
......@@ -20,50 +20,27 @@
/**
* Password strength indicator.
*/
.password-strength {
width: 13em;
float: right; /* LTR */
}
[dir="rtl"] .password-strength {
float: left;
}
.password-strength-title {
.password-strength__title,
.password-strength__text {
display: inline;
}
.password-strength-text {
float: right; /* LTR */
font-weight: bold;
}
[dir="rtl"] .password-strength-text {
float: left;
}
.password-indicator {
.password-strength__meter {
background-color: #c4c4c4;
height: 0.3em;
width: 100%;
height: 0.5em;
}
.password-indicator div {
.password-strength__indicator {
height: 100%;
width: 0%;
background-color: #47c965;
}
input.password-confirm,
input.password-field {
width: 13.7em;
margin-bottom: 0.4em;
float: left; /* LTR */
input.password-field,
.password-strength {
width: 40%;
}
div.password-confirm {
float: right; /* LTR */
visibility: hidden;
width: 13em;
}
[dir="rtl"] input.password-confirm,
[dir="rtl"] input.password-field {
float: right;
}
[dir="rtl"] div.password-confirm {
float: left;
width: 40%;
}
div.form-item div.password-suggestions {
padding: 0.2em 0.5em;
......@@ -86,34 +63,3 @@ div.password-suggestions ul {
clear: right;
}
/**
* Password strength indicator on narrow viewport.
*/
@media screen and (max-width: 600px) {
.password-strength,
div.password-confirm {
float: none;
width: auto;
max-width: 100%;
}
.password-indicator {
margin-bottom: 0.4em;
}
input.password-confirm,
input.password-field {
margin-bottom: 0;
width: 100%;
max-width: none;
}
div.form-item div.password-suggestions {
width: auto;
max-width: 100%;
}
.confirm-parent,
.password-parent {
clear: none;
width: 100%;
max-width: none;
overflow: hidden;
}
}
......@@ -25,7 +25,7 @@
// If the password strength indicator is enabled, add its markup.
if (settings.password.showStrengthIndicator) {
var passwordMeter = '<div class="password-strength"><div class="password-strength-text" aria-live="assertive"></div><div class="password-strength-title">' + translate.strengthTitle + '</div><div class="password-indicator"><div class="indicator"></div></div></div>';
var passwordMeter = '<div class="password-strength"><div class="password-strength__meter"><div class="password-strength__indicator"></div></div><div class="password-strength__title">' + translate.strengthTitle + ' </div><div class="password-strength__text" aria-live="assertive"></div></div>';
confirmInput.parent().after('<div class="password-suggestions description"></div>');
innerWrapper.append(passwordMeter);
var passwordDescription = outerWrapper.find('div.password-suggestions').hide();
......@@ -56,12 +56,12 @@
passwordDescription.toggle(result.strength !== 100);
// Adjust the length of the strength indicator.
innerWrapper.find('.indicator')
innerWrapper.find('.password-strength__indicator')
.css('width', result.strength + '%')
.css('background-color', result.indicatorColor);
// Update the strength indication text.
innerWrapper.find('.password-strength-text').html(result.indicatorText);
innerWrapper.find('.password-strength__text').html(result.indicatorText);
}
// Check the value in the confirm input and show results.
......
......@@ -307,7 +307,7 @@ ul.menu li {
}
[dir="rtl"] .region-content ul,
[dir="rtl"] .region-content ol {
padding: 2.5em 0 0.25em 0;
padding: 0 15px 0.25em 0;
}
.item-list ul li {
margin: 0;
......@@ -1303,39 +1303,10 @@ div.messages {
float: none;
}
/* -------------- Password Meter ------------- */
/* -------------- Password Field ------------- */
[dir="rtl"] #password-strength {
left: auto;
margin-top: 2em;
right: 16em;
}
[dir="rtl"] .form-item-pass-pass2 label {
clear: right;
}
.confirm-parent,
.password-parent {
width: 34em;
}
.password-parent,
div.form-item div.password-suggestions {
position: relative;
}
.password-strength-text,
.password-strength-title,
div.password-confirm {
font-size: 0.82em;
}
.password-strength-text {
margin-top: 0.2em;
}
[dir="rtl"] #password-strength-text {
margin-top: 0;
float: left;
}
div.password-confirm {
margin-top: 2.2em;
width: 20.73em;
.password-field {
margin: 0;
}
/* ---------------- Buttons ---------------- */
......
......@@ -876,10 +876,13 @@ select.form-select {
}
.form-item .password-suggestions {
float: left;
float: left; /* LTR */
clear: left;
width: 100%;
}
[dir="rtl"] .form-item .password-suggestions {
float: right;
}
.form-item-pass .description {
clear: both;
}
......@@ -945,6 +948,9 @@ select.form-select {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.password-strength {
width: 100%;
}
div.form-item div.password-suggestions {
float: none;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment