diff --git a/CHANGELOG.md b/CHANGELOG.md index 09aab0aef3..872baab325 100644 --- 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/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss b/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss index e02102a279..6be5a2550c 100644 --- a/app/assets/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss +++ b/app/assets/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 {