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: http://svn.automattic.com/wordpress/trunk@20110 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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="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>
-				<a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>"><span></span></a>
-			</div>
 		</div>
 		<?php
 	}

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 {
+#customize-header-actions,
-	border-bottom: 0;
+#customize-footer-actions {
-	border-top: 1px solid #dfdfdf;
 	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,
+		inset 0 -1px 0 0px #dfdfdf;
-		0 0 11px 0 rgba( 0, 0, 0, 0.1 );
+}
+
+#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 {

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;

wp-includes/customize-controls.php

@@ -50,6 +50,8 @@ do_action( 'customize_controls_print_scripts' );
 		<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">
 				<?php if ( $screenshot ) : ?>
@@ -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 );
 			?>