update styling and approve visual test

ONSdigital · Jan 30, 2025 · 7bf2beb · 7bf2beb
1 parent b021a18
commit 7bf2beb
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 3 deletions.
diff --git a/...nce/ds-vr-test__components_header_example-header-basic_0_document_0_desktop.png b/...nce/ds-vr-test__components_header_example-header-basic_0_document_0_desktop.png
diff --git a/...ence/ds-vr-test__components_header_example-header-basic_0_document_1_tablet.png b/...ence/ds-vr-test__components_header_example-header-basic_0_document_1_tablet.png
diff --git a/...ence/ds-vr-test__components_header_example-header-basic_0_document_2_mobile.png b/...ence/ds-vr-test__components_header_example-header-basic_0_document_2_mobile.png
diff --git a/...t__components_header_example-header-with-search-button_0_document_0_desktop.png b/...t__components_header_example-header-with-search-button_0_document_0_desktop.png
diff --git a/...st__components_header_example-header-with-search-button_0_document_1_tablet.png b/...st__components_header_example-header-with-search-button_0_document_1_tablet.png
diff --git a/...st__components_header_example-header-with-search-button_0_document_2_mobile.png b/...st__components_header_example-header-with-search-button_0_document_2_mobile.png
diff --git 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 &,