Commit 883f0e33 authored by webchick's avatar webchick

Issue #1663210 by mortendk, rootwork, idebr, vks7056, ishmael-sanchez,...

Issue #1663210 by mortendk, rootwork, idebr, vks7056, ishmael-sanchez, LewisNyman, joelpittet, Manjit.Singh, Manuel Garcia, b0unty, prajaankit, alansaviolobo, atu: Clean up css in the User module
parent 2da79506
......@@ -3,18 +3,20 @@
* Admin styling for the User module.
*/
#permissions td.module {
/* Permissions page */
.permissions .module {
font-weight: bold;
}
#permissions td.permission {
.permissions .permission {
padding-left: 1.5em; /* LTR */
}
[dir="rtl"] #permissions td.permission {
[dir="rtl"] .permissions .permission {
padding-left: 0;
padding-right: 1.5em;
}
#user-admin-settings .details-description {
/* Account settings */
.user-admin-settings .details-description {
font-size: 0.85em;
padding-bottom: .5em;
}
/**
* Password strength indicator.
* @file
* Module styling for user module.
*/
.password-strength__title,
.password-strength__text {
display: inline;
}
.password-strength__meter {
background-color: #ebeae4;
height: 0.75em;
margin-top: 0.5em;
background-color: lightgray;
}
.password-strength__indicator {
height: 100%;
width: 0%;
background-color: #77b259;
-webkit-transition: width 0.5s ease-out;
transition: width 0.5s ease-out;
width: 0;
background-color: gray;
}
input.password-confirm,
input.password-field,
.password-strength {
width: 55%;
}
div.password-confirm {
.password-confirm-match {
visibility: hidden;
width: 55%;
}
div.form-item div.password-suggestions {
padding: 0.2em 0.5em;
margin: 0.7em 0;
max-width: 34.7em;
border: 1px solid #b4b4b4;
}
div.password-suggestions ul {
margin-bottom: 0;
}
.confirm-parent,
.password-parent {
clear: left; /* LTR */
margin: 0;
max-width: 33em;
overflow: hidden;
}
[dir="rtl"] .confirm-parent,
[dir="rtl"] .password-parent {
clear: right;
}
.password-strength__indicator.is-weak {
background-color: #e62600;
}
.password-strength__indicator.is-fair {
background-color: #e09600;
}
.password-strength__indicator.is-good {
background-color: #0074bd;
}
.password-strength__indicator.is-strong {
background-color: #77b259;
}
/**
* @file
* Theme styling for user module.
*/
/* Visual styling for the Password strength indicator */
.password-strength__meter {
margin-top: 0.5em;
background-color: #ebeae4;
}
.password-strength__indicator {
background-color: #77b259;
-webkit-transition: width 0.5s ease-out;
transition: width 0.5s ease-out;
}
.password-strength__indicator.is-weak {
background-color: #e62600;
}
.password-strength__indicator.is-fair {
background-color: #e09600;
}
.password-strength__indicator.is-good {
background-color: #0074bd;
}
.password-strength__indicator.is-strong {
background-color: #77b259;
}
.password-confirm,
.password-field,
.password-strength,
.password-confirm-match {
width: 55%;
}
.password-suggestions {
padding: 0.2em 0.5em;
margin: 0.7em 0;
max-width: 34.7em;
border: 1px solid #b4b4b4;
}
.password-suggestions ul {
margin-bottom: 0;
}
.confirm-parent,
.password-parent {
clear: left; /* LTR */
margin: 0;
max-width: 33em;
overflow: hidden;
}
[dir="rtl"] .confirm-parent,
[dir="rtl"] .password-parent {
clear: right;
}
......@@ -105,6 +105,7 @@ public function buildForm(array $form, FormStateInterface $form_state) {
'#type' => 'table',
'#header' => array($this->t('Permission')),
'#id' => 'permissions',
'#attributes' => ['class' => ['permissions']],
'#sticky' => TRUE,
);
foreach ($role_names as $name) {
......
......@@ -19,9 +19,9 @@
innerWrapper.addClass('password-parent');
// Add the password confirmation layer.
outerWrapper.find('input.password-confirm').parent().append('<div class="password-confirm">' + translate.confirmTitle + ' <span></span></div>').addClass('confirm-parent');
outerWrapper.find('input.password-confirm').parent().append('<div class="password-confirm-match">' + translate.confirmTitle + ' <span></span></div>').addClass('confirm-parent');
var confirmInput = outerWrapper.find('input.password-confirm');
var confirmResult = outerWrapper.find('div.password-confirm');
var confirmResult = outerWrapper.find('div.password-confirm-match');
var confirmChild = confirmResult.find('span');
// If the password strength indicator is enabled, add its markup.
......
......@@ -5,6 +5,8 @@ drupal.user:
css:
component:
css/user.module.css: {}
theme:
css/user.theme.css: {}
dependencies:
- core/jquery
- core/drupal
......
......@@ -41,11 +41,11 @@
.install-configure-form .form-type-password {
width: 100%;
}
input.password-confirm,
input.password-field {
.password-confirm,
.password-field {
float: none;
}
div.password-confirm {
.password-confirm-match {
float: none;
width: auto;
max-width: 100%;
......
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