From a0737cbe84b4dda35aa453cd8d5fa9c086abec74 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Mon, 12 Nov 2018 11:48:16 +0100 Subject: [PATCH] Address feedback. This retires a few animations, and moves others that are only used once to their respective scopes. --- assets/stylesheets/_animations.scss | 29 ----------- .../higher-order/navigate-regions/style.scss | 12 ++++- packages/components/src/spinner/style.scss | 11 ++++- .../src/components/fullscreen-mode/style.scss | 9 +++- .../src/components/layout/style.scss | 9 +++- packages/edit-post/src/style.scss | 49 ------------------- .../test/__snapshots__/wrap.js.snap | 4 +- .../src/editor-styles/transforms/test/wrap.js | 4 +- 8 files changed, 41 insertions(+), 86 deletions(-) diff --git a/assets/stylesheets/_animations.scss b/assets/stylesheets/_animations.scss index 2e4917a00766ea..c40acc778d32c0 100644 --- a/assets/stylesheets/_animations.scss +++ b/assets/stylesheets/_animations.scss @@ -1,41 +1,12 @@ -@mixin editor-animation__animate-fade { - animation: editor-animation__animate-fade 0.1s ease-out; - animation-fill-mode: forwards; -} - -@mixin editor-animation__move-background { - background-size: 28px 28px; - animation: editor-animation__move-background 0.5s linear infinite; -} - @mixin editor-animation__loading-fade { animation: editor-animation__loading-fade 1.6s ease-in-out infinite; } -@mixin editor-animation__slide-in-right { - transform: translateX(+100%); - animation: editor-animation__slide-in-right 0.1s forwards; -} - -@mixin editor-animation__slide-in-top { - transform: translateY(-100%); - animation: editor-animation__slide-in-top 0.1s forwards; -} - @mixin editor-animation__fade-in($speed: 0.2s, $delay: 0s) { animation: editor-animation__fade-in $speed ease-out $delay; animation-fill-mode: forwards; } -@mixin editor-animation__region-focus($speed: 0.2s) { - animation: editor-animation__region-focus $speed ease-out; - animation-fill-mode: forwards; -} - -@mixin editor-animation__rotation($speed: 1s) { - animation: editor-animation__rotation $speed infinite linear; -} - @mixin editor-animation__modal-appear() { animation: editor-animation__modal-appear 0.1s ease-out; animation-fill-mode: forwards; diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss index 15b30df826dcc8..3d50aef11067ff 100644 --- a/packages/components/src/higher-order/navigate-regions/style.scss +++ b/packages/components/src/higher-order/navigate-regions/style.scss @@ -8,6 +8,16 @@ right: 0; pointer-events: none; outline: 4px solid transparent; // Shown in Windows High Contrast mode. - @include editor-animation__region-focus(0.1s); + animation: editor-animation__region-focus 0.2s ease-out; + animation-fill-mode: forwards; + } +} + +@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; } } diff --git a/packages/components/src/spinner/style.scss b/packages/components/src/spinner/style.scss index f7d897509e9a58..3682c7d2bfe9de 100644 --- a/packages/components/src/spinner/style.scss +++ b/packages/components/src/spinner/style.scss @@ -19,6 +19,15 @@ height: 4px; border-radius: 100%; transform-origin: 6px 6px; - @include editor-animation__rotation; + animation: editor-animation__rotation 1s infinite linear; + } +} + +@keyframes editor-animation__rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); } } diff --git a/packages/edit-post/src/components/fullscreen-mode/style.scss b/packages/edit-post/src/components/fullscreen-mode/style.scss index d3435dfeb584f0..10e2a029aa57ca 100644 --- a/packages/edit-post/src/components/fullscreen-mode/style.scss +++ b/packages/edit-post/src/components/fullscreen-mode/style.scss @@ -22,6 +22,13 @@ body.is-fullscreen-mode { @include editor-animation__fade-in(0.3s); .edit-post-header { - @include editor-animation__slide-in-top(); + transform: translateY(-100%); + animation: editor-animation__slide-in-top 0.1s forwards; + } +} + +@keyframes editor-animation__slide-in-top { + 100% { + transform: translateY(0%); } } diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index c4bba24ae11349..636f5b2788fa72 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -128,7 +128,8 @@ left: auto; width: $sidebar-width; border-left: $border-width solid $light-gray-500; - @include editor-animation__slide-in-right; + transform: translateX(+100%); + animation: editor-animation__slide-in-right 0.1s forwards; body.is-fullscreen-mode & { top: 0; @@ -136,6 +137,12 @@ } } +@keyframes editor-animation__slide-in-right { + 100% { + transform: translateX(0%); + } +} + .edit-post-layout .editor-post-publish-panel__header-publish-button { // Match the size of the Publish... button. .components-button.is-large { diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index d0cbcd3ba77b24..3f75258824ba84 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -28,26 +28,6 @@ // These keyframes should not be part of the _animations.scss mixins file. // Because keyframe animations can't be defined as mixins properly, they are duplicated. // Since hey are intended only for the editor, we add them here instead. -@keyframes editor-animation__animate-fade { - from { - opacity: 0; - transform: translateY(4px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -@keyframes editor-animation__move-background { - from { - background-position: 0 0; - } - to { - background-position: 28px 0; - } -} - @keyframes editor-animation__loading-fade { 0% { opacity: 0.5; @@ -60,17 +40,6 @@ } } -@keyframes editor-animation__slide-in-right { - 100% { - transform: translateX(0%); - } -} - -@keyframes editor-animation__slide-in-top { - 100% { - transform: translateY(0%); - } -} @keyframes editor-animation__fade-in { from { opacity: 0; @@ -80,24 +49,6 @@ } } -@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; - } -} - -@keyframes editor-animation__rotation { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - @keyframes editor-animation__modal-appear { from { margin-top: $grid-size * 4; diff --git a/packages/editor/src/editor-styles/transforms/test/__snapshots__/wrap.js.snap b/packages/editor/src/editor-styles/transforms/test/__snapshots__/wrap.js.snap index b324a2a554ef98..b37cc4f030c2c8 100644 --- a/packages/editor/src/editor-styles/transforms/test/__snapshots__/wrap.js.snap +++ b/packages/editor/src/editor-styles/transforms/test/__snapshots__/wrap.js.snap @@ -8,9 +8,9 @@ src: url(sansation_light.woff); `; exports[`CSS selector wrap should ignore keyframes 1`] = ` -"@keyframes editor-animation__move-background { +"@keyframes editor-animation__fade-in { from { -background-position: 0 0; +opacity: 0; } }" `; diff --git a/packages/editor/src/editor-styles/transforms/test/wrap.js b/packages/editor/src/editor-styles/transforms/test/wrap.js index d510fc69091c87..46619d2d581cb4 100644 --- a/packages/editor/src/editor-styles/transforms/test/wrap.js +++ b/packages/editor/src/editor-styles/transforms/test/wrap.js @@ -40,9 +40,9 @@ describe( 'CSS selector wrap', () => { it( 'should ignore keyframes', () => { const callback = wrap( '.my-namespace' ); const input = ` - @keyframes editor-animation__move-background { + @keyframes editor-animation__fade-in { from { - background-position: 0 0; + opacity: 0; } }`; const output = traverse( input, callback );