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
This commit is contained in:
koopersmith 2012-03-04 04:57:24 +00:00
parent 8d41e38f7a
commit efafcf2fc9
4 changed files with 39 additions and 30 deletions

View File

@ -283,11 +283,9 @@ 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>
</div>
<?php
}

View File

@ -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 {

View File

@ -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;

View File

@ -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 );
?>