konnosDashboard
animations.css298 lines · main
1/*
2 * Tailwind v4 animation tokens + the @keyframes they reference.
3 *
4 * Each --animate-* token in @theme generates an `animate-{name}` utility.
5 * Keyframes live outside @theme since they're @-rules, not design tokens.
6 *
7 * Migrated from packages/config/ui.config.js (theme.extend.keyframes /
8 * theme.extend.animation) and packages/config/tailwind.config.js
9 * (theme.extend.keyframes / theme.extend.animation).
10 */
11
12@theme {
13 --animate-fade-in: fadeIn 300ms both;
14 --animate-fade-out: fadeOut 300ms both;
15
16 /* may be unused — verify before pruning */
17 --animate-dropdown-content-show: overlayContentShow 100ms cubic-bezier(0.16, 1, 0.3, 1);
18 /* may be unused — verify before pruning */
19 --animate-dropdown-content-hide: overlayContentHide 100ms cubic-bezier(0.16, 1, 0.3, 1);
20
21 --animate-overlay-show: overlayContentShow 300ms cubic-bezier(0.16, 1, 0.3, 1);
22 --animate-overlay-hide: overlayContentHide 300ms cubic-bezier(0.16, 1, 0.3, 1);
23
24 /* may be unused — verify before pruning */
25 --animate-fade-in-overlay-bg: fadeInOverlayBg 300ms;
26 /* may be unused — verify before pruning */
27 --animate-fade-out-overlay-bg: fadeOutOverlayBg 300ms;
28
29 --animate-slide-down: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
30 --animate-slide-up: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
31
32 --animate-slide-down-normal: slideDownNormal 300ms cubic-bezier(0.87, 0, 0.13, 1);
33 --animate-slide-up-normal: slideUpNormal 300ms cubic-bezier(0.87, 0, 0.13, 1);
34
35 /* may be unused — verify before pruning */
36 --animate-panel-slide-left-out: panelSlideLeftOut 200ms cubic-bezier(0.87, 0, 0.13, 1);
37 /* may be unused — verify before pruning */
38 --animate-panel-slide-left-in: panelSlideLeftIn 250ms cubic-bezier(0.87, 0, 0.13, 1);
39 /* may be unused — verify before pruning */
40 --animate-panel-slide-right-out: panelSlideRightOut 200ms cubic-bezier(0.87, 0, 0.13, 1);
41 /* may be unused — verify before pruning */
42 --animate-panel-slide-right-in: panelSlideRightIn 250ms cubic-bezier(0.87, 0, 0.13, 1);
43
44 --animate-line-loading: lineLoading 1.8s infinite;
45 --animate-line-loading-slower: lineLoading 2.3s infinite;
46
47 /* may be unused — verify before pruning */
48 --animate-dropdownFadeIn: dropdownFadeIn 0.1s ease-out;
49 /* may be unused — verify before pruning */
50 --animate-dropdownFadeOut: dropdownFadeOut 0.1s ease-out;
51
52 --animate-flash-code: flash-code 1s forwards;
53 --animate-flash-code-slow: flash-code 2s forwards;
54
55 --animate-accordion-down: accordion-down 0.15s ease-out;
56 --animate-accordion-up: accordion-up 0.15s ease-out;
57
58 --animate-collapsible-down: collapsible-down 0.1s ease-out;
59 --animate-collapsible-up: collapsible-up 0.1s ease-out;
60}
61
62@keyframes fadeIn {
63 0% {
64 transform: scale(0.95);
65 opacity: 0;
66 }
67 100% {
68 transform: scale(1);
69 opacity: 1;
70 }
71}
72
73@keyframes fadeOut {
74 0% {
75 transform: scale(1);
76 opacity: 1;
77 }
78 100% {
79 transform: scale(0.95);
80 opacity: 0;
81 }
82}
83
84@keyframes overlayContentShow {
85 0% {
86 opacity: 0;
87 transform: translate(0%, -2%) scale(1);
88 }
89 100% {
90 opacity: 1;
91 transform: translate(0%, 0%) scale(1);
92 }
93}
94
95@keyframes overlayContentHide {
96 0% {
97 opacity: 1;
98 transform: translate(0%, 0%) scale(1);
99 }
100 100% {
101 opacity: 0;
102 transform: translate(0%, -2%) scale(1);
103 }
104}
105
106@keyframes dropdownFadeIn {
107 0% {
108 transform: scale(0.95);
109 opacity: 0;
110 }
111 100% {
112 transform: scale(1);
113 opacity: 1;
114 }
115}
116
117@keyframes dropdownFadeOut {
118 0% {
119 transform: scale(1);
120 opacity: 1;
121 }
122 100% {
123 transform: scale(0.95);
124 opacity: 0;
125 }
126}
127
128@keyframes fadeInOverlayBg {
129 0% {
130 opacity: 0;
131 }
132 100% {
133 opacity: 0.75;
134 }
135}
136
137@keyframes fadeOutOverlayBg {
138 0% {
139 opacity: 0.75;
140 }
141 100% {
142 opacity: 0;
143 }
144}
145
146@keyframes slideDown {
147 0% {
148 height: 0;
149 opacity: 0;
150 }
151 100% {
152 height: var(--radix-accordion-content-height);
153 opacity: 1;
154 }
155}
156
157@keyframes slideUp {
158 0% {
159 height: var(--radix-accordion-content-height);
160 opacity: 1;
161 }
162 100% {
163 height: 0;
164 opacity: 0;
165 }
166}
167
168@keyframes slideDownNormal {
169 0% {
170 height: 0;
171 opacity: 0;
172 }
173 100% {
174 height: inherit;
175 opacity: 1;
176 }
177}
178
179@keyframes slideUpNormal {
180 0% {
181 height: inherit;
182 opacity: 1;
183 }
184 100% {
185 height: 0;
186 opacity: 0;
187 }
188}
189
190@keyframes panelSlideLeftOut {
191 0% {
192 transform: translateX(-100%);
193 opacity: 0;
194 }
195 100% {
196 transform: translateX(0);
197 opacity: 1;
198 }
199}
200
201@keyframes panelSlideLeftIn {
202 0% {
203 transform: translateX(0);
204 opacity: 1;
205 }
206 100% {
207 transform: translateX(-100%);
208 opacity: 0;
209 }
210}
211
212@keyframes panelSlideRightOut {
213 0% {
214 transform: translateX(100%);
215 opacity: 0;
216 }
217 100% {
218 transform: translateX(0);
219 opacity: 1;
220 }
221}
222
223@keyframes panelSlideRightIn {
224 0% {
225 transform: translateX(0);
226 opacity: 1;
227 }
228 100% {
229 transform: translateX(100%);
230 opacity: 0;
231 }
232}
233
234@keyframes lineLoading {
235 0% {
236 margin-left: -10%;
237 width: 80px;
238 }
239 25% {
240 width: 240px;
241 }
242 50% {
243 margin-left: 100%;
244 width: 80px;
245 }
246 75% {
247 width: 240px;
248 }
249 100% {
250 margin-left: -10%;
251 width: 80px;
252 }
253}
254
255@keyframes flash-code {
256 0% {
257 background-color: rgba(63, 207, 142, 0.1);
258 }
259 100% {
260 background-color: transparent;
261 }
262}
263
264@keyframes accordion-down {
265 from {
266 height: 0;
267 }
268 to {
269 height: var(--radix-accordion-content-height);
270 }
271}
272
273@keyframes accordion-up {
274 from {
275 height: var(--radix-accordion-content-height);
276 }
277 to {
278 height: 0;
279 }
280}
281
282@keyframes collapsible-down {
283 from {
284 height: 0;
285 }
286 to {
287 height: var(--radix-collapsible-content-height);
288 }
289}
290
291@keyframes collapsible-up {
292 from {
293 height: var(--radix-collapsible-content-height);
294 }
295 to {
296 height: 0;
297 }
298}