Theme Customizer: Reduce reliance on fixed positioning and make sidebar UI flexible. Props koopersmith, ocean90, helenyhou. fixes #20799

git-svn-id: http://core.svn.wordpress.org/trunk@20969 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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

@@ -1558,13 +1558,19 @@ table .column-rating {
 /*------------------------------------------------------------------------------
   26.0 - Full Overlay w/ Sidebar
 ------------------------------------------------------------------------------*/
-.wp-full-overlay.collapsed,
-.wp-full-overlay.collapsed .wp-full-overlay-sidebar > div {
-	left: auto;
-	right: -302px;
+.wp-full-overlay {
+	left: 0;
+	right: 300px;
 }
 
-.wp-full-overlay-sidebar {
+.wp-full-overlay.collapsed {
+	right: 0 !important;
+}
+
+.wp-full-overlay .wp-full-overlay-sidebar {
+	margin: 0;
+	left: 100%;
+	right: auto;
 	border-right: 0;
 	border-left: 1px solid rgba( 0, 0, 0, 0.2 );
 }
@@ -1575,30 +1581,15 @@ table .column-rating {
 	box-shadow: inset 5px 0 4px -4px rgba(0, 0, 0, 0.1);
 }
 
-.wp-full-overlay-main {
-	left: 0;
-	right: 300px;
-}
-
-.wp-full-overlay.collapsed .wp-full-overlay-main {
-	right: 0;
-}
-
-.wp-full-overlay-sidebar div.wp-full-overlay-header,
-.wp-full-overlay-sidebar div.wp-full-overlay-footer {
-	left: auto;
-	right: 0;
-}
-
 /* Collapse Button */
 .wp-full-overlay .collapse-sidebar {
-	left: auto;
-	right: 265px;
+	right: auto;
+	left: 15px;
 }
 
 .wp-full-overlay.collapsed .collapse-sidebar {
-	left: auto;
-	right: 325px;
+	right: auto;
+	left: -45px;
 }
 
 .wp-full-overlay .collapse-sidebar-arrow {

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

@@ -5244,25 +5244,33 @@ body.full-overlay-active {
 	background: #fff;
 	z-index: 500000;
 	position: fixed;
+	overflow: visible;
 	top: 0;
 	bottom: 0;
-	left: 0;
+	left: 300px;
 	right: 0;
 	height: 100%;
+	min-width: 0;
 }
 
-.wp-full-overlay.collapsed,
-.wp-full-overlay.collapsed .wp-full-overlay-sidebar > div {
-	left: -302px;
+.wp-full-overlay.collapsed {
+	left: 0 !important;
 }
 
 .wp-full-overlay-sidebar {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing:    border-box;
+	box-sizing:         border-box;
+
+	position: absolute;
 	width: 300px;
 	height: 100%;
+	top: 0;
+	bottom: 0;
+	right: 100%;
 	padding: 0;
 	margin: 0;
 	z-index: 10;
-	position: relative;
 	overflow: auto;
 	background: #f5f5f5;
 	border-right: 1px solid rgba( 0, 0, 0, 0.2 );
@@ -5285,23 +5293,19 @@ body.full-overlay-active {
 }
 
 .wp-full-overlay-main {
-	position: fixed;
-	left: 300px;
+	position: absolute;
+	left: 0;
 	right: 0;
 	top: 0;
 	bottom: 0;
 	height: 100%;
 }
 
-.wp-full-overlay.collapsed .wp-full-overlay-main {
-	left: 0;
-}
-
 .wp-full-overlay-sidebar .wp-full-overlay-header,
 .wp-full-overlay-sidebar .wp-full-overlay-footer {
-	position: fixed;
+	position: absolute;
 	left: 0;
-	width: 260px;
+	right: 0;
 	height: 45px;
 	padding: 0 20px;
 	line-height: 45px;
@@ -5324,10 +5328,11 @@ body.full-overlay-active {
 }
 
 .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
-	position: fixed;
+	position: absolute;
 	top: 45px;
 	bottom: 45px;
-	width: 300px;
+	left: 0;
+	right: 0;
 	overflow: auto;
 }
 
@@ -5340,7 +5345,7 @@ body.full-overlay-active {
 .wp-full-overlay .collapse-sidebar {
 	position: absolute;
 	bottom: 12px;
-	left: 265px;
+	right: 15px;
 	z-index: 50;
 	display: block;
 	width: 19px;
@@ -5352,7 +5357,7 @@ body.full-overlay-active {
 
 .wp-full-overlay.collapsed .collapse-sidebar {
 	position: absolute;
-	left: 315px;
+	right: -35px;
 }
 
 .wp-full-overlay .collapse-sidebar-arrow {
@@ -5387,19 +5392,20 @@ body.full-overlay-active {
 
 /* Animations */
 .wp-full-overlay,
+.wp-full-overlay-sidebar,
 .wp-full-overlay .collapse-sidebar,
-.wp-full-overlay-sidebar > div,
 .wp-full-overlay-main {
-	-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-property: left, right, top, bottom, width;
+	-moz-transition-property:    left, right, top, bottom, width;
+	-ms-transition-property:     left, right, top, bottom, width;
+	-o-transition-property:      left, right, top, bottom, width;
+	transition-property:         left, right, top, bottom, width;
+
 	-webkit-transition-duration: 0.2s;
-	-o-transition-duration: 0.2s;
-	-ms-transition-duration: 0.2s;
-	transition-duration: 0.2s;
+	-moz-transition-duration:    0.2s;
+	-ms-transition-duration:     0.2s;
+	-o-transition-duration:      0.2s;
+	transition-duration:         0.2s;
 }
 
 /*------------------------------------------------------------------------------
@@ -5413,6 +5419,15 @@ body.full-overlay-active {
 
 #customize-container {
 	display: none;
+	background: #fff;
+	z-index: 500000;
+	position: fixed;
+	overflow: visible;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	height: 100%;
 }
 
 .customize-active #customize-container {

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

@@ -24,7 +24,7 @@ if ( typeof wp === 'undefined' )
 			this.body.removeClass( 'no-customize-support' ).addClass( 'customize-support' );
 
 			this.window  = $( window );
-			this.element = $( '<div id="customize-container" class="wp-full-overlay" />' ).appendTo( this.body );
+			this.element = $( '<div id="customize-container" />' ).appendTo( this.body );
 
 			this.bind( 'open', this.overlay.show );
 			this.bind( 'close', this.overlay.hide );