Changeset 20110

Timestamp:

03/04/2012 04:57:24 AM (13 years ago)

Author:

koopersmith

Message:

Theme Customizer: Improve markup and CSS for the return/collapse actions and the action bars within the customize controls form. see #19910.

Location:

trunk/wp-includes

Files:

• class-wp-customize.php (modified) (1 diff)
• css/customize-controls.dev.css (modified) (3 diffs)
• css/customize-loader.dev.css (modified) (1 diff)
• customize-controls.php (modified) (2 diffs)

trunk/wp-includes/class-wp-customize.php

@@ -284 +284 @@
         <div id="customize-container">
             <input type="hidden" class="admin-url" value="<?php echo esc_url( admin_url( 'admin.php' ) ); ?>" />
-            <div>
-                <a href="#" class="return-to-admin"><?php printf( __( '&larr; Return to %s' ), get_admin_page_title() ); ?></a>
-                <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>"><span></span></a>
-            </div>
+            <a href="#" class="return-to-admin"><?php printf( __( '&larr; Return to %s' ), get_admin_page_title() ); ?></a>
+            <a href="#" class="collapse-sidebar button-secondary" title="<?php esc_attr_e('Collapse Sidebar'); ?>"><span></span></a>
         </div>
         <?php

trunk/wp-includes/css/customize-controls.dev.css

@@ -14 +14 @@
     box-shadow: inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 );
     border-right: 1px solid rgba( 0, 0, 0, 0.2 );
+}
+
+#customize-controls a {
+    text-decoration: none;
 }
 
@@ -117 +121 @@
 }
 
-#customize-footer {
-    border-bottom: 0;
-    border-top: 1px solid #dfdfdf;
+#customize-header-actions,
+#customize-footer-actions {
     position: fixed;
-    bottom: 0;
     left: 0;
     width: 260px;
@@ -128 +130 @@
     z-index: 10;
     background: #f5f5f5;
+}
+
+#customize-header-actions {
+    top: 0;
+    border-top: 0;
+    border-bottom: 1px solid #fff;
     box-shadow:
         inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 ),
-        inset 0 1px 0 0px #fff,
-        0 0 11px 0 rgba( 0, 0, 0, 0.1 );
+        inset 0 -1px 0 0px #dfdfdf;
+}
+
+#customize-footer-actions {
+    bottom: 0;
+    border-bottom: 0;
+    border-top: 1px solid #dfdfdf;
+    box-shadow:
+        inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 ),
+        inset 0 1px 0 0px #fff;
 }
 

trunk/wp-includes/css/customize-loader.dev.css

@@ -22 +22 @@
 }
 
-#customize-container .collapse-sidebar,
-#customize-container .return-to-admin {
-    z-index: 50;
-}
-
-#customize-container div {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 260px;
-    padding: 15px 20px;
-    background: #f5f5f5;
-    box-shadow:
-        inset -11px 0 8px -8px rgba( 0, 0, 0, 0.1 ),
-        inset 0 -1px 0 #dfdfdf,
-        -1px 1px 0 #fff;
-    border-right: 1px solid rgba( 0, 0, 0, 0.2 );
-}
-
 #customize-container iframe {
     height: 100%;
     width: 100%;
     z-index: 20;
+}
+
+#customize-container .collapse-sidebar,
+#customize-container .return-to-admin {
+    z-index: 50;
+    position: absolute;
+    text-decoration: none;
+}
+
+#customize-container .return-to-admin {
+    top: 15px;
+    left: 20px;
 }
 

trunk/wp-includes/customize-controls.php

@@ -50 +50 @@
         <input type="hidden" id="customize-template" name="template" value="<?php echo esc_attr( $theme['Template'] ); ?>" />
         <input type="hidden" id="customize-stylesheet" name="stylesheet" value="<?php echo esc_attr( $theme['Stylesheet'] ); ?>" />
+        
+        <div id="customize-header-actions" class="customize-section">&nbsp;</div>
 
         <div id="customize-info" class="customize-section">
@@ -77 +79 @@
         </ul></div>
 
-        <div id="customize-footer" class="customize-section">
+        <div id="customize-footer-actions" class="customize-section">
             <?php
             submit_button( __( 'Save' ), 'primary', 'save', false );