Movers: Add bigger visible focus rectangle.

This PR makes the focus rectangle the same size as the button itself.
WordPress · Jul 7, 2020 · 60a13ce · 60a13ce
1 parent 791be97
commit 60a13ce
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 9 deletions.
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -606,7 +606,7 @@
 			&:focus::before {
 				left: 0 !important;
 				min-width: 0;
-				width: 28px;
+				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 });
 			}
 		}
 	}