diff --git a/core/modules/user/css/user.admin.css b/core/modules/user/css/user.admin.css index ba872d095ad..10358c20f90 100644 --- a/core/modules/user/css/user.admin.css +++ b/core/modules/user/css/user.admin.css @@ -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; } diff --git a/core/modules/user/css/user.module.css b/core/modules/user/css/user.module.css index 869d0168949..0b6afcfa32e 100644 --- a/core/modules/user/css/user.module.css +++ b/core/modules/user/css/user.module.css @@ -1,60 +1,21 @@ /** - * 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; } diff --git a/core/modules/user/css/user.theme.css b/core/modules/user/css/user.theme.css new file mode 100644 index 00000000000..52413e09306 --- /dev/null +++ b/core/modules/user/css/user.theme.css @@ -0,0 +1,56 @@ +/** + * @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; +} diff --git a/core/modules/user/src/Form/UserPermissionsForm.php b/core/modules/user/src/Form/UserPermissionsForm.php index 9a1df99c314..4c305f27e8f 100644 --- a/core/modules/user/src/Form/UserPermissionsForm.php +++ b/core/modules/user/src/Form/UserPermissionsForm.php @@ -105,6 +105,7 @@ class UserPermissionsForm extends FormBase { '#type' => 'table', '#header' => array($this->t('Permission')), '#id' => 'permissions', + '#attributes' => ['class' => ['permissions']], '#sticky' => TRUE, ); foreach ($role_names as $name) { diff --git a/core/modules/user/user.js b/core/modules/user/user.js index 51fb591dc88..ded4c0a2162 100644 --- a/core/modules/user/user.js +++ b/core/modules/user/user.js @@ -19,9 +19,9 @@ innerWrapper.addClass('password-parent'); // Add the password confirmation layer. - outerWrapper.find('input.password-confirm').parent().append('