Changeset 48465

Timestamp:

07/14/2020 01:35:47 AM (4 years ago)

Author:

azaozz

Message:

Administration: Attempt to even-out the new Up/Down arrows in metabox headings and make them look a bit better. Also group them a little closer together in an attempt to reduce confusion of having two down arrows next to one another. Move the focus outline to the button instead of only the icon.

Fixes #39074.

File:

• trunk/src/wp-admin/css/common.css (modified) (6 diffs)

trunk/src/wp-admin/css/common.css

@@ -2028 +2028 @@
 .postbox .handle-order-lower {
     color: #72777c;
+    width: 1.62rem;
 }
 
@@ -2054 +2055 @@
     padding: 0;
     line-height: 1;
+}
+
+.postbox.closed {
+    border-bottom: 0;
 }
 
@@ -3022 +3027 @@
 
 .postbox .handle-order-higher .order-higher-indicator::before,
-.postbox .handle-order-lower .order-lower-indicator::before,
+.postbox .handle-order-lower .order-lower-indicator::before {
+    position: relative;
+    top: 0.11rem;
+    width: 20px;
+    height: 20px;
+}
+
 .postbox .handlediv .toggle-indicator::before {
     width: 20px;
@@ -3029 +3040 @@
 
 .postbox .handlediv .toggle-indicator::before {
+    position: relative;
+    top: 0.05rem;
     text-indent: -1px; /* account for the dashicon glyph uneven horizontal alignment */
 }
@@ -3045 +3058 @@
 .postbox .handle-order-lower:focus,
 .postbox .handlediv:focus {
-    box-shadow: none;
+    box-shadow:
+        0 0 0 1px #5b9dd9,
+        0 0 2px 1px rgba(30, 140, 190, 0.8);
     /* Only visible in Windows High Contrast mode */
     outline: 1px solid transparent;
@@ -3053 +3068 @@
 .postbox .handle-order-lower:focus .order-lower-indicator::before,
 .postbox .handlediv:focus .toggle-indicator::before {
-    box-shadow:
-        0 0 0 1px #5b9dd9,
-        0 0 2px 1px rgba(30, 140, 190, 0.8);
+    box-shadow: none;
     /* Only visible in Windows High Contrast mode */
     outline: 1px solid transparent;