@brightspace-ui/core 3.229.0 → 3.230.0
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.
|
@@ -2,25 +2,43 @@ import '../colors/colors.js';
|
|
|
2
2
|
import { css } from 'lit';
|
|
3
3
|
import { dedupeMixin } from '@open-wc/dedupe-mixin';
|
|
4
4
|
import { EventSubscriberController } from '../../controllers/subscriber/subscriberControllers.js';
|
|
5
|
+
import { svgToCSS } from '../../helpers/svg-to-css.js';
|
|
5
6
|
|
|
6
7
|
// DE50056: starting in Safari 16, the pulsing animation causes FACE
|
|
7
8
|
// (and possibly elsewhere) to render a blank page
|
|
8
9
|
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
|
|
9
10
|
const animation = isSafari ? css`none` : css`loadingPulse 1.8s linear infinite`;
|
|
10
11
|
|
|
12
|
+
const p2Mask = svgToCSS(`<svg xmlns="http://www.w3.org/2000/svg">
|
|
13
|
+
<rect y="11%" width="100%" height="27%" rx="4"/>
|
|
14
|
+
<rect y="61%" width="90%" height="27%" rx="4"/>
|
|
15
|
+
</svg>`);
|
|
16
|
+
|
|
17
|
+
const p3Mask = svgToCSS(`<svg xmlns="http://www.w3.org/2000/svg">
|
|
18
|
+
<rect y="7%" width="100%" height="18%" rx="4"/>
|
|
19
|
+
<rect y="40%" width="100%" height="18%" rx="4"/>
|
|
20
|
+
<rect y="74%" width="90%" height="18%" rx="4"/>
|
|
21
|
+
</svg>`);
|
|
22
|
+
|
|
23
|
+
const p5Mask = svgToCSS(`<svg xmlns="http://www.w3.org/2000/svg">
|
|
24
|
+
<rect y="4%" width="100%" height="11%" rx="4"/>
|
|
25
|
+
<rect y="24%" width="100%" height="11%" rx="4"/>
|
|
26
|
+
<rect y="44%" width="100%" height="11%" rx="4"/>
|
|
27
|
+
<rect y="64%" width="100%" height="11%" rx="4"/>
|
|
28
|
+
<rect y="84%" width="90%" height="11%" rx="4"/>
|
|
29
|
+
</svg>`);
|
|
30
|
+
|
|
11
31
|
export const skeletonStyles = css`
|
|
12
32
|
@keyframes loadingPulse {
|
|
13
|
-
0% { background-color: var(--d2l-color-
|
|
14
|
-
50% { background-color: var(--d2l-color-
|
|
15
|
-
75% { background-color: var(--d2l-color-sylvite); }
|
|
16
|
-
100% { background-color: var(--d2l-color-sylvite); }
|
|
33
|
+
0%, 75%, 100% { background-color: var(--d2l-theme-background-color-interactive-faint-hover); }
|
|
34
|
+
50% { background-color: var(--d2l-theme-background-color-interactive-faint-default); }
|
|
17
35
|
}
|
|
18
36
|
:host([skeleton]) {
|
|
19
37
|
isolation: isolate;
|
|
20
38
|
}
|
|
21
39
|
:host([skeleton]) .d2l-skeletize::before {
|
|
22
40
|
animation: ${animation};
|
|
23
|
-
background-color: var(--d2l-color-
|
|
41
|
+
background-color: var(--d2l-theme-background-color-interactive-faint-hover);
|
|
24
42
|
border-radius: 0.2rem;
|
|
25
43
|
bottom: 0;
|
|
26
44
|
content: '';
|
|
@@ -31,6 +49,9 @@ export const skeletonStyles = css`
|
|
|
31
49
|
z-index: 997;
|
|
32
50
|
}
|
|
33
51
|
@media (prefers-reduced-motion: reduce) {
|
|
52
|
+
:host([skeleton]) .d2l-skeletize-paragraph-2::after,
|
|
53
|
+
:host([skeleton]) .d2l-skeletize-paragraph-3::after,
|
|
54
|
+
:host([skeleton]) .d2l-skeletize-paragraph-5::after,
|
|
34
55
|
:host([skeleton]) .d2l-skeletize::before {
|
|
35
56
|
animation: none;
|
|
36
57
|
}
|
|
@@ -38,7 +59,7 @@ export const skeletonStyles = css`
|
|
|
38
59
|
:host([skeleton]) .d2l-skeletize,
|
|
39
60
|
:host([skeleton]) .d2l-skeletize-container {
|
|
40
61
|
background-color: transparent;
|
|
41
|
-
border-color: var(--d2l-color-
|
|
62
|
+
border-color: var(--d2l-theme-background-color-interactive-faint-hover);
|
|
42
63
|
box-shadow: none;
|
|
43
64
|
color: transparent;
|
|
44
65
|
position: relative;
|
|
@@ -47,40 +68,38 @@ export const skeletonStyles = css`
|
|
|
47
68
|
:host([skeleton]) .d2l-skeletize-paragraph-3,
|
|
48
69
|
:host([skeleton]) .d2l-skeletize-paragraph-5 {
|
|
49
70
|
color: transparent;
|
|
71
|
+
position: relative;
|
|
72
|
+
}
|
|
73
|
+
:host([skeleton]) .d2l-skeletize-paragraph-2::after,
|
|
74
|
+
:host([skeleton]) .d2l-skeletize-paragraph-3::after,
|
|
75
|
+
:host([skeleton]) .d2l-skeletize-paragraph-5::after {
|
|
76
|
+
background-color: var(--d2l-theme-background-color-interactive-faint-hover);
|
|
77
|
+
content: '';
|
|
78
|
+
inset: 0;
|
|
79
|
+
position: absolute;
|
|
50
80
|
transform: var(--d2l-mirror-transform, ${document.dir === 'rtl' ? css`scale(-1, 1)` : css`none`}); /* stylelint-disable-line @stylistic/string-quotes, @stylistic/function-whitespace-after */
|
|
51
81
|
transform-origin: center;
|
|
82
|
+
animation: ${animation};
|
|
52
83
|
}
|
|
53
|
-
:host([skeleton]) .d2l-skeletize-paragraph-2 {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
@media (prefers-reduced-motion: reduce) {
|
|
57
|
-
:host([skeleton]) .d2l-skeletize-paragraph-2 {
|
|
58
|
-
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Crect%20y%3D%2211%25%22%20width%3D%22100%25%22%20height%3D%2227%25%22%20rx%3D%224%22%20fill%3D%22%23f1f5fb%22%2F%3E%0A%20%20%3Crect%20y%3D%2261%25%22%20width%3D%2290%25%22%20height%3D%2227%25%22%20rx%3D%224%22%20fill%3D%22%23f1f5fb%22%2F%3E%0A%3C%2Fsvg%3E');
|
|
59
|
-
}
|
|
84
|
+
:host([skeleton]) .d2l-skeletize-paragraph-2::after {
|
|
85
|
+
-webkit-mask-image: ${p2Mask};
|
|
86
|
+
mask-image: ${p2Mask};
|
|
60
87
|
}
|
|
61
88
|
:host([skeleton]) .d2l-skeletize-paragraph-2::before {
|
|
62
89
|
content: '\\A';
|
|
63
90
|
white-space: pre;
|
|
64
91
|
}
|
|
65
|
-
:host([skeleton]) .d2l-skeletize-paragraph-3 {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
@media (prefers-reduced-motion: reduce) {
|
|
69
|
-
:host([skeleton]) .d2l-skeletize-paragraph-3 {
|
|
70
|
-
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Crect%20y%3D%227%25%22%20width%3D%22100%25%22%20height%3D%2218%25%22%20rx%3D%224%22%20fill%3D%22%23f1f5fb%22%2F%3E%0A%20%20%3Crect%20y%3D%2240%25%22%20width%3D%22100%25%22%20height%3D%2218%25%22%20rx%3D%224%22%20fill%3D%22%23f1f5fb%22%2F%3E%0A%20%20%3Crect%20y%3D%2274%25%22%20width%3D%2290%25%22%20height%3D%2218%25%22%20rx%3D%224%22%20fill%3D%22%23f1f5fb%22%2F%3E%0A%3C%2Fsvg%3E');
|
|
71
|
-
}
|
|
92
|
+
:host([skeleton]) .d2l-skeletize-paragraph-3::after {
|
|
93
|
+
-webkit-mask-image: ${p3Mask};
|
|
94
|
+
mask-image: ${p3Mask};
|
|
72
95
|
}
|
|
73
96
|
:host([skeleton]) .d2l-skeletize-paragraph-3::before {
|
|
74
97
|
content: '\\A \\A';
|
|
75
98
|
white-space: pre;
|
|
76
99
|
}
|
|
77
|
-
:host([skeleton]) .d2l-skeletize-paragraph-5 {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
@media (prefers-reduced-motion: reduce) {
|
|
81
|
-
:host([skeleton]) .d2l-skeletize-paragraph-5 {
|
|
82
|
-
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Crect%20y%3D%224%25%22%20width%3D%22100%25%22%20height%3D%2211%25%22%20rx%3D%224%22%20fill%3D%22%23f1f5fb%22%2F%3E%0A%20%20%3Crect%20y%3D%2224%25%22%20width%3D%22100%25%22%20height%3D%2211%25%22%20rx%3D%224%22%20fill%3D%22%23f1f5fb%22%2F%3E%0A%20%20%3Crect%20y%3D%2244%25%22%20width%3D%22100%25%22%20height%3D%2211%25%22%20rx%3D%224%22%20fill%3D%22%23f1f5fb%22%2F%3E%0A%20%20%3Crect%20y%3D%2264%25%22%20width%3D%22100%25%22%20height%3D%2211%25%22%20rx%3D%224%22%20fill%3D%22%23f1f5fb%22%2F%3E%0A%20%20%3Crect%20y%3D%2284%25%22%20width%3D%2290%25%22%20height%3D%2211%25%22%20rx%3D%224%22%20fill%3D%22%23f1f5fb%22%2F%3E%0A%3C%2Fsvg%3E');
|
|
83
|
-
}
|
|
100
|
+
:host([skeleton]) .d2l-skeletize-paragraph-5::after {
|
|
101
|
+
-webkit-mask-image: ${p5Mask};
|
|
102
|
+
mask-image: ${p5Mask};
|
|
84
103
|
}
|
|
85
104
|
:host([skeleton]) .d2l-skeletize-paragraph-5::before {
|
|
86
105
|
content: '\\A \\A \\A \\A';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.230.0",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|