Add theming states for login form

core/app/src/components/login/login.component.html

@@ -15,13 +15,13 @@
       <input [(ngModel)]="passw" type="password" name="password" placeholder="Password" aria-label="Password">
     </div>
 
-    <button (click)="doLogin()">LOGIN</button>
-    <div class="forgotten-password">
-      <a href="#" class="forgotten-password-link">
-        Forgot Password?
-      </a>
-    </div>
-  </form>
+        <button class="login-button" (click)="doLogin()">LOGIN</button>
+        <div class="forgotten-password">
+            <a href="#" class="forgotten-password-link">
+                Forgot Password?
+            </a>
+        </div>
+    </form>
 
   <!-- End of login form section -->
 

core/app/themes/suite8/css/abstracts/_variables.scss

@@ -24,6 +24,7 @@ $mellow-yellow: #e2b98e;
 
 $salmon-pink: #f5aea6;
 $coral-pink: #eb6657;
+$light-orange: #f05645;
 
 /* --------- BREAKPOINTS ---------- */
 

core/app/themes/suite8/css/components/_button.scss

@@ -15,10 +15,19 @@ button {
   display: inline-block;
 }
 
-.login-form button {
+.login-button {
+  background-color: $coral-pink;
   letter-spacing: 0.1em;
 }
 
+.login-button .disabled {
+  opacity: 40%;
+}
+
+.login-button:hover {
+  background-color: $light-orange;
+}
+
 .alerts-button,
 .quickcreate-button,
 .favourites-button {
@@ -101,20 +110,14 @@ button {
 }
 
 @media all and (min-width: $breakpoint-medium) {
-  .login-form {
-    button {
-      background-color: $coral-pink;
-      width: 26.5em;
-    }
+  .login-button {
+    width: 26.5em;
   }
 }
 
 @media all and (max-width: $breakpoint-medium) {
-  .login-form {
-    button {
-      background-color: $coral-pink;
-      width: 20em;
-    }
+  .login-button {
+    width: 20em;
   }
 }
 

core/app/themes/suite8/css/layout/_forms.scss

@@ -27,6 +27,14 @@
 
   .forgotten-password-link {
     clear: both;
-    color: $salmon-pink;
+    color: $coral-pink;
+  }
+
+  .forgotten-password-link:hover {
+    color: $light-orange;
+  }
+
+  .forgotten-password-link .disabled {
+    opacity: 40%;
   }
 }