Changeset 39229

Timestamp:

11/14/2016 07:11:35 PM (8 years ago)

Author:

westonruter

Message:

Customize: Maximize height of Custom CSS textarea without causing doubled scrollbars.

Textarea will fill vertical height of Custom CSS section for browsers that support calc() and when plugins don't add other controls to the section. Also run CSS autoprefixer.

Props michaelarestad, westonruter.
See #35395.
Fixes #38755.

Location:

trunk/src

Files:

• wp-admin/css/customize-controls.css (modified) (2 diffs)
• wp-includes/css/customize-preview.css (modified) (2 diffs)

trunk/src/wp-admin/css/customize-controls.css

@@ -1136 +1136 @@
  * Custom CSS Section
  *
- * Modifications to the Section Container to
- * make the textarea full-width.
+ * Modifications to the Section Container to make the textarea full-width and
+ * full-height, if the control is the only control in the section.
  */
-#customize-theme-controls #sub-accordion-section-custom_css {
-    padding-left: 0;
-    padding-right: 0;
-}
-
-#customize-theme-controls #sub-accordion-section-custom_css .customize-section-title {
-    margin-left: 0;
-}
-
-#customize-theme-controls #sub-accordion-section-custom_css .customize-control-title,
-#customize-theme-controls #sub-accordion-section-custom_css .notice {
-    margin-left: 10px;
-    margin-right: 10px;
-}
-#customize-theme-controls #sub-accordion-section-custom_css textarea {
+
+#customize-controls .customize-section-description-container.section-meta.customize-info {
+    border-bottom: none;
+}
+
+#sub-accordion-section-custom_css .customize-control-notifications-container {
+    margin-bottom: 15px;
+}
+
+#customize-control-custom_css textarea {
+    display: block;
+    font-family: Consolas, Monaco, monospace;
+    font-size: 12px;
+    padding: 6px 8px;
+    height: 500px;
     -moz-tab-size: 4;
     -o-tab-size: 4;
@@ -1159 +1159 @@
 }
 
-#sub-accordion-section-custom_css .customize-control-notifications-container {
-    margin-bottom: 15px;
-}
-
-#sub-accordion-section-custom_css textarea {
+.customize-section-description-container + #customize-control-custom_css:last-child textarea {
     border-right: 0;
     border-left: 0;
-    font-family: Consolas, Monaco, monospace;
-    font-size: 12px;
-    padding: 6px 8px;
-    height: 553px;
+    height: -webkit-calc( 100vh - 185px );
+    height: calc( 100vh - 185px );
+    resize: none;
+}
+.customize-section-description-container + #customize-control-custom_css:last-child {
+    margin-left: -12px;
+    width: 299px;
+    margin-bottom: -12px;
+}
+
+@media screen and ( max-width: 640px ) {
+    .customize-section-description-container + #customize-control-custom_css:last-child {
+        margin-left: 0;
+        margin-right: 0;
+        width: 100%;
+    }
+    .customize-section-description-container + #customize-control-custom_css:last-child textarea {
+        height: -webkit-calc( 100vh - 140px );
+        height: calc( 100vh - 140px );
+        width: 100%;
+        border: solid 1px #ddd;
+    }
 }
 

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

@@ -56 +56 @@
     text-align: center;
     cursor: pointer;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
     box-sizing: border-box;
     padding: 3px;
@@ -87 +89 @@
 
 .customize-partial-edit-shortcut button:focus {
+    -webkit-box-shadow: 0 0 0 2px #008ec2;
     box-shadow: 0 0 0 2px #008ec2;
 }