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 (3 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;