@massimo-cassandro/minimo 1.24.5 → 1.24.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.24.5",
+  "version": "1.24.7",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",

package/src/components/autocomplete/autocomplete.css

@@ -54,7 +54,10 @@
         padding: .3rem .5rem;
         background-color: var(--ac-list-item-bg);
         border-radius: .35rem;
-        transition: all .2s ease;
+
+        @media screen and (prefers-reduced-motion: no-preference) {
+          transition: all .2s ease;
+        }
 
         .badge {
           color: #fff;

package/src/components/modal-alert/modal-alert.module.css

@@ -129,7 +129,10 @@
 
 .mAnimated {
   transform: translateY(-500%);
-  animation: dialog-in .3s ease-out;
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: dialog-in .3s ease-out;
+  }
 
   &[open] {
     transform: none;

package/src/components/modal-popup/modal-popup.module.css

@@ -21,7 +21,10 @@
   border-radius: var(--mpopup-border-radius);
   box-shadow: var(--mpopup-drop-shadow);
   scale: 0;
-  transition: scale .2s ease-out;
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    transition: scale .2s ease-out;
+  }
 
   &::backdrop {
     overscroll-behavior: contain;

package/src/components/slide-up-down-toggle/slide-up-down-toggle.module.css

@@ -56,9 +56,12 @@
   display: block !important;
   height: auto;
   overflow: hidden;
-  transition:
-    height var(--slide-duration) ease,
-    display var(--slide-duration) allow-discrete;
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    transition:
+      height var(--slide-duration) ease,
+      display var(--slide-duration) allow-discrete;
+  }
 }
 
 /* collapsed state: height animates to 0, then display snaps to none */

package/src/components/snackbar/snackbar.module.css

@@ -15,6 +15,7 @@
   border: var(--snackbar-outer-border);
   border-radius: var(--snackbar-outer-border-radius);
   box-shadow: var(--snackbar-outer-drop-shadow);
+
   animation: slide-in .3s cubic-bezier(.34, 1.56, .64, 1) forwards;
 
   &.isHiding {

package/src/components/unsplash-page/unsplash-page.module.css

@@ -122,7 +122,10 @@ html, body {
 
 .unsplashPhoto, .credits {
   opacity: 0;
-  transition: opacity .3s linear;
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    transition: opacity .3s linear;
+  }
 
   .show & {
     opacity: 1;
@@ -154,7 +157,10 @@ html, body {
   max-width: 90dvw;
   padding: 1rem 2rem;
   text-align: center;
-  transition: translate .3s ease-in-out;
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    transition: translate .3s ease-in-out;
+  }
 
   h1 {
     margin: 0;
@@ -190,9 +196,12 @@ html, body {
     cursor: w-resize;
     background-color: var(--uspg-icon-box-bg, var(--uspg-link-color, #fc0));
     border-radius: 50%;
-    /* transition: all .2s ease-in-out; */
-    /* duration | easing-function | delay | iteration-count | direction | name */
-    animation: .2s ease-in 2s 2 reverse icon-shaking;
+
+    @media (prefers-reduced-motion: no-preference) {
+      /* transition: all .2s ease-in-out; */
+      /* duration | easing-function | delay | iteration-count | direction | name */
+      animation: .2s ease-in 2s 2 reverse icon-shaking;
+    }
 
     @media (hover: hover) {
       &:hover {

package/src/css/forms/switch.css

@@ -82,9 +82,11 @@ background-image.
 
 @media (prefers-reduced-motion: no-preference) {
   .form-switch .form-check-input {
-    transition:
-      background-color var(--form-switch-transition-duration) linear,
-      background-position var(--form-switch-transition-duration) ease-in-out;
+    @media screen and (prefers-reduced-motion: no-preference) {
+      transition:
+        background-color var(--form-switch-transition-duration) linear,
+        background-position var(--form-switch-transition-duration) ease-in-out;
+    }
   }
 }