Ticket #42215: 42215.diff

src/wp-admin/css/customize-controls.css

@@ -2114 +2114 @@
 
 .themes-filter-bar .wp-filter-search {
         line-height: 25px;
-        padding: 3px 5px;
+        padding: 6px 10px 6px 30px;
         max-width: 100%;
         width: 40%;
         min-width: 300px;
         position: absolute;
         top: 6px;
         left: 25px;
+        height: 32px;
+        margin: 1px 0;
 }
 
 /* Unstick the filter bar on short windows/screens. This breakpoint is based on the
@@ -2232 +2234 @@
                 height: 42px;
                 width: 26px;
                 display: block;
-                line-height: 46px;
+                line-height: 40px;
                 padding: 0 8px 0 8px;
                 border-right: 1px solid #ddd;
         }
@@ -2673 +2675 @@
 }
 
 #available-menu-items-search .search-icon:after,
-#available-widgets-filter .search-icon:after {
+#available-widgets-filter .search-icon:after,
+.themes-filter-bar .search-icon:after {
         content: "\f179";
         font: normal 20px/1 dashicons;
         vertical-align: middle;
@@ -2681 +2684 @@
         -moz-osx-font-smoothing: grayscale;
 }
 
+.themes-filter-bar .search-icon {
+        position: absolute;
+        top: 7px;
+        left: 26px;
+        z-index: 1;
+        color: #72777c;
+        height: 30px;
+        width: 30px;
+        line-height: 2;
+        text-align: center;
+}
+
 .no-widgets-found-message {
         display: none;
         margin: 0;
@@ -2793 +2808 @@
         .media-widget-control .media-widget-buttons .button.select-media {
                 margin-top: 12px;
         }
+
+        .wp-core-ui .themes-filter-bar .feature-filter-toggle {
+                margin: 3px 0 3px 25px;
+        }
 }
 
 @media screen and ( max-width: 640px ) {
@@ -2958 +2977 @@
         .reordering .reorder-done {
                 padding: 8px;
         }
+
+        .wp-core-ui .themes-filter-bar .feature-filter-toggle {
+                margin: 0;
+        }
 }

src/wp-admin/css/themes.css

@@ -98 +98 @@
         opacity: 0;
         transition: opacity 0.1s ease-in-out;
         position: absolute;
-        bottom: 0;
+        bottom: 1px;
         right: 0;
-        height: 38px;
-        padding: 9px 10px 0 10px;
+        height: auto;
+        padding: 9px 10px;
         background: rgba(244, 244, 244, 0.7);
         border-left: 1px solid rgba(0,0,0,0.05);
 }
@@ -852 +852 @@
         }
 
         .theme-browser .theme .theme-actions {
-                padding: 5px 10px 4px 10px;
+                padding: 9px 10px;
         }
 
         .theme-overlay.small-screenshot .theme-screenshots {
@@ -889 +889 @@
         .theme-browser .theme:nth-child(3n) {
                 margin-right: 0;
         }
+
+        .theme-browser .theme .theme-actions {
+                padding: 8px 10px;
+        }
 }
 
 @media only screen and (max-width: 650px) {
@@ -958 +962 @@
         .single-theme .theme-overlay .theme-actions {
                 position: static;
         }
+
+        .theme-browser .theme .theme-actions {
+                padding: 8px 10px;
+        }
+
 }
 
 .broken-themes {
@@ -971 +980 @@
         padding: 3px;
 }
 
+@media only screen and ( max-width: 640px ) {
+        .theme-browser .theme .theme-actions {
+                padding: 8px 10px;
+        }
+}
 
 /*------------------------------------------------------------------------------
   16.2 - Install Themes

src/wp-includes/customize/class-wp-customize-themes-section.php

@@ -114 +114 @@
                         <div class="search-form">
                                 <label for="wp-filter-search-input-{{ data.id }}" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
                                 <input type="search" id="wp-filter-search-input-{{ data.id }}" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search">
-                                <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
+                <div class="search-icon" aria-hidden="true"></div>
+                <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
                         </div>
                         <button type="button" class="button feature-filter-toggle">
                                 <span class="filter-count-0"><?php _e( 'Filter themes' ); ?></span><span class="filter-count-filters">
@@ -144 +145 @@
                         <div class="themes-filter-container">
                                 <label for="{{ data.id }}-themes-filter" class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></label>
                                 <input type="search" id="{{ data.id }}-themes-filter" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="{{ data.id }}-live-search-desc" class="wp-filter-search wp-filter-search-themes" />
-                                <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
+                <div class="search-icon" aria-hidden="true"></div>
+                <span id="{{ data.id }}-live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
                         </div>
                 <# } #>
                 <div class="filter-themes-count">