@avenue-ticketing/ui 0.12.0-beta.3 → 0.12.0-beta.4
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/theme.css +49 -0
package/package.json
CHANGED
package/theme.css
CHANGED
|
@@ -6,6 +6,27 @@
|
|
|
6
6
|
|
|
7
7
|
@source "./dist/**/*.js";
|
|
8
8
|
|
|
9
|
+
/**
|
|
10
|
+
* Pointer-hover + touch-press parity: hover utilities also apply on RAC press
|
|
11
|
+
* (data-pressed) and native :active, so mobile tap matches desktop hover.
|
|
12
|
+
*/
|
|
13
|
+
@custom-variant hover {
|
|
14
|
+
@media (hover: hover) {
|
|
15
|
+
&:hover {
|
|
16
|
+
@slot;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
&:where([data-rac])[data-hovered] {
|
|
20
|
+
@slot;
|
|
21
|
+
}
|
|
22
|
+
&:where([data-rac])[data-pressed] {
|
|
23
|
+
@slot;
|
|
24
|
+
}
|
|
25
|
+
&:active {
|
|
26
|
+
@slot;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
9
30
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
10
31
|
@custom-variant label (& [data-label]);
|
|
11
32
|
@custom-variant focus-input-within (&:has(input:focus));
|
|
@@ -90,6 +111,8 @@
|
|
|
90
111
|
/* ANIMATIONS */
|
|
91
112
|
--animate-marquee: marquee 60s linear infinite;
|
|
92
113
|
--animate-caret-blink: caret-blink 1s infinite;
|
|
114
|
+
--animate-toast-enter: toast-enter 750ms ease-out both;
|
|
115
|
+
--animate-toast-exit: toast-exit 300ms ease-out forwards;
|
|
93
116
|
|
|
94
117
|
@keyframes marquee {
|
|
95
118
|
0% {
|
|
@@ -111,6 +134,32 @@
|
|
|
111
134
|
}
|
|
112
135
|
}
|
|
113
136
|
|
|
137
|
+
@keyframes toast-enter {
|
|
138
|
+
0% {
|
|
139
|
+
transform: translate3d(0, calc(-100% - 12px), 0);
|
|
140
|
+
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
80% {
|
|
144
|
+
transform: translate3d(0, 4px, 0);
|
|
145
|
+
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
100% {
|
|
149
|
+
transform: translate3d(0, 0, 0);
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
@keyframes toast-exit {
|
|
154
|
+
from {
|
|
155
|
+
opacity: 1;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
to {
|
|
159
|
+
opacity: 0;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
114
163
|
/* BASE COLOR */
|
|
115
164
|
--color-transparent: rgb(0 0 0 / 0);
|
|
116
165
|
|