Movers: Small positioning refactor.

WordPress · Nov 4, 2020 · c955ce5 · c955ce5
1 parent 703e324
commit c955ce5
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 14 deletions.
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -550,18 +550,6 @@
 	.block-editor-block-mover:not(.is-horizontal) {
 		// Position SVGs.
 		.block-editor-block-mover-button {
-			&.is-up-button {
-				svg {
-					margin-top: 2px;
-				}
-			}
-
-			&.is-down-button {
-				svg {
-					margin-bottom: 3px;
-				}
-			}
-
 			&:focus::before {
 				left: 0 !important;
 				min-width: 0;

diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
@@ -64,10 +64,16 @@
 
 	// Position the icons correctly.
 	@include break-small() {
+		.components-toolbar-group .block-editor-block-mover-button,
+		.components-toolbar .block-editor-block-mover-button {
+			margin: 0 auto 0 0;
+		}
+
+		// Up button.
 		.components-toolbar-group .block-editor-block-mover-button.is-up-button,
 		.components-toolbar .block-editor-block-mover-button.is-up-button {
 			svg {
-				margin-bottom: -$grid-unit-10;
+				top: 5px;
 			}
 
 			// Focus style.
@@ -77,10 +83,11 @@
 			}
 		}
 
+		// Down button.
 		.components-toolbar-group .block-editor-block-mover-button.is-down-button,
 		.components-toolbar .block-editor-block-mover-button.is-down-button {
 			svg {
-				margin-top: -$grid-unit-10;
+				bottom: 5px;
 			}
 
 			// Focus style.