Movers: Add bigger visible focus rectangle.

This PR makes the focus rectangle the same size as the button itself.
WordPress · Aug 10, 2020 · 5186ac6 · 5186ac6
1 parent 39d5086
commit 5186ac6
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -550,6 +550,12 @@
 			&.is-down-button svg {
 				margin-bottom: 3px;
 			}
+
+			&:focus::before {
+				left: 0 !important;
+				min-width: 0;
+				width: calc(100% + #{ $border-width });
+			}
 		}
 	}
 }

diff --git a/packages/block-editor/src/components/block-mover/style.scss b/packages/block-editor/src/components/block-mover/style.scss
@@ -32,8 +32,8 @@
 		// Focus style.
 		// Overrides .components-toolbar-group styles
 		&::before {
-			left: $grid-unit-10 !important;
-			right: $grid-unit-10 !important;
+			left: 0 !important;
+			right: 0 !important;
 		}
 	}
 
@@ -47,7 +47,7 @@
 		// Focus style.
 		&::before {
 			bottom: 0;
-			height: calc(100% - #{ $grid-unit-10 });
+			height: 100%;
 		}
 	}
 
@@ -60,7 +60,7 @@
 		// Focus style.
 		&::before {
 			top: 0;
-			height: calc(100% - #{ $grid-unit-10 });
+			height: 100%;
 		}
 	}
 
@@ -76,8 +76,8 @@
 
 			// Focus style.
 			&::before {
-				top: $grid-unit-10;
-				bottom: $grid-unit-10;
+				top: 0;
+				bottom: 0;
 				min-width: 0;
 				width: auto;
 				height: auto;
@@ -95,7 +95,7 @@
 			// Focus style.
 			// Overrides .components-toolbar-group styles
 			&::before {
-				left: $grid-unit-10 !important;
+				left: 0 !important;
 				right: 0 !important;
 			}
 		}
@@ -111,7 +111,8 @@
 			// Overrides .components-toolbar-group styles
 			&::before {
 				left: 0 !important;
-				right: $grid-unit-10 !important;
+				right: 0 !important;
+				width: calc(100% + #{ $border-width });
 			}
 		}
 	}