Alter use of pseudo-underline mixin to allow for different button sizes

alphagov · Dec 8, 2021 · 244b22b · 244b22b
1 parent 5a6f562
commit 244b22b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Alter use of pseudo-underline mixin to allow for different button sizes ([#2501](https://github.com/alphagov/govuk_publishing_components/pull/2501))
+
 ## 27.16.0
 
 * Remove jQuery from custom dimensions ([PR #2473](https://github.com/alphagov/govuk_publishing_components/pull/2473))

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
@@ -131,14 +131,14 @@ $pseudo-underline-height: 3px;
   top: 0;
 }
 
-@mixin pseudo-underline {
+@mixin pseudo-underline($left: govuk-spacing(4), $right: govuk-spacing(4)) {
   background: none;
   bottom: 0;
   content: "";
   height: $pseudo-underline-height;
-  left: govuk-spacing(5);
+  left: $left;
   position: absolute;
-  right: govuk-spacing(6);
+  right: $right;
   top: auto;
 }
 
@@ -385,7 +385,7 @@ $pseudo-underline-height: 3px;
       // stylelint-enable max-nesting-depth
 
       &:after {
-        @include pseudo-underline;
+        @include pseudo-underline($left: govuk-spacing(5), $right: govuk-spacing(6));
       }
     }
   }
@@ -431,7 +431,7 @@ $pseudo-underline-height: 3px;
 
   @include govuk-media-query($from: "desktop") {
     &:after {
-      @include pseudo-underline;
+      @include pseudo-underline($left: govuk-spacing(5), $right: govuk-spacing(6));
     }
 
     @include focus-not-focus-visible {