Theme Customizer: Reduce reliance on fixed positioning and make sidebar UI flexible. Props koopersmith, ocean90, helenyhou. fixes #20799
git-svn-id: https://develop.svn.wordpress.org/trunk@20969 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
83e4dea52c
commit
1d2bab6712
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 );
|
||||
|
|
Loading…
Reference in New Issue