Super nav header: Simplify open button state

- Remove unnecessarily convoluted selector targetting element `.gem-c-layout-super-navigation-header__navigation-top-toggle-button` both with and without `--blue-background` modifier - Move open state logic into main `top-toggle-button` block
alphagov · Sep 16, 2024 · 187a716 · 187a716
1 parent 242b6c6
commit 187a716
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 35 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@
 * Update metatags for GA4 ([PR #4222](https://github.com/alphagov/govuk_publishing_components/pull/4222))
 * Set aria-label text in govuk_logo.html to "GOV.UK" ([PR #4217](https://github.com/alphagov/govuk_publishing_components/pull/4217))
 * Fix cookie expiration date potentially relying on user's timezone ([PR #4219](https://github.com/alphagov/govuk_publishing_components/pull/4219))
+* Tidy unused CSS in layout super navigation component ([PR #4228](https://github.com/alphagov/govuk_publishing_components/pull/4228))
 
 ## 43.1.1
 

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
@@ -503,51 +503,45 @@ $after-button-padding-left: govuk-spacing(4);
       }
     }
 
-    // stylelint-enable max-nesting-depth
-  }
-}
-
-.gem-c-layout-super-navigation-header__navigation-top-toggle-button.gem-c-layout-super-navigation-header__navigation-top-toggle-button--blue-background,
-.gem-c-layout-super-navigation-header__navigation-top-toggle-button {
-  // Open button modifier
-  &.gem-c-layout-super-navigation-header__open-button {
-    // stylelint-disable max-nesting-depth
-    @include focus-and-focus-visible {
-      @include govuk-focused-text;
-      box-shadow: none;
+    // Open button modifier
+    &.gem-c-layout-super-navigation-header__open-button {
+      @include focus-and-focus-visible {
+        @include govuk-focused-text;
+        box-shadow: none;
 
-      &::after {
-        background-color: govuk-colour("black");
-      }
+        &::after {
+          background-color: govuk-colour("black");
+        }
 
-      .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
-        color: govuk-colour("black");
-        border-color: $govuk-focus-colour;
+        .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
+          color: govuk-colour("black");
+          border-color: $govuk-focus-colour;
 
-        @include govuk-media-query($from: 360px) {
-          &::before {
-            @include chevron(govuk-colour("black"), true);
-            @include prefixed-transform($rotate: 225deg, $translateY: 1px);
+          @include govuk-media-query($from: 360px) {
+            &::before {
+              @include chevron(govuk-colour("black"), true);
+              @include prefixed-transform($rotate: 225deg, $translateY: 1px);
+            }
           }
         }
       }
-    }
 
-    @include focus-not-focus-visible {
-      background: govuk-colour("light-grey");
+      @include focus-not-focus-visible {
+        background: govuk-colour("light-grey");
 
-      &::after {
-        background-color: $govuk-link-colour;
-      }
+        &::after {
+          background-color: $govuk-link-colour;
+        }
 
-      .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
-        color: $govuk-link-colour;
-        border-color: govuk-colour("light-grey");
+        .gem-c-layout-super-navigation-header__navigation-top-toggle-button-inner {
+          color: $govuk-link-colour;
+          border-color: govuk-colour("light-grey");
 
-        @include govuk-media-query($from: 360px) {
-          &::before {
-            @include chevron($govuk-link-colour);
-            @include prefixed-transform($rotate: 225deg, $translateY: 1px);
+          @include govuk-media-query($from: 360px) {
+            &::before {
+              @include chevron($govuk-link-colour);
+              @include prefixed-transform($rotate: 225deg, $translateY: 1px);
+            }
           }
         }
       }