diff --git a/packages/dataviews/src/components/dataviews-footer/style.scss b/packages/dataviews/src/components/dataviews-footer/style.scss index a5cd4dcac9ca02..d8f205f6c8f75c 100644 --- a/packages/dataviews/src/components/dataviews-footer/style.scss +++ b/packages/dataviews/src/components/dataviews-footer/style.scss @@ -6,8 +6,11 @@ padding: $grid-unit-15 $grid-unit-60; border-top: $border-width solid $gray-100; flex-shrink: 0; - transition: padding ease-out 0.1s; - @include reduce-motion("transition"); + + @media not (prefers-reduced-motion) { + transition: padding ease-out 0.1s; + } + z-index: z-index(".dataviews-footer"); } diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss index 3c85115c06dddf..b44d5b2543f4af 100644 --- a/packages/dataviews/src/components/dataviews/style.scss +++ b/packages/dataviews/src/components/dataviews/style.scss @@ -18,8 +18,10 @@ flex-shrink: 0; position: sticky; left: 0; - transition: padding ease-out 0.1s; - @include reduce-motion( "transition" ); + + @media not (prefers-reduced-motion) { + transition: padding ease-out 0.1s; + } } .dataviews-no-results, @@ -29,8 +31,10 @@ display: flex; align-items: center; justify-content: center; - transition: padding ease-out 0.1s; - @include reduce-motion( "transition" ); + + @media not (prefers-reduced-motion) { + transition: padding ease-out 0.1s; + } } @container (max-width: 430px) { diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss index 333e6e9a4caf9f..a741b185572934 100644 --- a/packages/dataviews/src/dataviews-layouts/grid/style.scss +++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss @@ -2,10 +2,11 @@ margin-bottom: auto; grid-template-rows: max-content; padding: 0 $grid-unit-60 $grid-unit-30; - transition: padding ease-out 0.1s; container-type: inline-size; - @include reduce-motion("transition"); + @media not (prefers-reduced-motion) { + transition: padding ease-out 0.1s; + } .dataviews-view-grid__card { height: 100%;