Changeset 12653 for sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/css/components/_main.scss

Timestamp:

06/13/2023 04:26:07 PM (2 years ago)

Author:

ryelle

Message:

Theme Directory: Bring back search bar in site header.

The search was removed from the filter bar in [12646], but it should have been moved to the header. This change brings it back into the header, mirroring the Plugin & Pattern directory behavior.

Fixes #7036.

File:

• sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/css/components/_main.scss (modified) (5 diffs)

sites/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-themes/css/components/_main.scss

@@ -1384 +1384 @@
 }
 
+/* Search form */
+.search-form {
+    margin-bottom: 2rem;
+    max-width: 100%;
+
+    .wp-filter-search {
+        -webkit-appearance: none;
+        border: none;
+        box-shadow: none;
+        display: block;
+        font-size: ms( 0 );
+        line-height: 1.5;
+        margin: 0 auto;
+        max-width: 100%;
+        padding: 0.5rem;
+        width: ms( 28 );
+
+        &:focus-visible {
+            box-shadow: 0 0 0 1px inset #33b3db;
+            outline: 1px solid #fff;
+        }
+    }
+}
+
 /* Filter bar */
 .wp-filter {
@@ -1464 +1488 @@
 }
 
-.wp-filter .search-form {
-    float: right;
-    margin: 10px 0;
-    display: inline-block;
-}
-
 .wp-filter .wp-filter-search {
     margin: 0;
@@ -1477 +1495 @@
     font-weight: 300;
     line-height: 1.5;
-}
-
-.wp-filter .search-form select {
-    height: 33px;
-    vertical-align: top;
 }
 
@@ -1849 +1862 @@
     }
 
-    .wp-filter .search-form {
-        float: none;
-        margin: 20px 0;
-        width: 100%;
-    }
-
     .theme-wrap .theme-about .theme-head,
     .theme-wrap .theme-about .theme-info,
@@ -1971 +1978 @@
     }
 
-    /* Full width search form. */
-    .wp-filter .search-form,
-    .wp-filter .wp-filter-search {
-        width: 100%;
-    }
-
     .theme-browser .themes .theme {
         margin-right: 0;