Adjustments based on code review

Avoid use of padding override classes as they use !important which is not ideal. Preserve classes inherited from the Design System (govuk-header__content class). Define more specific CSS rules for the markup.
alphagov · Feb 12, 2021 · 2ab7e9e · 2ab7e9e
1 parent 91d2c75
commit 2ab7e9e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss b/app/assets/stylesheets/govuk_publishing_components/components/_layout-header.scss
@@ -70,14 +70,22 @@
       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 {
   @include govuk-media-query($until: "tablet") {
@@ -94,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;

diff --git a/app/views/govuk_publishing_components/components/_layout_header.html.erb b/app/views/govuk_publishing_components/components/_layout_header.html.erb
@@ -20,28 +20,28 @@
   <div class="govuk-header__container <%= width_class %>">
     <% if search_left %>
       <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
-        <div class="gem-c-layout-header__logo govuk-grid-column-one-third-from-desktop govuk-!-padding-left-0 govuk-!-padding-right-0">
+        <div class="gem-c-layout-header__logo govuk-grid-column-one-third-from-desktop">
           <%= render "govuk_publishing_components/components/layout_header/header_logo", environment: environment, product_name: product_name %>
         </div>
       </div>
       <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
-        <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop govuk-!-padding-left-0 govuk-!-padding-right-0 gem-c-layout-header__search">
+        <div class="govuk-grid-column-full govuk-grid-column-one-third-from-desktop gem-c-layout-header__search">
           <%= render "govuk_publishing_components/components/layout_header/search" %>
         </div>
-        <div class="gem-c-header__content govuk-grid-column-full">
+        <div class="govuk-header__content gem-c-header__content govuk-grid-column-full">
           <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label  %>
         </div>
       </div>
     <% else %>
       <div class="govuk-grid-row govuk-!-margin-left-0 govuk-!-margin-right-0">
-        <div class="gem-c-layout-header__logo govuk-grid-column-two-thirds govuk-!-padding-0">
+        <div class="gem-c-layout-header__logo govuk-grid-column-two-thirds">
           <%= render "govuk_publishing_components/components/layout_header/header_logo", environment: environment, product_name: product_name %>
         </div>
-        <div class="gem-c-header__content">
+        <div class="govuk-header__content gem-c-header__content">
           <%= render "govuk_publishing_components/components/layout_header/navigation_items", navigation_items: navigation_items, navigation_aria_label: navigation_aria_label  %>
         </div>
         <% if search %>
-          <div class="govuk-grid-column-one-third gem-c-layout-header__search govuk-!-padding-0">
+          <div class="govuk-grid-column-one-third gem-c-layout-header__search">
             <%= render "govuk_publishing_components/components/layout_header/search" %>
           </div>
         <% end %>