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

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;
 }

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;
 }

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;
+}

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) {

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('<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.

core/modules/user/user.libraries.yml

@@ -5,6 +5,8 @@ drupal.user:
   css:
     component:
       css/user.module.css: {}
+    theme:
+      css/user.theme.css: {}
   dependencies:
     - core/jquery
     - core/drupal

core/themes/seven/css/theme/install-page.css

@@ -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%;