Data Views: Standardize reduced motion handling using media queries (#68422)

* Data Views: Standardize reduced motion handling using media queries

* Data Views: Move container-type property to logical layout grouping

Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

Author: 3 people

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");
 }
 

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) {

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%;