Theme Customizer: Move contents of customize.loader.css to wp-admin.css. Make markup/CSS for the full-screen overlay modular. see #19910.

git-svn-id: http://svn.automattic.com/wordpress/trunk@20133 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/wp-admin.dev.css

@@ -39,7 +39,9 @@ TABLE OF CONTENTS:
 20.0 - Settings
 21.0 - Admin Footer
 22.0 - About Pages
-23.0 - Misc
+23.0 - Full Overlay w/ Sidebar
+24.0 - Customize Loader
+25.0 - Misc
 
 ------------------------------------------------------------------------*/
 
@@ -5205,7 +5207,154 @@ html.ie8 .about-wrap .feature-section.three-col img {
 }
 
 /*------------------------------------------------------------------------------
-  23.0 - Misc
+  23.0 - Full Overlay w/ Sidebar
+------------------------------------------------------------------------------*/
+
+body.full-overlay-active {
+	overflow: hidden;
+}
+
+.wp-full-overlay {
+	background: #fff;
+	z-index: 500000;
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+}
+
+.wp-full-overlay.collapsed {
+	left: -302px;
+}
+
+.wp-full-overlay-sidebar {
+	width: 300px;
+	height: 100%;
+	padding: 0;
+	margin: 0;
+	z-index: 10;
+	position: relative;
+	overflow: auto;
+	background: #f5f5f5;
+	box-shadow: inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 );
+	border-right: 1px solid rgba( 0, 0, 0, 0.2 );
+}
+
+.wp-full-overlay-main {
+	position: fixed;
+	left: 300px;
+	right: 0;
+	top: 0;
+	bottom: 0;
+}
+
+.wp-full-overlay-sidebar div.wp-full-overlay-header,
+.wp-full-overlay-sidebar div.wp-full-overlay-footer {
+	position: fixed;
+	left: 0;
+	width: 260px;
+	padding: 15px 20px;
+	min-height: 16px;
+	margin: 0;
+	z-index: 10;
+	background: #f5f5f5;
+}
+
+.wp-full-overlay-sidebar div.wp-full-overlay-header {
+	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 #dfdfdf;
+}
+
+.wp-full-overlay-sidebar div.wp-full-overlay-footer {
+	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;
+}
+
+/* Return and close buttons. */
+.wp-full-overlay .collapse-sidebar,
+.wp-full-overlay .close-full-overlay {
+	z-index: 50;
+	position: absolute;
+	text-decoration: none;
+}
+
+.wp-full-overlay .close-full-overlay {
+	top: 15px;
+	left: 20px;
+}
+
+/* Collapse Button */
+.wp-full-overlay .collapse-sidebar {
+	position: absolute;
+	top: 13px;
+	left: 265px;
+	z-index: 50;
+	display: block;
+	width: 19px;
+	height: 19px;
+	padding: 0;
+	border-radius: 50%;
+}
+.wp-full-overlay.collapsed .collapse-sidebar {
+	position: absolute;
+	left: 315px;
+}
+.wp-full-overlay .collapse-sidebar span {
+	margin-top: 2px;
+	margin-left: 2px;
+	display: block;
+	width: 15px;
+	height: 15px;
+	background: transparent url('../../wp-admin/images/arrows.png') no-repeat 0 -72px;
+}
+.wp-full-overlay.collapsed .collapse-sidebar span {
+	background-position: 0 -108px;
+}
+
+/* Animations */
+.wp-full-overlay,
+.wp-full-overlay .collapse-sidebar {
+	-moz-transition-property: left, right, top, bottom;
+	-webkit-transition-property: left, right, top, bottom;
+	-o-transition-property: left, right, top, bottom;
+	-ms-transition-property: left, right, top, bottom;
+	transition-property: left, right, top, bottom;
+	-moz-transition-duration: 0.2s;
+	-webkit-transition-duration: 0.2s;
+	-o-transition-duration: 0.2s;
+	-ms-transition-duration: 0.2s;
+	transition-duration: 0.2s;
+}
+
+/*------------------------------------------------------------------------------
+  24.0 - Customize Loader
+------------------------------------------------------------------------------*/
+
+#customize-container {
+	display: none;
+}
+
+.customize-active #customize-container {
+	display: block;
+}
+
+#customize-container iframe {
+	height: 100%;
+	width: 100%;
+	z-index: 20;
+}
+
+/*------------------------------------------------------------------------------
+  25.0 - Misc
 ------------------------------------------------------------------------------*/
 
 #excerpt,

wp-includes/class-wp-customize.php

@@ -261,7 +261,6 @@ final class WP_Customize {
 			$this->save();
 
 		wp_enqueue_script( 'customize-loader' );
-		wp_enqueue_style( 'customize-loader' );
 
 		if ( ( defined( 'DOING_AJAX' ) && DOING_AJAX ) )
 			return;
@@ -287,9 +286,9 @@ final class WP_Customize {
 	 */
 	public function admin_footer() {
 		?>
-		<div id="customize-container">
+		<div id="customize-container" class="wp-full-overlay">
 			<input type="hidden" class="admin-url" value="<?php echo esc_url( admin_url( 'admin.php' ) ); ?>" />
-			<a href="#" class="return-to-admin"><?php printf( __( '&larr; Return to %s' ), get_admin_page_title() ); ?></a>
+			<a href="#" class="close-full-overlay"><?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

wp-includes/css/customize-controls.dev.css

@@ -2,19 +2,6 @@ body {
 	overflow: hidden;
 }
 
-#customize-controls {
-	width: 300px;
-	height: 100%;
-	padding: 0;
-	margin: 0;
-	z-index: 10;
-	position: relative;
-	overflow: auto;
-	background: #f5f5f5;
-	box-shadow: inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 );
-	border-right: 1px solid rgba( 0, 0, 0, 0.2 );
-}
-
 #customize-controls a {
 	text-decoration: none;
 }
@@ -120,35 +107,6 @@ body {
 	margin: 0;
 }
 
-#customize-header-actions,
-#customize-footer-actions {
-	position: fixed;
-	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 #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 {
 	position: fixed;
 	left: 300px;

wp-includes/css/customize-loader.css

@@ -1 +0,0 @@
-body.customize-active{overflow:hidden}#customize-container{display:none;background:#fff;z-index:500000;position:fixed;top:0;bottom:0;left:0;right:0}.customize-active #customize-container{display:block}#customize-container.collapsed{left:-302px}#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}#customize-container .collapse-sidebar{position:absolute;top:13px;left:265px;z-index:50;display:block;width:19px;height:19px;padding:0;border-radius:50%}#customize-container.collapsed .collapse-sidebar{position:absolute;left:315px}#customize-container .collapse-sidebar span{margin-top:2px;margin-left:2px;display:block;width:15px;height:15px;background:transparent url('../../wp-admin/images/arrows.png') no-repeat 0 -72px}#customize-container.collapsed .collapse-sidebar span{background-position:0 -108px}#customize-container,#customize-container .collapse-sidebar{-moz-transition-property:left,right,top,bottom;-webkit-transition-property:left,right,top,bottom;-o-transition-property:left,right,top,bottom;-ms-transition-property:left,right,top,bottom;transition-property:left,right,top,bottom;-moz-transition-duration:.2s;-webkit-transition-duration:.2s;-o-transition-duration:.2s;-ms-transition-duration:.2s;transition-duration:.2s}

wp-includes/css/customize-loader.dev.css

@@ -1,83 +0,0 @@
-body.customize-active {
-	overflow: hidden;
-}
-
-#customize-container {
-	display: none;
-	background: #fff;
-	z-index: 500000;
-	position: fixed;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-}
-
-.customize-active #customize-container {
-	display: block;
-}
-
-#customize-container.collapsed {
-	left: -302px;
-}
-
-#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;
-	top: 13px;
-	left: 265px;
-	z-index: 50;
-	display: block;
-	width: 19px;
-	height: 19px;
-	padding: 0;
-	border-radius: 50%;
-}
-#customize-container.collapsed .collapse-sidebar {
-	position: absolute;
-	left: 315px;
-}
-#customize-container .collapse-sidebar span {
-	margin-top: 2px;
-	margin-left: 2px;
-	display: block;
-	width: 15px;
-	height: 15px;
-	background: transparent url('../../wp-admin/images/arrows.png') no-repeat 0 -72px;
-}
-#customize-container.collapsed .collapse-sidebar span {
-	background-position: 0 -108px;
-}
-
-/* Animations */
-#customize-container,
-#customize-container .collapse-sidebar {
-	-moz-transition-property: left, right, top, bottom;
-	-webkit-transition-property: left, right, top, bottom;
-	-o-transition-property: left, right, top, bottom;
-	-ms-transition-property: left, right, top, bottom;
-	transition-property: left, right, top, bottom;
-	-moz-transition-duration: 0.2s;
-	-webkit-transition-duration: 0.2s;
-	-o-transition-duration: 0.2s;
-	-ms-transition-duration: 0.2s;
-	transition-duration: 0.2s;
-}

wp-includes/customize-controls.php

@@ -43,14 +43,14 @@ do_action( 'customize_controls_print_styles' );
 do_action( 'customize_controls_print_scripts' );
 ?>
 </head>
-<body>
-	<form id="customize-controls" method="post" class="wrap" target="_parent" action="<?php echo esc_url( add_query_arg( 'save', '1', admin_url( 'themes.php' ) ) ); ?>">
+<body class="wp-full-overlay">
+	<form id="customize-controls" method="post" class="wrap wp-full-overlay-sidebar" target="_parent" action="<?php echo esc_url( add_query_arg( 'save', '1', admin_url( 'themes.php' ) ) ); ?>">
 		<?php wp_nonce_field( 'customize_controls' ); ?>
 		<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-header-actions" class="customize-section wp-full-overlay-header">&nbsp;</div>
 
 		<div id="customize-info" class="customize-section">
 			<div class="customize-section-title">
@@ -78,13 +78,13 @@ do_action( 'customize_controls_print_scripts' );
 			?>
 		</ul></div>
 
-		<div id="customize-footer-actions" class="customize-section">
+		<div id="customize-footer-actions" class="customize-section wp-full-overlay-footer">
 			<?php
 			submit_button( __( 'Save' ), 'primary', 'save', false );
 			?>
 		</div>
 	</form>
-	<div id="customize-preview">
+	<div id="customize-preview" class="wp-full-overlay-main">
 		<iframe name="customize-target"></iframe>
 	</div>
 	<?php

wp-includes/js/customize-loader.dev.js

@@ -9,7 +9,7 @@ if ( typeof wp === 'undefined' )
 			this.base      = $( '.admin-url', this.element ).val();
 			this.doc_title = $( document ).attr( 'title' );
 
-			this.element.on( 'click', '.return-to-admin', function() {
+			this.element.on( 'click', '.close-full-overlay', function() {
 				Loader.close();
 				return false;
 			});
@@ -31,14 +31,14 @@ if ( typeof wp === 'undefined' )
 			});
 
 			this.element.fadeIn( 200, function() {
-				Loader.body.addClass( 'customize-active' );
+				Loader.body.addClass( 'customize-active full-overlay-active' );
 			});
 		},
 		close: function() {
 			this.element.fadeOut( 200, function() {
 				Loader.iframe.remove();
 				Loader.iframe = null;
-				Loader.body.removeClass( 'customize-active' );
+				Loader.body.removeClass( 'customize-active full-overlay-active' );
 				$( document ).attr( 'title', Loader.doc_title );
 			});
 		}

wp-includes/script-loader.php

@@ -471,7 +471,6 @@ function wp_default_styles( &$styles ) {
 	$styles->add( 'wp-jquery-ui-dialog', "/wp-includes/css/jquery-ui-dialog$suffix.css" );
 	$styles->add( 'editor-buttons', "/wp-includes/css/editor-buttons$suffix.css" );
 	$styles->add( 'wp-pointer', "/wp-includes/css/wp-pointer$suffix.css" );
-	$styles->add( 'customize-loader', "/wp-includes/css/customize-loader$suffix.css" );
 	$styles->add( 'customize-controls', "/wp-includes/css/customize-controls$suffix.css", array( 'wp-admin', 'colors', 'ie' ) );
 
 	foreach ( $rtl_styles as $rtl_style ) {