@duskmoon-dev/core 1.18.5 → 1.19.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.
- package/README.md +1 -1
- package/dist/cjs/tailwind-plugin.cjs +2 -2
- package/dist/components/console-page.css +178 -0
- package/dist/components/home-page.css +94 -0
- package/dist/components/index.css +366 -0
- package/dist/components/sign-page.css +80 -0
- package/dist/components/table.css +10 -0
- package/dist/components/tooltip.css +1 -0
- package/dist/esm/components/accordion.d.ts +5 -0
- package/dist/esm/components/accordion.js +4 -2
- package/dist/esm/components/alert.d.ts +5 -0
- package/dist/esm/components/alert.js +4 -2
- package/dist/esm/components/appbar.d.ts +5 -0
- package/dist/esm/components/appbar.js +4 -2
- package/dist/esm/components/autocomplete.d.ts +5 -0
- package/dist/esm/components/autocomplete.js +4 -2
- package/dist/esm/components/avatar.d.ts +5 -0
- package/dist/esm/components/avatar.js +4 -2
- package/dist/esm/components/badge.d.ts +5 -0
- package/dist/esm/components/badge.js +4 -2
- package/dist/esm/components/bottom-navigation.d.ts +5 -0
- package/dist/esm/components/bottom-navigation.js +4 -2
- package/dist/esm/components/bottomsheet.d.ts +5 -0
- package/dist/esm/components/bottomsheet.js +4 -2
- package/dist/esm/components/button.d.ts +5 -0
- package/dist/esm/components/button.js +4 -2
- package/dist/esm/components/card.d.ts +5 -0
- package/dist/esm/components/card.js +4 -2
- package/dist/esm/components/cascader.d.ts +5 -0
- package/dist/esm/components/cascader.js +4 -2
- package/dist/esm/components/chat.d.ts +5 -0
- package/dist/esm/components/chat.js +4 -2
- package/dist/esm/components/checkbox.d.ts +5 -0
- package/dist/esm/components/checkbox.js +4 -2
- package/dist/esm/components/chip.d.ts +5 -0
- package/dist/esm/components/chip.js +4 -2
- package/dist/esm/components/circle-menu.d.ts +5 -0
- package/dist/esm/components/circle-menu.js +4 -2
- package/dist/esm/components/code-block.d.ts +5 -0
- package/dist/esm/components/code-block.js +4 -2
- package/dist/esm/components/collapse.d.ts +5 -0
- package/dist/esm/components/collapse.js +4 -2
- package/dist/esm/components/console-page.d.ts +5 -0
- package/dist/esm/components/console-page.js +187 -0
- package/dist/esm/components/datepicker.d.ts +5 -0
- package/dist/esm/components/datepicker.js +4 -2
- package/dist/esm/components/dialog.d.ts +5 -0
- package/dist/esm/components/dialog.js +4 -2
- package/dist/esm/components/divider.d.ts +5 -0
- package/dist/esm/components/divider.js +4 -2
- package/dist/esm/components/drawer.d.ts +5 -0
- package/dist/esm/components/drawer.js +4 -2
- package/dist/esm/components/file-upload.d.ts +5 -0
- package/dist/esm/components/file-upload.js +4 -2
- package/dist/esm/components/form-group.d.ts +5 -0
- package/dist/esm/components/form-group.js +4 -2
- package/dist/esm/components/form.d.ts +5 -0
- package/dist/esm/components/form.js +4 -2
- package/dist/esm/components/home-page.d.ts +5 -0
- package/dist/esm/components/home-page.js +103 -0
- package/dist/esm/components/input.d.ts +5 -0
- package/dist/esm/components/input.js +4 -2
- package/dist/esm/components/list.d.ts +5 -0
- package/dist/esm/components/list.js +4 -2
- package/dist/esm/components/markdown-body.d.ts +5 -0
- package/dist/esm/components/markdown-body.js +4 -2
- package/dist/esm/components/modal.d.ts +5 -0
- package/dist/esm/components/modal.js +4 -2
- package/dist/esm/components/multi-select.d.ts +5 -0
- package/dist/esm/components/multi-select.js +4 -2
- package/dist/esm/components/navigation.d.ts +5 -0
- package/dist/esm/components/navigation.js +4 -2
- package/dist/esm/components/nested-menu.d.ts +5 -0
- package/dist/esm/components/nested-menu.js +4 -2
- package/dist/esm/components/otp-input.d.ts +5 -0
- package/dist/esm/components/otp-input.js +4 -2
- package/dist/esm/components/pin-input.d.ts +5 -0
- package/dist/esm/components/pin-input.js +4 -2
- package/dist/esm/components/popover.d.ts +5 -0
- package/dist/esm/components/popover.js +4 -2
- package/dist/esm/components/progress.d.ts +5 -0
- package/dist/esm/components/progress.js +4 -2
- package/dist/esm/components/radio.d.ts +5 -0
- package/dist/esm/components/radio.js +4 -2
- package/dist/esm/components/rating.d.ts +5 -0
- package/dist/esm/components/rating.js +4 -2
- package/dist/esm/components/segment-control.d.ts +5 -0
- package/dist/esm/components/segment-control.js +4 -2
- package/dist/esm/components/select.d.ts +5 -0
- package/dist/esm/components/select.js +4 -2
- package/dist/esm/components/sign-page.d.ts +5 -0
- package/dist/esm/components/sign-page.js +89 -0
- package/dist/esm/components/skeleton.d.ts +5 -0
- package/dist/esm/components/skeleton.js +4 -2
- package/dist/esm/components/slider.d.ts +5 -0
- package/dist/esm/components/slider.js +4 -2
- package/dist/esm/components/snackbar.d.ts +5 -0
- package/dist/esm/components/snackbar.js +4 -2
- package/dist/esm/components/stepper.d.ts +5 -0
- package/dist/esm/components/stepper.js +4 -2
- package/dist/esm/components/switch.d.ts +5 -0
- package/dist/esm/components/switch.js +4 -2
- package/dist/esm/components/table.d.ts +5 -0
- package/dist/esm/components/table.js +14 -2
- package/dist/esm/components/textarea.d.ts +5 -0
- package/dist/esm/components/textarea.js +4 -2
- package/dist/esm/components/theme-controller.d.ts +5 -0
- package/dist/esm/components/theme-controller.js +4 -2
- package/dist/esm/components/time-input.d.ts +5 -0
- package/dist/esm/components/time-input.js +4 -2
- package/dist/esm/components/timeline.d.ts +5 -0
- package/dist/esm/components/timeline.js +4 -2
- package/dist/esm/components/toast.d.ts +5 -0
- package/dist/esm/components/toast.js +4 -2
- package/dist/esm/components/toggle.d.ts +5 -0
- package/dist/esm/components/toggle.js +4 -2
- package/dist/esm/components/tooltip.d.ts +5 -0
- package/dist/esm/components/tooltip.js +5 -2
- package/dist/esm/components/tree-select.d.ts +5 -0
- package/dist/esm/components/tree-select.js +4 -2
- package/dist/index.css +366 -0
- package/dist/index.min.css +1 -1
- package/dist/standalone/duskmoonui-themes.css +1 -1
- package/dist/standalone/duskmoonui.css +368 -2
- package/dist/standalone/duskmoonui.js +10 -6
- package/dist/standalone/duskmoonui.mjs +10 -6
- package/package.json +72 -1
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Sign Page Layout
|
|
3
|
+
* Responsive authentication shell driven by its containing width.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
@layer components {
|
|
7
|
+
.sign-page {
|
|
8
|
+
container-type: inline-size;
|
|
9
|
+
container-name: sign-page;
|
|
10
|
+
width: 100%;
|
|
11
|
+
min-width: 0;
|
|
12
|
+
min-height: var(--sign-page-min-height, 100dvh);
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
background-color: var(--color-surface);
|
|
15
|
+
color: var(--color-on-surface);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.sign-page-frame {
|
|
19
|
+
display: grid;
|
|
20
|
+
min-height: inherit;
|
|
21
|
+
grid-template-columns: minmax(0, 1fr);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.sign-page-aside {
|
|
25
|
+
display: none;
|
|
26
|
+
position: relative;
|
|
27
|
+
isolation: isolate;
|
|
28
|
+
overflow: hidden;
|
|
29
|
+
padding: clamp(2rem, 6cqi, 5rem);
|
|
30
|
+
background-color: var(--color-primary-container);
|
|
31
|
+
color: var(--color-on-primary-container);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.sign-page-aside::before,
|
|
35
|
+
.sign-page-aside::after {
|
|
36
|
+
content: "";
|
|
37
|
+
position: absolute;
|
|
38
|
+
z-index: -1;
|
|
39
|
+
border-radius: var(--radius-full);
|
|
40
|
+
background: color-mix(in oklch, var(--color-tertiary) 24%, transparent);
|
|
41
|
+
filter: blur(1px);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.sign-page-aside::before {
|
|
45
|
+
width: 22rem;
|
|
46
|
+
height: 22rem;
|
|
47
|
+
inset: -8rem -6rem auto auto;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.sign-page-aside::after {
|
|
51
|
+
width: 15rem;
|
|
52
|
+
height: 15rem;
|
|
53
|
+
inset: auto auto -5rem -4rem;
|
|
54
|
+
background: color-mix(in oklch, var(--color-secondary) 22%, transparent);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.sign-page-main {
|
|
58
|
+
display: grid;
|
|
59
|
+
place-items: center;
|
|
60
|
+
min-width: 0;
|
|
61
|
+
padding: clamp(1rem, 6cqi, 4rem);
|
|
62
|
+
background-color: var(--color-surface);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.sign-page-content {
|
|
66
|
+
width: min(100%, 30rem);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@container sign-page (min-width: 48rem) {
|
|
70
|
+
.sign-page-frame {
|
|
71
|
+
grid-template-columns: minmax(20rem, 1.15fr) minmax(24rem, 0.85fr);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.sign-page-aside {
|
|
75
|
+
display: flex;
|
|
76
|
+
flex-direction: column;
|
|
77
|
+
justify-content: space-between;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
}
|
|
@@ -127,6 +127,16 @@
|
|
|
127
127
|
box-shadow: var(--shadow-xs);
|
|
128
128
|
}
|
|
129
129
|
|
|
130
|
+
.table-sticky th,
|
|
131
|
+
.table-sticky thead th,
|
|
132
|
+
.table-sticky .table-header-cell {
|
|
133
|
+
position: sticky;
|
|
134
|
+
top: 0;
|
|
135
|
+
z-index: 10;
|
|
136
|
+
background-color: var(--color-surface-container);
|
|
137
|
+
box-shadow: var(--shadow-xs);
|
|
138
|
+
}
|
|
139
|
+
|
|
130
140
|
/* Sortable Header */
|
|
131
141
|
.table-sortable th {
|
|
132
142
|
cursor: pointer;
|
|
@@ -245,7 +245,9 @@ export const css = `/**
|
|
|
245
245
|
}
|
|
246
246
|
`;
|
|
247
247
|
|
|
248
|
-
const sheet = new CSSStyleSheet();
|
|
249
|
-
sheet
|
|
248
|
+
const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
|
|
249
|
+
if (sheet) {
|
|
250
|
+
sheet.replaceSync(css);
|
|
251
|
+
}
|
|
250
252
|
export const styles = sheet;
|
|
251
253
|
export default sheet;
|
|
@@ -321,7 +321,9 @@ export const css = `/**
|
|
|
321
321
|
}
|
|
322
322
|
`;
|
|
323
323
|
|
|
324
|
-
const sheet = new CSSStyleSheet();
|
|
325
|
-
sheet
|
|
324
|
+
const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
|
|
325
|
+
if (sheet) {
|
|
326
|
+
sheet.replaceSync(css);
|
|
327
|
+
}
|
|
326
328
|
export const styles = sheet;
|
|
327
329
|
export default sheet;
|
|
@@ -662,7 +662,9 @@ export const css = `/**
|
|
|
662
662
|
}
|
|
663
663
|
`;
|
|
664
664
|
|
|
665
|
-
const sheet = new CSSStyleSheet();
|
|
666
|
-
sheet
|
|
665
|
+
const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
|
|
666
|
+
if (sheet) {
|
|
667
|
+
sheet.replaceSync(css);
|
|
668
|
+
}
|
|
667
669
|
export const styles = sheet;
|
|
668
670
|
export default sheet;
|
|
@@ -351,7 +351,9 @@ export const css = `/**
|
|
|
351
351
|
}
|
|
352
352
|
`;
|
|
353
353
|
|
|
354
|
-
const sheet = new CSSStyleSheet();
|
|
355
|
-
sheet
|
|
354
|
+
const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
|
|
355
|
+
if (sheet) {
|
|
356
|
+
sheet.replaceSync(css);
|
|
357
|
+
}
|
|
356
358
|
export const styles = sheet;
|
|
357
359
|
export default sheet;
|
|
@@ -203,7 +203,9 @@ export const css = `/**
|
|
|
203
203
|
}
|
|
204
204
|
`;
|
|
205
205
|
|
|
206
|
-
const sheet = new CSSStyleSheet();
|
|
207
|
-
sheet
|
|
206
|
+
const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
|
|
207
|
+
if (sheet) {
|
|
208
|
+
sheet.replaceSync(css);
|
|
209
|
+
}
|
|
208
210
|
export const styles = sheet;
|
|
209
211
|
export default sheet;
|
|
@@ -253,7 +253,9 @@ export const css = `/**
|
|
|
253
253
|
}
|
|
254
254
|
`;
|
|
255
255
|
|
|
256
|
-
const sheet = new CSSStyleSheet();
|
|
257
|
-
sheet
|
|
256
|
+
const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
|
|
257
|
+
if (sheet) {
|
|
258
|
+
sheet.replaceSync(css);
|
|
259
|
+
}
|
|
258
260
|
export const styles = sheet;
|
|
259
261
|
export default sheet;
|
|
@@ -264,7 +264,9 @@ export const css = `/**
|
|
|
264
264
|
}
|
|
265
265
|
`;
|
|
266
266
|
|
|
267
|
-
const sheet = new CSSStyleSheet();
|
|
268
|
-
sheet
|
|
267
|
+
const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
|
|
268
|
+
if (sheet) {
|
|
269
|
+
sheet.replaceSync(css);
|
|
270
|
+
}
|
|
269
271
|
export const styles = sheet;
|
|
270
272
|
export default sheet;
|
|
@@ -335,7 +335,9 @@ export const css = `/**
|
|
|
335
335
|
}
|
|
336
336
|
`;
|
|
337
337
|
|
|
338
|
-
const sheet = new CSSStyleSheet();
|
|
339
|
-
sheet
|
|
338
|
+
const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
|
|
339
|
+
if (sheet) {
|
|
340
|
+
sheet.replaceSync(css);
|
|
341
|
+
}
|
|
340
342
|
export const styles = sheet;
|
|
341
343
|
export default sheet;
|
|
@@ -671,7 +671,9 @@ export const css = `/**
|
|
|
671
671
|
}
|
|
672
672
|
`;
|
|
673
673
|
|
|
674
|
-
const sheet = new CSSStyleSheet();
|
|
675
|
-
sheet
|
|
674
|
+
const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
|
|
675
|
+
if (sheet) {
|
|
676
|
+
sheet.replaceSync(css);
|
|
677
|
+
}
|
|
676
678
|
export const styles = sheet;
|
|
677
679
|
export default sheet;
|
|
@@ -291,7 +291,9 @@ export const css = `/**
|
|
|
291
291
|
}
|
|
292
292
|
`;
|
|
293
293
|
|
|
294
|
-
const sheet = new CSSStyleSheet();
|
|
295
|
-
sheet
|
|
294
|
+
const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
|
|
295
|
+
if (sheet) {
|
|
296
|
+
sheet.replaceSync(css);
|
|
297
|
+
}
|
|
296
298
|
export const styles = sheet;
|
|
297
299
|
export default sheet;
|
|
@@ -490,7 +490,9 @@ export const css = `/**
|
|
|
490
490
|
}
|
|
491
491
|
`;
|
|
492
492
|
|
|
493
|
-
const sheet = new CSSStyleSheet();
|
|
494
|
-
sheet
|
|
493
|
+
const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
|
|
494
|
+
if (sheet) {
|
|
495
|
+
sheet.replaceSync(css);
|
|
496
|
+
}
|
|
495
497
|
export const styles = sheet;
|
|
496
498
|
export default sheet;
|
|
@@ -836,7 +836,9 @@ export const css = `@layer components {
|
|
|
836
836
|
}
|
|
837
837
|
`;
|
|
838
838
|
|
|
839
|
-
const sheet = new CSSStyleSheet();
|
|
840
|
-
sheet
|
|
839
|
+
const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
|
|
840
|
+
if (sheet) {
|
|
841
|
+
sheet.replaceSync(css);
|
|
842
|
+
}
|
|
841
843
|
export const styles = sheet;
|
|
842
844
|
export default sheet;
|
|
@@ -270,7 +270,9 @@ export const css = `/**
|
|
|
270
270
|
}
|
|
271
271
|
`;
|
|
272
272
|
|
|
273
|
-
const sheet = new CSSStyleSheet();
|
|
274
|
-
sheet
|
|
273
|
+
const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
|
|
274
|
+
if (sheet) {
|
|
275
|
+
sheet.replaceSync(css);
|
|
276
|
+
}
|
|
275
277
|
export const styles = sheet;
|
|
276
278
|
export default sheet;
|
|
@@ -409,7 +409,9 @@ export const css = `/**
|
|
|
409
409
|
}
|
|
410
410
|
`;
|
|
411
411
|
|
|
412
|
-
const sheet = new CSSStyleSheet();
|
|
413
|
-
sheet
|
|
412
|
+
const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
|
|
413
|
+
if (sheet) {
|
|
414
|
+
sheet.replaceSync(css);
|
|
415
|
+
}
|
|
414
416
|
export const styles = sheet;
|
|
415
417
|
export default sheet;
|
|
@@ -349,7 +349,9 @@ export const css = `/**
|
|
|
349
349
|
}
|
|
350
350
|
`;
|
|
351
351
|
|
|
352
|
-
const sheet = new CSSStyleSheet();
|
|
353
|
-
sheet
|
|
352
|
+
const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
|
|
353
|
+
if (sheet) {
|
|
354
|
+
sheet.replaceSync(css);
|
|
355
|
+
}
|
|
354
356
|
export const styles = sheet;
|
|
355
357
|
export default sheet;
|
|
@@ -134,7 +134,9 @@ export const css = `/**
|
|
|
134
134
|
}
|
|
135
135
|
`;
|
|
136
136
|
|
|
137
|
-
const sheet = new CSSStyleSheet();
|
|
138
|
-
sheet
|
|
137
|
+
const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
|
|
138
|
+
if (sheet) {
|
|
139
|
+
sheet.replaceSync(css);
|
|
140
|
+
}
|
|
139
141
|
export const styles = sheet;
|
|
140
142
|
export default sheet;
|
|
@@ -517,7 +517,9 @@ export const css = `/**
|
|
|
517
517
|
}
|
|
518
518
|
`;
|
|
519
519
|
|
|
520
|
-
const sheet = new CSSStyleSheet();
|
|
521
|
-
sheet
|
|
520
|
+
const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
|
|
521
|
+
if (sheet) {
|
|
522
|
+
sheet.replaceSync(css);
|
|
523
|
+
}
|
|
522
524
|
export const styles = sheet;
|
|
523
525
|
export default sheet;
|
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
// Auto-generated from console-page.css
|
|
2
|
+
export const css = `/**
|
|
3
|
+
* Console Page Layout
|
|
4
|
+
* Responsive application shell with expanded, icon-rail, and hidden sidebar states.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
@layer components {
|
|
8
|
+
.console-page {
|
|
9
|
+
--console-page-sidebar-width: 17.5rem;
|
|
10
|
+
--console-page-sidebar-compact-width: 5rem;
|
|
11
|
+
container-type: inline-size;
|
|
12
|
+
container-name: console-page;
|
|
13
|
+
width: 100%;
|
|
14
|
+
min-width: 0;
|
|
15
|
+
min-height: var(--console-page-min-height, 100dvh);
|
|
16
|
+
background-color: var(--color-surface);
|
|
17
|
+
color: var(--color-on-surface);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.console-page-frame {
|
|
21
|
+
display: grid;
|
|
22
|
+
min-height: inherit;
|
|
23
|
+
grid-template-areas:
|
|
24
|
+
"appbar"
|
|
25
|
+
"main";
|
|
26
|
+
grid-template-columns: minmax(0, 1fr);
|
|
27
|
+
grid-template-rows: auto minmax(0, 1fr);
|
|
28
|
+
transition: grid-template-columns 240ms ease-out;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.console-page-appbar {
|
|
32
|
+
grid-area: appbar;
|
|
33
|
+
z-index: 20;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.console-page-sidebar {
|
|
37
|
+
display: none;
|
|
38
|
+
grid-area: sidebar;
|
|
39
|
+
min-width: 0;
|
|
40
|
+
overflow: hidden;
|
|
41
|
+
background-color: var(--color-surface-container-low);
|
|
42
|
+
border-inline-end: 1px solid var(--color-outline-variant);
|
|
43
|
+
transition:
|
|
44
|
+
opacity 160ms ease-out,
|
|
45
|
+
visibility 160ms ease-out;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.console-page-sidebar-header,
|
|
49
|
+
.console-page-sidebar-footer {
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
gap: 0.75rem;
|
|
53
|
+
min-height: 4rem;
|
|
54
|
+
padding: 0.75rem 1rem;
|
|
55
|
+
flex-shrink: 0;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.console-page-sidebar-header {
|
|
59
|
+
border-bottom: 1px solid var(--color-outline-variant);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.console-page-sidebar-body {
|
|
63
|
+
flex: 1;
|
|
64
|
+
min-height: 0;
|
|
65
|
+
overflow-y: auto;
|
|
66
|
+
overflow-x: hidden;
|
|
67
|
+
padding-block: 0.5rem;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.console-page-sidebar-footer {
|
|
71
|
+
border-top: 1px solid var(--color-outline-variant);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.console-page-main {
|
|
75
|
+
grid-area: main;
|
|
76
|
+
min-width: 0;
|
|
77
|
+
overflow: auto;
|
|
78
|
+
padding: clamp(1rem, 4cqi, 2.5rem);
|
|
79
|
+
background-color: var(--color-surface);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.console-page-nav-label {
|
|
83
|
+
overflow: hidden;
|
|
84
|
+
text-overflow: ellipsis;
|
|
85
|
+
white-space: nowrap;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.console-page-sidebar-toggle {
|
|
89
|
+
display: none;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.console-page-menu-trigger {
|
|
93
|
+
display: inline-flex;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.console-page-mobile-menu {
|
|
97
|
+
max-width: min(20rem, calc(100cqi - 2rem));
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
@container console-page (min-width: 48rem) {
|
|
101
|
+
.console-page-frame {
|
|
102
|
+
grid-template-areas:
|
|
103
|
+
"appbar appbar"
|
|
104
|
+
"sidebar main";
|
|
105
|
+
grid-template-columns: var(--console-page-sidebar-width) minmax(0, 1fr);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.console-page-sidebar {
|
|
109
|
+
display: flex;
|
|
110
|
+
flex-direction: column;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.console-page-sidebar-toggle {
|
|
114
|
+
display: inline-flex;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.console-page-menu-trigger {
|
|
118
|
+
display: none;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.console-page-mobile-menu {
|
|
122
|
+
display: none;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.console-page-sidebar-compact .console-page-frame {
|
|
126
|
+
grid-template-columns: var(--console-page-sidebar-compact-width) minmax(0, 1fr);
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.console-page-sidebar-compact .console-page-nav-label {
|
|
130
|
+
position: absolute;
|
|
131
|
+
width: 1px;
|
|
132
|
+
height: 1px;
|
|
133
|
+
padding: 0;
|
|
134
|
+
margin: -1px;
|
|
135
|
+
overflow: hidden;
|
|
136
|
+
clip: rect(0, 0, 0, 0);
|
|
137
|
+
white-space: nowrap;
|
|
138
|
+
border: 0;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.console-page-sidebar-compact .console-page-sidebar-header,
|
|
142
|
+
.console-page-sidebar-compact .console-page-sidebar-footer {
|
|
143
|
+
justify-content: center;
|
|
144
|
+
padding-inline: 0.75rem;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.console-page-sidebar-compact .console-page-sidebar-body :is(.nested-menu li > a, .nested-menu li > button, .nested-menu summary) {
|
|
148
|
+
justify-content: center;
|
|
149
|
+
padding-inline: 0.75rem;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.console-page-sidebar-compact .console-page-sidebar-body .drawer-item {
|
|
153
|
+
justify-content: center;
|
|
154
|
+
padding-inline: 0.75rem;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.console-page-sidebar-compact .console-page-sidebar-body :is(.nested-menu-title, details > ul, summary::after) {
|
|
158
|
+
display: none;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.console-page-sidebar-hidden .console-page-frame {
|
|
162
|
+
grid-template-areas:
|
|
163
|
+
"appbar"
|
|
164
|
+
"main";
|
|
165
|
+
grid-template-columns: minmax(0, 1fr);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.console-page-sidebar-hidden .console-page-sidebar {
|
|
169
|
+
display: none;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
@media (prefers-reduced-motion: reduce) {
|
|
174
|
+
.console-page-frame,
|
|
175
|
+
.console-page-sidebar {
|
|
176
|
+
transition: none;
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
`;
|
|
181
|
+
|
|
182
|
+
const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
|
|
183
|
+
if (sheet) {
|
|
184
|
+
sheet.replaceSync(css);
|
|
185
|
+
}
|
|
186
|
+
export const styles = sheet;
|
|
187
|
+
export default sheet;
|
|
@@ -857,7 +857,9 @@ export const css = `/**
|
|
|
857
857
|
}
|
|
858
858
|
`;
|
|
859
859
|
|
|
860
|
-
const sheet = new CSSStyleSheet();
|
|
861
|
-
sheet
|
|
860
|
+
const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
|
|
861
|
+
if (sheet) {
|
|
862
|
+
sheet.replaceSync(css);
|
|
863
|
+
}
|
|
862
864
|
export const styles = sheet;
|
|
863
865
|
export default sheet;
|