Add button focus style (#838)

WordPress · May 19, 2017 · 7492855 · 7492855
1 parent dbc228e
commit 7492855
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 4 deletions.
diff --git a/components/button/style.scss b/components/button/style.scss
@@ -7,8 +7,4 @@
 	&:disabled {
 		opacity: 0.6;
 	}
-
-	&:focus {
-		box-shadow: none;
-	}
 }
diff --git a/components/icon-button/style.scss b/components/icon-button/style.scss
@@ -5,6 +5,7 @@
 	border: none;
 	background: none;
 	color: $dark-gray-500;
+	position: relative;
 
 	&:not( :disabled ) {
 		cursor: pointer;
@@ -13,4 +14,14 @@
 			color: $blue-medium;
 		}
 	}
+
+	&: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);
+	}
 }
diff --git a/components/toolbar/style.scss b/components/toolbar/style.scss
@@ -21,6 +21,13 @@
 		margin-left: 3px;
 	}
 
+	&:focus:before {
+		top: -4px;
+		right: -4px;
+		bottom: -4px;
+		left: -4px;
+	}
+
 	&.is-active,
 	&:hover,
 	&:not(:disabled):hover {

diff --git a/editor/block-switcher/style.scss b/editor/block-switcher/style.scss
@@ -12,6 +12,13 @@
 	width: auto;
 	margin: 3px;
 	padding: 6px;
+
+	&:focus:before {
+		top: -3px;
+		right: -3px;
+		bottom: -3px;
+		left: -3px;
+	}
 }
 
 .editor-block-switcher__menu {