Polish horizontal movers. (#25037)

WordPress · Sep 3, 2020 · b9597d9 · b9597d9
1 parent 459ab7f
commit b9597d9
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git 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
@@ -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;