feat(navigation): enhance hover styles of navigation links

Applies to Primary navigation, Sub navigation and Side navigation. Use the standard GDS link hover colour to ensure links colour contrast is sufficient for readability. Ensure borders follow suit, and ensure they're always on the same side of the element. Fixes #447
ministryofjustice · Jan 25, 2024 · cd0f9df · cd0f9df
1 parent 372d70b
commit cd0f9df
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 11 deletions.
diff --git a/src/moj/components/primary-navigation/_primary-navigation.scss b/src/moj/components/primary-navigation/_primary-navigation.scss
@@ -62,7 +62,7 @@
   }
 
   &:hover {
-    color: govuk-tint($govuk-link-colour, 25);
+    color: $govuk-link-hover-colour;
   }
 
   &:focus {
@@ -95,6 +95,14 @@
       width: 100%;
     }
 
+    &:hover {
+      color: $govuk-link-hover-colour;
+
+      &:before {
+        background-color: $govuk-link-hover-colour;
+      }
+    }
+
     &:focus {
       color: govuk-colour("black"); // Focus colour on yellow should really be black.
       position: relative; // Ensure focus sits above everything else.

diff --git a/src/moj/components/side-navigation/_side-navigation.scss b/src/moj/components/side-navigation/_side-navigation.scss
@@ -77,15 +77,13 @@
   }
 
   a:hover {
-    border-color: govuk-tint($govuk-link-colour, 25);
+    color: $govuk-link-hover-colour;
   }
 
   a:focus {
     color: $govuk-focus-text-colour;
     background-color: $govuk-focus-colour;
-    box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
     border-color: $govuk-focus-text-colour;
-    border-left-color: transparent;
     position: relative;
   }
 
@@ -100,12 +98,15 @@
     font-weight: bold;
   }
 
+  a:hover {
+    color: $govuk-link-hover-colour;
+    border-color: $govuk-link-hover-colour;
+  }
+
   a:focus {
     color: $govuk-focus-text-colour;
     background-color: $govuk-focus-colour;
-    box-shadow: 0 -2px $govuk-focus-colour, 0 4px $govuk-focus-text-colour;
     border-color: $govuk-focus-text-colour;
-    border-left-color: transparent;
   }
 
   @include govuk-media-query($from: tablet) {
@@ -117,7 +118,6 @@
     a:focus {
       color: $govuk-focus-text-colour;
       background-color: $govuk-focus-colour;
-      border-color: transparent;
     }
   }
 

diff --git a/src/moj/components/sub-navigation/_sub-navigation.scss b/src/moj/components/sub-navigation/_sub-navigation.scss
@@ -60,7 +60,7 @@
   }
 
   &:hover {
-    color: govuk-tint($govuk-link-colour, 25);
+    color: $govuk-link-hover-colour;
   }
 
   &:focus {
@@ -73,9 +73,14 @@
     background-color: govuk-colour("black");
     content: "";
     display: block;
-    width: 100%;
-    position: absolute; bottom: 0; left: 0; right: 0;
-    height: 5px;
+    height: 100%;
+    position: absolute; bottom: 0; left: 0;
+    width: 5px;
+
+    @include govuk-media-query($from: tablet) {
+      height: 5px;
+      width: 100%;
+    }
   }
 
 }
@@ -101,6 +106,10 @@
 
   }
 
+  &:hover {
+    color: $govuk-link-hover-colour;
+  }
+
   &:focus:before {
     background-color: govuk-colour("black");
   }