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.

Built from https://develop.svn.wordpress.org/trunk@40569


git-svn-id: http://core.svn.wordpress.org/trunk@40439 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/customize-widgets-rtl.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 42px 11px 15px;
 	}
+
 	#customize-theme-controls .widget-area-select li:before {
 		top: 8px;
 	}

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;
 	}

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.8-alpha-40568';
+$wp_version = '4.8-alpha-40569';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.