Tidy unused CSS in layout super navigation component

- Remove unused styles from previous iterations of the markup that haven't been removed - 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 · 0cf8f23 · 0cf8f23
1 parent 47ab761
commit 0cf8f23
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 75 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
@@ -379,17 +379,6 @@ $after-button-padding-left: govuk-spacing(4);
   display: none;
 }
 
-// Search and popular content dropdown.
-.gem-c-layout-super-navigation-header__search-and-popular {
-  display: none;
-  padding-bottom: govuk-spacing(4);
-  padding-top: govuk-spacing(4);
-
-  .js-module-initialised & {
-    display: block;
-  }
-}
-
 // Styles for top level navigation toggle button.
 .gem-c-layout-super-navigation-header__navigation-top-toggle-button {
   font-size: 16px;
@@ -514,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);
+            }
           }
         }
       }
@@ -780,16 +763,6 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
-// Dropdown menu description.
-.gem-c-layout-super-navigation-header__menu-description {
-  display: none;
-
-  @include govuk-media-query($from: "desktop") {
-    display: block;
-    padding: govuk-spacing(7) 0 govuk-spacing(7) 0;
-  }
-}
-
 // Dropdown menu items.
 .gem-c-layout-super-navigation-header__dropdown-list-item {
   box-sizing: border-box;
@@ -890,25 +863,6 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
-// Popular links.
-.gem-c-layout-super-navigation-header__popular-item {
-  position: relative;
-  padding: govuk-spacing(1) 0;
-}
-
-.gem-c-layout-super-navigation-header__width-container {
-  @include govuk-media-query($until: "desktop") {
-    margin: 0;
-    margin-top: govuk-spacing(6);
-  }
-
-  @include govuk-media-query($from: "desktop") {
-    margin: 0 auto;
-    max-width: 960px;
-    padding: govuk-spacing(5);
-  }
-}
-
 .gem-c-layout-super-navigation-header__column-header {
   font-size: 24px;
 }