@lumx/core 2.1.7 → 2.1.9-alpha-thumbnail2
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/css/design-tokens.css +27 -82
- package/js/constants/design-tokens.js +21 -21
- package/js/constants/design-tokens.min.js +1 -1
- package/js/constants/design-tokens.min.js.map +1 -1
- package/js/constants/design-tokens.ts +21 -21
- package/js/custom-colors.min.js.map +1 -1
- package/js/date-picker.min.js.map +1 -1
- package/js/utils.min.js.map +1 -1
- package/lumx.css +1 -1
- package/lumx.min.css +1 -1
- package/package.json +2 -2
- package/scss/_components.scss +1 -0
- package/scss/_design-tokens.scss +27 -87
- package/scss/components/chip/_index.scss +0 -6
- package/scss/components/flag/_index.scss +3 -8
- package/scss/components/icon/_mixins.scss +1 -5
- package/scss/components/list/_mixins.scss +1 -2
- package/scss/components/side-navigation/_mixins.scss +1 -0
- package/scss/components/skeleton/_index.scss +4 -7
- package/scss/components/skeleton/_mixins.scss +10 -0
- package/scss/components/thumbnail/_index.scss +114 -43
- package/scss/components/thumbnail/_variables.scss +1 -1
- package/scss/components/uploader/_index.scss +2 -2
- package/scss/core/state/_mixins.scss +4 -20
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.1.
|
|
45
|
+
"version": "2.1.9-alpha-thumbnail2",
|
|
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": "
|
|
85
|
+
"gitHead": "105e60082267526f6ac979d2c2d725417a1d6190"
|
|
86
86
|
}
|
package/scss/_components.scss
CHANGED
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
@import './components/radio-button/mixins';
|
|
24
24
|
@import './components/select/mixins';
|
|
25
25
|
@import './components/side-navigation/mixins';
|
|
26
|
+
@import './components/skeleton/mixins';
|
|
26
27
|
@import './components/slideshow/variables';
|
|
27
28
|
@import './components/switch/mixins';
|
|
28
29
|
@import './components/table/mixins';
|
package/scss/_design-tokens.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Do not edit directly
|
|
3
|
-
* Generated on Tue,
|
|
3
|
+
* Generated on Tue, 19 Oct 2021 08:35:24 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
$lumx-button-height: 36px !default;
|
|
@@ -47,12 +47,7 @@ $lumx-button-emphasis-medium-state-default-theme-light-background-color: rgba(
|
|
|
47
47
|
0,
|
|
48
48
|
0.12
|
|
49
49
|
) !default; // Base dark color with 12% opacity
|
|
50
|
-
$lumx-button-emphasis-medium-state-default-theme-light-color: rgba(
|
|
51
|
-
0,
|
|
52
|
-
0,
|
|
53
|
-
0,
|
|
54
|
-
0.7
|
|
55
|
-
) !default; // Base dark color with 70% opacity
|
|
50
|
+
$lumx-button-emphasis-medium-state-default-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
|
|
56
51
|
$lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent !default;
|
|
57
52
|
$lumx-button-emphasis-medium-state-default-theme-dark-background-color: rgba(
|
|
58
53
|
255,
|
|
@@ -70,12 +65,7 @@ $lumx-button-emphasis-medium-state-hover-theme-light-background-color: rgba(
|
|
|
70
65
|
0,
|
|
71
66
|
0.2
|
|
72
67
|
) !default; // Base dark color with 20% opacity
|
|
73
|
-
$lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(
|
|
74
|
-
0,
|
|
75
|
-
0,
|
|
76
|
-
0,
|
|
77
|
-
0.7
|
|
78
|
-
) !default; // Base dark color with 70% opacity
|
|
68
|
+
$lumx-button-emphasis-medium-state-hover-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
|
|
79
69
|
$lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent !default;
|
|
80
70
|
$lumx-button-emphasis-medium-state-hover-theme-dark-background-color: rgba(
|
|
81
71
|
255,
|
|
@@ -93,12 +83,7 @@ $lumx-button-emphasis-medium-state-active-theme-light-background-color: rgba(
|
|
|
93
83
|
0,
|
|
94
84
|
0.38
|
|
95
85
|
) !default; // Base dark color with 38% opacity
|
|
96
|
-
$lumx-button-emphasis-medium-state-active-theme-light-color: rgba(
|
|
97
|
-
0,
|
|
98
|
-
0,
|
|
99
|
-
0,
|
|
100
|
-
0.7
|
|
101
|
-
) !default; // Base dark color with 70% opacity
|
|
86
|
+
$lumx-button-emphasis-medium-state-active-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
|
|
102
87
|
$lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent !default;
|
|
103
88
|
$lumx-button-emphasis-medium-state-active-theme-dark-background-color: rgba(
|
|
104
89
|
255,
|
|
@@ -111,12 +96,7 @@ $lumx-button-emphasis-medium-state-active-theme-dark-border-color: transparent !
|
|
|
111
96
|
$lumx-button-emphasis-low-state-default-padding-horizontal: 8px !default;
|
|
112
97
|
$lumx-button-emphasis-low-state-default-border-width: 0 !default;
|
|
113
98
|
$lumx-button-emphasis-low-state-default-theme-light-background-color: transparent !default;
|
|
114
|
-
$lumx-button-emphasis-low-state-default-theme-light-color: rgba(
|
|
115
|
-
0,
|
|
116
|
-
0,
|
|
117
|
-
0,
|
|
118
|
-
0.7
|
|
119
|
-
) !default; // Base dark color with 70% opacity
|
|
99
|
+
$lumx-button-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
|
|
120
100
|
$lumx-button-emphasis-low-state-default-theme-light-border-color: transparent !default;
|
|
121
101
|
$lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent !default;
|
|
122
102
|
$lumx-button-emphasis-low-state-default-theme-dark-color: #fff !default; // Neutral light color
|
|
@@ -129,12 +109,7 @@ $lumx-button-emphasis-low-state-hover-theme-light-background-color: rgba(
|
|
|
129
109
|
0,
|
|
130
110
|
0.12
|
|
131
111
|
) !default; // Base dark color with 12% opacity
|
|
132
|
-
$lumx-button-emphasis-low-state-hover-theme-light-color: rgba(
|
|
133
|
-
0,
|
|
134
|
-
0,
|
|
135
|
-
0,
|
|
136
|
-
0.7
|
|
137
|
-
) !default; // Base dark color with 70% opacity
|
|
112
|
+
$lumx-button-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
|
|
138
113
|
$lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent !default;
|
|
139
114
|
$lumx-button-emphasis-low-state-hover-theme-dark-background-color: rgba(
|
|
140
115
|
255,
|
|
@@ -152,12 +127,7 @@ $lumx-button-emphasis-low-state-active-theme-light-background-color: rgba(
|
|
|
152
127
|
0,
|
|
153
128
|
0.2
|
|
154
129
|
) !default; // Base dark color with 20% opacity
|
|
155
|
-
$lumx-button-emphasis-low-state-active-theme-light-color: rgba(
|
|
156
|
-
0,
|
|
157
|
-
0,
|
|
158
|
-
0,
|
|
159
|
-
0.7
|
|
160
|
-
) !default; // Base dark color with 70% opacity
|
|
130
|
+
$lumx-button-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
|
|
161
131
|
$lumx-button-emphasis-low-state-active-theme-light-border-color: transparent !default;
|
|
162
132
|
$lumx-button-emphasis-low-state-active-theme-dark-background-color: rgba(
|
|
163
133
|
255,
|
|
@@ -259,8 +229,8 @@ $lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color: rgba(
|
|
|
259
229
|
0,
|
|
260
230
|
0,
|
|
261
231
|
0,
|
|
262
|
-
0.
|
|
263
|
-
) !default; //
|
|
232
|
+
0.87
|
|
233
|
+
) !default; // Neutral dark color
|
|
264
234
|
$lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: rgba(
|
|
265
235
|
0,
|
|
266
236
|
0,
|
|
@@ -272,8 +242,8 @@ $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color: rgba
|
|
|
272
242
|
0,
|
|
273
243
|
0,
|
|
274
244
|
0,
|
|
275
|
-
0.
|
|
276
|
-
) !default; //
|
|
245
|
+
0.87
|
|
246
|
+
) !default; // Neutral dark color
|
|
277
247
|
$lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent !default;
|
|
278
248
|
$lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: rgba(
|
|
279
249
|
255,
|
|
@@ -305,8 +275,8 @@ $lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color: rgba(
|
|
|
305
275
|
0,
|
|
306
276
|
0,
|
|
307
277
|
0,
|
|
308
|
-
0.
|
|
309
|
-
) !default; //
|
|
278
|
+
0.87
|
|
279
|
+
) !default; // Neutral dark color
|
|
310
280
|
$lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: rgba(
|
|
311
281
|
0,
|
|
312
282
|
0,
|
|
@@ -323,8 +293,8 @@ $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-color: rgba(
|
|
|
323
293
|
0,
|
|
324
294
|
0,
|
|
325
295
|
0,
|
|
326
|
-
0.
|
|
327
|
-
) !default; //
|
|
296
|
+
0.87
|
|
297
|
+
) !default; // Neutral dark color
|
|
328
298
|
$lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: rgba(
|
|
329
299
|
255,
|
|
330
300
|
255,
|
|
@@ -366,8 +336,8 @@ $lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color: rgba(
|
|
|
366
336
|
0,
|
|
367
337
|
0,
|
|
368
338
|
0,
|
|
369
|
-
0.
|
|
370
|
-
) !default; //
|
|
339
|
+
0.87
|
|
340
|
+
) !default; // Neutral dark color
|
|
371
341
|
$lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: rgba(
|
|
372
342
|
0,
|
|
373
343
|
0,
|
|
@@ -384,8 +354,8 @@ $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color: rgba(
|
|
|
384
354
|
0,
|
|
385
355
|
0,
|
|
386
356
|
0,
|
|
387
|
-
0.
|
|
388
|
-
) !default; //
|
|
357
|
+
0.87
|
|
358
|
+
) !default; // Neutral dark color
|
|
389
359
|
$lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: rgba(
|
|
390
360
|
255,
|
|
391
361
|
255,
|
|
@@ -510,12 +480,7 @@ $lumx-tabs-link-emphasis-low-state-default-border-right-width: 0 !default;
|
|
|
510
480
|
$lumx-tabs-link-emphasis-low-state-default-border-bottom-width: 2px !default;
|
|
511
481
|
$lumx-tabs-link-emphasis-low-state-default-border-left-width: 0 !default;
|
|
512
482
|
$lumx-tabs-link-emphasis-low-state-default-theme-light-background-color: transparent !default;
|
|
513
|
-
$lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(
|
|
514
|
-
0,
|
|
515
|
-
0,
|
|
516
|
-
0,
|
|
517
|
-
0.7
|
|
518
|
-
) !default; // Base dark color with 70% opacity
|
|
483
|
+
$lumx-tabs-link-emphasis-low-state-default-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
|
|
519
484
|
$lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: rgba(
|
|
520
485
|
0,
|
|
521
486
|
0,
|
|
@@ -540,12 +505,7 @@ $lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color: rgba(
|
|
|
540
505
|
0,
|
|
541
506
|
0.12
|
|
542
507
|
) !default; // Base dark color with 12% opacity
|
|
543
|
-
$lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(
|
|
544
|
-
0,
|
|
545
|
-
0,
|
|
546
|
-
0,
|
|
547
|
-
0.7
|
|
548
|
-
) !default; // Base dark color with 70% opacity
|
|
508
|
+
$lumx-tabs-link-emphasis-low-state-hover-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
|
|
549
509
|
$lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: rgba(
|
|
550
510
|
0,
|
|
551
511
|
0,
|
|
@@ -575,12 +535,7 @@ $lumx-tabs-link-emphasis-low-state-active-theme-light-background-color: rgba(
|
|
|
575
535
|
0,
|
|
576
536
|
0.2
|
|
577
537
|
) !default; // Base dark color with 20% opacity
|
|
578
|
-
$lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(
|
|
579
|
-
0,
|
|
580
|
-
0,
|
|
581
|
-
0,
|
|
582
|
-
0.7
|
|
583
|
-
) !default; // Base dark color with 70% opacity
|
|
538
|
+
$lumx-tabs-link-emphasis-low-state-active-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
|
|
584
539
|
$lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: rgba(
|
|
585
540
|
0,
|
|
586
541
|
0,
|
|
@@ -605,12 +560,7 @@ $lumx-tabs-link-emphasis-selected-state-default-border-right-width: 0 !default;
|
|
|
605
560
|
$lumx-tabs-link-emphasis-selected-state-default-border-bottom-width: 2px !default;
|
|
606
561
|
$lumx-tabs-link-emphasis-selected-state-default-border-left-width: 0 !default;
|
|
607
562
|
$lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color: transparent !default;
|
|
608
|
-
$lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(
|
|
609
|
-
0,
|
|
610
|
-
0,
|
|
611
|
-
0,
|
|
612
|
-
0.7
|
|
613
|
-
) !default; // Base dark color with 70% opacity
|
|
563
|
+
$lumx-tabs-link-emphasis-selected-state-default-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
|
|
614
564
|
$lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
|
|
615
565
|
$lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent !default;
|
|
616
566
|
$lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: #fff !default; // Neutral light color
|
|
@@ -625,12 +575,7 @@ $lumx-tabs-link-emphasis-selected-state-hover-theme-light-background-color: rgba
|
|
|
625
575
|
0,
|
|
626
576
|
0.12
|
|
627
577
|
) !default; // Base dark color with 12% opacity
|
|
628
|
-
$lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(
|
|
629
|
-
0,
|
|
630
|
-
0,
|
|
631
|
-
0,
|
|
632
|
-
0.7
|
|
633
|
-
) !default; // Base dark color with 70% opacity
|
|
578
|
+
$lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
|
|
634
579
|
$lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
|
|
635
580
|
$lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: rgba(
|
|
636
581
|
255,
|
|
@@ -650,12 +595,7 @@ $lumx-tabs-link-emphasis-selected-state-active-theme-light-background-color: rgb
|
|
|
650
595
|
0,
|
|
651
596
|
0.2
|
|
652
597
|
) !default; // Base dark color with 20% opacity
|
|
653
|
-
$lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(
|
|
654
|
-
0,
|
|
655
|
-
0,
|
|
656
|
-
0,
|
|
657
|
-
0.7
|
|
658
|
-
) !default; // Base dark color with 70% opacity
|
|
598
|
+
$lumx-tabs-link-emphasis-selected-state-active-theme-light-color: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
|
|
659
599
|
$lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
|
|
660
600
|
$lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: rgba(
|
|
661
601
|
255,
|
|
@@ -790,7 +730,7 @@ $lumx-text-field-state-focus-theme-dark-input-placeholder-color: rgba(
|
|
|
790
730
|
) !default; // Base light color with 80% opacity
|
|
791
731
|
$lumx-border-radius: 4px !default;
|
|
792
732
|
$lumx-color-dark-N: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
|
|
793
|
-
$lumx-color-dark-L1: rgba(0, 0, 0, 0.
|
|
733
|
+
$lumx-color-dark-L1: rgba(0, 0, 0, 0.8) !default; // Base dark color with 80% opacity
|
|
794
734
|
$lumx-color-dark-L2: rgba(0, 0, 0, 0.54) !default; // Base dark color with 54% opacity
|
|
795
735
|
$lumx-color-dark-L3: rgba(0, 0, 0, 0.38) !default; // Base dark color with 38% opacity
|
|
796
736
|
$lumx-color-dark-L4: rgba(0, 0, 0, 0.2) !default; // Base dark color with 20% opacity
|
|
@@ -874,7 +814,7 @@ $lumx-color-accent-L4: rgba(76, 175, 80, 0.2) !default; // Base green color with
|
|
|
874
814
|
$lumx-color-accent-L5: rgba(76, 175, 80, 0.1) !default; // Base green color with 10% opacity
|
|
875
815
|
$lumx-color-accent-L6: rgba(76, 175, 80, 0.05) !default; // Base green color with 5% opacity
|
|
876
816
|
$lumx-color-black-N: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
|
|
877
|
-
$lumx-color-black-L1: rgba(0, 0, 0, 0.
|
|
817
|
+
$lumx-color-black-L1: rgba(0, 0, 0, 0.8) !default; // Base dark color with 80% opacity
|
|
878
818
|
$lumx-color-black-L2: rgba(0, 0, 0, 0.54) !default; // Base dark color with 54% opacity
|
|
879
819
|
$lumx-color-black-L3: rgba(0, 0, 0, 0.38) !default; // Base dark color with 38% opacity
|
|
880
820
|
$lumx-color-black-L4: rgba(0, 0, 0, 0.2) !default; // Base dark color with 20% opacity
|
|
@@ -82,12 +82,6 @@
|
|
|
82
82
|
&.#{$lumx-base-prefix}-chip--is-highlighted {
|
|
83
83
|
@include lumx-state(lumx-base-const('state', 'FOCUS'), lumx-base-const('emphasis', 'MEDIUM'), $key);
|
|
84
84
|
}
|
|
85
|
-
|
|
86
|
-
@if $key == 'dark' {
|
|
87
|
-
.#{$lumx-base-prefix}-chip__label {
|
|
88
|
-
color: lumx-color-variant('dark', 'L1');
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
85
|
}
|
|
92
86
|
}
|
|
93
87
|
|
|
@@ -25,14 +25,9 @@
|
|
|
25
25
|
@each $key, $color in $lumx-color-palette {
|
|
26
26
|
.#{$lumx-base-prefix}-flag--color-#{$key} {
|
|
27
27
|
border: 2px solid lumx-color-variant($key, 'L4');
|
|
28
|
+
}
|
|
28
29
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
@if $key == 'dark' {
|
|
32
|
-
color: lumx-color-variant($key, 'L1');
|
|
33
|
-
} @else {
|
|
34
|
-
color: lumx-color-variant($key, 'D2');
|
|
35
|
-
}
|
|
36
|
-
}
|
|
30
|
+
.#{$lumx-base-prefix}-flag--color-#{$key} .#{$lumx-base-prefix}-flag__label {
|
|
31
|
+
color: lumx-color-variant($key, 'D2');
|
|
37
32
|
}
|
|
38
33
|
}
|
|
@@ -16,10 +16,6 @@
|
|
|
16
16
|
background-color: lumx-color-variant($color, 'L5');
|
|
17
17
|
color: lumx-color-variant($color, 'L2');
|
|
18
18
|
} @else if $has-shape == false {
|
|
19
|
-
|
|
20
|
-
color: lumx-color-variant('dark', 'L1');
|
|
21
|
-
} @else {
|
|
22
|
-
color: lumx-color-variant($color, 'N');
|
|
23
|
-
}
|
|
19
|
+
color: lumx-color-variant($color, 'N');
|
|
24
20
|
}
|
|
25
21
|
}
|
|
@@ -18,15 +18,14 @@
|
|
|
18
18
|
========================================================================== */
|
|
19
19
|
|
|
20
20
|
.#{$lumx-base-prefix}-skeleton-circle {
|
|
21
|
-
animation: skeleton-loading 1s ease-in-out 0s infinite;
|
|
22
21
|
border-radius: 50%;
|
|
23
22
|
|
|
24
23
|
&--theme-light {
|
|
25
|
-
|
|
24
|
+
@include lumx-skeleton('light');
|
|
26
25
|
}
|
|
27
26
|
|
|
28
27
|
&--theme-dark {
|
|
29
|
-
|
|
28
|
+
@include lumx-skeleton('dark');
|
|
30
29
|
}
|
|
31
30
|
}
|
|
32
31
|
|
|
@@ -47,18 +46,16 @@
|
|
|
47
46
|
========================================================================== */
|
|
48
47
|
|
|
49
48
|
.#{$lumx-base-prefix}-skeleton-rectangle {
|
|
50
|
-
animation: skeleton-loading 1s ease-in-out 0s infinite;
|
|
51
|
-
|
|
52
49
|
&--variant-rounded {
|
|
53
50
|
border-radius: var(--lumx-border-radius);
|
|
54
51
|
}
|
|
55
52
|
|
|
56
53
|
&--theme-light {
|
|
57
|
-
|
|
54
|
+
@include lumx-skeleton('light');
|
|
58
55
|
}
|
|
59
56
|
|
|
60
57
|
&--theme-dark {
|
|
61
|
-
|
|
58
|
+
@include lumx-skeleton('dark');
|
|
62
59
|
}
|
|
63
60
|
}
|
|
64
61
|
|
|
@@ -12,45 +12,21 @@
|
|
|
12
12
|
background: none;
|
|
13
13
|
outline: none;
|
|
14
14
|
|
|
15
|
-
&--fill-height,
|
|
16
|
-
&--fill-height &__background {
|
|
17
|
-
display: flex;
|
|
18
|
-
/* Safari hack to force the image ratio */
|
|
19
|
-
height: fit-content;
|
|
20
|
-
min-height: 100%;
|
|
21
|
-
flex: 1 1 auto;
|
|
22
|
-
flex-direction: column;
|
|
23
|
-
justify-content: center;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
&--variant-rounded {
|
|
27
|
-
border-radius: var(--lumx-border-radius);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
15
|
&__background {
|
|
31
|
-
|
|
32
|
-
width: 100%;
|
|
16
|
+
overflow: hidden;
|
|
33
17
|
background-position: center;
|
|
34
18
|
background-repeat: no-repeat;
|
|
35
19
|
background-size: cover;
|
|
36
|
-
|
|
37
|
-
#{$self}--variant-rounded & {
|
|
38
|
-
border-radius: var(--lumx-border-radius);
|
|
39
|
-
}
|
|
40
20
|
}
|
|
41
21
|
|
|
42
|
-
&
|
|
43
|
-
|
|
22
|
+
&__image {
|
|
23
|
+
display: block;
|
|
24
|
+
// Make sure
|
|
25
|
+
overflow: hidden;
|
|
44
26
|
}
|
|
45
27
|
|
|
46
28
|
&__background,
|
|
47
29
|
&__image {
|
|
48
|
-
display: block;
|
|
49
|
-
max-width: 100%;
|
|
50
|
-
/* IE11 hack related to a bug with IE flexbox implementation (cf. https://stackoverflow.com/a/54054592) */
|
|
51
|
-
min-height: 1px;
|
|
52
|
-
max-height: 100%;
|
|
53
|
-
|
|
54
30
|
#{$self}--align-left & {
|
|
55
31
|
margin-right: auto;
|
|
56
32
|
}
|
|
@@ -62,16 +38,6 @@
|
|
|
62
38
|
#{$self}--align-right & {
|
|
63
39
|
margin-left: auto;
|
|
64
40
|
}
|
|
65
|
-
|
|
66
|
-
#{$self}--variant-rounded & {
|
|
67
|
-
border-radius: var(--lumx-border-radius);
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
&__fallback {
|
|
72
|
-
width: fit-content;
|
|
73
|
-
/* Center fallback icon when using fill-height prop */
|
|
74
|
-
margin: 0 auto;
|
|
75
41
|
}
|
|
76
42
|
|
|
77
43
|
&__badge {
|
|
@@ -79,24 +45,114 @@
|
|
|
79
45
|
right: -$lumx-spacing-unit / 2;
|
|
80
46
|
bottom: -$lumx-spacing-unit / 2;
|
|
81
47
|
}
|
|
48
|
+
|
|
49
|
+
/* Rounded variant */
|
|
50
|
+
&--variant-rounded &__background {
|
|
51
|
+
border-radius: var(--lumx-border-radius);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&--fill-height,
|
|
55
|
+
&--fill-height &__background,
|
|
56
|
+
&--fill-height &__image {
|
|
57
|
+
flex: 1 1 auto;
|
|
58
|
+
height: 100%;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* Thumbnail original ratio */
|
|
62
|
+
&--aspect-ratio-original {
|
|
63
|
+
&:not(#{$self}--fill-height) {
|
|
64
|
+
width: fit-content;
|
|
65
|
+
height: fit-content;
|
|
66
|
+
|
|
67
|
+
#{$self}__image:not(#{$self}__image--is-loading)
|
|
68
|
+
{
|
|
69
|
+
width: fit-content;
|
|
70
|
+
height: fit-content;
|
|
71
|
+
max-width: 100%;
|
|
72
|
+
max-height: 100%;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&#{$self}--fill-height {
|
|
77
|
+
#{$self}__background,
|
|
78
|
+
#{$self}__image
|
|
79
|
+
{
|
|
80
|
+
max-height: unset;
|
|
81
|
+
max-width: unset;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Thumbnail error fallback */
|
|
87
|
+
&--has-error {
|
|
88
|
+
#{$self}__background {
|
|
89
|
+
display: grid;
|
|
90
|
+
|
|
91
|
+
// Stack image and fallback on top of each other
|
|
92
|
+
& > * {
|
|
93
|
+
grid-column: 1;
|
|
94
|
+
grid-row: 1;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
#{$self}__fallback {
|
|
99
|
+
display: flex;
|
|
100
|
+
align-items: center;
|
|
101
|
+
justify-content: center;
|
|
102
|
+
background-color: lumx-color-variant('dark', 'L6');
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
82
106
|
}
|
|
83
107
|
|
|
84
108
|
/* Thumbnail sizes
|
|
85
109
|
========================================================================== */
|
|
86
110
|
|
|
87
111
|
@each $key, $size in $lumx-sizes {
|
|
88
|
-
.#{$lumx-base-prefix}-thumbnail--size-#{$key} {
|
|
112
|
+
.#{$lumx-base-prefix}-thumbnail--size-#{$key}:not(.#{$lumx-base-prefix}-thumbnail--fill-height) {
|
|
89
113
|
width: $size;
|
|
114
|
+
|
|
115
|
+
.#{$lumx-base-prefix}-thumbnail__image {
|
|
116
|
+
width: 100%;
|
|
117
|
+
}
|
|
90
118
|
}
|
|
91
119
|
}
|
|
92
120
|
|
|
93
121
|
/* Thumbnail aspect ratio
|
|
94
122
|
========================================================================== */
|
|
95
123
|
|
|
124
|
+
.#{$lumx-base-prefix}-thumbnail:not(.#{$lumx-base-prefix}-thumbnail--aspect-ratio-original) {
|
|
125
|
+
&::before {
|
|
126
|
+
display: block;
|
|
127
|
+
content: "";
|
|
128
|
+
//width: 100%;
|
|
129
|
+
//float: left;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/*&::after {
|
|
133
|
+
display: block;
|
|
134
|
+
content: "";
|
|
135
|
+
clear: both;
|
|
136
|
+
}*/
|
|
137
|
+
|
|
138
|
+
.#{$lumx-base-prefix}-thumbnail__background {
|
|
139
|
+
position: absolute;
|
|
140
|
+
inset: 0;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.#{$lumx-base-prefix}-thumbnail__image {
|
|
144
|
+
width: 100%;
|
|
145
|
+
height: 100%;
|
|
146
|
+
object-fit: cover;
|
|
147
|
+
object-position: center;
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
96
151
|
@each $key, $aspect-ratio in $lumx-thumbnail-aspect-ratio {
|
|
97
|
-
.#{$lumx-base-prefix}-thumbnail--aspect-ratio-#{$key}
|
|
98
|
-
|
|
99
|
-
|
|
152
|
+
.#{$lumx-base-prefix}-thumbnail--aspect-ratio-#{$key} {
|
|
153
|
+
&::before {
|
|
154
|
+
padding-top: $aspect-ratio;
|
|
155
|
+
}
|
|
100
156
|
}
|
|
101
157
|
}
|
|
102
158
|
|
|
@@ -120,34 +176,49 @@
|
|
|
120
176
|
pointer-events: none;
|
|
121
177
|
}
|
|
122
178
|
|
|
179
|
+
/* Hover */
|
|
123
180
|
&:hover::after,
|
|
124
181
|
&:focus::after {
|
|
125
182
|
@include lumx-state(lumx-base-const('state', 'HOVER'), lumx-base-const('emphasis', 'LOW'), 'dark');
|
|
126
183
|
}
|
|
127
184
|
|
|
185
|
+
/* Active */
|
|
128
186
|
&:active::after {
|
|
129
187
|
@include lumx-state(lumx-base-const('state', 'ACTIVE'), lumx-base-const('emphasis', 'LOW'), 'dark');
|
|
130
188
|
}
|
|
131
189
|
}
|
|
132
190
|
|
|
191
|
+
/* Focused (variant rounded) */
|
|
133
192
|
.#{$lumx-base-prefix}-thumbnail--variant-rounded.#{$lumx-base-prefix}-thumbnail--is-clickable {
|
|
134
193
|
&[data-focus-visible-added]::after {
|
|
135
194
|
border-radius: var(--lumx-border-radius);
|
|
136
195
|
}
|
|
137
196
|
}
|
|
138
197
|
|
|
198
|
+
/* Focused (light theme) */
|
|
139
199
|
.#{$lumx-base-prefix}-thumbnail--theme-light.#{$lumx-base-prefix}-thumbnail--is-clickable {
|
|
140
200
|
&[data-focus-visible-added]::after {
|
|
141
201
|
@include lumx-state(lumx-base-const('state', 'FOCUS'), lumx-base-const('emphasis', 'LOW'), 'dark');
|
|
142
202
|
}
|
|
143
203
|
}
|
|
144
204
|
|
|
205
|
+
/* Focused (dark theme) */
|
|
145
206
|
.#{$lumx-base-prefix}-thumbnail--theme-dark.#{$lumx-base-prefix}-thumbnail--is-clickable {
|
|
146
207
|
&[data-focus-visible-added]::after {
|
|
147
208
|
@include lumx-state(lumx-base-const('state', 'FOCUS'), lumx-base-const('emphasis', 'LOW'), 'light');
|
|
148
209
|
}
|
|
149
210
|
}
|
|
150
211
|
|
|
212
|
+
/* Loading */
|
|
213
|
+
.#{$lumx-base-prefix}-thumbnail--is-loading {
|
|
214
|
+
&.#{$lumx-base-prefix}-thumbnail--theme-dark .#{$lumx-base-prefix}-thumbnail__background {
|
|
215
|
+
@include lumx-skeleton('dark');
|
|
216
|
+
}
|
|
217
|
+
&.#{$lumx-base-prefix}-thumbnail--theme-light .#{$lumx-base-prefix}-thumbnail__background {
|
|
218
|
+
@include lumx-skeleton('light');
|
|
219
|
+
}
|
|
220
|
+
}
|
|
221
|
+
|
|
151
222
|
/* Thumbnail badge mask
|
|
152
223
|
========================================================================== */
|
|
153
224
|
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
margin-bottom: $lumx-spacing-unit;
|
|
74
74
|
|
|
75
75
|
#{$self}--theme-light & {
|
|
76
|
-
color: lumx-color-variant('dark', '
|
|
76
|
+
color: lumx-color-variant('dark', 'N');
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
#{$self}--theme-dark & {
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
text-align: center;
|
|
88
88
|
|
|
89
89
|
#{$self}--theme-light & {
|
|
90
|
-
color: lumx-color-variant('dark', '
|
|
90
|
+
color: lumx-color-variant('dark', 'N');
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
#{$self}--theme-dark & {
|