From a7656c4f6175f3969824ea80deb090bbfd8f10b1 Mon Sep 17 00:00:00 2001
From: iseulde <ella@iseulde.com>
Date: Fri, 19 May 2017 00:32:38 +0200
Subject: [PATCH] Add button focus style

---
 components/button/style.scss      |  4 ----
 components/icon-button/style.scss | 11 +++++++++++
 components/toolbar/style.scss     |  7 +++++++
 editor/block-switcher/style.scss  |  7 +++++++
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/components/button/style.scss b/components/button/style.scss
index 9bb6317ca56e32..f408ba7ee27aef 100644
--- 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
index c5244cfb404629..8e893402d6292d 100644
--- 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
index c9521277452255..c54cb535b8cb60 100644
--- 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
index e29746f95c5f16..7a0757046e2f25 100644
--- 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 {