Skip to content

Commit

Permalink
Fix layout_header CSS issues
Browse files Browse the repository at this point in the history
Currently, the layout header component looks different in the context of
static vs in isolation.
- on the account manager, which does not use static, the layout header
navigation does not align as intended with the rest of the header on
tablet devices
- in the context of an application that uses static, the layout header
  inherits some styles from static. Additionally, application CSS will
conflict with the layout_header CSS resulting in spacing issues.

This aims to address some of these problems by removing unnecessary
classes, as well as increasing layout_header CSS specificity where this
CSS might be overruled by external styles from either static or the
parent application's stylesheet.
  • Loading branch information
danacotoran committed Feb 15, 2021
1 parent 4af2c16 commit ffcc107
Showing 1 changed file with 21 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
}

.gem-c-layout-header--search-left {
.gem-c-header__menu-button {
.gem-c-header__menu-button.govuk-header__menu-button {
margin-top: - govuk-spacing(7);
left: 0;
}
Expand Down Expand Up @@ -70,18 +70,24 @@
margin-top: 0;
}

.gem-c-header__content {
.gem-c-header__content.govuk-header__content {
@include govuk-grid-column(two-thirds);
padding-left: govuk-spacing(6);
padding-right: govuk-spacing(1);
}
}
}

.gem-c-layout-header__search.govuk-grid-column-one-third-from-desktop,
.gem-c-layout-header__logo.govuk-grid-column-one-third-from-desktop,
.gem-c-layout-header__search.govuk-grid-column-one-third,
.gem-c-layout-header__logo.govuk-grid-column-two-thirds {
padding-right: 0;
padding-left: 0;
}

.gem-c-layout-header__logo,
.gem-c-layout-header__search {
padding: 0;

@include govuk-media-query($until: "tablet") {
margin-bottom: govuk-spacing(3);
}
Expand All @@ -96,8 +102,9 @@
}
}

.gem-c-header__content {
.gem-c-header__content.govuk-header__content {
width: auto;
padding-left: 0;

@include govuk-media-query($from: desktop) {
float: right;
Expand Down Expand Up @@ -159,3 +166,12 @@
display: block;
}
}

.govuk-header__menu-button.gem-c-header__menu-button {
top: govuk-spacing(4);
right: 0;
}

.gem-c-header__nav {
clear: both;
}

0 comments on commit ffcc107

Please sign in to comment.