From 01a5dd9c06051b8220a02fa59f72326c86535d4f Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Sat, 4 Aug 2018 17:10:09 +0200 Subject: [PATCH 1/8] Improve publish panel landmark and button position. --- .../src/components/layout/style.scss | 28 +++++++++++++------ 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 963862b7105d7..4775c4efb7762 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -202,28 +202,40 @@ } .edit-post-toggle-publish-panel { - position: absolute; - bottom: 0; + position: fixed; + top: -9999em; + bottom: auto; + left: auto; right: 0; z-index: z-index(".edit-post-toggle-publish-panel"); + padding: 10px 10px 10px 0; width: $sidebar-width; - height: 0; - overflow: hidden; - &:focus-within { - height: auto; - padding: 20px 0 0 0; + + &:focus { + top: auto; + bottom: 0; } .edit-post-toggle-publish-panel__button { - float: right; width: auto; height: auto; + display: block; font-size: 14px; font-weight: 600; + margin: 0 0 0 auto; padding: 15px 23px 14px; line-height: normal; text-decoration: none; outline: none; background: #f1f1f1; + color: theme( secondary ); + + &:focus { + position: fixed; + top: auto; + right: 10px; + bottom: 10px; + left: auto; + } } } From 03681126159200f90dc4261b673c83a977bd69d6 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Sat, 4 Aug 2018 19:48:18 +0200 Subject: [PATCH 2/8] Use outline for navigate regions focus style. --- .../higher-order/navigate-regions/style.scss | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss index 3d50aef11067f..29bdabb6ae530 100644 --- a/packages/components/src/higher-order/navigate-regions/style.scss +++ b/packages/components/src/higher-order/navigate-regions/style.scss @@ -1,4 +1,5 @@ .components-navigate-regions.is-focusing-regions [role="region"] { + // For browsers that don't support outline-offset (IE11). &:focus::after { content: ""; position: absolute; @@ -8,16 +9,17 @@ right: 0; pointer-events: none; outline: 4px solid transparent; // Shown in Windows High Contrast mode. - animation: editor-animation__region-focus 0.2s ease-out; - animation-fill-mode: forwards; + box-shadow: inset 0 0 0 4px $blue-medium-400; } -} -@keyframes editor-animation__region-focus { - from { - box-shadow: inset 0 0 0 0 $blue-medium-400; - } - to { - box-shadow: inset 0 0 0 4px $blue-medium-400; + @supports ( outline-offset: 1px ) { + &:focus::after { + content: none; + } + + &:focus { + animation: editor-animation__region-focus 0.2s ease-out; + animation-fill-mode: forwards; + } } } From fe42700689e8c4383731dd6589819477674b8d57 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Sun, 5 Aug 2018 17:03:42 +0200 Subject: [PATCH 3/8] Avoid conflict with publish panel animation. --- packages/edit-post/src/components/layout/style.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 4775c4efb7762..400a8b215ed88 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -178,6 +178,11 @@ body.is-fullscreen-mode & { top: 0; } + + // Keep it open on focus to avoid conflict with navigate-regions animation. + .is-focusing-regions & { + transform: translateX( 0% ); + } } } From 231a2ac6031da91280b48e38a34035e16c278d4d Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 6 Aug 2018 19:18:44 +0200 Subject: [PATCH 4/8] Make the outline animation expand inwards. --- .../src/higher-order/navigate-regions/style.scss | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss index 29bdabb6ae530..d2b04708adeb3 100644 --- a/packages/components/src/higher-order/navigate-regions/style.scss +++ b/packages/components/src/higher-order/navigate-regions/style.scss @@ -11,15 +11,4 @@ outline: 4px solid transparent; // Shown in Windows High Contrast mode. box-shadow: inset 0 0 0 4px $blue-medium-400; } - - @supports ( outline-offset: 1px ) { - &:focus::after { - content: none; - } - - &:focus { - animation: editor-animation__region-focus 0.2s ease-out; - animation-fill-mode: forwards; - } - } } From becfa8bdff36d532aeaaf876484ab5506077ddb2 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Sun, 26 Aug 2018 17:41:40 +0200 Subject: [PATCH 5/8] CSS lint after rebase. --- .../src/higher-order/navigate-regions/style.scss | 11 +++++++++++ packages/edit-post/src/components/layout/style.scss | 4 ++-- 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss index d2b04708adeb3..29bdabb6ae530 100644 --- a/packages/components/src/higher-order/navigate-regions/style.scss +++ b/packages/components/src/higher-order/navigate-regions/style.scss @@ -11,4 +11,15 @@ outline: 4px solid transparent; // Shown in Windows High Contrast mode. box-shadow: inset 0 0 0 4px $blue-medium-400; } + + @supports ( outline-offset: 1px ) { + &:focus::after { + content: none; + } + + &:focus { + animation: editor-animation__region-focus 0.2s ease-out; + animation-fill-mode: forwards; + } + } } diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 400a8b215ed88..1c5babc86ac75 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -181,7 +181,7 @@ // Keep it open on focus to avoid conflict with navigate-regions animation. .is-focusing-regions & { - transform: translateX( 0% ); + transform: translateX(0%); } } } @@ -233,7 +233,7 @@ text-decoration: none; outline: none; background: #f1f1f1; - color: theme( secondary ); + color: theme(secondary); &:focus { position: fixed; From e49e8cff11ffb6541717c003f74c20e0ac8ad0ec Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 11 Feb 2019 20:19:21 +0100 Subject: [PATCH 6/8] Rebuild outline animation. --- .../src/higher-order/navigate-regions/style.scss | 13 +++++++++++++ packages/edit-post/src/components/layout/style.scss | 1 + 2 files changed, 14 insertions(+) diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss index 29bdabb6ae530..3596155ebaba7 100644 --- a/packages/components/src/higher-order/navigate-regions/style.scss +++ b/packages/components/src/higher-order/navigate-regions/style.scss @@ -18,8 +18,21 @@ } &:focus { + outline-style: solid; + outline-color: $blue-medium-400; animation: editor-animation__region-focus 0.2s ease-out; animation-fill-mode: forwards; } } } + +@keyframes editor-animation__region-focus { + from { + outline-width: 0; + outline-offset: 0; + } + to { + outline-width: 4px; + outline-offset: -4px; + } +} diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 1c5babc86ac75..f35fee805e001 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -215,6 +215,7 @@ z-index: z-index(".edit-post-toggle-publish-panel"); padding: 10px 10px 10px 0; width: $sidebar-width; + background-color: $white; &:focus { top: auto; From ff62949c4061cd4d8e3427ffbf5b2f7456e4f888 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Tue, 12 Feb 2019 17:36:55 +0100 Subject: [PATCH 7/8] Try negative z-indexes. --- assets/stylesheets/_z-index.scss | 3 ++- packages/edit-post/src/components/sidebar/style.scss | 2 ++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss index b8f00482e84af..fec56624dfe81 100644 --- a/assets/stylesheets/_z-index.scss +++ b/assets/stylesheets/_z-index.scss @@ -10,7 +10,8 @@ $z-layers: ( ".editor-block-list__layout .reusable-block-indicator": 1, ".editor-block-list__breadcrumb": 2, ".components-form-toggle__input": 1, - ".components-panel__header.edit-post-sidebar__panel-tabs": 1, + ".components-panel__header.edit-post-sidebar__panel-tabs": -1, + ".edit-post-sidebar .components-panel": -2, ".editor-inserter__tabs": 1, ".editor-inserter__tab.is-active": 1, ".components-panel__header": 1, diff --git a/packages/edit-post/src/components/sidebar/style.scss b/packages/edit-post/src/components/sidebar/style.scss index cd8256823d4e7..823256093ffbb 100644 --- a/packages/edit-post/src/components/sidebar/style.scss +++ b/packages/edit-post/src/components/sidebar/style.scss @@ -36,6 +36,8 @@ max-height: calc(100vh - #{ $admin-bar-height-big + $panel-header-height }); margin-top: -1px; margin-bottom: -1px; + position: relative; + z-index: z-index(".edit-post-sidebar .components-panel"); @include break-small() { overflow: inherit; From 58bf394f6739422b239b7eb8c9a58a935cfa3103 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Fri, 15 Feb 2019 11:53:39 +0100 Subject: [PATCH 8/8] Change animation timing to 0.1s. --- .../components/src/higher-order/navigate-regions/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss index 3596155ebaba7..add768095220d 100644 --- a/packages/components/src/higher-order/navigate-regions/style.scss +++ b/packages/components/src/higher-order/navigate-regions/style.scss @@ -20,7 +20,7 @@ &:focus { outline-style: solid; outline-color: $blue-medium-400; - animation: editor-animation__region-focus 0.2s ease-out; + animation: editor-animation__region-focus 0.1s ease-out; animation-fill-mode: forwards; } }