@redseed/redseed-ui-tailwindcss 7.54.0 → 7.55.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/stage_dial.css +60 -0
- package/components.css +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
.rsui-stage-dial {
|
|
2
|
+
/* Accent falls back to a neutral token when the consumer supplies no color. */
|
|
3
|
+
--rsui-stage-dial-accent: var(--color-background-secondary-contrast);
|
|
4
|
+
|
|
5
|
+
@apply relative m-0 p-0 shrink-0 before:hidden after:hidden;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
/* Size ramp — mirrors ProgressCircle's sm/md/lg, scaled up because the dial
|
|
9
|
+
carries centre content inside the ring. The stroke is in viewBox units, so it
|
|
10
|
+
scales with the box and needs no per-size rule. */
|
|
11
|
+
.rsui-stage-dial--sm {
|
|
12
|
+
@apply size-16 text-xs;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.rsui-stage-dial--md {
|
|
16
|
+
@apply size-24 text-sm;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.rsui-stage-dial--lg {
|
|
20
|
+
@apply size-32 text-base;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.rsui-stage-dial__svg {
|
|
24
|
+
@apply w-full h-full;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* The unfilled ring behind every stage, so the full arc reads as the scale even
|
|
28
|
+
when only the first stage is reached. */
|
|
29
|
+
.rsui-stage-dial__track {
|
|
30
|
+
@apply fill-none stroke-border-primary;
|
|
31
|
+
|
|
32
|
+
stroke-width: 9;
|
|
33
|
+
stroke-linecap: round;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.rsui-stage-dial__fill {
|
|
37
|
+
@apply fill-none;
|
|
38
|
+
|
|
39
|
+
stroke: var(--rsui-stage-dial-accent);
|
|
40
|
+
stroke-width: 9;
|
|
41
|
+
stroke-linecap: round;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* Opt-in draw-in. The per-segment delay is set inline by the component, which
|
|
45
|
+
is what staggers the segments. */
|
|
46
|
+
.rsui-stage-dial--animate .rsui-stage-dial__fill {
|
|
47
|
+
transition: stroke-dasharray 0.75s cubic-bezier(0.22, 1, 0.36, 1);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* The ring's inner edge sits at 12.5% of the box (radius 42 less half the
|
|
51
|
+
9-unit stroke, of 50), so a 15% inset keeps centre content clear of it. */
|
|
52
|
+
.rsui-stage-dial__content {
|
|
53
|
+
@apply absolute inset-[15%] flex items-center justify-center text-center;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@media (prefers-reduced-motion: reduce) {
|
|
57
|
+
.rsui-stage-dial--animate .rsui-stage-dial__fill {
|
|
58
|
+
transition: none;
|
|
59
|
+
}
|
|
60
|
+
}
|
package/components.css
CHANGED
|
@@ -98,6 +98,7 @@ Please be careful when adding new components and updating the order.
|
|
|
98
98
|
@import './components/skeleton.css';
|
|
99
99
|
@import './components/single_column_layout.css';
|
|
100
100
|
@import './components/sorting.css';
|
|
101
|
+
@import './components/stage_dial.css';
|
|
101
102
|
@import './components/switcher.css';
|
|
102
103
|
@import './components/switcher_item.css';
|
|
103
104
|
@import './components/tab_slider.css';
|