From 1747f1479e9dd0e22e4cbe86c35db0daef905cca Mon Sep 17 00:00:00 2001
From: Daryl Koopersmith <koop@git.wordpress.org>
Date: Sun, 4 Mar 2012 04:57:24 +0000
Subject: [PATCH] Theme Customizer: Improve markup and CSS for the
 return/collapse actions and the action bars within the customize controls
 form. see #19910.

git-svn-id: https://develop.svn.wordpress.org/trunk@20110 602fd350-edb4-49c9-b593-d223f7449a82
---
 wp-includes/class-wp-customize.php         |  6 ++---
 wp-includes/css/customize-controls.dev.css | 28 ++++++++++++++-----
 wp-includes/css/customize-loader.dev.css   | 31 +++++++++-------------
 wp-includes/customize-controls.php         |  4 ++-
 4 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/wp-includes/class-wp-customize.php b/wp-includes/class-wp-customize.php
index 3f161760a7..2a42864568 100644
--- a/wp-includes/class-wp-customize.php
+++ b/wp-includes/class-wp-customize.php
@@ -283,10 +283,8 @@ final class WP_Customize {
 		?>
 		<div id="customize-container">
 			<input type="hidden" class="admin-url" value="<?php echo esc_url( admin_url( 'admin.php' ) ); ?>" />
-			<div>
-				<a href="#" class="return-to-admin"><?php printf( __( '&larr; Return to %s' ), get_admin_page_title() ); ?></a>
-				<a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>"><span></span></a>
-			</div>
+			<a href="#" class="return-to-admin"><?php printf( __( '&larr; Return to %s' ), get_admin_page_title() ); ?></a>
+			<a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>"><span></span></a>
 		</div>
 		<?php
 	}
diff --git a/wp-includes/css/customize-controls.dev.css b/wp-includes/css/customize-controls.dev.css
index c83d4c7f64..1cadaeeba1 100644
--- a/wp-includes/css/customize-controls.dev.css
+++ b/wp-includes/css/customize-controls.dev.css
@@ -15,6 +15,10 @@ body {
 	border-right: 1px solid rgba( 0, 0, 0, 0.2 );
 }
 
+#customize-controls a {
+	text-decoration: none;
+}
+
 .customize-section {
 	border-top: 1px solid #fff;
 	border-bottom: 1px solid #dfdfdf;
@@ -116,21 +120,33 @@ body {
 	margin: 0;
 }
 
-#customize-footer {
-	border-bottom: 0;
-	border-top: 1px solid #dfdfdf;
+#customize-header-actions,
+#customize-footer-actions {
 	position: fixed;
-	bottom: 0;
 	left: 0;
 	width: 260px;
 	padding: 15px 20px;
 	margin: 0;
 	z-index: 10;
 	background: #f5f5f5;
+}
+
+#customize-header-actions {
+	top: 0;
+	border-top: 0;
+	border-bottom: 1px solid #fff;
 	box-shadow:
 		inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 ),
-		inset 0 1px 0 0px #fff,
-		0 0 11px 0 rgba( 0, 0, 0, 0.1 );
+		inset 0 -1px 0 0px #dfdfdf;
+}
+
+#customize-footer-actions {
+	bottom: 0;
+	border-bottom: 0;
+	border-top: 1px solid #dfdfdf;
+	box-shadow:
+		inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 ),
+		inset 0 1px 0 0px #fff;
 }
 
 #customize-preview {
diff --git a/wp-includes/css/customize-loader.dev.css b/wp-includes/css/customize-loader.dev.css
index 536dc6995c..c192544229 100644
--- a/wp-includes/css/customize-loader.dev.css
+++ b/wp-includes/css/customize-loader.dev.css
@@ -21,31 +21,24 @@ body.customize-active {
 	left: -302px;
 }
 
-#customize-container .collapse-sidebar,
-#customize-container .return-to-admin {
-	z-index: 50;
-}
-
-#customize-container div {
-	position: absolute;
-	left: 0;
-	top: 0;
-	width: 260px;
-	padding: 15px 20px;
-	background: #f5f5f5;
-	box-shadow:
-		inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 ),
-		inset 0 -1px 0 #dfdfdf,
-		-1px 1px 0 #fff;
-	border-right: 1px solid rgba( 0, 0, 0, 0.2 );
-}
-
 #customize-container iframe {
 	height: 100%;
 	width: 100%;
 	z-index: 20;
 }
 
+#customize-container .collapse-sidebar,
+#customize-container .return-to-admin {
+	z-index: 50;
+	position: absolute;
+	text-decoration: none;
+}
+
+#customize-container .return-to-admin {
+	top: 15px;
+	left: 20px;
+}
+
 /* Collapse Button */
 #customize-container .collapse-sidebar {
 	position: absolute;
diff --git a/wp-includes/customize-controls.php b/wp-includes/customize-controls.php
index 87a9539c7c..301212fcaf 100644
--- a/wp-includes/customize-controls.php
+++ b/wp-includes/customize-controls.php
@@ -49,6 +49,8 @@ do_action( 'customize_controls_print_scripts' );
 		<input type="hidden" name="customize" value="on" />
 		<input type="hidden" id="customize-template" name="template" value="<?php echo esc_attr( $theme['Template'] ); ?>" />
 		<input type="hidden" id="customize-stylesheet" name="stylesheet" value="<?php echo esc_attr( $theme['Stylesheet'] ); ?>" />
+		
+		<div id="customize-header-actions" class="customize-section">&nbsp;</div>
 
 		<div id="customize-info" class="customize-section">
 			<div class="customize-section-title">
@@ -76,7 +78,7 @@ do_action( 'customize_controls_print_scripts' );
 			?>
 		</ul></div>
 
-		<div id="customize-footer" class="customize-section">
+		<div id="customize-footer-actions" class="customize-section">
 			<?php
 			submit_button( __( 'Save' ), 'primary', 'save', false );
 			?>