winduum 2.2.22 → 2.2.23
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/package.json +1 -1
- package/src/base/keyframes.css +32 -0
- package/tailwindcss/theme/config/radius.css +9 -1
- package/tailwindcss/utilities/animation-timeline.css +51 -0
- package/tailwindcss/utilities/animation-trigger.css +38 -0
- package/tailwindcss/utilities/animation.css +88 -0
- package/tailwindcss/utilities/index.css +2 -0
package/package.json
CHANGED
package/src/base/keyframes.css
CHANGED
|
@@ -15,3 +15,35 @@
|
|
|
15
15
|
opacity: 0%;
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
+
|
|
19
|
+
@keyframes enter {
|
|
20
|
+
from {
|
|
21
|
+
opacity: var(--tw-animation-from-opacity, 0%);
|
|
22
|
+
translate: var(--tw-animation-from-translate-x, 0) var(--tw-animation-from-translate-y, 0);
|
|
23
|
+
scale: var(--tw-animation-from-scale, none);
|
|
24
|
+
rotate: var(--tw-animation-from-rotate, none);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
to {
|
|
28
|
+
opacity: var(--tw-animation-to-opacity, 100%);
|
|
29
|
+
translate: var(--tw-animation-to-translate-x, 0) var(--tw-animation-to-translate-y, 0);
|
|
30
|
+
scale: var(--tw-animation-to-scale, none);
|
|
31
|
+
rotate: var(--tw-animation-to-rotate, none);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@keyframes exit {
|
|
36
|
+
from {
|
|
37
|
+
opacity: var(--tw-animation-from-opacity, 100%);
|
|
38
|
+
translate: var(--tw-animation-from-translate-x, 0) var(--tw-animation-from-translate-y, 0);
|
|
39
|
+
scale: var(--tw-animation-from-scale, none);
|
|
40
|
+
rotate: var(--tw-animation-from-rotate, none);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
to {
|
|
44
|
+
opacity: var(--tw-animation-to-opacity, 0%);
|
|
45
|
+
translate: var(--tw-animation-to-translate-x, 0) var(--tw-animation-to-translate-y, 0);
|
|
46
|
+
scale: var(--tw-animation-to-scale, none);
|
|
47
|
+
rotate: var(--tw-animation-to-rotate, none);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
@@ -1,4 +1,12 @@
|
|
|
1
1
|
@theme {
|
|
2
|
-
--radius:
|
|
2
|
+
--radius: 0.125rem;
|
|
3
|
+
--radius-xs: calc(var(--radius) * 1);
|
|
4
|
+
--radius-sm: calc(var(--radius) * 2);
|
|
5
|
+
--radius-md: calc(var(--radius) * 3);
|
|
6
|
+
--radius-lg: calc(var(--radius) * 4);
|
|
7
|
+
--radius-xl: calc(var(--radius) * 6);
|
|
8
|
+
--radius-2xl: calc(var(--radius) * 8);
|
|
9
|
+
--radius-3xl: calc(var(--radius) * 12);
|
|
10
|
+
--radius-4xl: calc(var(--radius) * 16);
|
|
3
11
|
--radius-full: calc(infinity * 1px);
|
|
4
12
|
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
@utility timeline-scope-* {
|
|
2
|
+
timeline-scope: --value([*]) y;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
@utility scroll-timeline-y-* {
|
|
6
|
+
scroll-timeline: --value([*]) y;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@utility scroll-timeline-x-* {
|
|
10
|
+
scroll-timeline: --value([*]) x;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@utility scroll-timeline-block {
|
|
14
|
+
scroll-timeline: --value([*]) block;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@utility view-timeline-y-* {
|
|
18
|
+
view-timeline: --value([*]) y;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@utility view-timeline-x-* {
|
|
22
|
+
view-timeline: --value([*]) x;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@utility view-timeline-block {
|
|
26
|
+
view-timeline: --value([*]) block;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@utility animation-timeline-scroll {
|
|
30
|
+
animation-timeline: scroll();
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@utility animation-timeline-scroll-y {
|
|
34
|
+
animation-timeline: scroll(y);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@utility animation-timeline-scroll-x {
|
|
38
|
+
animation-timeline: scroll(x);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@utility animation-timeline-view {
|
|
42
|
+
animation-timeline: view();
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@utility animation-timeline-* {
|
|
46
|
+
animation-timeline: --value("auto", "none", [ *]);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@utility animation-range-* {
|
|
50
|
+
animation-range: --value([*]);
|
|
51
|
+
}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
@utility timeline-trigger-enter {
|
|
2
|
+
timeline-trigger: --enter view() entry var(--tw-timeline-trigger-entry, 20%) exit var(--tw-timeline-trigger-exit, 0%);
|
|
3
|
+
trigger-scope: --enter;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
@utility timeline-trigger-* {
|
|
7
|
+
timeline-trigger: --value([*]) view() entry var(--tw-timeline-trigger-entry, 20%) exit var(--tw-timeline-trigger-exit, 0%);
|
|
8
|
+
trigger-scope: --value([*]);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@utility animation-trigger-enter {
|
|
12
|
+
animation-duration: var(--tw-animation-duration, 1.75s);
|
|
13
|
+
animation-timing-function: var(--tw-animation-timing-function, var(--ease-emphasized));
|
|
14
|
+
animation-fill-mode: var(--tw-animation-fill-mode, both);
|
|
15
|
+
animation-trigger: --enter var(--tw-animation-trigger-action, play-once);
|
|
16
|
+
|
|
17
|
+
@supports (timeline-trigger-name: --v) {
|
|
18
|
+
animation-name: enter;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@supports not (timeline-trigger-name: --v) {
|
|
22
|
+
&:is([data-in]),
|
|
23
|
+
:is([data-in]) & {
|
|
24
|
+
animation-name: enter;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@utility animation-trigger-* {
|
|
30
|
+
animation-duration: var(--tw-animation-duration, 1.75s);
|
|
31
|
+
animation-timing-function: var(--tw-animation-timing-function, var(--ease-emphasized));
|
|
32
|
+
animation-fill-mode: var(--tw-animation-fill-mode, both);
|
|
33
|
+
animation-trigger: --modifier([*]) var(--tw-animation-trigger-action, play-once);
|
|
34
|
+
|
|
35
|
+
@supports (timeline-trigger: --v) {
|
|
36
|
+
animation-name: --value([*]);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -1,3 +1,91 @@
|
|
|
1
1
|
@utility animation-* {
|
|
2
2
|
animation-name: --value(--animation-*, [family-name]);
|
|
3
3
|
}
|
|
4
|
+
|
|
5
|
+
@utility from-translate-y-* {
|
|
6
|
+
--tw-animation-from-translate-y: --value([length]);
|
|
7
|
+
--tw-animation-from-translate-y: calc(var(--spacing) * --value(number, [number]));
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@utility to-translate-y-* {
|
|
11
|
+
--tw-animation-to-translate-y: --value([length]);
|
|
12
|
+
--tw-animation-to-translate-y: calc(var(--spacing) * --value(number, [number]));
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@utility -from-translate-y-* {
|
|
16
|
+
--tw-animation-from-translate-y: calc(--value([length]) * -1);
|
|
17
|
+
--tw-animation-from-translate-y: calc(var(--spacing) * --value(number, [number]) * -1);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
@utility -to-translate-y-* {
|
|
21
|
+
--tw-animation-to-translate-y: calc(--value([length]) * -1);
|
|
22
|
+
--tw-animation-to-translate-y: calc(var(--spacing) * --value(number, [number]) * -1);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@utility from-translate-x-* {
|
|
26
|
+
--tw-animation-from-translate-x: --value([length]);
|
|
27
|
+
--tw-animation-from-translate-x: calc(var(--spacing) * --value(number, [number]));
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@utility to-translate-x-* {
|
|
31
|
+
--tw-animation-to-translate-x: --value([length]);
|
|
32
|
+
--tw-animation-to-translate-x: calc(var(--spacing) * --value(number, [number]));
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
@utility -from-translate-x-* {
|
|
36
|
+
--tw-animation-from-translate-x: calc(--value([length]) * -1);
|
|
37
|
+
--tw-animation-from-translate-x: calc(var(--spacing) * --value(number, [number]) * -1);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@utility -to-translate-x-* {
|
|
41
|
+
--tw-animation-to-translate-x: calc(--value([length]) * -1);
|
|
42
|
+
--tw-animation-to-translate-x: calc(var(--spacing) * --value(number, [number]) * -1);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@utility from-opacity-* {
|
|
46
|
+
--tw-animation-from-opacity: --value(percentage, [percentage]);
|
|
47
|
+
--tw-animation-from-opacity: calc(--value(integer) * 1%);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@utility to-opacity-* {
|
|
51
|
+
--tw-animation-to-opacity: --value(percentage, [percentage]);
|
|
52
|
+
--tw-animation-to-opacity: calc(--value(integer) * 1%);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
@utility -from-opacity-* {
|
|
56
|
+
--tw-animation-from-opacity: calc(--value([percentage]) * -1);
|
|
57
|
+
--tw-animation-from-opacity: calc(--value(integer) * -1 * 1%);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
@utility -to-opacity-* {
|
|
61
|
+
--tw-animation-to-opacity: calc(--value([percentage]) * -1);
|
|
62
|
+
--tw-animation-to-opacity: calc(--value(integer) * -1 * 1%);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@utility from-scale-* {
|
|
66
|
+
--tw-animation-from-scale: --value(percentage, [percentage]);
|
|
67
|
+
--tw-animation-from-scale: calc(--value(integer) * 1%);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@utility to-scale-* {
|
|
71
|
+
--tw-animation-to-scale: --value(percentage, [percentage]);
|
|
72
|
+
--tw-animation-to-scale: calc(--value(integer) * 1%);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@utility -from-scale-* {
|
|
76
|
+
--tw-animation-from-scale: calc(--value([percentage]) * -1);
|
|
77
|
+
--tw-animation-from-scale: calc(--value(integer) * -1 * 1%);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@utility -to-scale-* {
|
|
81
|
+
--tw-animation-to-scale: calc(--value([percentage]) * -1);
|
|
82
|
+
--tw-animation-to-scale: calc(--value(integer) * -1 * 1%);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
@utility from-rotate-* {
|
|
86
|
+
--tw-animation-from-rotate: --value([*]);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
@utility to-rotate-* {
|
|
90
|
+
--tw-animation-to-rotate: --value([*]);
|
|
91
|
+
}
|