From 859c3551ac683ab01311de85237d8846c93b23e2 Mon Sep 17 00:00:00 2001
From: Andrea Fercia <afercia@git.wordpress.org>
Date: Wed, 3 May 2017 22:38:26 +0000
Subject: [PATCH] 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.


git-svn-id: https://develop.svn.wordpress.org/trunk@40569 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/customize-widgets.css | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/wp-admin/css/customize-widgets.css b/src/wp-admin/css/customize-widgets.css
index 428c45564a..bdb58982fe 100644
--- a/src/wp-admin/css/customize-widgets.css
+++ b/src/wp-admin/css/customize-widgets.css
@@ -18,6 +18,7 @@
 	overflow: visible;
 }
 
+/* Note: widget-tops are more compact when (max-height: 700px) and (min-width: 981px). */
 .customize-control-widget_form .widget-top {
 	background: #fff;
 	-webkit-transition: opacity 0.5s;
@@ -423,37 +424,47 @@ body.adding-widget #customize-preview {
 #available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; }
 
 @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;
 		box-shadow: none;
 		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;
 	}