@lumx/core 2.2.13 → 2.2.14

package/package.json

@@ -42,7 +42,7 @@
         "version": "yarn version-changelog ../../CHANGELOG.md && yarn changelog-verify ../../CHANGELOG.md && git add ../../CHANGELOG.md"
     },
     "sideEffects": false,
-    "version": "2.2.13",
+    "version": "2.2.14",
     "devDependencies": {
         "@babel/core": "^7.8.3",
         "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -82,5 +82,5 @@
         "moment": "^2.24.0",
         "moment-range": "^4.0.2"
     },
-    "gitHead": "63c7d55406244c2946236cd614a6e269eedf5f64"
+    "gitHead": "f91f87393935f907dffee38cff5f44721c2343d7"
 }

package/scss/components/dialog/_index.scss

@@ -15,6 +15,10 @@
     opacity: 1;
     transition: opacity $lumx-dialog-transition-duration;
 
+    @media (prefers-reduced-motion: reduce) {
+        transition: none;
+    }
+
     &--is-shown {
         display: block;
     }
@@ -32,6 +36,10 @@
         left: 0;
         animation: lumx-dialog-overlay-show $lumx-dialog-transition-duration;
         background-color: lumx-color-variant('dark', 'L1');
+
+        @media (prefers-reduced-motion: reduce) {
+            animation: none;
+        }
     }
 
     &__container {
@@ -41,6 +49,10 @@
         flex-direction: column;
         animation: lumx-dialog-show $lumx-dialog-transition-duration;
         transform: translateY(0);
+
+        @media (prefers-reduced-motion: reduce) {
+            animation: none;
+        }
     }
 
     &__wrapper {

package/scss/components/expansion-panel/_index.scss

@@ -69,6 +69,10 @@
         overflow: hidden;
         transition: max-height $lumx-expansion-panel-transition-duration;
 
+        @media (prefers-reduced-motion: reduce) {
+            transition: none;
+        }
+
         #{$self}--is-close & {
             max-height: 0 !important;
         }

package/scss/components/lightbox/_index.scss

@@ -16,6 +16,11 @@
     opacity: 1;
     transition: opacity $lumx-lightbox-transition-duration;
 
+    @media (prefers-reduced-motion: reduce) {
+        animation: none;
+        transition: none;
+    }
+
     &--is-shown {
         display: block;
     }

package/scss/components/mosaic/_index.scss

@@ -54,6 +54,10 @@
         flex-direction: column;
         margin: 1px;
 
+        .#{$lumx-base-prefix}-thumbnail__background {
+            align-items: stretch;
+        }
+
         #{$self}--has-1-thumbnail & {
             &:nth-child(1) {
                 grid-area: b;

package/scss/components/notification/_index.scss

@@ -19,6 +19,11 @@
     border-radius: var(--lumx-border-radius);
     transition: opacity $lumx-notification-transition-duration;
 
+    @media (prefers-reduced-motion: reduce) {
+        animation: none;
+        transition: none;
+    }
+
     &--is-hidden {
         opacity: 0;
     }

package/scss/components/progress-tracker/_index.scss

@@ -27,6 +27,10 @@
         background-color: lumx-color-variant('primary', 'N');
         transform-origin: left;
         transition: transform $lumx-progress-tracker-transition-duration;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition: none;
+        }
     }
 }
 

package/scss/components/slideshow/_index.scss

@@ -28,6 +28,10 @@
         display: flex;
         transition: transform $lumx-slideshow-transition-duration;
 
+        @media (prefers-reduced-motion: reduce) {
+            transition: none;
+        }
+
         #{$self}--fill-height & {
             min-height: 0;
             flex: 1 1 auto;
@@ -82,6 +86,11 @@
         align-items: center;
         transition: transform $lumx-slideshow-transition-duration;
         padding: 4px 0;
+
+        @media (prefers-reduced-motion: reduce) {
+            transition: none;
+        }
+
     }
 
     &__pagination-item {
@@ -101,6 +110,10 @@
         transition: transform $lumx-slideshow-transition-duration;
         user-select: none;
 
+        @media (prefers-reduced-motion: reduce) {
+            transition: none;
+        }
+
         #{$self}--theme-light & {
             background-color: lumx-color-variant('dark', 'L4');