@lumx/core 2.2.12 → 2.2.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -42,7 +42,7 @@
42
42
  "version": "yarn version-changelog ../../CHANGELOG.md && yarn changelog-verify ../../CHANGELOG.md && git add ../../CHANGELOG.md"
43
43
  },
44
44
  "sideEffects": false,
45
- "version": "2.2.12",
45
+ "version": "2.2.15",
46
46
  "devDependencies": {
47
47
  "@babel/core": "^7.8.3",
48
48
  "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -82,5 +82,5 @@
82
82
  "moment": "^2.24.0",
83
83
  "moment-range": "^4.0.2"
84
84
  },
85
- "gitHead": "6f3e8a585aef16aa70325d466e77d9cbd3a8ff1e"
85
+ "gitHead": "985be86008a58fb87ebd36c5cee48b43268ebc10"
86
86
  }
@@ -15,6 +15,10 @@
15
15
  opacity: 1;
16
16
  transition: opacity $lumx-dialog-transition-duration;
17
17
 
18
+ @media (prefers-reduced-motion: reduce) {
19
+ transition: none;
20
+ }
21
+
18
22
  &--is-shown {
19
23
  display: block;
20
24
  }
@@ -32,6 +36,10 @@
32
36
  left: 0;
33
37
  animation: lumx-dialog-overlay-show $lumx-dialog-transition-duration;
34
38
  background-color: lumx-color-variant('dark', 'L1');
39
+
40
+ @media (prefers-reduced-motion: reduce) {
41
+ animation: none;
42
+ }
35
43
  }
36
44
 
37
45
  &__container {
@@ -41,6 +49,10 @@
41
49
  flex-direction: column;
42
50
  animation: lumx-dialog-show $lumx-dialog-transition-duration;
43
51
  transform: translateY(0);
52
+
53
+ @media (prefers-reduced-motion: reduce) {
54
+ animation: none;
55
+ }
44
56
  }
45
57
 
46
58
  &__wrapper {
@@ -69,6 +69,10 @@
69
69
  overflow: hidden;
70
70
  transition: max-height $lumx-expansion-panel-transition-duration;
71
71
 
72
+ @media (prefers-reduced-motion: reduce) {
73
+ transition: none;
74
+ }
75
+
72
76
  #{$self}--is-close & {
73
77
  max-height: 0 !important;
74
78
  }
@@ -16,6 +16,11 @@
16
16
  opacity: 1;
17
17
  transition: opacity $lumx-lightbox-transition-duration;
18
18
 
19
+ @media (prefers-reduced-motion: reduce) {
20
+ animation: none;
21
+ transition: none;
22
+ }
23
+
19
24
  &--is-shown {
20
25
  display: block;
21
26
  }
@@ -16,8 +16,6 @@
16
16
  bottom: -1px;
17
17
  left: -1px;
18
18
  display: grid;
19
- /* Safari hack to make the mosaic fit the height of the parent */
20
- height: stretch;
21
19
 
22
20
  #{$self}--has-1-thumbnail & {
23
21
  grid-template-areas: 'b';
@@ -19,6 +19,11 @@
19
19
  border-radius: var(--lumx-border-radius);
20
20
  transition: opacity $lumx-notification-transition-duration;
21
21
 
22
+ @media (prefers-reduced-motion: reduce) {
23
+ animation: none;
24
+ transition: none;
25
+ }
26
+
22
27
  &--is-hidden {
23
28
  opacity: 0;
24
29
  }
@@ -27,6 +27,10 @@
27
27
  background-color: lumx-color-variant('primary', 'N');
28
28
  transform-origin: left;
29
29
  transition: transform $lumx-progress-tracker-transition-duration;
30
+
31
+ @media (prefers-reduced-motion: reduce) {
32
+ transition: none;
33
+ }
30
34
  }
31
35
  }
32
36
 
@@ -28,6 +28,10 @@
28
28
  display: flex;
29
29
  transition: transform $lumx-slideshow-transition-duration;
30
30
 
31
+ @media (prefers-reduced-motion: reduce) {
32
+ transition: none;
33
+ }
34
+
31
35
  #{$self}--fill-height & {
32
36
  min-height: 0;
33
37
  flex: 1 1 auto;
@@ -82,6 +86,11 @@
82
86
  align-items: center;
83
87
  transition: transform $lumx-slideshow-transition-duration;
84
88
  padding: 4px 0;
89
+
90
+ @media (prefers-reduced-motion: reduce) {
91
+ transition: none;
92
+ }
93
+
85
94
  }
86
95
 
87
96
  &__pagination-item {
@@ -101,6 +110,10 @@
101
110
  transition: transform $lumx-slideshow-transition-duration;
102
111
  user-select: none;
103
112
 
113
+ @media (prefers-reduced-motion: reduce) {
114
+ transition: none;
115
+ }
116
+
104
117
  #{$self}--theme-light & {
105
118
  background-color: lumx-color-variant('dark', 'L4');
106
119
 
@@ -160,7 +160,7 @@
160
160
  flex: 1 1 auto;
161
161
  flex-wrap: wrap;
162
162
  align-items: center;
163
- margin: calc((var(--lumx-text-field-input-min-height) - (var(--lumx-size-s) - 6px)) / 2) 0;
163
+ margin: calc((var(--lumx-text-field-input-min-height) - var(--lumx-size-s) - 6px) / 2) 0;
164
164
 
165
165
  .#{$lumx-base-prefix}-chip {
166
166
  margin: $lumx-chip-group-spacing 0;
@@ -110,8 +110,10 @@
110
110
  ========================================================================== */
111
111
 
112
112
  .#{$lumx-base-prefix}-thumbnail--is-clickable {
113
+ &:not(.#{$lumx-base-prefix}-thumbnail--fill-height) {
114
+ display: block;
115
+ }
113
116
  position: relative;
114
- display: block;
115
117
  cursor: pointer;
116
118
 
117
119
  &::after {