Remove Line-height in tab component (#3432)

Co-authored-by: rmccar <[email protected]>
ONSdigital · Nov 28, 2024 · af2ff28 · af2ff28
1 parent d8f4555
commit af2ff28
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 19 deletions.
diff --git a/...rence/ds-vr-test__components_tabs_example-tabs-details_0_document_0_desktop.png b/...rence/ds-vr-test__components_tabs_example-tabs-details_0_document_0_desktop.png
diff --git a/...erence/ds-vr-test__components_tabs_example-tabs-details_0_document_1_tablet.png b/...erence/ds-vr-test__components_tabs_example-tabs-details_0_document_1_tablet.png
diff --git a/...aps_reference/ds-vr-test__components_tabs_example-tabs_0_document_0_desktop.png b/...aps_reference/ds-vr-test__components_tabs_example-tabs_0_document_0_desktop.png
diff --git a/...maps_reference/ds-vr-test__components_tabs_example-tabs_0_document_1_tablet.png b/...maps_reference/ds-vr-test__components_tabs_example-tabs_0_document_1_tablet.png
diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss
@@ -43,11 +43,10 @@
     border-radius: 3px 3px 0 0;
     color: var(--ons-color-text);
     display: inline-block;
-    height: 2.55rem;
-    line-height: 2.25rem;
+    height: 2.5rem;
     margin: 0 0.5rem 0 0;
     overflow: visible;
-    padding: 0 1rem;
+    padding: 0.25rem 1rem 0.25rem;
     position: relative;
     text-decoration: underline;
 
@@ -62,10 +61,10 @@
         background-color: var(--ons-color-focus);
         border-bottom: 1px solid var(--ons-color-borders);
         box-shadow:
-            inset 0 0 0 9px var(--ons-color-button-secondary),
-            inset 17px 0 0 0 var(--ons-color-button-secondary),
-            inset -17px 0 0 0 var(--ons-color-button-secondary),
-            inset 0 -13px 0 0 var(--ons-color-text-link-focus);
+            inset 0 0 0 5px var(--ons-color-button-secondary),
+            inset 15px 0 0 0 var(--ons-color-button-secondary),
+            inset -14px 0 0 0 var(--ons-color-button-secondary),
+            inset 0 -9px 0 0 var(--ons-color-text-link-focus);
         color: var(--ons-color-text-link-focus);
 
         // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
@@ -88,10 +87,10 @@
         &:focus {
             background-color: var(--ons-color-focus);
             box-shadow:
-                inset 0 0 0 9px var(--ons-color-page-light),
-                inset 17px 0 0 0 var(--ons-color-page-light),
-                inset -17px 0 0 0 var(--ons-color-page-light),
-                inset 0 -13px 0 0 var(--ons-color-text-link-focus);
+                inset 0 0 0 5px var(--ons-color-page-light),
+                inset 15px 0 0 0 var(--ons-color-page-light),
+                inset -14px 0 0 0 var(--ons-color-page-light),
+                inset 0 -9px 0 0 var(--ons-color-text-link-focus);
             text-decoration: none;
         }
     }