@redseed/redseed-ui-tailwindcss 7.50.0 → 7.51.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/components/loader.css +57 -5
- package/package.json +1 -1
package/components/loader.css
CHANGED
|
@@ -2,22 +2,74 @@
|
|
|
2
2
|
@apply max-w-24 max-h-24 min-w-3 min-h-3 transition;
|
|
3
3
|
}
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
/* The mark carries its own intrinsic width/height, so it scales down to
|
|
6
|
+
whatever the container allows — the max-* above when standalone, or the
|
|
7
|
+
size Icon sets on its child when nested inside one. */
|
|
8
|
+
.rsui-loader svg {
|
|
9
|
+
@apply w-auto h-auto max-w-full max-h-full;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
/* Default: the two-tone RedSeed mark. The colour props override both halves
|
|
13
|
+
with a single colour, for places where the brand mark would compete — on a
|
|
14
|
+
filled button, or inline in a sentence. */
|
|
15
|
+
.rsui-loader--brand .rsui-loader__mark {
|
|
16
|
+
fill: var(--Colors-Journey-Green-500);
|
|
7
17
|
}
|
|
8
18
|
|
|
9
|
-
.rsui-loader--
|
|
19
|
+
.rsui-loader--brand .rsui-loader__accent {
|
|
20
|
+
fill: var(--Colors-Warm-Mauve-500);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.rsui-loader--primary .rsui-loader__mark,
|
|
24
|
+
.rsui-loader--primary .rsui-loader__accent {
|
|
10
25
|
@apply fill-text-primary;
|
|
11
26
|
}
|
|
12
27
|
|
|
13
|
-
.rsui-loader--secondary
|
|
28
|
+
.rsui-loader--secondary .rsui-loader__mark,
|
|
29
|
+
.rsui-loader--secondary .rsui-loader__accent {
|
|
14
30
|
@apply fill-text-secondary;
|
|
15
31
|
}
|
|
16
32
|
|
|
17
|
-
.rsui-loader--white
|
|
33
|
+
.rsui-loader--white .rsui-loader__mark,
|
|
34
|
+
.rsui-loader--white .rsui-loader__accent {
|
|
18
35
|
@apply fill-background-primary;
|
|
19
36
|
}
|
|
20
37
|
|
|
38
|
+
/* 417 is the length of the mask path. The stroke paints in over the first
|
|
39
|
+
half of the cycle, holds for a beat, then retraces back out. */
|
|
40
|
+
.rsui-loader__journey {
|
|
41
|
+
stroke-dasharray: 417;
|
|
42
|
+
stroke-dashoffset: 417;
|
|
43
|
+
animation: rsui-loader-paint 2.6s linear infinite;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@keyframes rsui-loader-paint {
|
|
47
|
+
0% {
|
|
48
|
+
stroke-dashoffset: 417;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
49.52% {
|
|
52
|
+
stroke-dashoffset: 0;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
50.48% {
|
|
56
|
+
stroke-dashoffset: 0;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
100% {
|
|
60
|
+
stroke-dashoffset: 417;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* Reduced motion still needs the mark visible — the loader is the only thing
|
|
65
|
+
on screen while content loads, so hiding it would leave an empty region. */
|
|
66
|
+
@media (prefers-reduced-motion: reduce) {
|
|
67
|
+
.rsui-loader__journey {
|
|
68
|
+
animation: none;
|
|
69
|
+
stroke-dashoffset: 0;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
21
73
|
.rsui-loader__label {
|
|
22
74
|
@apply sr-only;
|
|
23
75
|
}
|