From 719dcd244af6c3f099ff882c56b436a6020a96cc Mon Sep 17 00:00:00 2001
From: Andrew Ozz <azaozz@git.wordpress.org>
Date: Tue, 14 Jul 2020 01:35:47 +0000
Subject: [PATCH] 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.

git-svn-id: https://develop.svn.wordpress.org/trunk@48465 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/common.css | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 0d1bd2937d..fed4adb52b 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -2027,6 +2027,7 @@ html.wp-toolbar {
 .postbox .handle-order-higher,
 .postbox .handle-order-lower {
 	color: #72777c;
+	width: 1.62rem;
 }
 
 /* Post box order buttons in the block editor meta boxes area. */
@@ -2055,6 +2056,10 @@ html.wp-toolbar {
 	line-height: 1;
 }
 
+.postbox.closed {
+	border-bottom: 0;
+}
+
 /* user-select is not a part of the CSS standard - may change behavior in the future */
 .postbox .hndle,
 .stuffbox .hndle {
@@ -3021,13 +3026,21 @@ img {
 }
 
 .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;
 	border-radius: 50%;
 }
 
 .postbox .handlediv .toggle-indicator::before {
+	position: relative;
+	top: 0.05rem;
 	text-indent: -1px; /* account for the dashicon glyph uneven horizontal alignment */
 }
 
@@ -3044,7 +3057,9 @@ img {
 .postbox .handle-order-higher:focus,
 .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;
 }
@@ -3052,9 +3067,7 @@ img {
 .postbox .handle-order-higher:focus .order-higher-indicator::before,
 .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;
 }