diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 599fdac310..2a5014c893 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -235,7 +235,9 @@ body {
.customize-controls-close:focus,
.customize-controls-close:hover,
.control-panel-back:focus,
-.control-panel-back:hover {
+.control-panel-back:hover,
+.customize-controls-preview-toggle:focus,
+.customize-controls-preview-toggle:hover {
background: #ddd;
border-color: #ccc;
color: #000;
@@ -309,7 +311,7 @@ body {
}
#customize-theme-controls .control-section.current-panel > h3.accordion-section-title {
- left: -300px;
+ left: -354px;
-webkit-transition: left ease-in-out .18s;
transition: left ease-in-out .18s;
}
@@ -848,3 +850,76 @@ body.cheatin p {
line-height: 1.5;
margin: 25px 0 20px;
}
+
+/* Responsive */
+.customize-controls-preview-toggle {
+ display: none;
+}
+
+@media screen and ( max-width: 640px ) {
+ #customize-controls {
+ width: 100%;
+ }
+
+ .wp-full-overlay.expanded {
+ margin-left: 0;
+ }
+
+ .wp-full-overlay-sidebar .wp-full-overlay-sidebar-content {
+ bottom: 0;
+ }
+
+ .customize-controls-preview-toggle {
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 48px;
+ line-height: 45px;
+ font-size: 14px;
+ padding: 0 12px 0 12px;
+ margin: 0;
+ height: 45px;
+ background: #eee;
+ border-right: 1px solid #ddd;
+ color: #444;
+ cursor: pointer;
+ -webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
+ transition: color .1s ease-in-out, background .1s ease-in-out;
+ }
+
+ #customize-footer-actions,
+ #customize-preview,
+ .customize-controls-preview-toggle .controls,
+ .preview-only .wp-full-overlay-sidebar-content,
+ .preview-only .customize-controls-preview-toggle .preview {
+ display: none;
+ }
+
+ .customize-controls-preview-toggle .preview:before,
+ .customize-controls-preview-toggle .controls:before {
+ font: normal 20px/1 dashicons;
+ content: "\f177";
+ position: relative;
+ top: 4px;
+ margin-right: 6px;
+ }
+
+ .customize-controls-preview-toggle .controls:before {
+ content: "\f100";
+ }
+
+ .preview-only #customize-controls {
+ height: 45px;
+ }
+
+ .preview-only #customize-preview,
+ .preview-only .customize-controls-preview-toggle .controls {
+ display: block;
+ }
+
+ #customize-preview {
+ top: 45px;
+ bottom: 0;
+ height: auto;
+ }
+}
diff --git a/src/wp-admin/css/customize-widgets.css b/src/wp-admin/css/customize-widgets.css
index 14b09cf814..f60bb29329 100644
--- a/src/wp-admin/css/customize-widgets.css
+++ b/src/wp-admin/css/customize-widgets.css
@@ -344,7 +344,7 @@ body.adding-widget .add-new-widget:before {
width: 300px;
margin: 0;
z-index: 1;
- background: #fff;
+ background: #fff !important;
-webkit-transition: all 0.2s;
transition: all 0.2s;
border-right: 1px solid #dddddd;
@@ -607,3 +607,17 @@ body.adding-widget #customize-preview {
top: 8px;
}
}
+
+@media screen and ( max-width: 640px ) {
+ body.adding-widget div#available-widgets {
+ left: 0;
+ z-index: 10;
+ width: 100%;
+ }
+
+ #available-widgets-filter {
+ position: static;
+ width: 100%;
+ height: auto;
+ }
+}
diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php
index 178db28243..195e754178 100644
--- a/src/wp-admin/customize.php
+++ b/src/wp-admin/customize.php
@@ -126,6 +126,10 @@ do_action( 'customize_controls_print_scripts' );
submit_button( $save_text, 'primary save', 'save', false );
?>
+
+
+
+
diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index 7c4a631ca9..fefdef03c7 100644
--- a/src/wp-admin/js/customize-controls.js
+++ b/src/wp-admin/js/customize-controls.js
@@ -2239,6 +2239,15 @@
event.preventDefault();
});
+ $( '.customize-controls-preview-toggle' ).on( 'click keydown', function( event ) {
+ if ( api.utils.isKeydownButNotEnterEvent( event ) ) {
+ return;
+ }
+
+ overlay.toggleClass( 'preview-only' );
+ event.preventDefault();
+ });
+
// Bind site title display to the corresponding field.
if ( title.length ) {
$( '#customize-control-blogname input' ).on( 'input', function() {