diff --git a/packages/editor/src/components/document-bar/style.scss b/packages/editor/src/components/document-bar/style.scss index 749da6ec8c9837..4b84d8b44d39f3 100644 --- a/packages/editor/src/components/document-bar/style.scss +++ b/packages/editor/src/components/document-bar/style.scss @@ -18,8 +18,10 @@ .components-button { border-radius: $grid-unit-05; - transition: all 0.1s ease-out; - @include reduce-motion("transition"); + + @media not (prefers-reduced-motion) { + transition: all 0.1s ease-out; + } &:hover { background: $gray-200; diff --git a/packages/editor/src/components/document-tools/style.scss b/packages/editor/src/components/document-tools/style.scss index dfafff2126d66d..7f70d02a6eaca0 100644 --- a/packages/editor/src/components/document-tools/style.scss +++ b/packages/editor/src/components/document-tools/style.scss @@ -16,8 +16,9 @@ display: inline-flex; svg { - transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; - @include reduce-motion("transition"); + @media not (prefers-reduced-motion) { + transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s; + } } &.is-pressed { diff --git a/packages/editor/src/components/post-featured-image/style.scss b/packages/editor/src/components/post-featured-image/style.scss index bf9433faa662d4..cca45c61adaf8c 100644 --- a/packages/editor/src/components/post-featured-image/style.scss +++ b/packages/editor/src/components/post-featured-image/style.scss @@ -78,12 +78,14 @@ .editor-post-featured-image__actions { &:not(.editor-post-featured-image__actions-missing-image) { - @include reduce-motion("transition"); bottom: 0; opacity: 0; // Use opacity instead of visibility so that the buttons remain in the tab order. padding: $grid-unit-10; position: absolute; - transition: opacity 50ms ease-out; + + @media not (prefers-reduced-motion) { + transition: opacity 50ms ease-out; + } .editor-post-featured-image__action { backdrop-filter: blur(16px) saturate(180%); diff --git a/packages/editor/src/components/post-publish-panel/style.scss b/packages/editor/src/components/post-publish-panel/style.scss index 7b075717651781..6221eaef52767b 100644 --- a/packages/editor/src/components/post-publish-panel/style.scss +++ b/packages/editor/src/components/post-publish-panel/style.scss @@ -210,9 +210,11 @@ left: auto; width: $sidebar-width + $border-width; border-left: $border-width solid $gray-300; - transform: translateX(+100%); - animation: editor-post-publish-panel__slide-in-animation 0.1s forwards; - @include reduce-motion("animation"); + + @media not (prefers-reduced-motion) { + transform: translateX(+100%); + animation: editor-post-publish-panel__slide-in-animation 0.1s forwards; + } body.is-fullscreen-mode & { top: 0; diff --git a/packages/editor/src/components/post-text-editor/style.scss b/packages/editor/src/components/post-text-editor/style.scss index f3b9b65007df75..5391588d906d8d 100644 --- a/packages/editor/src/components/post-text-editor/style.scss +++ b/packages/editor/src/components/post-text-editor/style.scss @@ -10,8 +10,10 @@ textarea.editor-post-text-editor { font-family: $editor-html-font; line-height: 2.4; min-height: 200px; - transition: border 0.1s ease-out, box-shadow 0.1s linear; - @include reduce-motion("transition"); + + @media not (prefers-reduced-motion) { + transition: border 0.1s ease-out, box-shadow 0.1s linear; + } // Same padding as title. padding: $grid-unit-20;