Merge pull request 'components: Honour 'prefers reduced motion' setting in many components' (#333) from yukijoou/akkoma-fe:fix-reduced-motion into develop

Reviewed-on: AkkomaGang/akkoma-fe#333

src/components/favorite_button/favorite_button.vue

@@ -55,6 +55,9 @@
 
   .interactive {
     .svg-inline--fa {
+      @media (prefers-reduced-motion: reduce) {
+        animation: unset;
+      }
       animation-duration: 0.6s;
     }
 

src/components/mobile_nav/mobile_nav.vue

@@ -157,6 +157,9 @@
     box-shadow: var(--panelShadow);
     transition-property: transform;
     transition-duration: 0.25s;
+    @media (prefers-reduced-motion: reduce) {
+      transition: unset;
+    }
     transform: translateX(0);
     z-index: 1001;
     -webkit-overflow-scrolling: touch;

src/components/retweet_button/retweet_button.vue

@@ -74,6 +74,9 @@
 
   .interactive {
     .svg-inline--fa {
+      @media (prefers-reduced-motion: reduce) {
+        animation: unset;
+      }
       animation-duration: 0.6s;
     }
 

src/components/side_drawer/side_drawer.vue

@@ -268,6 +268,10 @@
 .side-drawer {
   overflow-x: hidden;
   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+  @media (prefers-reduced-motion: reduce) {
+    transition-timing-function: unset;
+    transition: unset;
+  }
   transition: 0.35s;
   transition-property: transform;
   margin: 0 0 0 -100px;

src/components/status_body/status_body.scss

@@ -17,6 +17,9 @@
 
   .emoji:hover {
     transform: scale(1.4);
+    @media (prefers-reduced-motion: reduce) {
+      transition: unset;
+    }
     transition: 0.05s;
   }
 

src/components/timeline_menu/timeline_menu.vue

@@ -62,6 +62,9 @@
     border-top-right-radius: 0;
     border-top-left-radius: 0;
     transform: translateY(-100%);
+    @media (prefers-reduced-motion: reduce) {
+      transition: unset;
+    }
     transition: transform 100ms;
   }
 
@@ -89,6 +92,9 @@
 
     svg {
       margin-left: 0.6em;
+      @media (prefers-reduced-motion: reduce) {
+        transition: unset;
+      }
       transition: transform 100ms;
     }