From f63d9f354d4bc6f66c3034a367ac100a8301cddd Mon Sep 17 00:00:00 2001
From: Andrea Fercia <a.fercia@gmail.com>
Date: Fri, 23 Jun 2017 12:55:56 +0200
Subject: [PATCH 1/2] Add focus style to the Inserter search and improve
 alignments.

---
 editor/assets/stylesheets/_variables.scss |  2 ++
 editor/inserter/style.scss                | 14 +++++++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/editor/assets/stylesheets/_variables.scss b/editor/assets/stylesheets/_variables.scss
index 725d0850ebf3b9..9d549de4a6d617 100644
--- a/editor/assets/stylesheets/_variables.scss
+++ b/editor/assets/stylesheets/_variables.scss
@@ -23,6 +23,8 @@ $white: #fff;
 /* Extra colors, some from https://make.wordpress.org/design/handbook/foundations/colors/ */
 $blue-wordpress-700: #00669b;
 $blue-wordpress: #0073aa;
+$blue-focus: #5b9dd9;
+$shadow-focus: 0px 0px 2px rgba( #1e8cbe, .8 );
 
 $blue-medium-500: #00a0d2;
 $blue-medium-400: #33B3DB;
diff --git a/editor/inserter/style.scss b/editor/inserter/style.scss
index c3462e4b149303..0eaa14ddae3da6 100644
--- a/editor/inserter/style.scss
+++ b/editor/inserter/style.scss
@@ -48,25 +48,29 @@
 	}
 }
 
-input[type=search].editor-inserter__search {
+input[type="search"].editor-inserter__search {
 	display: block;
 	width: 100%;
-	border: none;
 	margin: 0;
 	box-shadow: none;
+	border: 1px solid transparent;
 	border-top: 1px solid $light-gray-500;
-	padding: 8px 16px;
+	padding: 8px 11px;
 	font-size: 13px;
+	position: relative;
+	z-index: 1;
 
 	&:focus {
 		outline: none;
+		border-color: $blue-focus;
+		box-shadow: $shadow-focus;
 	}
 }
 
 .editor-inserter__category-blocks {
 	display: flex;
 	flex-flow: row wrap;
-	padding: 3px;
+	padding: 4px;
 }
 
 .editor-inserter__menu.is-bottom:after {
@@ -108,7 +112,7 @@ input[type=search].editor-inserter__search {
 .editor-inserter__separator {
 	display: block;
 	margin: 0;
-	padding: 4px 8px;
+	padding: 4px 12px;
 	font-size: 11px;
 	font-weight: 600;
 	text-transform: uppercase;

From 93d795682fc078669f06c357e60b696545009de0 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Wed, 28 Jun 2017 11:23:17 +0200
Subject: [PATCH 2/2] Tweak focus styles, extract them to variables sheet.

---
 components/icon-button/style.scss         | 2 +-
 editor/assets/stylesheets/_variables.scss | 3 +--
 editor/inserter/style.scss                | 3 +--
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/components/icon-button/style.scss b/components/icon-button/style.scss
index 67794e0fa18274..fcc5caee91dc92 100644
--- a/components/icon-button/style.scss
+++ b/components/icon-button/style.scss
@@ -27,7 +27,7 @@
 	}
 
 	&:focus {
-		box-shadow: 0 0 0 1px $blue-medium-400, 0 0 2px 1px $blue-medium-400;
+		box-shadow: $button-focus-style;
 		outline: none;
 	}
 
diff --git a/editor/assets/stylesheets/_variables.scss b/editor/assets/stylesheets/_variables.scss
index 9d549de4a6d617..c6b8009b58a648 100644
--- a/editor/assets/stylesheets/_variables.scss
+++ b/editor/assets/stylesheets/_variables.scss
@@ -23,8 +23,6 @@ $white: #fff;
 /* Extra colors, some from https://make.wordpress.org/design/handbook/foundations/colors/ */
 $blue-wordpress-700: #00669b;
 $blue-wordpress: #0073aa;
-$blue-focus: #5b9dd9;
-$shadow-focus: 0px 0px 2px rgba( #1e8cbe, .8 );
 
 $blue-medium-500: #00a0d2;
 $blue-medium-400: #33B3DB;
@@ -57,6 +55,7 @@ $admin-sidebar-width-big: 190px;
 $admin-sidebar-width-collapsed: 36px;
 $shadow-popover: 0px 3px 20px rgba( $dark-gray-900, .1 ), 0px 1px 3px rgba( $dark-gray-900, .1 );
 $text-editor-max-width: 760px;
+$button-focus-style: 0 0 0 1px $blue-medium-400, 0 0 2px 1px $blue-medium-400;
 
 /* Editor */
 $text-editor-max-width: 760px;
diff --git a/editor/inserter/style.scss b/editor/inserter/style.scss
index 0eaa14ddae3da6..4596d96815f0fc 100644
--- a/editor/inserter/style.scss
+++ b/editor/inserter/style.scss
@@ -62,8 +62,7 @@ input[type="search"].editor-inserter__search {
 
 	&:focus {
 		outline: none;
-		border-color: $blue-focus;
-		box-shadow: $shadow-focus;
+		box-shadow: $button-focus-style;
 	}
 }