Theme Customizer: Prevent sidebar scrollbar from overlapping sidebar header or footer. fixes #20649, #20650, see #19910.

git-svn-id: https://develop.svn.wordpress.org/trunk@20791 602fd350-edb4-49c9-b593-d223f7449a82

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

@@ -5285,8 +5285,7 @@ body.full-overlay-active {
 }
 
 .wp-full-overlay.collapsed,
-.wp-full-overlay.collapsed div.wp-full-overlay-header,
+.wp-full-overlay.collapsed .wp-full-overlay-sidebar > div {
-.wp-full-overlay.collapsed div.wp-full-overlay-footer {
 	left: -302px;
 }
 
@@ -5299,7 +5298,6 @@ body.full-overlay-active {
 	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 );
 }
 
@@ -5307,6 +5305,18 @@ body.full-overlay-active {
 	overflow: visible;
 }
 
+.wp-full-overlay-sidebar:after {
+	content: '';
+	display: block;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	width: 8px;
+	box-shadow: inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 );
+	z-index: 1000;
+}
+
 .wp-full-overlay-main {
 	position: fixed;
 	left: 300px;
@@ -5319,34 +5329,38 @@ body.full-overlay-active {
 	left: 0;
 }
 
-.wp-full-overlay-sidebar div.wp-full-overlay-header,
+.wp-full-overlay-sidebar .wp-full-overlay-header,
-.wp-full-overlay-sidebar div.wp-full-overlay-footer {
+.wp-full-overlay-sidebar .wp-full-overlay-footer {
 	position: fixed;
 	left: 0;
 	width: 260px;
-	padding: 15px 20px;
+	height: 45px;
-	min-height: 16px;
+	padding: 0 20px;
-	margin: 0;
+	line-height: 45px;
 	z-index: 10;
-	background: #f5f5f5;
+	margin: 0;
 }
 
-.wp-full-overlay-sidebar div.wp-full-overlay-header {
+.wp-full-overlay-sidebar .wp-full-overlay-header {
 	top: 0;
 	border-top: 0;
 	border-bottom: 1px solid #fff;
-	box-shadow:
+	box-shadow: inset 0 -1px 0 0px #dfdfdf;
-		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 {
+.wp-full-overlay-sidebar .wp-full-overlay-footer {
 	bottom: 0;
 	border-bottom: 0;
 	border-top: 1px solid #dfdfdf;
-	box-shadow:
+	box-shadow: inset 0 1px 0 0px #fff;
-		inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 ),
+}
-		inset 0 1px 0 0px #fff;
+
+.wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
+	position: fixed;
+	top: 45px;
+	bottom: 45px;
+	width: 300px;
+	overflow: auto;
 }
 
 /* Return and close buttons. */
@@ -5365,7 +5379,7 @@ body.full-overlay-active {
 /* Collapse Button */
 .wp-full-overlay .collapse-sidebar {
 	position: absolute;
-	bottom: 13px;
+	bottom: 12px;
 	left: 265px;
 	z-index: 50;
 	display: block;
@@ -5413,8 +5427,7 @@ body.full-overlay-active {
 /* Animations */
 .wp-full-overlay,
 .wp-full-overlay .collapse-sidebar,
-.wp-full-overlay-sidebar div.wp-full-overlay-header,
+.wp-full-overlay-sidebar > div,
-.wp-full-overlay-sidebar div.wp-full-overlay-footer,
 .wp-full-overlay-main {
 	-moz-transition-property: left, right, top, bottom;
 	-webkit-transition-property: left, right, top, bottom;
@@ -5480,7 +5493,7 @@ body.full-overlay-active {
 
 .install-theme-info {
 	display: none;
-	padding: 45px 20px 15px;
+	padding: 10px 20px 20px;
 }
 
 .single-theme .install-theme-info {
@@ -5508,6 +5521,10 @@ body.full-overlay-active {
 	border: 1px solid #ccc;
 }
 
+.install-theme-info .theme-details {
+	overflow: hidden;
+}
+
 .theme-details .theme-version {
 	margin: 15px 0;
 	float: left;

wp-admin/includes/class-wp-theme-install-list-table.php

@@ -258,7 +258,9 @@ class WP_Theme_Install_List_Table extends WP_Themes_List_Table {
 			</a>
 			<div class="wp-full-overlay-sidebar">
 				<div class="wp-full-overlay-header"></div>
-				<div class="install-theme-info"></div>
+				<div class="wp-full-overlay-sidebar-content">
+					<div class="install-theme-info"></div>
+				</div>
 				<div class="wp-full-overlay-footer"></div>
 			</div>
 			<div class="wp-full-overlay-main"></div>

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

@@ -99,10 +99,6 @@ body {
 	top: 15px;
 }
 
-#customize-info {
-	margin-top: 45px;
-}
-
 #customize-info .preview-notice {
 	font-size: 13px;
 	line-height: 24px;
@@ -132,10 +128,6 @@ body {
 	text-align: center;
 }
 
-#customize-theme-controls {
-	padding-bottom: 60px;
-}
-
 #customize-theme-controls > ul,
 #customize-theme-controls .customize-section-content {
 	margin: 0;
@@ -144,7 +136,7 @@ body {
 #customize-footer-actions img {
 	display: none;
 	position: absolute;
-	top: 18px;
+	top: 15px;
 	margin-left: 4px;
 }
 
@@ -152,6 +144,11 @@ body {
 	display: inline;
 }
 
+#customize-footer-actions .button-primary {
+	display: inline-block;
+	margin-top: 12px;
+}
+
 .customize-control {
 	width: 100%;
 	float: left;

wp-includes/customize-controls.php

@@ -43,36 +43,38 @@ do_action( 'customize_controls_print_scripts' );
 <body class="wp-full-overlay">
 	<form id="customize-controls" class="wrap wp-full-overlay-sidebar">
 		<?php wp_nonce_field( 'customize_controls' ); ?>
-		<div id="customize-header-actions" class="customize-section wp-full-overlay-header">
+		<div id="customize-header-actions" class="wp-full-overlay-header">
 			<a class="back" href="<?php echo esc_url( admin_url( 'themes.php' ) ); ?>">
 				<?php printf( __( '&larr; Return to %s' ), __('Manage Themes') ); ?>
 			</a>
 		</div>
 
-		<div id="customize-info" class="customize-section">
+		<div class="wp-full-overlay-sidebar-content">
-			<div class="customize-section-title">
+			<div id="customize-info" class="customize-section">
-				<span class="preview-notice"><?php _e('You are previewing'); ?></span>
+				<div class="customize-section-title">
-				<strong class="theme-name"><?php echo $this->theme->display('Name'); ?></strong>
+					<span class="preview-notice"><?php _e('You are previewing'); ?></span>
-			</div>
+					<strong class="theme-name"><?php echo $this->theme->display('Name'); ?></strong>
-			<div class="customize-section-content">
+				</div>
-				<?php if ( $screenshot = $this->theme->get_screenshot() ) : ?>
+				<div class="customize-section-content">
-					<img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" />
+					<?php if ( $screenshot = $this->theme->get_screenshot() ) : ?>
-				<?php endif; ?>
+						<img class="theme-screenshot" src="<?php echo esc_url( $screenshot ); ?>" />
+					<?php endif; ?>
 
-				<?php if ( $this->theme->get('Description') ): ?>
+					<?php if ( $this->theme->get('Description') ): ?>
-					<div class="theme-description"><?php echo $this->theme->display('Description'); ?></div>
+						<div class="theme-description"><?php echo $this->theme->display('Description'); ?></div>
-				<?php endif; ?>
+					<?php endif; ?>
+				</div>
 			</div>
+
+			<div id="customize-theme-controls"><ul>
+				<?php
+				foreach ( $this->sections as $section )
+					$section->maybe_render();
+				?>
+			</ul></div>
 		</div>
 
-		<div id="customize-theme-controls"><ul>
+		<div id="customize-footer-actions" class="wp-full-overlay-footer">
-			<?php
-			foreach ( $this->sections as $section )
-				$section->maybe_render();
-			?>
-		</ul></div>
-
-		<div id="customize-footer-actions" class="customize-section wp-full-overlay-footer">
 			<?php
 			$save_text = $this->get_stylesheet() == $this->original_stylesheet ? __('Save') : __('Save and Activate');
 			submit_button( $save_text, 'primary', 'save', false );