From b9597d94e18eb5e57d3bb9d0744950db80d1b456 Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Thu, 3 Sep 2020 13:54:19 +0200
Subject: [PATCH] Polish horizontal movers. (#25037)

---
 .../src/components/block-list/style.scss      | 28 +++++++++++++++++++
 .../src/components/block-mover/style.scss     |  5 ++--
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
index 5e6411d09a80bd..cb9c3937c3bb9e 100644
--- a/packages/block-editor/src/components/block-list/style.scss
+++ b/packages/block-editor/src/components/block-list/style.scss
@@ -539,9 +539,37 @@
 	.block-editor-block-mover.is-horizontal .block-editor-block-mover-button.block-editor-block-mover-button {
 		min-width: $block-toolbar-height/2;
 		width: $block-toolbar-height/2;
+
+		// Animate buttons on hover.
+		&.is-up-button {
+			svg {
+				transition: ease-in-out transform 0.1s;
+				@include reduce-motion("transition");
+			}
+			&:focus,
+			&:hover {
+				svg {
+					transform: translateX(-2px);
+				}
+			}
+		}
+
+		&.is-down-button {
+			svg {
+				transition: ease-in-out transform 0.1s;
+				@include reduce-motion("transition");
+			}
+			&:focus,
+			&:hover {
+				svg {
+					transform: translateX(2px);
+				}
+			}
+		}
 	}
 
 	.block-editor-block-mover:not(.is-horizontal) {
+		// Position SVGs. Animate buttons on hover.
 		.block-editor-block-mover-button {
 			&.is-up-button {
 				svg {
diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
index c68c4a72ddc6bc..ec609240d69473 100644
--- a/packages/block-editor/src/components/block-mover/style.scss
+++ b/packages/block-editor/src/components/block-mover/style.scss
@@ -38,7 +38,6 @@
 			width: $block-toolbar-height - $grid-unit-15 / 2;
 			padding-right: $grid-unit-15 - $border-width !important;
 			padding-left: $grid-unit-15 / 2 !important;
-			min-width: $block-toolbar-height - $grid-unit-15 / 2 !important;
 		}
 
 		// Focus style.
@@ -105,8 +104,8 @@
 
 			// Focus style.
 			&::before {
-				top: 0;
-				bottom: 0;
+				top: $border-width;
+				bottom: $border-width;
 				min-width: 0;
 				width: auto;
 				height: auto;