Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix padding on GOV.UK logo affecting hover and focus states #2171

Merged
merged 3 commits into from
Apr 6, 2021
Merged

Fix padding on GOV.UK logo affecting hover and focus states #2171

merged 3 commits into from
Apr 6, 2021

Commits on Mar 30, 2021

  1. Tidy up hover/focus state for logo w/ product name 

    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.

[1]: df413cf
    @36degrees
    36degrees committed Mar 30, 2021
    Configuration menu
    Copy the full SHA
    8276c0d View commit details
    Browse the repository at this point in the history

  2. Tidy up hover/focus state for logo on its own 

    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, and I believe it’s to ensure there’s a gap between GOV.UK and a product name. Remove this margin when the `__logotype` element is the last child of its descendent, so that the margin is only included when there is a product name to show.
    @36degrees
    36degrees committed Mar 30, 2021
    Configuration menu
    Copy the full SHA
    bdfb198 View commit details
    Browse the repository at this point in the history

  3. Add to CHANGELOG 

    Also, fix formatting to other fixes to match the same formatting used for previous releases, with a colon after the PR number.
    @36degrees
    36degrees committed Mar 30, 2021
    Configuration menu
    Copy the full SHA
    65823aa View commit details
    Browse the repository at this point in the history