feat(navigation): enhance hover styles fo 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 · Dec 15, 2023 · cbccda7 · cbccda7
1 parent ef965ef
commit cbccda7
Show file tree

Hide file tree

Showing 3 changed files with 27 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,14 @@
     font-weight: bold;
   }
 
+  a:hover {
+    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 +117,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
@@ -66,7 +66,7 @@
   }
 
   &:hover {
-    color: govuk-tint($govuk-link-colour, 25);
+    color: $govuk-link-hover-colour;
   }
 
   &:focus {
@@ -79,9 +79,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%;
+    }
   }
 
 }
@@ -107,6 +112,10 @@
 
   }
 
+  &:hover {
+    color: $govuk-link-hover-colour;
+  }
+
   &:focus:before {
     background-color: govuk-colour("black");
   }