@brightspace-ui/core 3.200.0 → 3.201.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.
|
@@ -467,6 +467,62 @@
|
|
|
467
467
|
</template>
|
|
468
468
|
</d2l-demo-snippet>
|
|
469
469
|
|
|
470
|
+
<h2>Color Indicator</h2>
|
|
471
|
+
|
|
472
|
+
<d2l-demo-snippet>
|
|
473
|
+
<template>
|
|
474
|
+
<d2l-button-toggle pressed>
|
|
475
|
+
<d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
|
|
476
|
+
<d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
|
|
477
|
+
</d2l-button-toggle>
|
|
478
|
+
<d2l-list layout="tiles">
|
|
479
|
+
<d2l-list-item label="item 1" key="1" color="#29a6ff" selectable tile-header>
|
|
480
|
+
<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
|
|
481
|
+
<d2l-list-item-content>
|
|
482
|
+
<div>Identify categories of physical activities</div>
|
|
483
|
+
<div slot="secondary">Secondary Information</div>
|
|
484
|
+
<div slot="supporting-info">Specific Expectation A1.2</div>
|
|
485
|
+
</d2l-list-item-content>
|
|
486
|
+
<div slot="actions">
|
|
487
|
+
<d2l-button-icon text="More" icon="tier1:more"></d2l-button-icon>
|
|
488
|
+
</div>
|
|
489
|
+
</d2l-list-item>
|
|
490
|
+
<d2l-list-item label="item 2" key="2" color="#29a6ff">
|
|
491
|
+
<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
|
|
492
|
+
<d2l-list-item-content>
|
|
493
|
+
<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
|
|
494
|
+
<div slot="secondary">Secondary Information</div>
|
|
495
|
+
<div slot="supporting-info">Specific Expectation B2.1</div>
|
|
496
|
+
</d2l-list-item-content>
|
|
497
|
+
<div slot="actions">
|
|
498
|
+
<d2l-button-icon text="More" icon="tier1:more" translucent></d2l-button-icon>
|
|
499
|
+
</div>
|
|
500
|
+
</d2l-list-item>
|
|
501
|
+
<d2l-list-item label="item 3" key="3" tile-header selectable color="#29a6ff">
|
|
502
|
+
<d2l-list-item-content>
|
|
503
|
+
<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
|
|
504
|
+
<div slot="secondary">Secondary Information</div>
|
|
505
|
+
<div slot="supporting-info">Specific Expectation B2.2</div>
|
|
506
|
+
</d2l-list-item-content>
|
|
507
|
+
<div slot="actions">
|
|
508
|
+
<d2l-button-icon text="Pin" icon="tier1:pin-filled"></d2l-button-icon>
|
|
509
|
+
<d2l-button-icon text="More" icon="tier1:more"></d2l-button-icon>
|
|
510
|
+
</div>
|
|
511
|
+
</d2l-list-item>
|
|
512
|
+
<d2l-list-item label="item 4" key="4" color="#29a6ff">
|
|
513
|
+
<d2l-list-item-content>
|
|
514
|
+
<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
|
|
515
|
+
<div slot="secondary">Secondary Information</div>
|
|
516
|
+
<div slot="supporting-info">Specific Expectation B2.2</div>
|
|
517
|
+
</d2l-list-item-content>
|
|
518
|
+
</d2l-list-item>
|
|
519
|
+
</d2l-list>
|
|
520
|
+
<script data-demo-hide>
|
|
521
|
+
(demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
|
|
522
|
+
</script>
|
|
523
|
+
</template>
|
|
524
|
+
</d2l-demo-snippet>
|
|
525
|
+
|
|
470
526
|
</d2l-demo-page>
|
|
471
527
|
</body>
|
|
472
528
|
</html>
|
|
@@ -256,13 +256,17 @@ class ListItemGenericLayout extends LitElement {
|
|
|
256
256
|
grid-row: start / start;
|
|
257
257
|
}
|
|
258
258
|
|
|
259
|
+
:host([layout="tile"]) ::slotted([slot="color-indicator"]) {
|
|
260
|
+
grid-column: start;
|
|
261
|
+
grid-row: content-start / content-end;
|
|
262
|
+
}
|
|
263
|
+
|
|
259
264
|
:host(:not([layout="tile"])) slot[name="header"],
|
|
260
265
|
:host([layout="tile"]) slot[name="add-top"],
|
|
261
266
|
:host([layout="tile"]) slot[name="control-container"],
|
|
262
267
|
:host([layout="tile"]) slot[name="before-content"],
|
|
263
268
|
:host([layout="tile"]) slot[name="outside-control"],
|
|
264
269
|
:host([layout="tile"]) slot[name="outside-control-action"],
|
|
265
|
-
:host([layout="tile"]) slot[name="color-indicator"],
|
|
266
270
|
:host([layout="tile"]) slot[name="expand-collapse"],
|
|
267
271
|
:host([layout="tile"]) slot[name="drop-target"],
|
|
268
272
|
:host([layout="tile"]) slot[name="nested"],
|
|
@@ -619,6 +619,24 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
619
619
|
margin-inline: 0;
|
|
620
620
|
}
|
|
621
621
|
|
|
622
|
+
:host([layout="tile"]) .d2l-list-item-color-outer {
|
|
623
|
+
padding: 1px;
|
|
624
|
+
}
|
|
625
|
+
:host([layout="tile"]) .d2l-list-item-color-inner {
|
|
626
|
+
border-end-end-radius: 0;
|
|
627
|
+
border-end-start-radius: 6px;
|
|
628
|
+
border-start-end-radius: 0;
|
|
629
|
+
border-start-start-radius: 6px;
|
|
630
|
+
width: 5px;
|
|
631
|
+
}
|
|
632
|
+
:host([layout="tile"][tile-header]) .d2l-list-item-color-outer {
|
|
633
|
+
padding-block-start: 0;
|
|
634
|
+
}
|
|
635
|
+
:host([layout="tile"][tile-header]) .d2l-list-item-color-inner {
|
|
636
|
+
border-start-end-radius: 0;
|
|
637
|
+
border-start-start-radius: 0;
|
|
638
|
+
}
|
|
639
|
+
|
|
622
640
|
`];
|
|
623
641
|
|
|
624
642
|
super.styles && styles.unshift(super.styles);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.201.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",
|