From 8f0363c5d724890636dfcec0e1570cec93d108f5 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 7795bef2525f0b..648b185a4b8194 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 66569fc6847a24..726ea64b9e983f 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -278,7 +278,7 @@ left: $border-width; right: $border-width; bottom: $border-width; - box-shadow: 0 0 0 $border-width var(--wp-admin-theme-color); + box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color); border-radius: $radius-block-ui - $border-width; } }