diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_0_desktop.png index 84b7f01461..417aa4bd51 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:03c53a0bcd6fe29cd4c9fe59227cc4f2612f00f0a08eb0c2a53d7334c241fcd6 +oid sha256:01959903ca679fada822d0cdbca4b9586a3c88dc41e5573c2d4323228f2fa85e size 14266 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_1_tablet.png index f34345bbff..a14a29d326 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:65f329afc04fde5ff5f541b2712b183accab1446bd76d6944042949de4413fab +oid sha256:4393dc5abf933668beb329d992fa241cc63a0593e1aa4919ba19325818a6df74 size 9069 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_2_mobile.png index 75468ba73d..40a7bef93e 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-basic_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:fb39535ce7f5f1affd77107ef3155d32b4197e7b0805065b221d379d05f9e88f +oid sha256:2533b87bea0a2cb81ef6765fab1a6033a1b6768a6c43c84ec0d7a8475c28e84a size 5422 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_0_desktop.png new file mode 100644 index 0000000000..bd6ae74b21 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6b5c02bf52c2bf4ca40b07f2d557a7015c19aafd5f753a8e6b33e8fc252033c1 +size 14808 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_1_tablet.png new file mode 100644 index 0000000000..31c81f6b11 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d4c71e9af0be9102e1d6cc30a3cb97d74751afeaf3ec1b69c2abe75f0dd0edc1 +size 9611 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_2_mobile.png new file mode 100644 index 0000000000..31d42aeb52 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_header_example-header-with-search-button_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cb54e407e52ec6bc3519f36e9019f211e5c290b62f547d14ef6122c19d66b539 +size 5964 diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index 3c11665c60..524c855322 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -581,6 +581,7 @@ $button-shadow-size: 3px; display: flex; height: 67px; padding: 0 1.5rem; + border-bottom: 4px solid rgb(0 0 0 / 0%); @include mq(l) { height: 72px; } @@ -604,6 +605,16 @@ $button-shadow-size: 3px; } } + &--search-icon:focus { + background-color: var(--ons-color-focus); + border-color: var(--ons-color-black); + } + + &--search-icon:hover { + background-color: var(--ons-color-focus); + border-color: var(--ons-color-text-link-hover); + } + &--search-icon:focus & { &__inner { background: none; @@ -619,7 +630,9 @@ $button-shadow-size: 3px; &--search-icon:active, &--search-icon[aria-expanded='true'] { + border-bottom: none; background-color: var(--ons-color-branded-tint); + border-color: var(--ons-color-text-link-hover); } &--search-icon:hover &,