From c4b13629b028176c7d514544519bb18ca1323992 Mon Sep 17 00:00:00 2001
From: Joen Asmussen <joen@automattic.com>
Date: Fri, 22 Jun 2018 11:55:43 +0200
Subject: [PATCH] Polish region focus style (#7459)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Polish region focus style

This is a small ✋ Friday PR! 🤚

It does one thing — adds a little animation flourish to the focus style we show when you navigate between regions. Press Ctrl + [the key below escape] to invoke this. Here's how it looks:

* Address feedback.
---
 .../higher-order/navigate-regions/style.scss       |  3 ++-
 edit-post/assets/stylesheets/_animations.scss      | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/components/higher-order/navigate-regions/style.scss b/components/higher-order/navigate-regions/style.scss
index edf682bf0729c..d6378f3ee68e3 100644
--- a/components/higher-order/navigate-regions/style.scss
+++ b/components/higher-order/navigate-regions/style.scss
@@ -7,6 +7,7 @@
 		left: 0;
 		right: 0;
 		pointer-events: none;
-		border: 4px solid $blue-medium-400;
+		outline: 4px solid transparent; // Shown in Windows High Contrast mode.
+		@include region_focus( .1s );
 	}
 }
diff --git a/edit-post/assets/stylesheets/_animations.scss b/edit-post/assets/stylesheets/_animations.scss
index b3068ec3bc342..0ebdbf228adef 100644
--- a/edit-post/assets/stylesheets/_animations.scss
+++ b/edit-post/assets/stylesheets/_animations.scss
@@ -30,3 +30,17 @@
 	animation: fade-in $speed ease-out;
 	animation-fill-mode: forwards;
 }
+
+@keyframes editor_region_focus {
+	from {
+		box-shadow: inset 0 0 0 0 $blue-medium-400;
+	}
+	to {
+		box-shadow: inset 0 0 0 4px $blue-medium-400;
+	}
+}
+
+@mixin region_focus( $speed: 0.2s ) {
+	animation: editor_region_focus $speed ease-out;
+	animation-fill-mode: forwards;
+}
\ No newline at end of file