@brightspace-ui/labs 2.7.0 → 2.8.1
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
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
"./components/accessibility-disability-simulator.js": "./src/components/accessibility-disability-simulator/accessibility-disability-simulator.js",
|
|
8
8
|
"./components/attribute-picker.js": "./src/components/attribute-picker/attribute-picker.js",
|
|
9
9
|
"./components/checkbox-drawer.js": "./src/components/checkbox-drawer/checkbox-drawer.js",
|
|
10
|
+
"./components/card-overlay.js": "./src/components/card-overlay/card-overlay.js",
|
|
10
11
|
"./components/community-button.js": "./src/components/community/community-button.js",
|
|
11
12
|
"./components/community-link.js": "./src/components/community/community-link.js",
|
|
12
13
|
"./components/community-url-factory.js": "./src/components/community/community-url-factory.js",
|
|
@@ -56,5 +57,5 @@
|
|
|
56
57
|
"@brightspace-ui/core": "^3",
|
|
57
58
|
"lit": "^3"
|
|
58
59
|
},
|
|
59
|
-
"version": "2.
|
|
60
|
+
"version": "2.8.1"
|
|
60
61
|
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
# Card Overlay
|
|
2
|
+
|
|
3
|
+
A placeholder when an actual card component is loading
|
|
4
|
+
|
|
5
|
+
## Usage
|
|
6
|
+
|
|
7
|
+
```html
|
|
8
|
+
<script type="module">
|
|
9
|
+
import '@brightspace-ui/labs/components/card-overlay.js';
|
|
10
|
+
</script>
|
|
11
|
+
<d2l-labs-card-overlay>My element</d2l-labs-card-overlay>
|
|
12
|
+
```
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { css, html, LitElement, nothing } from 'lit';
|
|
2
|
+
import { bodyStandardStyles } from '@brightspace-ui/core/components/typography/styles.js';
|
|
3
|
+
import { SkeletonMixin } from '@brightspace-ui/core/components/skeleton/skeleton-mixin.js';
|
|
4
|
+
|
|
5
|
+
class CardOverlay extends SkeletonMixin(LitElement) {
|
|
6
|
+
|
|
7
|
+
static get styles() {
|
|
8
|
+
return [super.styles, bodyStandardStyles, css`
|
|
9
|
+
:host {
|
|
10
|
+
display: block;
|
|
11
|
+
left: 0;
|
|
12
|
+
position: absolute;
|
|
13
|
+
top: 0;
|
|
14
|
+
}
|
|
15
|
+
:host([skeleton]) {
|
|
16
|
+
height: 100%;
|
|
17
|
+
width: 100%;
|
|
18
|
+
}
|
|
19
|
+
:host([hidden]) {
|
|
20
|
+
display: none;
|
|
21
|
+
}
|
|
22
|
+
.d2l-insights-card-overlay-container {
|
|
23
|
+
background-color: white;
|
|
24
|
+
border-radius: 15px;
|
|
25
|
+
display: flex;
|
|
26
|
+
flex-direction: column;
|
|
27
|
+
height: calc(100% - 20px);
|
|
28
|
+
justify-content: center;
|
|
29
|
+
padding-left: 7px;
|
|
30
|
+
padding-top: 20px;
|
|
31
|
+
width: calc(100% - 28px);
|
|
32
|
+
}
|
|
33
|
+
.d2l-insights-card-overlay-title {
|
|
34
|
+
margin-left: 15px;
|
|
35
|
+
margin-right: 15px;
|
|
36
|
+
margin-top: 10px;
|
|
37
|
+
width: 100%;
|
|
38
|
+
}
|
|
39
|
+
.d2l-insights-card-overlay-body {
|
|
40
|
+
align-items: center;
|
|
41
|
+
display: flex;
|
|
42
|
+
height: 100%;
|
|
43
|
+
margin-bottom: 25px;
|
|
44
|
+
}
|
|
45
|
+
.d2l-insights-card-overlay-body > div {
|
|
46
|
+
flex-shrink: 0;
|
|
47
|
+
height: 70px;
|
|
48
|
+
margin: 0 15px;
|
|
49
|
+
width: 70px;
|
|
50
|
+
}
|
|
51
|
+
.d2l-insights-card-overlay-message {
|
|
52
|
+
display: inline-block;
|
|
53
|
+
font-size: 14px;
|
|
54
|
+
line-height: 1rem;
|
|
55
|
+
margin: 10px;
|
|
56
|
+
margin-left: 5px;
|
|
57
|
+
margin-right: 0;
|
|
58
|
+
vertical-align: middle;
|
|
59
|
+
}
|
|
60
|
+
`];
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
render() {
|
|
64
|
+
if (!this.skeleton) {
|
|
65
|
+
return nothing;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
return html`
|
|
69
|
+
<div class="d2l-insights-card-overlay-container" aria-hidden="true">
|
|
70
|
+
<div class="d2l-insights-card-overlay-title d2l-skeletize d2l-skeletize-45 d2l-body-standard">A title. Do not localize.</div>
|
|
71
|
+
<div class="d2l-insights-card-overlay-body">
|
|
72
|
+
<div class="d2l-skeletize"></div>
|
|
73
|
+
<span class="d2l-insights-card-overlay-message d2l-body-standard d2l-skeletize-paragraph-3">A text that triggers CSS styling. Do not localize.</span>
|
|
74
|
+
</div>
|
|
75
|
+
</div>`;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
}
|
|
79
|
+
customElements.define('d2l-labs-card-overlay', CardOverlay);
|
|
@@ -47,13 +47,19 @@ class FlyoutImplementation extends composeMixins(
|
|
|
47
47
|
heading1Styles,
|
|
48
48
|
css`
|
|
49
49
|
:host {
|
|
50
|
-
height: var(--d2l-flyout-custom-element-height,
|
|
50
|
+
height: var(--d2l-flyout-custom-element-height, auto);
|
|
51
51
|
overflow: hidden;
|
|
52
52
|
pointer-events: none;
|
|
53
53
|
position: absolute;
|
|
54
54
|
width: 100%;
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
+
:host([opened]) {
|
|
58
|
+
background-color: rgba(255, 255, 255, 0.7);
|
|
59
|
+
height: 100%;
|
|
60
|
+
pointer-events: auto;
|
|
61
|
+
}
|
|
62
|
+
|
|
57
63
|
#flyout {
|
|
58
64
|
background-color: white;
|
|
59
65
|
border-bottom: 1px solid var(--d2l-color-mica);
|
|
@@ -62,7 +68,7 @@ class FlyoutImplementation extends composeMixins(
|
|
|
62
68
|
overflow: visible;
|
|
63
69
|
padding-bottom: 2rem;
|
|
64
70
|
pointer-events: auto;
|
|
65
|
-
position: var(--d2l-flyout-custom-element-position,
|
|
71
|
+
position: var(--d2l-flyout-custom-element-position, relative);
|
|
66
72
|
top: var(--d2l-flyout-custom-element-top, 0);
|
|
67
73
|
width: 100%;
|
|
68
74
|
z-index: var(--d2l-flyout-custom-element-z-index, 900);
|