@brightspace-ui/core 3.244.0 → 3.245.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.
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { css, html, LitElement } from 'lit';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Component to be placed in the footer slot of d2l-page, providing consistent padding
|
|
5
|
+
* @slot - The main content of the footer panel
|
|
6
|
+
* @slot end - Optional content placed at the end of the footer
|
|
7
|
+
*/
|
|
8
|
+
class PageFooter extends LitElement {
|
|
9
|
+
|
|
10
|
+
static styles = css`
|
|
11
|
+
:host {
|
|
12
|
+
display: flex;
|
|
13
|
+
flex-wrap: nowrap;
|
|
14
|
+
justify-content: space-between;
|
|
15
|
+
padding: 0 var(--d2l-page-padding, 30px) 0.75rem; /* TODO: Padding needs to be figured out */
|
|
16
|
+
}
|
|
17
|
+
.start, .end {
|
|
18
|
+
align-items: center;
|
|
19
|
+
display: flex;
|
|
20
|
+
gap: 0.6rem; /* TODO: Padding needs to be figured out */
|
|
21
|
+
}
|
|
22
|
+
`;
|
|
23
|
+
|
|
24
|
+
render() {
|
|
25
|
+
return html`
|
|
26
|
+
<div class="start"><slot></slot></div>
|
|
27
|
+
<div class="end"><slot name="end"></slot></div>
|
|
28
|
+
`;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
customElements.define('d2l-page-footer', PageFooter);
|
|
@@ -7,6 +7,7 @@ export const pagePanelStyles = css`
|
|
|
7
7
|
align-items: center;
|
|
8
8
|
display: flex;
|
|
9
9
|
flex-direction: row;
|
|
10
|
+
gap: 6px;
|
|
10
11
|
justify-content: space-between;
|
|
11
12
|
}
|
|
12
13
|
.panel-header {
|
|
@@ -14,7 +15,7 @@ export const pagePanelStyles = css`
|
|
|
14
15
|
border-bottom: 1px solid var(--d2l-color-mica);
|
|
15
16
|
height: 70px;
|
|
16
17
|
overflow: hidden;
|
|
17
|
-
padding: 0 30px;
|
|
18
|
+
padding: 0 var(--d2l-page-padding, 30px);
|
|
18
19
|
position: sticky;
|
|
19
20
|
top: 0;
|
|
20
21
|
z-index: 14; /* To be over sticky content of our core components, but not over the header shadow */
|
|
@@ -27,7 +28,7 @@ export const pagePanelStyles = css`
|
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
.panel {
|
|
30
|
-
padding: 30px;
|
|
31
|
+
padding: var(--d2l-page-padding, 30px);
|
|
31
32
|
}
|
|
32
33
|
`;
|
|
33
34
|
|
|
@@ -49,17 +50,13 @@ export const PagePanelMixin = superclass => class extends superclass {
|
|
|
49
50
|
'panel': true,
|
|
50
51
|
'header-sticky': this._hasHeader
|
|
51
52
|
};
|
|
52
|
-
|
|
53
|
+
|
|
54
|
+
return html`
|
|
53
55
|
<div ?hidden="${!this._hasHeader}" class="panel-header">
|
|
54
56
|
<div class="header-start"><slot name="header-start" @slotchange="${this.#handleSlotVisibilityChange}"></slot></div>
|
|
55
57
|
<div class="header-end"><slot name="header-end" @slotchange="${this.#handleSlotVisibilityChange}"></slot></div>
|
|
56
|
-
</div>`;
|
|
57
|
-
|
|
58
|
-
return html`
|
|
59
|
-
<div>
|
|
60
|
-
${header}
|
|
61
|
-
<div class="${classMap(panelClasses)}">${content}</div>
|
|
62
58
|
</div>
|
|
59
|
+
<div class="${classMap(panelClasses)}">${content}</div>
|
|
63
60
|
`;
|
|
64
61
|
}
|
|
65
62
|
|
package/components/page/page.js
CHANGED
|
@@ -30,6 +30,7 @@ class Page extends LocalizeCoreElement(LitElement) {
|
|
|
30
30
|
--d2l-page-content-max-width: 1230px;
|
|
31
31
|
--d2l-page-footer-max-width: 1230px;
|
|
32
32
|
--d2l-page-margin-inline: auto;
|
|
33
|
+
--d2l-page-padding: 30px;
|
|
33
34
|
}
|
|
34
35
|
|
|
35
36
|
:host([width-type="wide"]) {
|
|
@@ -44,6 +45,17 @@ class Page extends LocalizeCoreElement(LitElement) {
|
|
|
44
45
|
--d2l-page-footer-max-width: 100%;
|
|
45
46
|
}
|
|
46
47
|
|
|
48
|
+
@media (max-width: 929px) {
|
|
49
|
+
:host {
|
|
50
|
+
--d2l-page-padding: 24px;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
@media (max-width: 767px) {
|
|
54
|
+
:host {
|
|
55
|
+
--d2l-page-padding: 18px;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
47
59
|
.header {
|
|
48
60
|
position: relative;
|
|
49
61
|
z-index: 15; /* To be over sticky content of our core components */
|
|
@@ -88,7 +100,7 @@ class Page extends LocalizeCoreElement(LitElement) {
|
|
|
88
100
|
background-color: white;
|
|
89
101
|
box-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */
|
|
90
102
|
inset: auto 0 0;
|
|
91
|
-
padding: 0.75rem
|
|
103
|
+
padding-block-start: 0.75rem;
|
|
92
104
|
position: fixed;
|
|
93
105
|
z-index: 10; /* To be over sticky content of our core components */
|
|
94
106
|
}
|
package/custom-elements.json
CHANGED
|
@@ -12325,6 +12325,28 @@
|
|
|
12325
12325
|
}
|
|
12326
12326
|
]
|
|
12327
12327
|
},
|
|
12328
|
+
{
|
|
12329
|
+
"name": "d2l-page-footer",
|
|
12330
|
+
"path": "./components/page/page-footer.js",
|
|
12331
|
+
"description": "Component to be placed in the footer slot of d2l-page, providing consistent padding",
|
|
12332
|
+
"properties": [
|
|
12333
|
+
{
|
|
12334
|
+
"name": "styles",
|
|
12335
|
+
"type": "CSSResult",
|
|
12336
|
+
"default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tflex-wrap: nowrap;\\n\\t\\t\\tjustify-content: space-between;\\n\\t\\t\\tpadding: 0 var(--d2l-page-padding, 30px) 0.75rem; /* TODO: Padding needs to be figured out */\\n\\t\\t}\\n\\t\\t.start, .end {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tgap: 0.6rem; /* TODO: Padding needs to be figured out */\\n\\t\\t}\\n\\t`\""
|
|
12337
|
+
}
|
|
12338
|
+
],
|
|
12339
|
+
"slots": [
|
|
12340
|
+
{
|
|
12341
|
+
"name": "",
|
|
12342
|
+
"description": "The main content of the footer panel"
|
|
12343
|
+
},
|
|
12344
|
+
{
|
|
12345
|
+
"name": "end",
|
|
12346
|
+
"description": "Optional content placed at the end of the footer"
|
|
12347
|
+
}
|
|
12348
|
+
]
|
|
12349
|
+
},
|
|
12328
12350
|
{
|
|
12329
12351
|
"name": "d2l-page-main",
|
|
12330
12352
|
"path": "./components/page/page-main.js",
|
|
@@ -12431,7 +12453,7 @@
|
|
|
12431
12453
|
{
|
|
12432
12454
|
"name": "styles",
|
|
12433
12455
|
"type": "CSSResult",
|
|
12434
|
-
"default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(400px, 100%); /* Actual min width TBD */\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\theight: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tflex: none;\\n\\t\\t\\twidth: 4px;\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding: 0.75rem
|
|
12456
|
+
"default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t\\t--d2l-page-padding: 30px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t@media (max-width: 929px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 24px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t\\t@media (max-width: 767px) {\\n\\t\\t\\t:host {\\n\\t\\t\\t\\t--d2l-page-padding: 18px;\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(400px, 100%); /* Actual min width TBD */\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\theight: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tflex: none;\\n\\t\\t\\twidth: 4px;\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding-block-start: 0.75rem;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 10; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
|
|
12435
12457
|
},
|
|
12436
12458
|
{
|
|
12437
12459
|
"name": "widthType",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.245.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",
|