@brightspace-ui/core 3.99.1 → 3.99.2
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/components/alert/alert.js +22 -44
- package/package.json +1 -1
|
@@ -5,7 +5,6 @@ import { bodyCompactStyles, bodyStandardStyles } from '../typography/styles.js';
|
|
|
5
5
|
import { css, html, LitElement } from 'lit';
|
|
6
6
|
import { classMap } from 'lit/directives/class-map.js';
|
|
7
7
|
import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
|
|
8
|
-
import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
|
|
9
8
|
|
|
10
9
|
/**
|
|
11
10
|
* A component for communicating important information relating to the state of the system and the user's work flow.
|
|
@@ -13,7 +12,7 @@ import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
|
|
|
13
12
|
* @fires d2l-alert-close - Dispatched when the alert's close button is clicked
|
|
14
13
|
* @fires d2l-alert-button-press - Dispatched when the alert's action button is clicked
|
|
15
14
|
*/
|
|
16
|
-
class Alert extends LocalizeCoreElement(
|
|
15
|
+
class Alert extends LocalizeCoreElement(LitElement) {
|
|
17
16
|
|
|
18
17
|
static get properties() {
|
|
19
18
|
return {
|
|
@@ -55,6 +54,7 @@ class Alert extends LocalizeCoreElement(RtlMixin(LitElement)) {
|
|
|
55
54
|
animation: 600ms ease drop-in;
|
|
56
55
|
background: white;
|
|
57
56
|
border: 1px solid var(--d2l-color-mica);
|
|
57
|
+
border-inline-start-width: 0.3rem;
|
|
58
58
|
border-radius: 0.3rem;
|
|
59
59
|
box-sizing: border-box;
|
|
60
60
|
display: flex;
|
|
@@ -68,56 +68,37 @@ class Alert extends LocalizeCoreElement(RtlMixin(LitElement)) {
|
|
|
68
68
|
display: none;
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
left: 0;
|
|
75
|
-
margin: -1px;
|
|
76
|
-
min-width: 0.3rem;
|
|
77
|
-
position: absolute;
|
|
78
|
-
top: 0;
|
|
79
|
-
width: 0.3rem;
|
|
71
|
+
:host([type="critical"]),
|
|
72
|
+
:host([type="error"]) {
|
|
73
|
+
border-inline-start-color: var(--d2l-color-feedback-error);
|
|
80
74
|
}
|
|
81
|
-
:host([
|
|
82
|
-
border-
|
|
83
|
-
left: auto;
|
|
84
|
-
right: 0;
|
|
75
|
+
:host([type="warning"]) {
|
|
76
|
+
border-inline-start-color: var(--d2l-color-feedback-warning);
|
|
85
77
|
}
|
|
86
|
-
:host([type="
|
|
87
|
-
:host([type="
|
|
88
|
-
|
|
78
|
+
:host([type="default"]),
|
|
79
|
+
:host([type="call-to-action"]) {
|
|
80
|
+
border-inline-start-color: var(--d2l-color-feedback-action);
|
|
89
81
|
}
|
|
90
|
-
:host([type="
|
|
91
|
-
|
|
92
|
-
}
|
|
93
|
-
:host([type="default"]) .d2l-alert-highlight,
|
|
94
|
-
:host([type="call-to-action"]) .d2l-alert-highlight {
|
|
95
|
-
background-color: var(--d2l-color-feedback-action);
|
|
96
|
-
}
|
|
97
|
-
:host([type="success"]) .d2l-alert-highlight {
|
|
98
|
-
background-color: var(--d2l-color-feedback-success);
|
|
82
|
+
:host([type="success"]) {
|
|
83
|
+
border-inline-start-color: var(--d2l-color-feedback-success);
|
|
99
84
|
}
|
|
100
85
|
|
|
101
86
|
.d2l-alert-text {
|
|
102
87
|
flex: 1;
|
|
103
|
-
padding: 0.9rem
|
|
88
|
+
padding-block: 0.9rem;
|
|
89
|
+
padding-inline-end: 1.5rem;
|
|
90
|
+
padding-inline-start: 1.2rem;
|
|
104
91
|
position: relative;
|
|
105
92
|
}
|
|
106
93
|
.d2l-alert-text-with-actions {
|
|
107
|
-
padding-
|
|
94
|
+
padding-inline-end: 0.9rem;
|
|
108
95
|
}
|
|
109
96
|
|
|
110
|
-
:host([dir="rtl"]) .d2l-alert-text-with-actions {
|
|
111
|
-
padding-left: 0.9rem;
|
|
112
|
-
padding-right: 1.5rem;
|
|
113
|
-
}
|
|
114
97
|
:host([no-padding]) .d2l-alert-text,
|
|
115
98
|
:host([no-padding]) .d2l-alert-text-with-actions {
|
|
116
|
-
padding: 0
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
:host([dir="rtl"][no-padding]) .d2l-alert-text-with-actions {
|
|
120
|
-
padding: 0 0.3rem 0 0;
|
|
99
|
+
padding-block: 0;
|
|
100
|
+
padding-inline-end: 0;
|
|
101
|
+
padding-inline-start: 0;
|
|
121
102
|
}
|
|
122
103
|
|
|
123
104
|
.d2l-alert-subtext {
|
|
@@ -125,11 +106,9 @@ class Alert extends LocalizeCoreElement(RtlMixin(LitElement)) {
|
|
|
125
106
|
}
|
|
126
107
|
|
|
127
108
|
.d2l-alert-action {
|
|
128
|
-
margin: 0.6rem
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
margin-left: 0.6rem;
|
|
132
|
-
margin-right: 0;
|
|
109
|
+
margin-block: 0.6rem;
|
|
110
|
+
margin-inline-end: 0.6rem;
|
|
111
|
+
margin-inline-start: 0;
|
|
133
112
|
}
|
|
134
113
|
:host([no-padding]) .d2l-alert-action {
|
|
135
114
|
margin: 0;
|
|
@@ -180,7 +159,6 @@ class Alert extends LocalizeCoreElement(RtlMixin(LitElement)) {
|
|
|
180
159
|
};
|
|
181
160
|
|
|
182
161
|
return html`
|
|
183
|
-
<div class="d2l-alert-highlight"></div>
|
|
184
162
|
<div class="${classMap(alertTextClasses)}">
|
|
185
163
|
<slot></slot>
|
|
186
164
|
${this.subtext ? html`<p class="d2l-body-compact d2l-alert-subtext">${this.subtext}</p>` : null}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.99.
|
|
3
|
+
"version": "3.99.2",
|
|
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",
|