Merge pull request #1330 from alphagov/update-tabs-spacing

Spacing of tabs list updated to be more inline with similar lists on GOV.UK and the Design System

CHANGELOG.md

@@ -106,6 +106,14 @@
 
   ([PR #1288](https://github.com/alphagov/govuk-frontend/pull/1288))
 
+- Spacing of tabs list updated to be more inline with similar lists on GOV.UK and the Design System
+
+  The tabs headings spacing has changed slightly on on mobile and when Javascript is disabled. See https://github.com/alphagov/govuk-frontend/pull/1330#issuecomment-491233294
+
+  To migrate: In the unlikely event that your app relies on the spacing of the tab headings being a certain height on mobile and with JS disabled, you should make the necessary adjustments in your code.
+
+  ([PR #1330](https://github.com/alphagov/govuk-frontend/pull/1330))
+
 - Pull Request Title goes here
 
   Description goes here (optional)

app/assets/scss/partials/_banner.scss

@@ -9,8 +9,12 @@
     font-size: inherit;
   }
 
-  .govuk-link:not(:focus) {
-    color: inherit;
+  .govuk-link {
+    color: govuk-colour("white");
+   }
+
+  .govuk-link:focus {
+    color: $govuk-text-colour;
   }
 }
 

src/components/tabs/_tabs.scss

@@ -13,16 +13,14 @@
 
   .govuk-tabs__title {
     @include govuk-font($size: 19);
-    margin-bottom: govuk-spacing(1);
+    margin-bottom: govuk-spacing(2);
   }
 
   .govuk-tabs__list {
     margin: 0;
     padding: 0;
     list-style: none;
-    @include mq($until: tablet) {
-      @include govuk-responsive-margin(6, "bottom");
-    }
+    @include govuk-responsive-margin(6, "bottom");
   }
 
   .govuk-tabs__list-item {
@@ -41,8 +39,7 @@
     @include govuk-font($size: 19);
 
     display: inline-block;
-    padding-top: govuk-spacing(2);
-    padding-bottom: govuk-spacing(2);
+    margin-bottom: govuk-spacing(2);
 
     &[aria-current = "true"] {
       color: govuk-colour("black");
@@ -61,6 +58,7 @@
 
       .govuk-tabs__list {
         @include govuk-clearfix;
+        margin-bottom: 0;
         border-bottom: 1px solid $govuk-border-colour;
       }
 
@@ -86,6 +84,12 @@
         text-align: center;
         text-decoration: underline;
 
+        @include mq($from: tablet) {
+          margin-bottom: 0;
+          padding-top: govuk-spacing(2);
+          padding-bottom: govuk-spacing(2);
+        }
+
         @include govuk-if-ie8 {
           // IE8 doesn't support `box-shadow` so add an actual border that is
           // modified to indicate state.