From 9ea2adfecf3f61e85c2313c530b4c13ad7eefb45 Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Sun, 16 Dec 2018 16:12:17 +0100 Subject: [PATCH 1/2] Improve color contrast of the default block inserter shortcuts. --- .../src/components/default-block-appender/style.scss | 8 -------- .../src/components/inserter-with-shortcuts/style.scss | 4 ++-- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/packages/editor/src/components/default-block-appender/style.scss b/packages/editor/src/components/default-block-appender/style.scss index 9f30f7f31b5964..066e3401b38856 100644 --- a/packages/editor/src/components/default-block-appender/style.scss +++ b/packages/editor/src/components/default-block-appender/style.scss @@ -30,14 +30,6 @@ .editor-inserter-with-shortcuts { opacity: 0.5; transition: opacity 0.2s; - - .components-icon-button:not(:hover) { - // Use opacity to work in various editor styles. - color: $dark-opacity-500; - .is-dark-theme & { - color: $light-opacity-500; - } - } } // Don't show the inserter until mousing over. diff --git a/packages/editor/src/components/inserter-with-shortcuts/style.scss b/packages/editor/src/components/inserter-with-shortcuts/style.scss index eba75a72c77713..67d4af314f8729 100644 --- a/packages/editor/src/components/inserter-with-shortcuts/style.scss +++ b/packages/editor/src/components/inserter-with-shortcuts/style.scss @@ -19,8 +19,8 @@ padding-top: 8px; // Use opacity to work in various editor styles. - color: $dark-opacity-light-700; + color: $dark-opacity-500; .is-dark-theme & { - color: $light-opacity-light-700; + color: $light-opacity-500; } } From 5f37b96f3399f6c266a1168e4ba31a4ac20227ab Mon Sep 17 00:00:00 2001 From: Andrea Fercia Date: Mon, 14 Jan 2019 13:02:17 +0100 Subject: [PATCH 2/2] Restore fade in effect. --- packages/editor/src/components/block-list/style.scss | 4 ++-- .../src/components/default-block-appender/style.scss | 12 ++++-------- 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index 3ecb8dcc263b82..b89d2ac389494a 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -250,12 +250,12 @@ &.is-typing .editor-block-list__empty-block-inserter, &.is-typing .editor-block-list__side-inserter { opacity: 0; + animation: none; } .editor-block-list__empty-block-inserter, .editor-block-list__side-inserter { - opacity: 1; - transition: opacity 0.2s; + @include edit-post__fade-in-animation; } // Reusable blocks diff --git a/packages/editor/src/components/default-block-appender/style.scss b/packages/editor/src/components/default-block-appender/style.scss index 066e3401b38856..55bcac1feae3ba 100644 --- a/packages/editor/src/components/default-block-appender/style.scss +++ b/packages/editor/src/components/default-block-appender/style.scss @@ -26,20 +26,17 @@ } } - // Show quick insertion icons faded until hover. - .editor-inserter-with-shortcuts { - opacity: 0.5; - transition: opacity 0.2s; - } - // Don't show the inserter until mousing over. .editor-inserter__toggle:not([aria-expanded="true"]) { opacity: 0; + transition: opacity 0.2s; } + &:hover { .editor-inserter-with-shortcuts { - opacity: 1; + @include edit-post__fade-in-animation; } + .editor-inserter__toggle { opacity: 1; } @@ -95,7 +92,6 @@ } .editor-inserter__toggle { - transition: opacity 0.2s; border-radius: 50%; width: $block-side-ui-width; height: $block-side-ui-width;