Changeset 39233

Timestamp:

11/15/2016 12:14:24 AM (8 years ago)

Author:

westonruter

Message:

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.

Location:

trunk/src

Files:

• wp-content/themes/twentyfourteen/style.css (modified) (2 diffs)
• wp-content/themes/twentyseventeen/style.css (modified) (1 diff)
• wp-includes/css/customize-preview.css (modified) (1 diff)

trunk/src/wp-content/themes/twentyfourteen/style.css

@@ -3093 +3093 @@
 }
 
+/* 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 {
@@ -3164 +3176 @@
         margin: 0 auto 24px;
         padding: 0 10px;
+    }
+}
+
+/* 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;
     }
 }

trunk/src/wp-content/themes/twentyseventeen/style.css

@@ -3067 +3067 @@
 --------------------------------------------------------------*/
 
+/* 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) {
 

trunk/src/wp-includes/css/customize-preview.css

@@ -253 +253 @@
 
 @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;
     }