@webority/theme 0.30.0 → 0.32.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 +2 -2
- package/dist/purge-safelist.json +44 -29
- package/dist/webority-theme.css +1 -1
- package/package.json +1 -1
- package/scss/_tokens.scss +1 -0
- package/scss/_variables.scss +1 -0
- package/scss/_wui-components.scss +3 -0
- package/scss/wui/_chart.scss +5 -309
- package/scss/wui/_chat.scss +82 -0
- package/scss/wui/_floating.scss +64 -0
- package/scss/wui/_kanban.scss +67 -4
- package/scss/wui/_media.scss +12 -0
- package/scss/wui/_shell.scss +8 -0
- package/scss/wui/_table-server.scss +4 -3
- package/scss/wui/_tour.scss +97 -0
|
@@ -8,11 +8,12 @@
|
|
|
8
8
|
// (`.tbl-empty-block`) reuse the client-side table rules in _data.scss unchanged.
|
|
9
9
|
|
|
10
10
|
// While a page is in flight the current rows stay in place, dimmed, so the table does not jump;
|
|
11
|
-
// they are not interactive until the new page lands.
|
|
11
|
+
// they are not interactive until the new page lands. A table with no rows shows placeholder rows
|
|
12
|
+
// instead, at full strength.
|
|
12
13
|
.wui-table-server > .table-wrap[aria-busy="true"] {
|
|
13
14
|
cursor: progress;
|
|
14
15
|
}
|
|
15
|
-
.wui-table-server > .table-wrap[aria-busy="true"] > .table > tbody {
|
|
16
|
+
.wui-table-server > .table-wrap[aria-busy="true"] > .table > tbody:not(:has(> tr[data-wui-skeleton])) {
|
|
16
17
|
opacity: 0.55;
|
|
17
18
|
pointer-events: none;
|
|
18
19
|
transition: opacity 0.15s ease;
|
|
@@ -34,7 +35,7 @@
|
|
|
34
35
|
}
|
|
35
36
|
|
|
36
37
|
@media (prefers-reduced-motion: reduce) {
|
|
37
|
-
.wui-table-server > .table-wrap[aria-busy="true"] > .table > tbody {
|
|
38
|
+
.wui-table-server > .table-wrap[aria-busy="true"] > .table > tbody:not(:has(> tr[data-wui-skeleton])) {
|
|
38
39
|
transition: none;
|
|
39
40
|
}
|
|
40
41
|
}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
// ── Product tour ──
|
|
2
|
+
// AppTour / <app-tour> / <wui-tour>: a dimmed page with one highlighted element and a card
|
|
3
|
+
// holding the step text and Back / Next / Skip. The element appends .wui-tour-layer to <body>
|
|
4
|
+
// and positions .wui-tour-spot (over the target) and .wui-tour-card (against the spot, through
|
|
5
|
+
// anchorOverlay, which sets position, top and left inline). Everything visual is here, every
|
|
6
|
+
// colour a theme token.
|
|
7
|
+
//
|
|
8
|
+
// Part of the wui-components layer, see _wui-components.scss for load order.
|
|
9
|
+
|
|
10
|
+
// The step data of a server-rendered tour is plain markup the element reads and the page never shows.
|
|
11
|
+
wui-tour,
|
|
12
|
+
wui-tour-step {
|
|
13
|
+
display: none;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.wui-tour-layer {
|
|
17
|
+
position: fixed;
|
|
18
|
+
inset: 0;
|
|
19
|
+
z-index: var(--wui-z-tour);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// The dim is the spot's own shadow, so the hole around the target needs no clip-path.
|
|
23
|
+
.wui-tour-spot {
|
|
24
|
+
position: fixed;
|
|
25
|
+
border-radius: var(--wui-radius-sm);
|
|
26
|
+
box-shadow:
|
|
27
|
+
0 0 0 2px var(--color-primary),
|
|
28
|
+
0 0 0 100vmax var(--color-scrim-strong);
|
|
29
|
+
pointer-events: none;
|
|
30
|
+
}
|
|
31
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
32
|
+
.wui-tour-spot {
|
|
33
|
+
transition:
|
|
34
|
+
top 160ms ease,
|
|
35
|
+
left 160ms ease,
|
|
36
|
+
width 160ms ease,
|
|
37
|
+
height 160ms ease;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.wui-tour-card {
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: column;
|
|
44
|
+
gap: 8px;
|
|
45
|
+
width: min(360px, calc(100vw - 16px));
|
|
46
|
+
padding: 16px;
|
|
47
|
+
overflow-y: auto;
|
|
48
|
+
background: var(--color-surface);
|
|
49
|
+
color: var(--color-text);
|
|
50
|
+
border: 1px solid var(--color-border);
|
|
51
|
+
border-radius: var(--wui-radius-lg);
|
|
52
|
+
corner-shape: squircle;
|
|
53
|
+
box-shadow: var(--wui-shadow-overlay);
|
|
54
|
+
&:focus {
|
|
55
|
+
outline: none;
|
|
56
|
+
}
|
|
57
|
+
&:focus-visible {
|
|
58
|
+
outline: 2px solid var(--color-primary);
|
|
59
|
+
outline-offset: 2px;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.wui-tour-position {
|
|
64
|
+
margin: 0;
|
|
65
|
+
font-size: 12px;
|
|
66
|
+
color: var(--color-text-muted);
|
|
67
|
+
}
|
|
68
|
+
.wui-tour-title {
|
|
69
|
+
margin: 0;
|
|
70
|
+
font-size: 16px;
|
|
71
|
+
font-weight: 600;
|
|
72
|
+
}
|
|
73
|
+
.wui-tour-text {
|
|
74
|
+
margin: 0;
|
|
75
|
+
font-size: 14px;
|
|
76
|
+
color: var(--color-text-muted);
|
|
77
|
+
}
|
|
78
|
+
.wui-tour-actions {
|
|
79
|
+
display: flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
justify-content: space-between;
|
|
82
|
+
gap: 8px;
|
|
83
|
+
margin-top: 4px;
|
|
84
|
+
}
|
|
85
|
+
.wui-tour-nav {
|
|
86
|
+
display: flex;
|
|
87
|
+
gap: 8px;
|
|
88
|
+
}
|
|
89
|
+
// The buttons keep Bootstrap's look; the width stops the label change between Next and Done from
|
|
90
|
+
// moving the row, and Skip reads as the quiet action.
|
|
91
|
+
.wui-tour-skip {
|
|
92
|
+
color: var(--color-text-muted);
|
|
93
|
+
}
|
|
94
|
+
.wui-tour-back,
|
|
95
|
+
.wui-tour-next {
|
|
96
|
+
min-width: 64px;
|
|
97
|
+
}
|