Fix nav header focus hover states

The hover state differed between the navigation toggle buttons and the search toggle buttons - this is now consistent in that there is now no visual change when a focussed element is hovered.
alphagov · Aug 24, 2021 · 06289f9 · 06289f9
1 parent 7254544
commit 06289f9
Showing 1 changed file with 15 additions and 22 deletions.
diff --git a/...s/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss b/...s/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
@@ -396,16 +396,23 @@ $search-icon-size: 20px;
   position: absolute;
   right: (0 - govuk-spacing(3));
 
-  &.gem-c-layout-super-navigation-header__open-button {
-    border-top-color: govuk-colour("black");
+  &:after {
+    background-color: $govuk-link-colour;
+    content: " ";
+    left: 0;
+    right: 0;
   }
 
-  @include govuk-media-query($from: 360px) {
-    right: 0;
+  &:not(.gem-c-layout-super-navigation-header__open-button):focus {
+    &:hover,
+    &:after {
+      background-color: $govuk-focus-colour;
+      border-top-color: $govuk-focus-colour;
+    }
   }
 
-  &:focus:hover {
-    border-top-color: govuk-colour("black");
+  @include govuk-media-query($from: 360px) {
+    right: 0;
   }
 
   @include govuk-media-query($from: "desktop") {
@@ -417,23 +424,9 @@ $search-icon-size: 20px;
     position: relative;
     float: right;
 
-    &:not(.gem-c-layout-super-navigation-header__open-button):hover {
-      background: govuk-colour("black");
-      color: govuk-colour("mid-grey");
-
-      &:after {
-        content: " ";
-        left: 0;
-        right: 0;
-      }
-    }
-
-    &:focus:hover:after,
-    &:after {
-      content: none;
-    }
-
     &.gem-c-layout-super-navigation-header__open-button {
+      border-top-color: govuk-colour("black");
+
       &:hover:after {
         content: " ";
       }