Make the login great again (#2295)

ng2-components/ng2-alfresco-login/src/components/login.component.scss

@@ -4,23 +4,6 @@
     $warn: map-get($theme, warn);
     $background: map-get($theme, background);
 
-    .show {
-        display: block !important;
-    }
-
-    .hide {
-        display: none !important;
-    }
-
-    .icon-inline {
-        position: absolute;
-        display: block;
-        top: 31%;
-        left: 82%;
-        width: 30px;
-        overflow: hidden;
-    }
-
     .adf-login-content {
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -46,6 +29,22 @@
         flex-direction: column;
         justify-content: center;
         align-items: center;
+
+        .show {
+            display: block !important;
+        }
+
+        .hide {
+            display: none !important;
+        }
+
+        .icon-inline {
+            position: absolute;
+            display: block;
+            top: 31%;
+            left: 82%;
+            width: 30px;
+            overflow: hidden;
         }
 
         .adf-login-card-wide {
@@ -64,21 +63,10 @@
             }
         }
 
-    .error {
-        display: -webkit-box;
-        display: -moz-box;
-        display: -ms-flexbox;
-        display: -webkit-flex;
+        .adf-error-message {
             display: flex;
-
-        -webkit-box-orient: horizontal;
-        -moz-box-orient: horizontal;
             box-orient: horizontal;
             flex-direction: row;
-
-        -webkit-box-pack: flex-start;
-        -moz-box-pack: flex-start;
-        box-pack: flex-start;
             justify-content: flex-start;
 
             color: mat-color($warn);
@@ -87,7 +75,7 @@
             font-size: 13px;
         }
 
-    .error .error-icon {
+        .adf-error-message .error-icon {
             margin-right: 10px;
         }
 
@@ -186,11 +174,6 @@
             text-decoration: none;
         }
 
-    /* Known issue in angular material design module in betas */
-    > > > .rememberme-cb label > div {
-        margin-right: 8px;
-    }
-
         .is-active {
             background-color: transparent;
             font-size: 12px;
@@ -220,11 +203,15 @@
             opacity: 0.54;
         }
 
-    .adf-login__field > > > .mat-input-wrapper {
+        .adf-login__field .mat-input-wrapper {
             margin: 1em 0 0 0;
             font-size: 16px;
         }
 
+        .adf-login__field input:-webkit-autofill {
+            -webkit-box-shadow: 0 0 0px 1000px white inset;
+        }
+
         .adf-login-validation {
             background-color: transparent;
             color: mat-color($warn);
@@ -235,7 +222,7 @@
             color: mat-color($warn);
             position: absolute;
             font-size: 12px;
-        margin-top: 5px;
+            margin-top: -12px;
             display: block;
         }
 
@@ -251,7 +238,7 @@
             padding-top: 22px;
         }
 
-    .adf-login__remember-me > > > .mat-checkbox-label {
+        .adf-login__remember-me .mat-checkbox-label {
             opacity: 0.87;
         }
 
@@ -266,4 +253,5 @@
             border-top: 1px solid rgba(0, 0, 0, .1);
             margin-top: 23px;
         }
+    }
 }