golem
/
twentyGOLEM
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
This commit is contained in:
ryan 2012-06-01 15:48:09 +00:00
parent cedff2638e
commit c4d5b1806e
3 changed files with 58 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
wp-admin/css/wp-admin-rtl.dev.css
View File

@ -1558,13 +1558,19 @@ table .column-rating {
/*------------------------------------------------------------------------------ /*------------------------------------------------------------------------------
26.0 - Full Overlay w/ Sidebar 26.0 - Full Overlay w/ Sidebar
------------------------------------------------------------------------------*/ ------------------------------------------------------------------------------*/
.wp-full-overlay.collapsed, .wp-full-overlay {
.wp-full-overlay.collapsed .wp-full-overlay-sidebar > div { left: 0;
left: auto; right: 300px;
right: -302px;
} }
.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-right: 0;
border-left: 1px solid rgba( 0, 0, 0, 0.2 ); 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); 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 */ /* Collapse Button */
.wp-full-overlay .collapse-sidebar { .wp-full-overlay .collapse-sidebar {
left: auto; right: auto;
right: 265px; left: 15px;
} }
.wp-full-overlay.collapsed .collapse-sidebar { .wp-full-overlay.collapsed .collapse-sidebar {
left: auto; right: auto;
right: 325px; left: -45px;
} }
.wp-full-overlay .collapse-sidebar-arrow { .wp-full-overlay .collapse-sidebar-arrow {

69
wp-admin/css/wp-admin.dev.css
View File

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

2
wp-includes/js/customize-loader.dev.js
View File

@ -24,7 +24,7 @@ if ( typeof wp === 'undefined' )
this.body.removeClass( 'no-customize-support' ).addClass( 'customize-support' ); this.body.removeClass( 'no-customize-support' ).addClass( 'customize-support' );
this.window = $( window ); 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( 'open', this.overlay.show );
this.bind( 'close', this.overlay.hide ); this.bind( 'close', this.overlay.hide );