kmaterialize 2.3.3-1.0.16 → 2.3.3-1.0.19
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/_alerts.scss +122 -0
- package/components/alert/alert.ts +73 -0
- package/components/appbar/appbar.css +85 -4
- package/components/dropdown/dropdown.ts +1 -1
- package/dist/css/materialize.colors.min.css +1 -1
- package/dist/css/materialize.css +253 -5
- package/dist/css/materialize.min.css +2 -2
- package/dist/css/materialize.min.css.map +1 -1
- package/dist/js/materialize.cjs.js +64 -7
- package/dist/js/materialize.d.ts +26 -2
- package/dist/js/materialize.js +64 -7
- package/dist/js/materialize.min.js +2 -2
- package/dist/js/materialize.mjs +64 -8
- package/package.json +1 -1
- package/sass/materialize.scss +1 -0
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
// Alert banners provide persistent, contextual feedback in a page.
|
|
2
|
+
.alert {
|
|
3
|
+
--alert-container: var(--md-sys-color-surface-variant);
|
|
4
|
+
--alert-on-container: var(--md-sys-color-on-surface-variant);
|
|
5
|
+
--alert-border: var(--md-sys-color-outline-variant);
|
|
6
|
+
|
|
7
|
+
position: relative;
|
|
8
|
+
display: flex;
|
|
9
|
+
align-items: flex-start;
|
|
10
|
+
gap: 0.875rem;
|
|
11
|
+
width: 100%;
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
padding: 1rem 1.125rem;
|
|
14
|
+
margin: 0 0 1rem;
|
|
15
|
+
border: 1px solid transparent;
|
|
16
|
+
border-radius: 0.75rem;
|
|
17
|
+
background: var(--alert-container);
|
|
18
|
+
color: var(--alert-on-container);
|
|
19
|
+
line-height: 1.5;
|
|
20
|
+
|
|
21
|
+
.alert-icon {
|
|
22
|
+
flex: 0 0 auto;
|
|
23
|
+
margin-top: 0.125rem;
|
|
24
|
+
font-size: 1.375rem;
|
|
25
|
+
line-height: 1;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.alert-content {
|
|
29
|
+
min-width: 0;
|
|
30
|
+
flex: 1 1 auto;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.alert-title {
|
|
34
|
+
display: block;
|
|
35
|
+
margin: 0 0 0.25rem;
|
|
36
|
+
font-weight: 600;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.alert-message {
|
|
40
|
+
margin: 0;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.alert-close {
|
|
44
|
+
display: inline-flex;
|
|
45
|
+
flex: 0 0 auto;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: center;
|
|
48
|
+
width: 2rem;
|
|
49
|
+
height: 2rem;
|
|
50
|
+
margin: -0.25rem -0.375rem -0.25rem 0;
|
|
51
|
+
padding: 0;
|
|
52
|
+
border: 0;
|
|
53
|
+
border-radius: 50%;
|
|
54
|
+
background: transparent;
|
|
55
|
+
color: inherit;
|
|
56
|
+
cursor: pointer;
|
|
57
|
+
|
|
58
|
+
&:hover,
|
|
59
|
+
&:focus-visible {
|
|
60
|
+
background: color-mix(in srgb, currentColor 12%, transparent);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.material-icons {
|
|
64
|
+
font-size: 1.25rem;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&.alert-info {
|
|
69
|
+
--alert-container: var(--md-sys-color-secondary-container);
|
|
70
|
+
--alert-on-container: var(--md-sys-color-on-secondary-container);
|
|
71
|
+
--alert-border: var(--md-sys-color-secondary);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&.alert-success {
|
|
75
|
+
--alert-container: var(--md-sys-color-tertiary-container);
|
|
76
|
+
--alert-on-container: var(--md-sys-color-on-tertiary-container);
|
|
77
|
+
--alert-border: var(--md-sys-color-tertiary);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&.alert-warning {
|
|
81
|
+
--alert-container: var(--md-sys-color-primary-container);
|
|
82
|
+
--alert-on-container: var(--md-sys-color-on-primary-container);
|
|
83
|
+
--alert-border: var(--md-sys-color-primary);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
&.alert-error {
|
|
87
|
+
--alert-container: var(--md-sys-color-error-container);
|
|
88
|
+
--alert-on-container: var(--md-sys-color-on-error-container);
|
|
89
|
+
--alert-border: var(--md-sys-color-error);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&.alert-outlined {
|
|
93
|
+
border-color: var(--alert-border);
|
|
94
|
+
background: transparent;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&.alert-filled {
|
|
98
|
+
border-color: var(--alert-border);
|
|
99
|
+
background: var(--alert-border);
|
|
100
|
+
color: var(--md-sys-color-on-primary);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
&.alert-compact {
|
|
104
|
+
align-items: center;
|
|
105
|
+
padding-block: 0.625rem;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
&[hidden] {
|
|
109
|
+
display: none;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
114
|
+
.alert {
|
|
115
|
+
transition: opacity 180ms ease, transform 180ms ease;
|
|
116
|
+
|
|
117
|
+
&.alert-dismissing {
|
|
118
|
+
opacity: 0;
|
|
119
|
+
transform: translateY(-0.25rem);
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { BaseOptions, Component, InitElements, MElement } from '../../src/component';
|
|
2
|
+
|
|
3
|
+
export interface AlertOptions extends BaseOptions {
|
|
4
|
+
/** Automatically wire a `.alert-close` button when present. */
|
|
5
|
+
dismissible: boolean;
|
|
6
|
+
/** Called after the alert is dismissed. */
|
|
7
|
+
onDismiss?: (alert: Alert) => void;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const _defaults: AlertOptions = {
|
|
11
|
+
dismissible: true
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
/** A persistent, contextual feedback banner. */
|
|
15
|
+
export class Alert extends Component<AlertOptions> {
|
|
16
|
+
private _closeButton: HTMLElement | null = null;
|
|
17
|
+
private _onClose = () => this.dismiss();
|
|
18
|
+
|
|
19
|
+
constructor(el: HTMLElement, options: Partial<AlertOptions>) {
|
|
20
|
+
super(el, options, Alert);
|
|
21
|
+
this.options = { ...Alert.defaults, ...options };
|
|
22
|
+
this.el['M_Alert'] = this;
|
|
23
|
+
this._bindCloseButton();
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
static get defaults(): AlertOptions {
|
|
27
|
+
return _defaults;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
static init(el: HTMLElement, options?: Partial<AlertOptions>): Alert;
|
|
31
|
+
static init(els: InitElements<MElement>, options?: Partial<AlertOptions>): Alert[];
|
|
32
|
+
static init(
|
|
33
|
+
els: HTMLElement | InitElements<MElement>,
|
|
34
|
+
options: Partial<AlertOptions> = {}
|
|
35
|
+
): Alert | Alert[] {
|
|
36
|
+
return super.init(els, options, Alert);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
static getInstance(el: HTMLElement): Alert {
|
|
40
|
+
return el['M_Alert'];
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
private _bindCloseButton() {
|
|
44
|
+
this._closeButton = this.el.querySelector<HTMLElement>('.alert-close');
|
|
45
|
+
if (this.options.dismissible && this._closeButton) {
|
|
46
|
+
this._closeButton.addEventListener('click', this._onClose);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/** Hide and remove the alert from the document. */
|
|
51
|
+
dismiss() {
|
|
52
|
+
if (!this.el.isConnected) return;
|
|
53
|
+
this.el.classList.add('alert-dismissing');
|
|
54
|
+
const remove = () => {
|
|
55
|
+
this.el.removeEventListener('transitionend', remove);
|
|
56
|
+
this.el.hidden = true;
|
|
57
|
+
this.options.onDismiss?.(this);
|
|
58
|
+
};
|
|
59
|
+
if (getComputedStyle(this.el).transitionDuration === '0s') remove();
|
|
60
|
+
else this.el.addEventListener('transitionend', remove, { once: true });
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/** Show an alert that was previously dismissed. */
|
|
64
|
+
open() {
|
|
65
|
+
this.el.hidden = false;
|
|
66
|
+
this.el.classList.remove('alert-dismissing');
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
destroy() {
|
|
70
|
+
this._closeButton?.removeEventListener('click', this._onClose);
|
|
71
|
+
delete this.el['M_Alert'];
|
|
72
|
+
}
|
|
73
|
+
}
|
|
@@ -161,6 +161,17 @@
|
|
|
161
161
|
order: 1;
|
|
162
162
|
flex: 1 1 0;
|
|
163
163
|
min-width: 0;
|
|
164
|
+
overflow-x: auto;
|
|
165
|
+
overflow-y: hidden;
|
|
166
|
+
scrollbar-width: none;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > ul::-webkit-scrollbar {
|
|
170
|
+
display: none;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > ul > li > a {
|
|
174
|
+
white-space: nowrap;
|
|
164
175
|
}
|
|
165
176
|
|
|
166
177
|
.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > .brand-logo.center {
|
|
@@ -196,24 +207,41 @@
|
|
|
196
207
|
/* Structured MD3 app-bar content. These hooks keep branded demos and app
|
|
197
208
|
shells from falling back to bare, loosely spaced anchor elements. */
|
|
198
209
|
.navbar.appbar-bordered {
|
|
199
|
-
overflow:
|
|
210
|
+
overflow: visible;
|
|
200
211
|
background: var(--md-sys-color-surface-variant);
|
|
201
212
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
202
|
-
border-radius:
|
|
213
|
+
border-radius: 0;
|
|
203
214
|
box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 18%, transparent);
|
|
204
215
|
}
|
|
205
216
|
|
|
217
|
+
/* Layout variants. `navbar-rounded` adds the inset treatment; use
|
|
218
|
+
`navbar-full` for a flush, full-width rectangle. */
|
|
219
|
+
.navbar.appbar-bordered.navbar-rounded {
|
|
220
|
+
margin: 8px 0;
|
|
221
|
+
padding: 4px;
|
|
222
|
+
border-radius: 16px;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.navbar.appbar-bordered.navbar-full {
|
|
226
|
+
width: 100%;
|
|
227
|
+
margin: 0;
|
|
228
|
+
padding: 0;
|
|
229
|
+
border-radius: 0;
|
|
230
|
+
border-left: 0;
|
|
231
|
+
border-right: 0;
|
|
232
|
+
}
|
|
233
|
+
|
|
206
234
|
/* Extended app bars may contain tabs and a halfway FAB. Keep the rounded
|
|
207
235
|
surface on its children, but let the FAB extend below the bar. */
|
|
208
236
|
.navbar.appbar-bordered.nav-extended {
|
|
209
237
|
overflow: visible;
|
|
210
238
|
}
|
|
211
239
|
|
|
212
|
-
.navbar.appbar-bordered.nav-extended .nav-wrapper {
|
|
240
|
+
.navbar.appbar-bordered.nav-extended.navbar-rounded .nav-wrapper {
|
|
213
241
|
border-radius: 15px 15px 0 0;
|
|
214
242
|
}
|
|
215
243
|
|
|
216
|
-
.navbar.appbar-bordered.nav-extended .nav-content {
|
|
244
|
+
.navbar.appbar-bordered.nav-extended.navbar-rounded .nav-content {
|
|
217
245
|
color: var(--md-sys-color-on-surface);
|
|
218
246
|
background: var(--md-sys-color-surface-variant);
|
|
219
247
|
border-radius: 0 0 15px 15px;
|
|
@@ -223,6 +251,49 @@
|
|
|
223
251
|
gap: 12px;
|
|
224
252
|
padding-inline: 12px;
|
|
225
253
|
background: var(--md-sys-color-surface-variant);
|
|
254
|
+
align-items: center;
|
|
255
|
+
min-width: 0;
|
|
256
|
+
overflow-x: auto;
|
|
257
|
+
overflow-y: hidden;
|
|
258
|
+
scrollbar-width: none;
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.navbar.appbar-bordered .nav-wrapper > .brand-logo,
|
|
262
|
+
.navbar.appbar-bordered .nav-wrapper > ul:not(.dropdown-content),
|
|
263
|
+
.navbar.appbar-bordered .nav-actions > li {
|
|
264
|
+
align-self: center;
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
.navbar.appbar-bordered:not(.nav-extended) .nav-wrapper > .brand-logo,
|
|
268
|
+
.navbar.appbar-bordered:not(.nav-extended) .nav-wrapper > ul:not(.dropdown-content),
|
|
269
|
+
.navbar.appbar-bordered:not(.nav-extended) .nav-wrapper > ul:not(.dropdown-content) > li {
|
|
270
|
+
height: 40px;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.navbar.appbar-bordered .nav-actions > li {
|
|
274
|
+
display: flex;
|
|
275
|
+
align-items: center;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.navbar.appbar-bordered .nav-wrapper::-webkit-scrollbar {
|
|
279
|
+
display: none;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.navbar.appbar-bordered .nav-wrapper > ul:not(.dropdown-content) {
|
|
283
|
+
min-width: 0;
|
|
284
|
+
flex-shrink: 1;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.navbar.appbar-bordered.navbar-wrap .nav-wrapper {
|
|
288
|
+
flex-wrap: wrap;
|
|
289
|
+
height: auto;
|
|
290
|
+
row-gap: 8px;
|
|
291
|
+
overflow: visible;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.navbar.appbar-bordered.navbar-wrap .nav-wrapper > ul:not(.dropdown-content) {
|
|
295
|
+
flex-wrap: wrap;
|
|
296
|
+
white-space: normal;
|
|
226
297
|
}
|
|
227
298
|
|
|
228
299
|
.navbar .brand-logo .brand-logo-image {
|
|
@@ -319,15 +390,25 @@
|
|
|
319
390
|
margin: 0;
|
|
320
391
|
color: var(--md-sys-color-on-primary);
|
|
321
392
|
white-space: nowrap;
|
|
393
|
+
display: inline-flex;
|
|
394
|
+
align-items: center;
|
|
395
|
+
justify-content: center;
|
|
396
|
+
gap: 8px;
|
|
322
397
|
}
|
|
323
398
|
|
|
324
399
|
.navbar.appbar-bordered ul:not(.dropdown-content) > li > :is(.btn, .btn-large) > .material-icons {
|
|
400
|
+
flex: 0 0 20px;
|
|
325
401
|
width: 20px;
|
|
326
402
|
height: 20px;
|
|
327
403
|
margin-left: 8px;
|
|
328
404
|
line-height: 20px;
|
|
329
405
|
}
|
|
330
406
|
|
|
407
|
+
.navbar.appbar-bordered .dropdown-trigger {
|
|
408
|
+
flex: 0 0 auto;
|
|
409
|
+
white-space: nowrap;
|
|
410
|
+
}
|
|
411
|
+
|
|
331
412
|
.navbar.appbar-bordered ul:not(.dropdown-content) > li > a:has(> .material-icons:only-child) {
|
|
332
413
|
display: grid;
|
|
333
414
|
place-items: center;
|
|
@@ -248,7 +248,7 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
|
|
|
248
248
|
if (this.options.closeOnClick && target.closest('.dropdown-content') && !this.isTouchMoving) {
|
|
249
249
|
// isTouchMoving to check if scrolling on mobile.
|
|
250
250
|
this.close();
|
|
251
|
-
} else if (!target.closest('.dropdown-content')) {
|
|
251
|
+
} else if (!target.closest('.dropdown-content') && !target.closest('.dropdown-trigger')) {
|
|
252
252
|
// Do this one frame later so that if the element clicked also triggers _handleClick
|
|
253
253
|
// For example, if a label for a select was clicked, that we don't close/open the dropdown
|
|
254
254
|
setTimeout(() => {
|
package/dist/css/materialize.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Materialize v2.3.3-1.0.
|
|
2
|
+
* Materialize v2.3.3-1.0.19 (https://materializeweb.com)
|
|
3
3
|
* Copyright 2014-2026 Materialize
|
|
4
4
|
* MIT License (https://raw.githubusercontent.com/materializecss/materialize/master/LICENSE)
|
|
5
5
|
*/
|
|
@@ -13718,6 +13718,141 @@ button.btn-floating {
|
|
|
13718
13718
|
border-radius: 99999px;
|
|
13719
13719
|
}
|
|
13720
13720
|
|
|
13721
|
+
.alert {
|
|
13722
|
+
--alert-container: var(--md-sys-color-surface-variant);
|
|
13723
|
+
--alert-on-container: var(--md-sys-color-on-surface-variant);
|
|
13724
|
+
--alert-border: var(--md-sys-color-outline-variant);
|
|
13725
|
+
position: relative;
|
|
13726
|
+
display: -webkit-box;
|
|
13727
|
+
display: -webkit-flex;
|
|
13728
|
+
display: -ms-flexbox;
|
|
13729
|
+
display: flex;
|
|
13730
|
+
-webkit-box-align: start;
|
|
13731
|
+
-webkit-align-items: flex-start;
|
|
13732
|
+
-ms-flex-align: start;
|
|
13733
|
+
align-items: flex-start;
|
|
13734
|
+
gap: 0.875rem;
|
|
13735
|
+
width: 100%;
|
|
13736
|
+
-webkit-box-sizing: border-box;
|
|
13737
|
+
box-sizing: border-box;
|
|
13738
|
+
padding: 1rem 1.125rem;
|
|
13739
|
+
margin: 0 0 1rem;
|
|
13740
|
+
border: 1px solid transparent;
|
|
13741
|
+
border-radius: 0.75rem;
|
|
13742
|
+
background: var(--alert-container);
|
|
13743
|
+
color: var(--alert-on-container);
|
|
13744
|
+
line-height: 1.5;
|
|
13745
|
+
}
|
|
13746
|
+
.alert .alert-icon {
|
|
13747
|
+
-webkit-box-flex: 0;
|
|
13748
|
+
-webkit-flex: 0 0 auto;
|
|
13749
|
+
-ms-flex: 0 0 auto;
|
|
13750
|
+
flex: 0 0 auto;
|
|
13751
|
+
margin-top: 0.125rem;
|
|
13752
|
+
font-size: 1.375rem;
|
|
13753
|
+
line-height: 1;
|
|
13754
|
+
}
|
|
13755
|
+
.alert .alert-content {
|
|
13756
|
+
min-width: 0;
|
|
13757
|
+
-webkit-box-flex: 1;
|
|
13758
|
+
-webkit-flex: 1 1 auto;
|
|
13759
|
+
-ms-flex: 1 1 auto;
|
|
13760
|
+
flex: 1 1 auto;
|
|
13761
|
+
}
|
|
13762
|
+
.alert .alert-title {
|
|
13763
|
+
display: block;
|
|
13764
|
+
margin: 0 0 0.25rem;
|
|
13765
|
+
font-weight: 600;
|
|
13766
|
+
}
|
|
13767
|
+
.alert .alert-message {
|
|
13768
|
+
margin: 0;
|
|
13769
|
+
}
|
|
13770
|
+
.alert .alert-close {
|
|
13771
|
+
display: -webkit-inline-box;
|
|
13772
|
+
display: -webkit-inline-flex;
|
|
13773
|
+
display: -ms-inline-flexbox;
|
|
13774
|
+
display: inline-flex;
|
|
13775
|
+
-webkit-box-flex: 0;
|
|
13776
|
+
-webkit-flex: 0 0 auto;
|
|
13777
|
+
-ms-flex: 0 0 auto;
|
|
13778
|
+
flex: 0 0 auto;
|
|
13779
|
+
-webkit-box-align: center;
|
|
13780
|
+
-webkit-align-items: center;
|
|
13781
|
+
-ms-flex-align: center;
|
|
13782
|
+
align-items: center;
|
|
13783
|
+
-webkit-box-pack: center;
|
|
13784
|
+
-webkit-justify-content: center;
|
|
13785
|
+
-ms-flex-pack: center;
|
|
13786
|
+
justify-content: center;
|
|
13787
|
+
width: 2rem;
|
|
13788
|
+
height: 2rem;
|
|
13789
|
+
margin: -0.25rem -0.375rem -0.25rem 0;
|
|
13790
|
+
padding: 0;
|
|
13791
|
+
border: 0;
|
|
13792
|
+
border-radius: 50%;
|
|
13793
|
+
background: transparent;
|
|
13794
|
+
color: inherit;
|
|
13795
|
+
cursor: pointer;
|
|
13796
|
+
}
|
|
13797
|
+
.alert .alert-close:hover, .alert .alert-close:focus-visible {
|
|
13798
|
+
background: color-mix(in srgb, currentColor 12%, transparent);
|
|
13799
|
+
}
|
|
13800
|
+
.alert .alert-close .material-icons {
|
|
13801
|
+
font-size: 1.25rem;
|
|
13802
|
+
}
|
|
13803
|
+
.alert.alert-info {
|
|
13804
|
+
--alert-container: var(--md-sys-color-secondary-container);
|
|
13805
|
+
--alert-on-container: var(--md-sys-color-on-secondary-container);
|
|
13806
|
+
--alert-border: var(--md-sys-color-secondary);
|
|
13807
|
+
}
|
|
13808
|
+
.alert.alert-success {
|
|
13809
|
+
--alert-container: var(--md-sys-color-tertiary-container);
|
|
13810
|
+
--alert-on-container: var(--md-sys-color-on-tertiary-container);
|
|
13811
|
+
--alert-border: var(--md-sys-color-tertiary);
|
|
13812
|
+
}
|
|
13813
|
+
.alert.alert-warning {
|
|
13814
|
+
--alert-container: var(--md-sys-color-primary-container);
|
|
13815
|
+
--alert-on-container: var(--md-sys-color-on-primary-container);
|
|
13816
|
+
--alert-border: var(--md-sys-color-primary);
|
|
13817
|
+
}
|
|
13818
|
+
.alert.alert-error {
|
|
13819
|
+
--alert-container: var(--md-sys-color-error-container);
|
|
13820
|
+
--alert-on-container: var(--md-sys-color-on-error-container);
|
|
13821
|
+
--alert-border: var(--md-sys-color-error);
|
|
13822
|
+
}
|
|
13823
|
+
.alert.alert-outlined {
|
|
13824
|
+
border-color: var(--alert-border);
|
|
13825
|
+
background: transparent;
|
|
13826
|
+
}
|
|
13827
|
+
.alert.alert-filled {
|
|
13828
|
+
border-color: var(--alert-border);
|
|
13829
|
+
background: var(--alert-border);
|
|
13830
|
+
color: var(--md-sys-color-on-primary);
|
|
13831
|
+
}
|
|
13832
|
+
.alert.alert-compact {
|
|
13833
|
+
-webkit-box-align: center;
|
|
13834
|
+
-webkit-align-items: center;
|
|
13835
|
+
-ms-flex-align: center;
|
|
13836
|
+
align-items: center;
|
|
13837
|
+
padding-block: 0.625rem;
|
|
13838
|
+
}
|
|
13839
|
+
.alert[hidden] {
|
|
13840
|
+
display: none;
|
|
13841
|
+
}
|
|
13842
|
+
|
|
13843
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
13844
|
+
.alert {
|
|
13845
|
+
-webkit-transition: opacity 180ms ease, -webkit-transform 180ms ease;
|
|
13846
|
+
transition: opacity 180ms ease, -webkit-transform 180ms ease;
|
|
13847
|
+
transition: opacity 180ms ease, transform 180ms ease;
|
|
13848
|
+
transition: opacity 180ms ease, transform 180ms ease, -webkit-transform 180ms ease;
|
|
13849
|
+
}
|
|
13850
|
+
.alert.alert-dismissing {
|
|
13851
|
+
opacity: 0;
|
|
13852
|
+
-webkit-transform: translateY(-0.25rem);
|
|
13853
|
+
transform: translateY(-0.25rem);
|
|
13854
|
+
}
|
|
13855
|
+
}
|
|
13721
13856
|
.collapsible {
|
|
13722
13857
|
padding-left: 0;
|
|
13723
13858
|
list-style-type: none;
|
|
@@ -15368,6 +15503,17 @@ body.keyboard-focused .dropdown-content li:focus {
|
|
|
15368
15503
|
-ms-flex: 1 1 0px;
|
|
15369
15504
|
flex: 1 1 0;
|
|
15370
15505
|
min-width: 0;
|
|
15506
|
+
overflow-x: auto;
|
|
15507
|
+
overflow-y: hidden;
|
|
15508
|
+
scrollbar-width: none;
|
|
15509
|
+
}
|
|
15510
|
+
|
|
15511
|
+
.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > ul::-webkit-scrollbar {
|
|
15512
|
+
display: none;
|
|
15513
|
+
}
|
|
15514
|
+
|
|
15515
|
+
.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > ul > li > a {
|
|
15516
|
+
white-space: nowrap;
|
|
15371
15517
|
}
|
|
15372
15518
|
|
|
15373
15519
|
.navbar.appbar-bordered .nav-wrapper.nav-wrapper-centered > .brand-logo.center {
|
|
@@ -15410,25 +15556,42 @@ body.keyboard-focused .dropdown-content li:focus {
|
|
|
15410
15556
|
/* Structured MD3 app-bar content. These hooks keep branded demos and app
|
|
15411
15557
|
shells from falling back to bare, loosely spaced anchor elements. */
|
|
15412
15558
|
.navbar.appbar-bordered {
|
|
15413
|
-
overflow:
|
|
15559
|
+
overflow: visible;
|
|
15414
15560
|
background: var(--md-sys-color-surface-variant);
|
|
15415
15561
|
border: 1px solid var(--md-sys-color-outline-variant);
|
|
15416
|
-
border-radius:
|
|
15562
|
+
border-radius: 0;
|
|
15417
15563
|
-webkit-box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 18%, transparent);
|
|
15418
15564
|
box-shadow: 0 1px 2px color-mix(in srgb, var(--md-sys-color-shadow) 18%, transparent);
|
|
15419
15565
|
}
|
|
15420
15566
|
|
|
15567
|
+
/* Layout variants. `navbar-rounded` adds the inset treatment; use
|
|
15568
|
+
`navbar-full` for a flush, full-width rectangle. */
|
|
15569
|
+
.navbar.appbar-bordered.navbar-rounded {
|
|
15570
|
+
margin: 8px 0;
|
|
15571
|
+
padding: 4px;
|
|
15572
|
+
border-radius: 16px;
|
|
15573
|
+
}
|
|
15574
|
+
|
|
15575
|
+
.navbar.appbar-bordered.navbar-full {
|
|
15576
|
+
width: 100%;
|
|
15577
|
+
margin: 0;
|
|
15578
|
+
padding: 0;
|
|
15579
|
+
border-radius: 0;
|
|
15580
|
+
border-left: 0;
|
|
15581
|
+
border-right: 0;
|
|
15582
|
+
}
|
|
15583
|
+
|
|
15421
15584
|
/* Extended app bars may contain tabs and a halfway FAB. Keep the rounded
|
|
15422
15585
|
surface on its children, but let the FAB extend below the bar. */
|
|
15423
15586
|
.navbar.appbar-bordered.nav-extended {
|
|
15424
15587
|
overflow: visible;
|
|
15425
15588
|
}
|
|
15426
15589
|
|
|
15427
|
-
.navbar.appbar-bordered.nav-extended .nav-wrapper {
|
|
15590
|
+
.navbar.appbar-bordered.nav-extended.navbar-rounded .nav-wrapper {
|
|
15428
15591
|
border-radius: 15px 15px 0 0;
|
|
15429
15592
|
}
|
|
15430
15593
|
|
|
15431
|
-
.navbar.appbar-bordered.nav-extended .nav-content {
|
|
15594
|
+
.navbar.appbar-bordered.nav-extended.navbar-rounded .nav-content {
|
|
15432
15595
|
color: var(--md-sys-color-on-surface);
|
|
15433
15596
|
background: var(--md-sys-color-surface-variant);
|
|
15434
15597
|
border-radius: 0 0 15px 15px;
|
|
@@ -15438,6 +15601,66 @@ body.keyboard-focused .dropdown-content li:focus {
|
|
|
15438
15601
|
gap: 12px;
|
|
15439
15602
|
padding-inline: 12px;
|
|
15440
15603
|
background: var(--md-sys-color-surface-variant);
|
|
15604
|
+
-webkit-box-align: center;
|
|
15605
|
+
-webkit-align-items: center;
|
|
15606
|
+
-ms-flex-align: center;
|
|
15607
|
+
align-items: center;
|
|
15608
|
+
min-width: 0;
|
|
15609
|
+
overflow-x: auto;
|
|
15610
|
+
overflow-y: hidden;
|
|
15611
|
+
scrollbar-width: none;
|
|
15612
|
+
}
|
|
15613
|
+
|
|
15614
|
+
.navbar.appbar-bordered .nav-wrapper > .brand-logo,
|
|
15615
|
+
.navbar.appbar-bordered .nav-wrapper > ul:not(.dropdown-content),
|
|
15616
|
+
.navbar.appbar-bordered .nav-actions > li {
|
|
15617
|
+
-webkit-align-self: center;
|
|
15618
|
+
-ms-flex-item-align: center;
|
|
15619
|
+
align-self: center;
|
|
15620
|
+
}
|
|
15621
|
+
|
|
15622
|
+
.navbar.appbar-bordered:not(.nav-extended) .nav-wrapper > .brand-logo,
|
|
15623
|
+
.navbar.appbar-bordered:not(.nav-extended) .nav-wrapper > ul:not(.dropdown-content),
|
|
15624
|
+
.navbar.appbar-bordered:not(.nav-extended) .nav-wrapper > ul:not(.dropdown-content) > li {
|
|
15625
|
+
height: 40px;
|
|
15626
|
+
}
|
|
15627
|
+
|
|
15628
|
+
.navbar.appbar-bordered .nav-actions > li {
|
|
15629
|
+
display: -webkit-box;
|
|
15630
|
+
display: -webkit-flex;
|
|
15631
|
+
display: -ms-flexbox;
|
|
15632
|
+
display: flex;
|
|
15633
|
+
-webkit-box-align: center;
|
|
15634
|
+
-webkit-align-items: center;
|
|
15635
|
+
-ms-flex-align: center;
|
|
15636
|
+
align-items: center;
|
|
15637
|
+
}
|
|
15638
|
+
|
|
15639
|
+
.navbar.appbar-bordered .nav-wrapper::-webkit-scrollbar {
|
|
15640
|
+
display: none;
|
|
15641
|
+
}
|
|
15642
|
+
|
|
15643
|
+
.navbar.appbar-bordered .nav-wrapper > ul:not(.dropdown-content) {
|
|
15644
|
+
min-width: 0;
|
|
15645
|
+
-webkit-flex-shrink: 1;
|
|
15646
|
+
-ms-flex-negative: 1;
|
|
15647
|
+
flex-shrink: 1;
|
|
15648
|
+
}
|
|
15649
|
+
|
|
15650
|
+
.navbar.appbar-bordered.navbar-wrap .nav-wrapper {
|
|
15651
|
+
-webkit-flex-wrap: wrap;
|
|
15652
|
+
-ms-flex-wrap: wrap;
|
|
15653
|
+
flex-wrap: wrap;
|
|
15654
|
+
height: auto;
|
|
15655
|
+
row-gap: 8px;
|
|
15656
|
+
overflow: visible;
|
|
15657
|
+
}
|
|
15658
|
+
|
|
15659
|
+
.navbar.appbar-bordered.navbar-wrap .nav-wrapper > ul:not(.dropdown-content) {
|
|
15660
|
+
-webkit-flex-wrap: wrap;
|
|
15661
|
+
-ms-flex-wrap: wrap;
|
|
15662
|
+
flex-wrap: wrap;
|
|
15663
|
+
white-space: normal;
|
|
15441
15664
|
}
|
|
15442
15665
|
|
|
15443
15666
|
.navbar .brand-logo .brand-logo-image {
|
|
@@ -15550,15 +15773,40 @@ body.keyboard-focused .dropdown-content li:focus {
|
|
|
15550
15773
|
margin: 0;
|
|
15551
15774
|
color: var(--md-sys-color-on-primary);
|
|
15552
15775
|
white-space: nowrap;
|
|
15776
|
+
display: -webkit-inline-box;
|
|
15777
|
+
display: -webkit-inline-flex;
|
|
15778
|
+
display: -ms-inline-flexbox;
|
|
15779
|
+
display: inline-flex;
|
|
15780
|
+
-webkit-box-align: center;
|
|
15781
|
+
-webkit-align-items: center;
|
|
15782
|
+
-ms-flex-align: center;
|
|
15783
|
+
align-items: center;
|
|
15784
|
+
-webkit-box-pack: center;
|
|
15785
|
+
-webkit-justify-content: center;
|
|
15786
|
+
-ms-flex-pack: center;
|
|
15787
|
+
justify-content: center;
|
|
15788
|
+
gap: 8px;
|
|
15553
15789
|
}
|
|
15554
15790
|
|
|
15555
15791
|
.navbar.appbar-bordered ul:not(.dropdown-content) > li > :is(.btn, .btn-large) > .material-icons {
|
|
15792
|
+
-webkit-box-flex: 0;
|
|
15793
|
+
-webkit-flex: 0 0 20px;
|
|
15794
|
+
-ms-flex: 0 0 20px;
|
|
15795
|
+
flex: 0 0 20px;
|
|
15556
15796
|
width: 20px;
|
|
15557
15797
|
height: 20px;
|
|
15558
15798
|
margin-left: 8px;
|
|
15559
15799
|
line-height: 20px;
|
|
15560
15800
|
}
|
|
15561
15801
|
|
|
15802
|
+
.navbar.appbar-bordered .dropdown-trigger {
|
|
15803
|
+
-webkit-box-flex: 0;
|
|
15804
|
+
-webkit-flex: 0 0 auto;
|
|
15805
|
+
-ms-flex: 0 0 auto;
|
|
15806
|
+
flex: 0 0 auto;
|
|
15807
|
+
white-space: nowrap;
|
|
15808
|
+
}
|
|
15809
|
+
|
|
15562
15810
|
.navbar.appbar-bordered ul:not(.dropdown-content) > li > a:has(> .material-icons:only-child) {
|
|
15563
15811
|
display: grid;
|
|
15564
15812
|
place-items: center;
|