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
This commit is contained in:
parent
19b1746cc6
commit
d4f20e47b7
|
@ -39,7 +39,9 @@ TABLE OF CONTENTS:
|
||||||
20.0 - Settings
|
20.0 - Settings
|
||||||
21.0 - Admin Footer
|
21.0 - Admin Footer
|
||||||
22.0 - About Pages
|
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,
|
#excerpt,
|
||||||
|
|
|
@ -261,7 +261,6 @@ final class WP_Customize {
|
||||||
$this->save();
|
$this->save();
|
||||||
|
|
||||||
wp_enqueue_script( 'customize-loader' );
|
wp_enqueue_script( 'customize-loader' );
|
||||||
wp_enqueue_style( 'customize-loader' );
|
|
||||||
|
|
||||||
if ( ( defined( 'DOING_AJAX' ) && DOING_AJAX ) )
|
if ( ( defined( 'DOING_AJAX' ) && DOING_AJAX ) )
|
||||||
return;
|
return;
|
||||||
|
@ -287,9 +286,9 @@ final class WP_Customize {
|
||||||
*/
|
*/
|
||||||
public function admin_footer() {
|
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' ) ); ?>" />
|
<input type="hidden" class="admin-url" value="<?php echo esc_url( admin_url( 'admin.php' ) ); ?>" />
|
||||||
<a href="#" class="return-to-admin"><?php printf( __( '← Return to %s' ), get_admin_page_title() ); ?></a>
|
<a href="#" class="close-full-overlay"><?php printf( __( '← 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
|
<?php
|
||||||
|
|
|
@ -2,19 +2,6 @@ body {
|
||||||
overflow: hidden;
|
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 {
|
#customize-controls a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
@ -120,35 +107,6 @@ body {
|
||||||
margin: 0;
|
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 {
|
#customize-preview {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 300px;
|
left: 300px;
|
||||||
|
|
|
@ -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}
|
|
|
@ -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;
|
|
||||||
}
|
|
|
@ -43,14 +43,14 @@ do_action( 'customize_controls_print_styles' );
|
||||||
do_action( 'customize_controls_print_scripts' );
|
do_action( 'customize_controls_print_scripts' );
|
||||||
?>
|
?>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="wp-full-overlay">
|
||||||
<form id="customize-controls" method="post" class="wrap" target="_parent" action="<?php echo esc_url( add_query_arg( 'save', '1', admin_url( 'themes.php' ) ) ); ?>">
|
<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' ); ?>
|
<?php wp_nonce_field( 'customize_controls' ); ?>
|
||||||
<input type="hidden" name="customize" value="on" />
|
<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-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'] ); ?>" />
|
<input type="hidden" id="customize-stylesheet" name="stylesheet" value="<?php echo esc_attr( $theme['Stylesheet'] ); ?>" />
|
||||||
|
|
||||||
<div id="customize-header-actions" class="customize-section"> </div>
|
<div id="customize-header-actions" class="customize-section wp-full-overlay-header"> </div>
|
||||||
|
|
||||||
<div id="customize-info" class="customize-section">
|
<div id="customize-info" class="customize-section">
|
||||||
<div class="customize-section-title">
|
<div class="customize-section-title">
|
||||||
|
@ -78,13 +78,13 @@ do_action( 'customize_controls_print_scripts' );
|
||||||
?>
|
?>
|
||||||
</ul></div>
|
</ul></div>
|
||||||
|
|
||||||
<div id="customize-footer-actions" class="customize-section">
|
<div id="customize-footer-actions" class="customize-section wp-full-overlay-footer">
|
||||||
<?php
|
<?php
|
||||||
submit_button( __( 'Save' ), 'primary', 'save', false );
|
submit_button( __( 'Save' ), 'primary', 'save', false );
|
||||||
?>
|
?>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<div id="customize-preview">
|
<div id="customize-preview" class="wp-full-overlay-main">
|
||||||
<iframe name="customize-target"></iframe>
|
<iframe name="customize-target"></iframe>
|
||||||
</div>
|
</div>
|
||||||
<?php
|
<?php
|
||||||
|
|
|
@ -9,7 +9,7 @@ if ( typeof wp === 'undefined' )
|
||||||
this.base = $( '.admin-url', this.element ).val();
|
this.base = $( '.admin-url', this.element ).val();
|
||||||
this.doc_title = $( document ).attr( 'title' );
|
this.doc_title = $( document ).attr( 'title' );
|
||||||
|
|
||||||
this.element.on( 'click', '.return-to-admin', function() {
|
this.element.on( 'click', '.close-full-overlay', function() {
|
||||||
Loader.close();
|
Loader.close();
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
@ -31,14 +31,14 @@ if ( typeof wp === 'undefined' )
|
||||||
});
|
});
|
||||||
|
|
||||||
this.element.fadeIn( 200, function() {
|
this.element.fadeIn( 200, function() {
|
||||||
Loader.body.addClass( 'customize-active' );
|
Loader.body.addClass( 'customize-active full-overlay-active' );
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
close: function() {
|
close: function() {
|
||||||
this.element.fadeOut( 200, function() {
|
this.element.fadeOut( 200, function() {
|
||||||
Loader.iframe.remove();
|
Loader.iframe.remove();
|
||||||
Loader.iframe = null;
|
Loader.iframe = null;
|
||||||
Loader.body.removeClass( 'customize-active' );
|
Loader.body.removeClass( 'customize-active full-overlay-active' );
|
||||||
$( document ).attr( 'title', Loader.doc_title );
|
$( document ).attr( 'title', Loader.doc_title );
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -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( '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( 'editor-buttons', "/wp-includes/css/editor-buttons$suffix.css" );
|
||||||
$styles->add( 'wp-pointer', "/wp-includes/css/wp-pointer$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' ) );
|
$styles->add( 'customize-controls', "/wp-includes/css/customize-controls$suffix.css", array( 'wp-admin', 'colors', 'ie' ) );
|
||||||
|
|
||||||
foreach ( $rtl_styles as $rtl_style ) {
|
foreach ( $rtl_styles as $rtl_style ) {
|
||||||
|
|
Loading…
Reference in New Issue