@brightspace-ui/core 3.186.0 → 3.187.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.
|
@@ -8,6 +8,7 @@
|
|
|
8
8
|
import '../../demo/demo-page.js';
|
|
9
9
|
import '../../button/button-subtle.js';
|
|
10
10
|
import '../../button/button-toggle.js';
|
|
11
|
+
import '../../icons/icon.js';
|
|
11
12
|
import '../list-item-button.js';
|
|
12
13
|
import '../list-item-content.js';
|
|
13
14
|
import '../list-item.js';
|
|
@@ -22,6 +23,26 @@
|
|
|
22
23
|
d2l-button-toggle {
|
|
23
24
|
margin-block-end: 0.9rem;
|
|
24
25
|
}
|
|
26
|
+
d2l-list-item[layout="normal"] div[slot="illustration"],
|
|
27
|
+
d2l-list-item[layout="tile"] div[slot="illustration"] {
|
|
28
|
+
padding: 1rem;
|
|
29
|
+
}
|
|
30
|
+
d2l-list-item[layout="normal"] img[slot="illustration"] {
|
|
31
|
+
height: 500px;
|
|
32
|
+
object-fit: cover;
|
|
33
|
+
}
|
|
34
|
+
d2l-list-item[layout="normal"] d2l-icon[slot="illustration"] {
|
|
35
|
+
height: 3rem;
|
|
36
|
+
width: 3rem;
|
|
37
|
+
}
|
|
38
|
+
d2l-list-item[layout="tile"] div[slot="illustration"],
|
|
39
|
+
d2l-list-item[layout="tile"] d2l-icon[slot="illustration"],
|
|
40
|
+
d2l-list-item[layout="tile"] img[slot="illustration"] {
|
|
41
|
+
height: 5rem;
|
|
42
|
+
}
|
|
43
|
+
d2l-list-item[layout="tile"] img[slot="illustration"] {
|
|
44
|
+
object-fit: cover;
|
|
45
|
+
}
|
|
25
46
|
</style>
|
|
26
47
|
</head>
|
|
27
48
|
<body unresolved>
|
|
@@ -64,6 +85,70 @@
|
|
|
64
85
|
</template>
|
|
65
86
|
</d2l-demo-snippet>
|
|
66
87
|
|
|
88
|
+
<h2>Illustration Slot</h2>
|
|
89
|
+
|
|
90
|
+
<d2l-demo-snippet>
|
|
91
|
+
<template>
|
|
92
|
+
<d2l-button-toggle pressed>
|
|
93
|
+
<d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
|
|
94
|
+
<d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
|
|
95
|
+
</d2l-button-toggle>
|
|
96
|
+
<d2l-list layout="tiles">
|
|
97
|
+
<d2l-list-item label="item 1">
|
|
98
|
+
<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
|
|
99
|
+
<d2l-list-item-content>
|
|
100
|
+
<div>Identify categories of physical activities</div>
|
|
101
|
+
<div slot="secondary">Secondary Information</div>
|
|
102
|
+
<div slot="supporting-info">Specific Expectation A1.2</div>
|
|
103
|
+
</d2l-list-item-content>
|
|
104
|
+
</d2l-list-item>
|
|
105
|
+
<d2l-list-item label="item 2">
|
|
106
|
+
<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
|
|
107
|
+
<d2l-list-item-content>
|
|
108
|
+
<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
|
|
109
|
+
<div slot="secondary">Secondary Information</div>
|
|
110
|
+
<div slot="supporting-info">Specific Expectation B2.1</div>
|
|
111
|
+
</d2l-list-item-content>
|
|
112
|
+
</d2l-list-item>
|
|
113
|
+
<d2l-list-item label="item 3">
|
|
114
|
+
<img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
|
|
115
|
+
<d2l-list-item-content>
|
|
116
|
+
<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
|
|
117
|
+
<div slot="secondary">Secondary Information</div>
|
|
118
|
+
<div slot="supporting-info">Specific Expectation B2.2</div>
|
|
119
|
+
</d2l-list-item-content>
|
|
120
|
+
</d2l-list-item>
|
|
121
|
+
<d2l-list-item label="item 4">
|
|
122
|
+
<d2l-icon slot="illustration" icon="tier3:home"></d2l-icon>
|
|
123
|
+
<d2l-list-item-content>
|
|
124
|
+
<div>Home</div>
|
|
125
|
+
<div slot="secondary">Secondary Information</div>
|
|
126
|
+
<div slot="supporting-info">Specific Expectation H1.2</div>
|
|
127
|
+
</d2l-list-item-content>
|
|
128
|
+
</d2l-list-item>
|
|
129
|
+
<d2l-list-item label="item 5">
|
|
130
|
+
<img slot="illustration" src="data:image/png;base64,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ICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KE+0EygAABEFJREFUeAHt07ENwCAQBEGgJ5dFg27OSI7RVjCEfDa6nc9+v+ERIHAVWNdfnwQI/AICMQQCISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEicADECgPrw9IKqwAAAABJRU5ErkJggg==" alt="" />
|
|
131
|
+
<d2l-list-item-content>
|
|
132
|
+
<div>Identify categories of physical activities</div>
|
|
133
|
+
<div slot="secondary">Secondary Information</div>
|
|
134
|
+
<div slot="supporting-info">Specific Expectation A1.2</div>
|
|
135
|
+
</d2l-list-item-content>
|
|
136
|
+
</d2l-list-item>
|
|
137
|
+
<d2l-list-item label="item 6">
|
|
138
|
+
<div slot="illustration" style="background-color: var(--d2l-color-olivine); color: white;">I'm a <div></div>
|
|
139
|
+
<d2l-list-item-content>
|
|
140
|
+
<div>Identify categories of physical activities</div>
|
|
141
|
+
<div slot="secondary">Secondary Information</div>
|
|
142
|
+
<div slot="supporting-info">Specific Expectation A1.2</div>
|
|
143
|
+
</d2l-list-item-content>
|
|
144
|
+
</d2l-list-item>
|
|
145
|
+
</d2l-list>
|
|
146
|
+
<script data-demo-hide>
|
|
147
|
+
(demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
|
|
148
|
+
</script>
|
|
149
|
+
</template>
|
|
150
|
+
</d2l-demo-snippet>
|
|
151
|
+
|
|
67
152
|
<h2>Links</h2>
|
|
68
153
|
|
|
69
154
|
<d2l-demo-snippet>
|
|
@@ -447,6 +447,32 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
447
447
|
padding: 0.6rem;
|
|
448
448
|
}
|
|
449
449
|
|
|
450
|
+
:host([layout="tile"]) [slot="content"] ::slotted([slot="illustration"]),
|
|
451
|
+
:host([layout="tile"]) .d2l-list-item-illustration > * {
|
|
452
|
+
border-end-end-radius: 0;
|
|
453
|
+
border-end-start-radius: 0;
|
|
454
|
+
border-start-end-radius: 5px;
|
|
455
|
+
border-start-start-radius: 5px;
|
|
456
|
+
box-sizing: border-box;
|
|
457
|
+
margin-block: -0.55rem 0.6rem;
|
|
458
|
+
margin-inline: -0.55rem;
|
|
459
|
+
max-height: unset;
|
|
460
|
+
max-width: calc(100% + 1.1rem);
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
:host([layout="tile"]) [slot="content"] ::slotted(d2l-icon[slot="illustration"]),
|
|
464
|
+
:host([layout="tile"]) .d2l-list-item-illustration > d2l-icon[slot="illustration"] {
|
|
465
|
+
padding: 1rem;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
:host([layout="tile"]) [slot="content"] ::slotted(div[slot="illustration"]),
|
|
469
|
+
:host([layout="tile"]) .d2l-list-item-illustration > div[slot="illustration"],
|
|
470
|
+
:host([layout="tile"]) [slot="content"] ::slotted(d2l-icon[slot="illustration"]),
|
|
471
|
+
:host([layout="tile"]) .d2l-list-item-illustration > d2l-icon[slot="illustration"] {
|
|
472
|
+
border-bottom: 1px solid var(--d2l-color-mica);
|
|
473
|
+
width: calc(100% + 1.1rem);
|
|
474
|
+
}
|
|
475
|
+
|
|
450
476
|
:host([layout="tile"]:not([selection-disabled]):not([skeleton])[padding-type="none"]) [slot="outside-control-container"],
|
|
451
477
|
:host([layout="tile"]) [slot="outside-control-container"] {
|
|
452
478
|
border-color: var(--d2l-color-mica);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.187.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",
|