From 2661e73626292a162ed5a8d9a3fd36c693f26525 Mon Sep 17 00:00:00 2001
From: Hanna Laakso <hanna.laakso@digital.cabinet-office.gov.uk>
Date: Thu, 9 May 2019 16:25:12 +0100
Subject: [PATCH] Improve tabs heading spacing on mobile and no-js view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Split from https://github.com/alphagov/govuk-frontend/pull/1326

This amends the tab headings spacing on mobile and no-js view to be
consistent with how we present the navigation on the Design System:

Adjusts the padding/margin so that with the the list version of component
that’s used on mobile and no-js we use have govuk-spacing(2) as bottom margin,
consistent with what we do with on-page navigation in GOV.UK Design System when
it's displayed as a list. For the desktop/js-enabled version of component remove
bottom margin and use top and bottom padding instead.

Also adjusts bottom margin of list item so that it’s applied on no-js version
and add some more spacing under the tabs title.
---
 src/components/tabs/_tabs.scss | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss
index bbb61e7fe5..dd94e8e69e 100644
--- a/src/components/tabs/_tabs.scss
+++ b/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,10 @@
     @include govuk-font($size: 19);
 
     display: inline-block;
-    padding-top: govuk-spacing(2);
-    padding-bottom: govuk-spacing(2);
+    // Use bottom margin on mobile and when JS is not enabled.
+    // Consistent with what we do with on-page navigation in GOV.UK Design
+    // System when it's displayed as a list.
+    margin-bottom: govuk-spacing(2);
 
     &[aria-current = "true"] {
       color: govuk-colour("black");
@@ -61,6 +61,7 @@
 
       .govuk-tabs__list {
         @include govuk-clearfix;
+        margin-bottom: 0;
         border-bottom: 1px solid $govuk-border-colour;
       }
 
@@ -84,7 +85,12 @@
         color: govuk-colour("black");
         background-color: govuk-colour("light-grey", $legacy: "grey-4");
         text-align: center;
-        text-decoration: none;
+
+        @include mq($from: tablet) {
+          margin-bottom: 0;
+          padding-top: govuk-spacing(2);
+          padding-bottom: govuk-spacing(2);
+        }
 
         &--selected {
           margin-top: - govuk-spacing(1);