Customize: Fix positioning of outer section (e.g. publish settings) on large screen sizes.

Also fix preview link CSS for desktop and mobile.

Props sayedwp, bduclos.
See #39896.
Fixes #42051.

Built from https://develop.svn.wordpress.org/trunk@41677


git-svn-id: http://core.svn.wordpress.org/trunk@41511 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter 2017-10-02 18:40:48 +00:00
parent 2e3581c3ad
commit df7af1ee21
6 changed files with 49 additions and 37 deletions

View File

@ -42,7 +42,7 @@ body:not(.ready) #customize-save-button-wrapper .save {
border-radius: 0 3px 3px 0;
}
#customize-outer-theme-controls-wrapper {
#customize-sidebar-outer-content {
position: absolute;
top: 0;
bottom: 0;
@ -56,10 +56,7 @@ body:not(.ready) #customize-save-button-wrapper .save {
background: #eee;
transition: right .18s;
border-left: 1px solid #ddd;
}
.outer-section-open .wp-full-overlay.expanded {
margin-right: 300px;
height: 100%;
}
#customize-theme-controls .control-section-outer {
@ -74,7 +71,7 @@ body:not(.ready) #customize-save-button-wrapper .save {
display: block;
}
.outer-section-open .wp-full-overlay.expanded #customize-outer-theme-controls-wrapper {
.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
visibility: visible;
right: 0;
transition: right .18s;
@ -85,11 +82,8 @@ body:not(.ready) #customize-save-button-wrapper .save {
}
.outer-section-open .wp-full-overlay.expanded #customize-preview {
opacity: 0.4;
}
body.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
right: 300px;
opacity: 0.4;
}
#customize-outer-theme-controls li.notice {
@ -199,12 +193,17 @@ body.trashing #publish-settings {
display: block;
}
.customize-copy-preview-link {
.preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
margin: 0;
position: absolute;
bottom: 9px;
left: 0;
}
.preview-link-wrapper {
position: relative;
}
.customize-copy-preview-link:before,
.customize-copy-preview-link:after {
content: "";
@ -245,7 +244,7 @@ body.trashing #publish-settings {
position: absolute;
white-space: nowrap;
overflow: hidden;
width: 217px;
width: 90%;
bottom: 14px;
font-size: 14px;
text-decoration: none;
@ -318,7 +317,7 @@ body.trashing #publish-settings {
}
#customize-control-changeset_preview_link {
margin-top: 20px;
margin-top: 6px;
}
#customize-control-changeset_status {
@ -330,7 +329,7 @@ body.trashing #publish-settings {
box-sizing: content-box;
width: 100%;
margin-right: -12px;
padding: 12px 12px 18px;
padding: 12px 12px 10px;
background: #ffffff;
border-bottom: 1px solid #ddd;
margin-bottom: 0;
@ -2711,6 +2710,14 @@ body.adding-widget .add-new-widget:before,
line-height: 3.2;
}
#customize-control-changeset_preview_link a {
bottom: 16px;
}
.preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
bottom: 10px;
}
.wp-core-ui.wp-customizer .button {
margin-top: 12px;
}
@ -2810,7 +2817,7 @@ body.adding-widget .add-new-widget:before,
body.adding-widget div#available-widgets,
body.adding-menu-items div#available-menu-items,
body.outer-section-open div#customize-outer-theme-controls-wrapper {
body.outer-section-open div#customize-sidebar-outer-content {
top: 46px;
right: 0;
z-index: 10;

File diff suppressed because one or more lines are too long

View File

@ -42,7 +42,7 @@ body:not(.ready) #customize-save-button-wrapper .save {
border-radius: 3px 0 0 3px;
}
#customize-outer-theme-controls-wrapper {
#customize-sidebar-outer-content {
position: absolute;
top: 0;
bottom: 0;
@ -56,10 +56,7 @@ body:not(.ready) #customize-save-button-wrapper .save {
background: #eee;
transition: left .18s;
border-right: 1px solid #ddd;
}
.outer-section-open .wp-full-overlay.expanded {
margin-left: 300px;
height: 100%;
}
#customize-theme-controls .control-section-outer {
@ -74,7 +71,7 @@ body:not(.ready) #customize-save-button-wrapper .save {
display: block;
}
.outer-section-open .wp-full-overlay.expanded #customize-outer-theme-controls-wrapper {
.outer-section-open .wp-full-overlay.expanded #customize-sidebar-outer-content {
visibility: visible;
left: 0;
transition: left .18s;
@ -85,11 +82,8 @@ body:not(.ready) #customize-save-button-wrapper .save {
}
.outer-section-open .wp-full-overlay.expanded #customize-preview {
opacity: 0.4;
}
body.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
left: 300px;
opacity: 0.4;
}
#customize-outer-theme-controls li.notice {
@ -199,12 +193,17 @@ body.trashing #publish-settings {
display: block;
}
.customize-copy-preview-link {
.preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
margin: 0;
position: absolute;
bottom: 9px;
right: 0;
}
.preview-link-wrapper {
position: relative;
}
.customize-copy-preview-link:before,
.customize-copy-preview-link:after {
content: "";
@ -245,7 +244,7 @@ body.trashing #publish-settings {
position: absolute;
white-space: nowrap;
overflow: hidden;
width: 217px;
width: 90%;
bottom: 14px;
font-size: 14px;
text-decoration: none;
@ -318,7 +317,7 @@ body.trashing #publish-settings {
}
#customize-control-changeset_preview_link {
margin-top: 20px;
margin-top: 6px;
}
#customize-control-changeset_status {
@ -330,7 +329,7 @@ body.trashing #publish-settings {
box-sizing: content-box;
width: 100%;
margin-left: -12px;
padding: 12px 12px 18px;
padding: 12px 12px 10px;
background: #ffffff;
border-bottom: 1px solid #ddd;
margin-bottom: 0;
@ -2711,6 +2710,14 @@ body.adding-widget .add-new-widget:before,
line-height: 3.2;
}
#customize-control-changeset_preview_link a {
bottom: 16px;
}
.preview-link-wrapper .customize-copy-preview-link.preview-control-element.button {
bottom: 10px;
}
.wp-core-ui.wp-customizer .button {
margin-top: 12px;
}
@ -2810,7 +2817,7 @@ body.adding-widget .add-new-widget:before,
body.adding-widget div#available-widgets,
body.adding-menu-items div#available-menu-items,
body.outer-section-open div#customize-outer-theme-controls-wrapper {
body.outer-section-open div#customize-sidebar-outer-content {
top: 46px;
left: 0;
z-index: 10;

File diff suppressed because one or more lines are too long

View File

@ -218,10 +218,8 @@ do_action( 'customize_controls_print_scripts' );
</form>
<div id="customize-preview" class="wp-full-overlay-main"></div>
<div id="customize-sidebar-outer-content">
<div id="customize-outer-theme-controls-wrapper">
<div id="customize-outer-theme-controls">
<ul class="customize-outer-pane-parent"><?php // Outer panel and sections are not implemented, but its here as a placeholder to avoid any side-effect in api.Section. ?></ul>
</div>
<div id="customize-outer-theme-controls">
<ul class="customize-outer-pane-parent"><?php // Outer panel and sections are not implemented, but its here as a placeholder to avoid any side-effect in api.Section. ?></ul>
</div>
</div>
<?php

View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.9-alpha-41676';
$wp_version = '4.9-alpha-41677';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.