Fix incorrect style

WordPress · Jun 7, 2022 · a65809c · a65809c
1 parent e866d40
commit a65809c
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 17 deletions.
diff --git a/source/wp-content/themes/wporg-developer/scss/main.scss b/source/wp-content/themes/wporg-developer/scss/main.scss
@@ -798,6 +798,10 @@
 		height: auto;
 		position: relative;
 
+		.search-bar {
+			display: flex;
+		}
+
 		input[type="text"] {
 			border-radius: 0;
 			margin: 0 auto;
@@ -806,20 +810,21 @@
 		}
 
 		.button-search {
-			background: white;
-			border: none;
+			background: #fff;
 			border-radius: 0;
 			box-shadow: none;
 			color: #32373c;
 			display: block;
-			height: 39.5px;
 			padding: 0.5rem 1rem;
-			position: absolute;
-			right: 0;
-			top: 0;
 			text-shadow: none;
 			border: 1px solid #ccc;
 			border-left: unset;
+			margin: 0;
+
+			&:active {
+				outline-style: auto;
+				outline-color: rgb(0, 95, 204);
+			}
 		}
 
 		label {

diff --git a/source/wp-content/themes/wporg-developer/searchform.php b/source/wp-content/themes/wporg-developer/searchform.php
@@ -19,9 +19,11 @@
 	?>
 
 	<form role="search" method="get" class="searchform<?php echo esc_attr( $form_class ); ?>" action="<?php echo esc_url( $search_url ); ?>">
-		<label for="search-field" class="screen-reader-text"><?php _ex( 'Search for:', 'label', 'wporg' ); ?></label>
-		<input type="text" id="search-field" class="search-field" placeholder="<?php echo esc_attr_x( 'Search in Code Reference &hellip;', 'placeholder', 'wporg' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">
-		<button class="button button-primary button-search"><i class="dashicons dashicons-search"></i><span class="screen-reader-text"><?php _e( 'Search plugins', 'wporg' ); ?></span></button>
+		<div class="search-bar">
+			<label for="search-field" class="screen-reader-text"><?php _ex( 'Search for:', 'label', 'wporg' ); ?></label>
+			<input type="text" id="search-field" class="search-field" placeholder="<?php echo esc_attr_x( 'Search in Code Reference &hellip;', 'placeholder', 'wporg' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">
+			<button class="button button-primary button-search"><i class="dashicons dashicons-search"></i><span class="screen-reader-text"><?php _e( 'Search plugins', 'wporg' ); ?></span></button>
+		</div>
 	<?php if ( $filters ) : ?>
 
 		<div class="search-post-type">

diff --git a/source/wp-content/themes/wporg-developer/stylesheets/autocomplete.css b/source/wp-content/themes/wporg-developer/stylesheets/autocomplete.css
@@ -29,7 +29,7 @@ div.awesomplete li:hover mark, div.awesomplete li[aria-selected="true"] mark {
 
 .devhub-wrap .searchform label div.awesomplete > input,
 .devhub-wrap div.awesomplete {	
-	width: 95.7%;
+	width: 100%;
 }
 
 .devhub-wrap div.awesomplete > input {
@@ -45,7 +45,6 @@ div.awesomplete li:hover mark, div.awesomplete li[aria-selected="true"] mark {
 .devhub-wrap div.awesomplete {
 	/* Needs to be visible for the awesomplete popup */
 	overflow: visible;
-	z-index: 1;
 }
 
 div.awesomplete > ul > li:hover {

diff --git a/source/wp-content/themes/wporg-developer/stylesheets/main.css b/source/wp-content/themes/wporg-developer/stylesheets/main.css