Changeset 40569

Timestamp:

05/03/2017 10:38:26 PM (9 years ago)

Author:

afercia

Message:

Customize: Fix a visual glitch on the widget control animation introduced in [40480].

Also, restores the original design intent that was meant to "compact widget-tops
on smaller laptops, but not tablets".

See #27112.
Fixes #31476.

File:

• trunk/src/wp-admin/css/customize-widgets.css (modified) (3 diffs)

trunk/src/wp-admin/css/customize-widgets.css

@@ -19 +19 @@
 }
 
+/* Note: widget-tops are more compact when (max-height: 700px) and (min-width: 981px). */
 .customize-control-widget_form .widget-top {
         background: #fff;
@@ -424 +425 @@
 
 @media screen and (max-height: 700px) and (min-width: 981px) {
-        .customize-control-widget {
+        /* Compact widget-tops on smaller laptops, but not tablets. See ticket #27112#comment:4 */
+        .customize-control-widget_form {
                 margin-bottom: 0;
         }
+
         .widget-top {
                 -webkit-box-shadow: none;
@@ -432 +435 @@
                 margin-top: -1px;
         }
+
         .widget-top:hover {
                 position: relative;
                 z-index: 1;
         }
+
         .last-widget {
                 margin-bottom: 15px;
         }
-        /* This rule reduces the widgets titles height. */
+
         .widget-title h3 {
                 padding: 13px 15px;
         }
+
         .widget-top .widget-action {
-                padding-bottom: 8px;
-        }
+                padding: 8px 10px;
+        }
+
         .widget-reorder-nav span {
                 height: 39px;
         }
+
         .widget-reorder-nav span:before {
                 line-height: 39px;
         }
+
+        /* Compact the move widget areas. */
         #customize-theme-controls .widget-area-select li {
                 padding: 9px 15px 11px 42px;
         }
+
         #customize-theme-controls .widget-area-select li:before {
                 top: 8px;