Customizer: Make the available widgets overlay closable on narrow screens.

see #28784.

git-svn-id: https://develop.svn.wordpress.org/trunk@31974 602fd350-edb4-49c9-b593-d223f7449a82

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

@@ -41,6 +41,10 @@ body {
 	border-bottom: 1px solid #ddd;
 }
 
+#customize-header-actions .secondary-actions {
+	display: none;
+}
+
 #customize-controls .wp-full-overlay-sidebar-content {
 	overflow-y: auto;
 	overflow-x: hidden;
@@ -193,6 +197,7 @@ body {
 	width: 100%;
 }
 
+.customize-close-overlay,
 .customize-controls-close {
 	display: block;
 	position: absolute;
@@ -202,6 +207,7 @@ body {
 	height: 45px;
 	padding-right: 2px;
 	background: #eee;
+	border: none;
 	border-right: 1px solid #ddd;
 	color: #444;
 	cursor: pointer;
@@ -209,6 +215,11 @@ body {
 	transition: color .1s ease-in-out, background .1s ease-in-out;
 }
 
+.customize-close-overlay {
+	left: auto;
+	right: 0;
+}
+
 .control-panel-back {
 	display: block;
 	position: fixed;
@@ -229,6 +240,8 @@ body {
 	display: none;
 }
 
+.customize-close-overlay:focus,
+.customize-close-overlay:hover,
 .customize-controls-close:focus,
 .customize-controls-close:hover,
 .control-panel-back:focus,
@@ -251,6 +264,13 @@ body {
 	left: 13px;
 }
 
+.customize-close-overlay:before {
+	font: normal 22px/1 dashicons;
+	content: "\f335";
+	position: relative;
+	top: 3px;
+}
+
 .control-panel-back:before {
 	font: normal 20px/1 dashicons;
 	content: "\f341";
@@ -1127,6 +1147,14 @@ body.cheatin p {
 		margin-bottom: 4px;
 	}
 
+	.adding-widget #customize-header-actions .primary-actions {
+		display: none;
+	}
+
+	.adding-widget #customize-header-actions .secondary-actions {
+		display: block;
+	}
+
 	#customize-header-actions .button-primary {
 		margin-top: 6px;
 	}