Add Prefers Reduced Motion support for most components (#133)

lib/components/base/Checkbox.vue

@@ -120,6 +120,10 @@ export default defineComponent({
       height: 1rem;
       width: 1rem;
       transition: transform 0.25s ease-in-out;
+
+      @media (prefers-reduced-motion) {
+        transition: none !important;
+      }
     }
 
     &.checked {

lib/components/base/CopyCode.vue

@@ -53,6 +53,10 @@ export default {
   transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
     outline 0.2s ease-in-out;
 
+  @media (prefers-reduced-motion) {
+    transition: none !important;
+  }
+
   span {
     max-width: 10rem;
     overflow: hidden;

lib/components/base/DropArea.vue

@@ -90,5 +90,9 @@ onMounted(() => {
     border-radius: 1rem;
     border: 0.25rem dashed var(--color-button-bg);
   }
+
+  @media (prefers-reduced-motion) {
+    transition: none !important;
+  }
 }
 </style>

lib/components/base/Notifications.vue

@@ -129,6 +129,10 @@ function stopTimer(notif) {
 .notifs-leave-active,
 .notifs-move {
   transition: all 0.5s;
+
+  @media (prefers-reduced-motion) {
+    transition: none !important;
+  }
 }
 .notifs-enter-from,
 .notifs-leave-to {

lib/components/base/Pagination.vue

@@ -129,6 +129,10 @@ a {
   transition: opacity 0.5s ease-in-out, filter 0.2s ease-in-out, transform 0.05s ease-in-out,
     outline 0.2s ease-in-out;
 
+  @media (prefers-reduced-motion) {
+    transition: none !important;
+  }
+
   &:hover {
     color: inherit;
     text-decoration: none;

lib/components/base/PopoutMenu.vue

@@ -106,6 +106,10 @@ onBeforeUnmount(() => {
     transition: bottom 0.125s ease-in-out, top 0.125s ease-in-out, left 0.125s ease-in-out,
       right 0.125s ease-in-out, opacity 0.125s ease-in-out, scale 0.125s ease-in-out;
 
+    @media (prefers-reduced-motion) {
+      transition: none !important;
+    }
+
     &.position-bottom-left {
       top: calc(100% + var(--gap-sm) - 1rem);
       right: -1rem;

lib/components/base/Slider.vue

@@ -115,6 +115,12 @@ const onInput = (value: string) => {
 
 <style lang="scss" scoped>
 .root-container {
+  --transition-speed: 0.2s;
+
+  @media (prefers-reduced-motion) {
+    --transition-speed: 0s;
+  }
+
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -159,7 +165,7 @@ const onInput = (value: string) => {
   background: var(--color-brand);
   cursor: pointer;
   border-radius: 50%;
-  transition: 0.2s;
+  transition: var(--transition-speed);
 }
 
 .slider-component .slide-container .slider::-moz-range-thumb {
@@ -169,19 +175,19 @@ const onInput = (value: string) => {
   background: var(--color-brand);
   cursor: pointer;
   border-radius: 50%;
-  transition: 0.2s;
+  transition: var(--transition-speed);
 }
 
 .slider-component .slide-container .slider:hover::-webkit-slider-thumb:not(.disabled) {
   width: 1rem;
   height: 1rem;
-  transition: 0.2s;
+  transition: var(--transition-speed);
 }
 
 .slider-component .slide-container .slider:hover::-moz-range-thumb:not(.disabled) {
   width: 1rem;
   height: 1rem;
-  transition: 0.2s;
+  transition: var(--transition-speed);
 }
 
 .slider-component .slide-container .snap-points-wrapper {

lib/components/modal/Modal.vue

@@ -99,6 +99,10 @@ defineExpose({
   z-index: 19;
   transition: all 0.3s ease-in-out;
 
+  @media (prefers-reduced-motion) {
+    transition: none !important;
+  }
+
   &.shown {
     opacity: 1;
     visibility: visible;
@@ -164,6 +168,10 @@ defineExpose({
     opacity: 0;
     transition: all 0.25s ease-in-out;
 
+    @media (prefers-reduced-motion) {
+      transition: none !important;
+    }
+
     @media screen and (max-width: 650px) {
       width: calc(100% - 2 * var(--gap-lg));
     }

lib/components/modal/ShareModal.vue

@@ -251,6 +251,10 @@ defineExpose({
   margin: var(--gap-sm);
   transition: all 0.2s ease-in-out;
   opacity: 0;
+
+  @media (prefers-reduced-motion) {
+    transition: none !important;
+  }
 }
 
 .resizable-textarea-wrapper {