Changeset 31984

Timestamp:

04/02/2015 05:15:08 PM (9 years ago)

Author:

ocean90

Message:

Customizer: Improve the overlay close button for iOS.

see #28784.

Location:

trunk/src/wp-admin

Files:

• css/customize-controls.css (modified) (4 diffs)
• customize.php (modified) (1 diff)

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

@@ -198 +198 @@
 }
 
-.customize-close-overlay,
+.customize-overlay-close,
 .customize-controls-close {
     display: block;
@@ -206 +206 @@
     width: 45px;
     height: 45px;
-    padding-right: 2px;
+    padding: 0 2px 0 0;
     background: #eee;
     border: none;
     border-right: 1px solid #ddd;
     color: #444;
+    text-align: left;
     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-close-overlay {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+.customize-overlay-close {
     left: auto;
     right: 0;
+    border-right: 0;
+    border-left: 1px solid #ddd;
 }
 
@@ -241 +247 @@
 }
 
-.customize-close-overlay:focus,
-.customize-close-overlay:hover,
+.customize-overlay-close:focus,
+.customize-overlay-close:hover,
 .customize-controls-close:focus,
 .customize-controls-close:hover,
@@ -257 +263 @@
 }
 
+.customize-overlay-close:before,
 .customize-controls-close:before {
-    font: normal 22px/1 dashicons;
+    font: normal 22px/45px dashicons;
     content: "\f335";
     position: relative;
-    top: 7px;
+    top: 1px;
     left: 13px;
 }
 
-.customize-close-overlay:before {
-    font: normal 22px/1 dashicons;
-    content: "\f335";
-    position: relative;
-    top: 3px;
-}
-
 .control-panel-back:before {
-    font: normal 20px/1 dashicons;
+    font: normal 20px/45px dashicons;
     content: "\f341";
     position: relative;
-    top: 7px;
+    top: 1px;
     left: 13px;
 }

trunk/src/wp-admin/customize.php

@@ -136 +136 @@
             </div>
             <div class="secondary-actions">
-                <button type="button" class="dashicons dashicons-no customize-close-overlay">
-                    <span class="screen-reader-text"><?php _e( 'Close' ); ?></span>
+                <button type="button" class="customize-overlay-close">
+                    <span class="screen-reader-text"><?php _e( 'Close overlay' ); ?></span>
                 </button>
             </div>