From ad0dae996e48f4ee5d7319bfe89c0a2e96bb4b34 Mon Sep 17 00:00:00 2001
From: Weston Ruter <westonruter@git.wordpress.org>
Date: Tue, 15 Nov 2016 00:14:24 +0000
Subject: [PATCH] Customize: Adjust layout for edit shortcuts only when shown.

Add theme-specific positioning of edit shortcuts in Twenty Fourteen and Twenty Seventeen.

Props sirbrillig, sstoqnov, westonruter.
Fixes #38651.


git-svn-id: https://develop.svn.wordpress.org/trunk@39233 602fd350-edb4-49c9-b593-d223f7449a82
---
 .../themes/twentyfourteen/style.css           | 23 +++++++++++++++++++
 .../themes/twentyseventeen/style.css          |  7 ++++++
 src/wp-includes/css/customize-preview.css     |  4 ++--
 3 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/wp-content/themes/twentyfourteen/style.css b/src/wp-content/themes/twentyfourteen/style.css
index 722583978b..a9507744a4 100644
--- a/src/wp-content/themes/twentyfourteen/style.css
+++ b/src/wp-content/themes/twentyfourteen/style.css
@@ -3092,6 +3092,18 @@ a.post-thumbnail:hover {
 	width: device-width;
 }
 
+/* Adjust positioning of edit shortcuts, override style in customize-preview.css */
+@media screen and (max-width:800px) {
+	body.customize-partial-edit-shortcuts-shown .site-header .site-title {
+		padding-left: 8px;
+	}
+
+	.site-header .customize-partial-edit-shortcut button {
+		top: 10px;
+	}
+}
+
+
 @media screen and (max-width: 400px) {
 	.list-view .site-content .post-thumbnail {
 		background: none;
@@ -3166,6 +3178,17 @@ a.post-thumbnail:hover {
 	}
 }
 
+/* Adjust positioning of edit shortcuts, override style in customize-preview.css */
+@media screen and (max-width:320px) {
+	.site-header .customize-partial-edit-shortcut button {
+		left: -32px;
+	}
+
+	body.customize-partial-edit-shortcuts-shown .site-header .site-title {
+		padding-left: 28px;
+	}
+}
+
 @media screen and (min-width: 401px) {
 	a.post-thumbnail:hover img {
 		opacity: 0.85;
diff --git a/src/wp-content/themes/twentyseventeen/style.css b/src/wp-content/themes/twentyseventeen/style.css
index 61eb2f4262..1610482a04 100644
--- a/src/wp-content/themes/twentyseventeen/style.css
+++ b/src/wp-content/themes/twentyseventeen/style.css
@@ -3066,6 +3066,13 @@ object {
 19.0 Media Queries
 --------------------------------------------------------------*/
 
+/* Adjust positioning of edit shortcuts, override style in customize-preview.css */
+@media screen and (min-width: 20em) {
+	body.customize-partial-edit-shortcuts-shown .site-header .site-title {
+		padding-left: 0;
+	}
+}
+
 @media screen and (min-width: 30em) {
 
 	/* Typography */
diff --git a/src/wp-includes/css/customize-preview.css b/src/wp-includes/css/customize-preview.css
index 114326d507..a8f4ea1e5c 100644
--- a/src/wp-includes/css/customize-preview.css
+++ b/src/wp-includes/css/customize-preview.css
@@ -252,11 +252,11 @@ body.customize-partial-edit-shortcuts-hidden .customize-partial-edit-shortcut bu
 }
 
 @media screen and (max-width:320px) {
-	.site-title {
+	body.customize-partial-edit-shortcuts-shown .site-title {
 		padding-left: 10px;
 	}
 
-	.widget-area .widget {
+	body.customize-partial-edit-shortcuts-shown .widget-area .widget {
 		padding-left: 10px;
 	}