diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_tabs_example-tabs-details_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_tabs_example-tabs-details_0_document_0_desktop.png index d42335c9de..5c40a0432a 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_tabs_example-tabs-details_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_tabs_example-tabs-details_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d5da2774212b021fa4e60f2873c72998db91c0ebc9270747e16d26ae1f67c704 -size 722102 +oid sha256:56b13d93272ee61ef4fd08a87cc7c211e837aaf47adb2ef2aa11babc842b6390 +size 722088 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_tabs_example-tabs-details_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_tabs_example-tabs-details_0_document_1_tablet.png index 64d287e785..765815beca 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_tabs_example-tabs-details_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_tabs_example-tabs-details_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d5ab28700df3b480e17f11fc1be54c5dbff36f6388321c19d5cb479e37aa0ad5 -size 174635 +oid sha256:3da5559bfd8232bce157f632bcd5037469cb72a202a324cff48bf9f02182ee8e +size 174632 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_tabs_example-tabs_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_tabs_example-tabs_0_document_0_desktop.png index d265257a3e..882c01cd10 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_tabs_example-tabs_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_tabs_example-tabs_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e41d80e1db739b05edc14f44eccf1990697500c0d6a6efc22d7e4b5b8d33996d -size 54387 +oid sha256:1f2a2c7b835ee5cbc573d4a1c2f436601984a16815c0ffd901c6a4594a831773 +size 54371 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_tabs_example-tabs_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_tabs_example-tabs_0_document_1_tablet.png index a9cbac9d9c..cc6ecf6a64 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_tabs_example-tabs_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_tabs_example-tabs_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:95676bd31602fc75a8243fb37a634198b84a1e749afb3def423d141eb19f6931 -size 59877 +oid sha256:9cf7dbd5ec75d0351177e5a93e78429a308fa2b159abc21a5ec4208bad4e1940 +size 59862 diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss index 9a2c9b5836..235c28c552 100644 --- 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; } }