From 5f48ba50ae236710a3e82d203bd35f67d9e9ce8e Mon Sep 17 00:00:00 2001 From: Vanita Barrett Date: Wed, 22 Sep 2021 11:51:41 +0100 Subject: [PATCH] Remove explicitly set line-height values We were explicitly setting line-heights on the button and the toggle - normally the govuk-font mixin will do this for us and will choose a line-height value appropriate to the font size. We were seeing an issue with the focus state on smaller screens where there was a thin black line between lines. See https://github.com/alphagov/govuk-frontend/issues/2322 for more detail. This commit removes the explicitly set line-height so that the focus state displays as expected. --- src/govuk/components/accordion/_index.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/govuk/components/accordion/_index.scss b/src/govuk/components/accordion/_index.scss index 4ecf806dc3..ff1de94a7b 100644 --- a/src/govuk/components/accordion/_index.scss +++ b/src/govuk/components/accordion/_index.scss @@ -28,7 +28,7 @@ // Buttons within the sections don’t need default styling .govuk-accordion__section-button { @include govuk-text-colour; - @include govuk-font($size: 24, $weight: bold, $line-height: 1.25); + @include govuk-font($size: 24, $weight: bold); display: block; margin-bottom: 0; padding-top: govuk-spacing(3); @@ -203,6 +203,7 @@ border: 0; border-top: $govuk-accordion-bottom-border-width solid $govuk-border-colour; + // Visually separate the section from the one underneath when user changes colours in their // browser. border-bottom: govuk-spacing(2) solid transparent; @@ -312,7 +313,7 @@ // Add toggle link with Chevron icon on left. .govuk-accordion__section-toggle { - @include govuk-font($size: 19, $line-height: 1); + @include govuk-font($size: 19); color: $govuk-link-colour; } @@ -320,7 +321,7 @@ // As a result this is applied to the pseudo element that has a display:block property to maintain Design .govuk-accordion__section-summary:before, .govuk-accordion__section-toggle:before { - @include govuk-responsive-margin(1, "top"); + margin-top: 8px; } // Space between icon and text,