From 5aa92a679b42add523296fdf4aa7c89904675af4 Mon Sep 17 00:00:00 2001 From: Oliver Byford Date: Tue, 23 Mar 2021 17:18:42 +0000 Subject: [PATCH] Tidy up GOV.UK logo hover and focus states MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Address two issues with the hover and focus states for the GOV.UK logo (including product name, when present): 1. When the header includes a product name, the homepage link’s underline (on hover) and the focus state take up an additional 10px on the right hand side, because of the 10px right padding on `govuk-header__product-name`. This padding is there to ensure there is a gap left between the product name and the menu button [1]. Remove it, and add a 10px margin to `govuk-header__link--homepage` instead which achieves the same result but without adding an additional 10px to the hover and focus states. 2. When the header does not include a product name, the homepage link’s underline (on hover) and the focus state take up an additional 5px on the right hand side, because of a 5px margin on `govuk-header__logotype`. This margin has been present since the component was added to GOV.UK Frontend, but I believe it’s to ensure there’s a space between GOV.UK and a product name. Remove this margin in favour of a 5px left margin on the product name, so that the margin is only included when there is a product name to show. [1]: https://github.com/alphagov/govuk-frontend/commit/df413cf6363b537fe37b1b0db5bc40b97424422f --- src/govuk/components/header/_index.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/govuk/components/header/_index.scss b/src/govuk/components/header/_index.scss index 36dcc42e1a..f87eb1049d 100644 --- a/src/govuk/components/header/_index.scss +++ b/src/govuk/components/header/_index.scss @@ -36,7 +36,6 @@ .govuk-header__logotype { display: inline-block; - margin-right: govuk-spacing(1); } .govuk-header__logotype-crown { @@ -57,7 +56,7 @@ .govuk-header__product-name { @include govuk-font($size: 24, $line-height: 1); display: inline-table; - padding-right: govuk-spacing(2); + margin-left: govuk-spacing(1); } .govuk-header__link { @@ -92,6 +91,7 @@ @include govuk-font($size: false, $weight: bold); display: inline-block; + margin-right: govuk-spacing(2); font-size: 30px; // We don't have a mixin that produces 30px font size line-height: 1;