Merge pull request #942 from WordPress/fix/focus-regression

Fix focus rectangle regression
WordPress · Jun 3, 2017 · afe1625 · afe1625
2 parents 49ad784 + deafdaa
commit afe1625
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 19 deletions.
diff --git a/components/icon-button/style.scss b/components/icon-button/style.scss
@@ -8,6 +8,7 @@
 	position: relative;
 	width: $icon-button-size;	// show only icon on small breakpoints
 	overflow: hidden;
+	border-radius: 4px;
 
 	.dashicon {
 		flex: 0 0 auto;
@@ -25,13 +26,12 @@
 		}
 	}
 
-	&:focus:before {
-		content: '';
-		position: absolute;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, .8);
+	&:focus {
+		box-shadow: 0 0 0 1px $blue-medium-400, 0 0 2px 1px $blue-medium-400;
+		outline: none;
+	}
+
+	&:active:focus {
+		box-shadow: none;
 	}
 }
diff --git a/components/toolbar/style.scss b/components/toolbar/style.scss
@@ -23,23 +23,20 @@
 		box-sizing: content-box;
 	}
 
-	&:focus:before {
-		top: -4px;
-		right: -4px;
-		bottom: -4px;
-		left: -4px;
-	}
-
 	&.is-active svg,
 	&:hover svg,
-	&:not(:disabled):hover svg {
+	&:not(:disabled):hover svg,
+	&:focus svg {
 		border: 1px solid $dark-gray-500;
 		color: $dark-gray-500;
 	}
 
 	&:hover,
-	&:not(:disabled):hover {
+	&:not(:disabled):hover,
+	&:focus {
 		color: $dark-gray-500;
+		outline: none;
+		box-shadow: none;
 	}
 
 	&.is-active svg,

diff --git a/editor/block-mover/style.scss b/editor/block-mover/style.scss
@@ -14,6 +14,7 @@
 	cursor: pointer;
 	width: 20px;
 	height: 20px;
+	border-radius: 50%;
 
 	&:hover {
 		color: $dark-gray-900;

diff --git a/editor/block-switcher/style.scss b/editor/block-switcher/style.scss
@@ -12,6 +12,7 @@
 	width: auto;
 	margin: 0;
 	padding: 8px;
+	border-radius: 0;
 
 	&:focus:before {
 		top: -3px;
@@ -42,12 +43,14 @@
 	background: none;
 	border: 1px solid transparent;
 	outline: none;
+	border-radius: 0;
 	color: $dark-gray-500;
 	cursor: pointer;
 
 	&:hover,
 	&:focus,
 	&:not(:disabled):hover {
+		box-shadow: none;
 		color: $dark-gray-500;
 		border-color: $dark-gray-500;
 	}

diff --git a/editor/inserter/style.scss b/editor/inserter/style.scss
@@ -20,6 +20,10 @@
 	outline: none;
 	transition: color .2s ease;
 
+	.editor-layout__content & {
+		border-radius: $icon-button-size / 2;
+	}
+
 	&:hover,
 	&:focus {
 		color: $blue-medium-500;

diff --git a/editor/sidebar/post-schedule/style.scss b/editor/sidebar/post-schedule/style.scss
@@ -13,7 +13,6 @@
 	color: $blue-wordpress;
 
 	&:focus {
-		box-shadow: none;
 		outline: none;
 	}
 

diff --git a/editor/sidebar/post-visibility/style.scss b/editor/sidebar/post-visibility/style.scss
@@ -11,7 +11,6 @@
 	color: $blue-wordpress;
 
 	&:focus {
-		box-shadow: none;
 		outline: none;
 	}