inviton-powerduck 0.0.367 → 0.0.368
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.
|
@@ -1,87 +1,96 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* LoadingIndicator styles — holdon-style overlay + SpinKit "sk-rect" spinner.
|
|
3
|
-
*
|
|
4
|
-
* LoadingIndicatorComponent (./index.tsx) emits the `.holdon-overlay` /
|
|
5
|
-
* `.holdon-content` / `.sk-rect` / `.rect1..5` / `.sr-only` classes but the
|
|
6
|
-
* stylesheet for them was never shipped with the component, so the spinner
|
|
7
|
-
* bars rendered as unstyled (invisible) divs and the "Loading..." sr-only
|
|
8
|
-
* label leaked as plain text (Bootstrap 5 dropped `.sr-only`). Added as part
|
|
9
|
-
* of QA_AT-220 (DataTable loading preloader) so the reused LoadingIndicator
|
|
10
|
-
* actually shows a centered, animated spinner everywhere it is mounted.
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
.
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.sk-rect
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
1
|
+
/*
|
|
2
|
+
* LoadingIndicator styles — holdon-style overlay + SpinKit "sk-rect" spinner.
|
|
3
|
+
*
|
|
4
|
+
* LoadingIndicatorComponent (./index.tsx) emits the `.holdon-overlay` /
|
|
5
|
+
* `.holdon-content` / `.sk-rect` / `.rect1..5` / `.sr-only` classes but the
|
|
6
|
+
* stylesheet for them was never shipped with the component, so the spinner
|
|
7
|
+
* bars rendered as unstyled (invisible) divs and the "Loading..." sr-only
|
|
8
|
+
* label leaked as plain text (Bootstrap 5 dropped `.sr-only`). Added as part
|
|
9
|
+
* of QA_AT-220 (DataTable loading preloader) so the reused LoadingIndicator
|
|
10
|
+
* actually shows a centered, animated spinner everywhere it is mounted.
|
|
11
|
+
*
|
|
12
|
+
* COLLISION CONTRACT (gap-regression follow-up): host apps commonly ship the
|
|
13
|
+
* original HoldOn.js CSS globally (e.g. an inline <style> in index.html that
|
|
14
|
+
* styles their boot overlay and injected blockers) and it targets these SAME
|
|
15
|
+
* class names. This sheet must therefore behave as a DEFAULT, never an
|
|
16
|
+
* override:
|
|
17
|
+
* - the overlay rule sits in `:where()` (zero specificity) so app-level
|
|
18
|
+
* `.holdon-overlay` styling — backgrounds in particular — keeps winning;
|
|
19
|
+
* - bar spacing uses `margin-left: 2px`, the exact HoldOn.js value, instead
|
|
20
|
+
* of flex `gap`: gap STACKS with the host's margin (2px + 3px = 5px bar
|
|
21
|
+
* gaps), while a value-identical margin is a no-op regardless of cascade
|
|
22
|
+
* order;
|
|
23
|
+
* - no `.holdon-content` rule: flex-centering it shifted the spinner inside
|
|
24
|
+
* HoldOn.js' absolutely-positioned 50x57 content box; the overlay's own
|
|
25
|
+
* flex centering already covers hosts without app-level holdon CSS.
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
:where(.holdon-element.holdon-overlay) {
|
|
29
|
+
position: absolute;
|
|
30
|
+
inset: 0;
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: center;
|
|
33
|
+
justify-content: center;
|
|
34
|
+
background-color: rgba(255, 255, 255, 0.65);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* SpinKit "rect" — five bars that stretch in sequence. */
|
|
38
|
+
.sk-rect {
|
|
39
|
+
width: 50px;
|
|
40
|
+
height: 40px;
|
|
41
|
+
display: inline-flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
justify-content: center;
|
|
44
|
+
text-align: center;
|
|
45
|
+
font-size: 10px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.sk-rect > div {
|
|
49
|
+
background-color: #b3b3b3;
|
|
50
|
+
width: 6px;
|
|
51
|
+
height: 100%;
|
|
52
|
+
margin-left: 2px;
|
|
53
|
+
display: inline-block;
|
|
54
|
+
animation: holdon-sk-stretchdelay 1.2s infinite ease-in-out;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.sk-rect .rect2 {
|
|
58
|
+
animation-delay: -1.1s;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.sk-rect .rect3 {
|
|
62
|
+
animation-delay: -1s;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.sk-rect .rect4 {
|
|
66
|
+
animation-delay: -0.9s;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.sk-rect .rect5 {
|
|
70
|
+
animation-delay: -0.8s;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
@keyframes holdon-sk-stretchdelay {
|
|
74
|
+
0%,
|
|
75
|
+
40%,
|
|
76
|
+
100% {
|
|
77
|
+
transform: scaleY(0.4);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
20% {
|
|
81
|
+
transform: scaleY(1);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* Screen-reader-only: hide the "Loading..." label visually (Bootstrap 5 has no .sr-only). */
|
|
86
|
+
.holdon-element .sr-only {
|
|
87
|
+
position: absolute;
|
|
88
|
+
width: 1px;
|
|
89
|
+
height: 1px;
|
|
90
|
+
padding: 0;
|
|
91
|
+
margin: -1px;
|
|
92
|
+
overflow: hidden;
|
|
93
|
+
clip: rect(0, 0, 0, 0);
|
|
94
|
+
white-space: nowrap;
|
|
95
|
+
border: 0;
|
|
96
|
+
}
|