From 6d349b514c98f5a5bfdb4d14d332ffbb4ae8aebc Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 11 Feb 2020 22:23:03 +0000
Subject: [PATCH] Remove all redundant link CSS

Giving all links the GOVUK Frontend classes, and
the new `govuk-link--destructive` class, means
some styles are already applied.

This strips out those styles.

Note: there's still a good amount of styling, most
of which is to make the focus styles specific to
the space the link is in. These will need
reviewing when GOVUK Frontend is bumped past
version 3 as this brings in new focus styles.
---
 app/assets/stylesheets/components/banner.scss | 29 +++++--------------
 .../stylesheets/components/big-number.scss    |  1 -
 .../stylesheets/components/file-upload.scss   |  2 +-
 .../stylesheets/components/message.scss       | 11 ++-----
 .../stylesheets/components/task-list.scss     |  5 ----
 .../stylesheets/components/tick-cross.scss    | 22 ++++----------
 .../vendor/previous-next-navigation.scss      |  4 ---
 .../stylesheets/views/notification.scss       |  8 ++---
 8 files changed, 19 insertions(+), 63 deletions(-)

diff --git a/app/assets/stylesheets/components/banner.scss b/app/assets/stylesheets/components/banner.scss
index dac7613d4..9eed69c66 100644
--- a/app/assets/stylesheets/components/banner.scss
+++ b/app/assets/stylesheets/components/banner.scss
@@ -55,19 +55,6 @@
     outline: 3px solid $yellow;
   }
 
-  a {
-
-    &:link,
-    &:visited {
-      color: $error-colour;
-    }
-
-    &:hover {
-      color: $mellow-red;
-    }
-
-  }
-
   .list {
     margin-bottom: 0;
   }
@@ -108,7 +95,7 @@
 
   a {
 
-    @include bold-19;
+    font-weight: bold;
     display: block;
     padding: 0 ;
     margin: 0 0 $gutter 0;
@@ -118,16 +105,16 @@
       color: $white;
     }
 
-    &:hover,
+    &:focus,
     &:active {
-      background-color: $link-hover-colour;
-      outline: 10px solid $link-hover-colour;
+      color: $govuk-focus-text-colour;
+      outline: 10px solid $yellow;
     }
 
-    &:active,
-    &:focus {
-      background-color: $yellow;
-      outline: 10px solid $yellow;
+    &:hover {
+      color: $white;
+      background-color: $link-hover-colour;
+      outline: 10px solid $link-hover-colour;
     }
 
   }
diff --git a/app/assets/stylesheets/components/big-number.scss b/app/assets/stylesheets/components/big-number.scss
index 7e4fa81a8..035c99e70 100644
--- a/app/assets/stylesheets/components/big-number.scss
+++ b/app/assets/stylesheets/components/big-number.scss
@@ -130,7 +130,6 @@
       &:active,
       &:focus {
         color: $black;
-        border-bottom: 1px solid $black;
       }
 
     }
diff --git a/app/assets/stylesheets/components/file-upload.scss b/app/assets/stylesheets/components/file-upload.scss
index 35adb510e..8ff2e92a9 100644
--- a/app/assets/stylesheets/components/file-upload.scss
+++ b/app/assets/stylesheets/components/file-upload.scss
@@ -43,7 +43,7 @@
       line-height: 35px;
 
       a {
-        @include bold-19;
+        font-weight: bold;
       }
 
     }
diff --git a/app/assets/stylesheets/components/message.scss b/app/assets/stylesheets/components/message.scss
index e6773357b..4b6b889be 100644
--- a/app/assets/stylesheets/components/message.scss
+++ b/app/assets/stylesheets/components/message.scss
@@ -34,15 +34,8 @@
       margin-bottom: -$gutter;
       padding-bottom: $gutter;
 
-      &:hover {
-        color: $link-hover-colour;
-
-        .message-name-separator {
-          &:before {
-            border-color: $link-hover-colour;
-          }
-        }
-
+      &:hover .message-name-separator:before {
+        border-color: $link-hover-colour;
       }
 
       &:focus {
diff --git a/app/assets/stylesheets/components/task-list.scss b/app/assets/stylesheets/components/task-list.scss
index ae751d7ea..3330fd32d 100644
--- a/app/assets/stylesheets/components/task-list.scss
+++ b/app/assets/stylesheets/components/task-list.scss
@@ -31,13 +31,8 @@ $indicator-colour: $black;
       padding-right: 20%;
       position: relative;
 
-      &:hover {
-        color: $link-hover-colour;
-      }
-
       &:focus {
         outline: none;
-        color: $black;
         box-shadow: -3px 0 0 0 $focus-colour, 3px 0 0 0 $focus-colour;
         border-color: transparent;
         top: -1px;
diff --git a/app/assets/stylesheets/components/tick-cross.scss b/app/assets/stylesheets/components/tick-cross.scss
index 4136dab7e..53bf6588c 100644
--- a/app/assets/stylesheets/components/tick-cross.scss
+++ b/app/assets/stylesheets/components/tick-cross.scss
@@ -61,22 +61,12 @@
           background: transparent;
         }
 
-        &:hover {
-          color: $link-hover-colour;
-        }
-
-        &:active,
-        &:focus {
-
-          color: $black;
-
-          &:before {
-            border-color: $yellow;
-            border-style: solid;
-            border-width: 15px 3px 15px 15px;
-            right: -3px;
-          }
-
+        &:active:before,
+        &:focus:before {
+          border-color: $yellow;
+          border-style: solid;
+          border-width: 15px 3px 15px 15px;
+          right: -3px;
         }
 
       }
diff --git a/app/assets/stylesheets/components/vendor/previous-next-navigation.scss b/app/assets/stylesheets/components/vendor/previous-next-navigation.scss
index 0e060f12c..8fc2213a0 100644
--- a/app/assets/stylesheets/components/vendor/previous-next-navigation.scss
+++ b/app/assets/stylesheets/components/vendor/previous-next-navigation.scss
@@ -54,10 +54,6 @@ $is-ie: false !default;
       padding: $gutter-half;
       text-decoration: none;
 
-      &:visited {
-        color: $link-colour;
-      }
-
       &:hover,
       &:active {
         background-color: $canvas-colour;
diff --git a/app/assets/stylesheets/views/notification.scss b/app/assets/stylesheets/views/notification.scss
index e26268f56..0961dc815 100644
--- a/app/assets/stylesheets/views/notification.scss
+++ b/app/assets/stylesheets/views/notification.scss
@@ -6,18 +6,14 @@
 
   &.error {
 
-    color: $error-colour;
+    color: $govuk-error-colour;
     font-weight: bold;
 
-    a {
-      color: $error-colour;
-    }
-
   }
 
   &-cancelled {
     @include bold-19;
-    color: $error-colour;
+    color: $govuk-error-colour;
   }
 
 }