From d9b6e7839caa0c781206cab9e3104f775cab5ff4 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Fri, 22 Jun 2018 10:10:10 +0200 Subject: [PATCH 1/2] Polish region focus style MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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: --- .../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..3459c8c8ec8bd 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 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: region-focus $speed ease-out; + animation-fill-mode: forwards; +} \ No newline at end of file From 904a3769b612dcff3e79819faac7350ff720c91d Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Fri, 22 Jun 2018 11:46:36 +0200 Subject: [PATCH 2/2] Address feedback. --- edit-post/assets/stylesheets/_animations.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/edit-post/assets/stylesheets/_animations.scss b/edit-post/assets/stylesheets/_animations.scss index 3459c8c8ec8bd..0ebdbf228adef 100644 --- a/edit-post/assets/stylesheets/_animations.scss +++ b/edit-post/assets/stylesheets/_animations.scss @@ -31,7 +31,7 @@ animation-fill-mode: forwards; } -@keyframes region-focus { +@keyframes editor_region_focus { from { box-shadow: inset 0 0 0 0 $blue-medium-400; } @@ -41,6 +41,6 @@ } @mixin region_focus( $speed: 0.2s ) { - animation: region-focus $speed ease-out; + animation: editor_region_focus $speed ease-out; animation-fill-mode: forwards; } \ No newline at end of file