From 169657ce0a147db7658a0d0afa8a1b4fbfe23b99 Mon Sep 17 00:00:00 2001
From: Jon Barnes <43346934+jrbarnes9@users.noreply.github.com>
Date: Thu, 9 Feb 2023 14:00:32 +0000
Subject: [PATCH] Fix tabs spacing (#2604)

* remove whitespace around tabs

* added margin to tabs and fixed hover:focus state border colour
---
 src/components/tabs/_macro.njk | 4 ++--
 src/components/tabs/_tabs.scss | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/tabs/_macro.njk b/src/components/tabs/_macro.njk
index c5b109b850..2fde83ceca 100644
--- a/src/components/tabs/_macro.njk
+++ b/src/components/tabs/_macro.njk
@@ -14,9 +14,9 @@
         <{{ titleTag }} class="ons-tabs__title ons-u-fs-r--b ons-u-mt-no">{{ params.title }}</{{ titleTag }}>
 
         <ul class="ons-tabs__list">
-            {% for tab in params.tabs %}
+            {%- for tab in params.tabs -%}
                 <li class="ons-tab__list-item"><a href="#{{ tab.id if tab.id else 'tabId' ~ loop.index }}" class="ons-tab" data-ga="click" data-ga-category="tabs" data-ga-action="Show: {{ tab.title }}" data-ga-label="Show: {{ tab.title }}">{{ tab.title }}</a></li>
-            {% endfor %}
+            {%- endfor -%}
         </ul>
 
         {% for tab in params.tabs %}
diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss
index b824b1dc79..4a5b9cc2b5 100644
--- a/src/components/tabs/_tabs.scss
+++ b/src/components/tabs/_tabs.scss
@@ -50,13 +50,13 @@
   display: inline-block;
   height: 2.55rem;
   line-height: 2.3rem;
-  margin: 0 0.1rem 0 0;
+  margin: 0 0.4rem 0 0;
   overflow: visible;
   padding: 0 1rem;
   position: relative;
   text-decoration: underline;
 
-  &:hover {
+  &:hover:not(:focus) {
     background-color: var(--ons-color-button-secondary-hover);
     border-color: var(--ons-color-button-secondary-hover);
     color: var(--ons-color-text);