From eef049639665bd24c1059b2198b40f514f3fa569 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 7 Oct 2022 13:01:29 +0200 Subject: [PATCH] Site editor outlines: try subtle outlines on block hover --- .../components/block-content-overlay/style.scss | 14 ++++++++++++++ .../src/components/block-list/style.scss | 2 +- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-content-overlay/style.scss b/packages/block-editor/src/components/block-content-overlay/style.scss index 7795bef2525f0..648b185a4b819 100644 --- a/packages/block-editor/src/components/block-content-overlay/style.scss +++ b/packages/block-editor/src/components/block-content-overlay/style.scss @@ -1,3 +1,12 @@ +@keyframes click-overlay__fade-in-animation { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + .block-editor-block-list__block.has-block-overlay { cursor: default; @@ -21,6 +30,11 @@ &:hover:not(.is-dragging-blocks)::before { background: rgba(var(--wp-admin-theme-color--rgb), 0.3); box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color) inset; + + // Animate. + animation: click-overlay__fade-in-animation 0.1s ease-out; + animation-fill-mode: forwards; + @include reduce-motion("animation"); } &.is-selected:not(.is-dragging-blocks)::before { diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 15c0a28bcb4ff..206d66a2fbc27 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -264,7 +264,7 @@ .is-outline-mode .block-editor-block-list__block:not(.remove-outline) { &.is-hovered { cursor: default; - box-shadow: inset 0 0 0 $border-width var(--wp-admin-theme-color); + box-shadow: inset 0 0 0 0.5px currentColor; border-radius: $radius-block-ui; }