Search: Fix focus and active states on search button

The focus styles should be on `:focus` to apply when the button is clicked. Remove the border from `:active` to fix a layout shift. Fixes #117.
WordPress · Jan 12, 2024 · d6b8250 · d6b8250
1 parent 5944170
commit d6b8250
Showing 1 changed file with 4 additions and 6 deletions.
diff --git a/source/wp-content/themes/wporg-parent-2021/sass/blocks/_search.scss b/source/wp-content/themes/wporg-parent-2021/sass/blocks/_search.scss
@@ -132,16 +132,14 @@
 	.wp-block-search__input,
 	.wp-block-search__button {
 		&:focus {
-			outline: none;
-			outline-offset: unset;
-			background-color: var(--wp--custom--form--search--color--background);
-		}
-
-		&:focus-visible {
 			outline: 1.5px solid var(--local--focus--outline-color);
 			outline-offset: -1.5px;
 			box-shadow: inset 0 0 0 3px var(--local--focus--border-color);
 		}
+
+		&:active {
+			border: none;
+		}
 	}
 
 	&.wp-block-search__icon-button .wp-block-search__button {