Fix tabs spacing (#2604)

* remove whitespace around tabs * added margin to tabs and fixed hover:focus state border colour
ONSdigital · Feb 9, 2023 · 169657c · 169657c
1 parent b121283
commit 169657c
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git 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
@@ -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);