icons/common/
icon_registry_css.rs

1// * This file was was generated automatically. Please DO NOT edit manually.
2
3/// Static CSS for AArrowDownAnimate animation
4pub static AARROWDOWN_CSS: &str = r#"/* Letter "A" animation - targeting specific paths */
5[data-name="AArrowDownAnimate"]:hover path[d="M3.5 13h6"],
6[data-name="AArrowDownAnimate"]:hover path[d="m2 16 4.5-9 4.5 9"] {
7    animation: letterAnimate 0.3s ease-in-out;
8}
9
10/* Arrow animation - targeting specific paths with delay */
11[data-name="AArrowDownAnimate"]:hover path[d="M18 7v9"],
12[data-name="AArrowDownAnimate"]:hover path[d="m14 12 4 4 4-4"] {
13    animation: arrowAnimate 0.3s ease-in-out 0.2s both;
14}
15
16@keyframes letterAnimate {
17    0% { opacity: 0; transform: scale(0.8); }
18    100% { opacity: 1; transform: scale(1); }
19}
20
21@keyframes arrowAnimate {
22    0% { opacity: 0; transform: translateY(-10px); }
23    100% { opacity: 1; transform: translateY(0); }
24}"#;
25
26/// Static CSS for AirVentAnimate animation
27pub static AIRVENT_CSS: &str = r#"/* Air vent wind animation - first wind path (immediate) */
28[data-name="AirVentAnimate"]:hover path[d="M18 17.5a2.5 2.5 0 1 1-4 2.03V12"] {
29    animation: windAnimate1 0.5s ease-in-out;
30}
31
32/* Air vent wind animation - second wind path (delayed) */
33[data-name="AirVentAnimate"]:hover path[d="M6.6 15.572A2 2 0 1 0 10 17v-5"] {
34    animation: windAnimate2 0.5s ease-in-out 0.2s both;
35}
36
37@keyframes windAnimate1 {
38    0% { opacity: 0; transform: scale(0.8); }
39    100% { opacity: 1; transform: scale(1); }
40}
41
42@keyframes windAnimate2 {
43    0% { opacity: 0; transform: scale(0.8); }
44    100% { opacity: 1; transform: scale(1); }
45}"#;
46
47/// Static CSS for AlarmClockAnimate animation
48pub static ALARMCLOCK_CSS: &str = r#"/* Primary alarm clock elements - clock face circle, hands, and bottom legs */
49[data-name="AlarmClockAnimate"]:hover circle[cx="12"],
50[data-name="AlarmClockAnimate"]:hover path[d="M12 9v4l2 2"],
51[data-name="AlarmClockAnimate"]:hover path[d="M6.38 18.7 4 21"],
52[data-name="AlarmClockAnimate"]:hover path[d="M17.64 18.67 20 21"] {
53    animation: primaryAlarmShake 0.3s linear infinite;
54}
55
56/* Secondary alarm clock elements - top alarm bells with more intense movement */
57[data-name="AlarmClockAnimate"]:hover path[d="M5 3 2 6"],
58[data-name="AlarmClockAnimate"]:hover path[d="m22 6-3-3"] {
59    animation: secondaryAlarmShake 0.3s linear infinite;
60}
61
62@keyframes primaryAlarmShake {
63    0% { transform: translateX(-1px) translateY(-1.5px); }
64    16.67% { transform: translateX(1px) translateY(-1.5px); }
65    33.33% { transform: translateX(-1px) translateY(-1.5px); }
66    50% { transform: translateX(1px) translateY(-1.5px); }
67    66.67% { transform: translateX(-1px) translateY(-1.5px); }
68    83.33% { transform: translateX(0) translateY(-1.5px); }
69    100% { transform: translateX(-1px) translateY(-1.5px); }
70}
71
72@keyframes secondaryAlarmShake {
73    0% { transform: translateX(-2px) translateY(-2.5px); }
74    16.67% { transform: translateX(2px) translateY(-2.5px); }
75    33.33% { transform: translateX(-2px) translateY(-2.5px); }
76    50% { transform: translateX(2px) translateY(-2.5px); }
77    66.67% { transform: translateX(-2px) translateY(-2.5px); }
78    83.33% { transform: translateX(0) translateY(-2.5px); }
79    100% { transform: translateX(-2px) translateY(-2.5px); }
80}"#;
81
82/// Static CSS for AlignCenterAnimate animation
83pub static ALIGNCENTER_CSS: &str = r#"/* Align center animation - only the middle line wiggles to simulate alignment adjustment */
84[data-name="AlignCenterAnimate"]:hover path[d="M17 12H7"] {
85    animation: alignCenterWiggle 1s linear;
86}
87
88@keyframes alignCenterWiggle {
89    0% { transform: translateX(0); }
90    20% { transform: translateX(3px); }
91    40% { transform: translateX(-3px); }
92    60% { transform: translateX(2px); }
93    80% { transform: translateX(-2px); }
94    100% { transform: translateX(0); }
95}"#;
96
97/// Static CSS for AngryAnimate animation
98pub static ANGRY_CSS: &str = r#"[data-name="AngryAnimate"]:hover {
99    animation: wiggleZoom 0.8s ease-in-out forwards;
100    transform-origin: center;
101}
102
103@keyframes wiggleZoom {
104    0% { transform: scale(1) rotate(0deg); }
105    15% { transform: scale(1.1) rotate(-8deg); }
106    30% { transform: scale(1.1) rotate(8deg); }
107    45% { transform: scale(1.1) rotate(-6deg); }
108    60% { transform: scale(1.1) rotate(6deg); }
109    75% { transform: scale(1.1) rotate(-3deg); }
110    90% { transform: scale(1.1) rotate(3deg); }
111    100% { transform: scale(1.1) rotate(0deg); }
112}"#;
113
114/// Static CSS for AnnoyedAnimate animation
115pub static ANNOYED_CSS: &str = r#"/* Face animation - scales the entire SVG */
116[data-name="AnnoyedAnimate"] {
117    transition: transform 0.2s ease-out;
118}
119
120[data-name="AnnoyedAnimate"]:hover {
121    transform: scale(1.05);
122}
123
124/* Mouth animation - horizontal scale and slight vertical movement */
125[data-name="AnnoyedAnimate"] path[d="M8 15h8"] {
126    transition: transform 0.2s ease-out;
127}
128
129[data-name="AnnoyedAnimate"]:hover path[d="M8 15h8"] {
130    transform: scaleX(0.8) translateY(1px);
131}
132
133/* Left eyebrow animation - rotation and translation */
134[data-name="AnnoyedAnimate"] path[d="M8 9h2"] {
135    transition: transform 0.25s ease-out;
136    transform-origin: center;
137}
138
139[data-name="AnnoyedAnimate"]:hover path[d="M8 9h2"] {
140    transform: rotate(15deg) translate(-0.5px, -1px);
141}
142
143/* Right eyebrow animation - rotation and translation */
144[data-name="AnnoyedAnimate"] path[d="M14 9h2"] {
145    transition: transform 0.25s ease-out 0.05s;
146    transform-origin: center;
147}
148
149[data-name="AnnoyedAnimate"]:hover path[d="M14 9h2"] {
150    transform: rotate(15deg) translate(0.5px, -1px);
151}"#;
152
153/// Static CSS for ArchiveAnimate animation
154pub static ARCHIVE_CSS: &str = r#"/* Archive lid lifting animation - smooth transition */
155[data-name="ArchiveAnimate"] rect[width="20"][height="5"][x="2"][y="3"][rx="1"] {
156    transition: transform 0.2s ease-out;
157}
158
159[data-name="ArchiveAnimate"]:hover rect[width="20"][height="5"][x="2"][y="3"][rx="1"] {
160    transform: translateY(-1.5px);
161}
162
163/* Archive body opening animation - path morphing with reverse */
164[data-name="ArchiveAnimate"] path[d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"] {
165    animation-duration: 0.2s;
166    animation-timing-function: ease-out;
167    animation-fill-mode: both;
168}
169
170[data-name="ArchiveAnimate"]:hover path[d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"] {
171    animation-name: archiveBodyOpen;
172}
173
174[data-name="ArchiveAnimate"]:not(:hover) path[d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"] {
175    animation-name: archiveBodyClose;
176}
177
178/* Archive handle moving animation - path morphing with reverse */
179[data-name="ArchiveAnimate"] path[d="M10 12h4"] {
180    animation-duration: 0.2s;
181    animation-timing-function: ease-out;
182    animation-fill-mode: both;
183}
184
185[data-name="ArchiveAnimate"]:hover path[d="M10 12h4"] {
186    animation-name: archiveHandleMove;
187}
188
189[data-name="ArchiveAnimate"]:not(:hover) path[d="M10 12h4"] {
190    animation-name: archiveHandleReturn;
191}
192
193
194@keyframes archiveBodyOpen {
195    0% { d: path('M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8'); }
196    100% { d: path('M4 11v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V11'); }
197}
198
199@keyframes archiveBodyClose {
200    0% { d: path('M4 11v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V11'); }
201    100% { d: path('M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8'); }
202}
203
204@keyframes archiveHandleMove {
205    0% { d: path('M10 12h4'); }
206    100% { d: path('M10 15h4'); }
207}
208
209@keyframes archiveHandleReturn {
210    0% { d: path('M10 15h4'); }
211    100% { d: path('M10 12h4'); }
212}"#;
213
214/// Static CSS for ArrowBigDownAnimate animation
215pub static ARROWBIGDOWN_CSS: &str = r#"[data-name="ArrowBigDownAnimate"]:hover path[d="M15 11a1 1 0 0 0 1 1h2.939a1 1 0 0 1 .75 1.811l-6.835 6.836a1.207 1.207 0 0 1-1.707 0L4.31 13.81a1 1 0 0 1 .75-1.811H8a1 1 0 0 0 1-1V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1z"] {
216    animation: arrowBigDownAnimate 0.4s ease-in-out;
217}
218
219@keyframes arrowBigDownAnimate {
220    0% { transform: translateY(0); }
221    50% { transform: translateY(2px); }
222    100% { transform: translateY(0); }
223}"#;
224
225/// Static CSS for ArrowBigDownDashAnimate animation
226pub static ARROWBIGDOWNDASH_CSS: &str = r#"/* Arrow body animation - targeting main path */
227[data-name="ArrowBigDownDashAnimate"]:hover path[d="M15 11a1 1 0 0 0 1 1h2.939a1 1 0 0 1 .75 1.811l-6.835 6.836a1.207 1.207 0 0 1-1.707 0L4.31 13.81a1 1 0 0 1 .75-1.811H8a1 1 0 0 0 1-1V9a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1z"] {
228    animation: arrowAnimate 0.4s ease-in-out;
229}
230
231/* Dash animation - targeting dash path */
232[data-name="ArrowBigDownDashAnimate"]:hover path[d="M9 4h6"] {
233    animation: dashAnimate 0.4s ease-in-out;
234}
235
236@keyframes arrowAnimate {
237    0% { transform: translateY(0); }
238    50% { transform: translateY(3px); }
239    100% { transform: translateY(0); }
240}
241
242@keyframes dashAnimate {
243    0% { transform: translateY(0); }
244    50% { transform: translateY(1px); }
245    100% { transform: translateY(0); }
246}"#;
247
248/// Static CSS for ArrowBigLeftAnimate animation
249pub static ARROWBIGLEFT_CSS: &str = r#"[data-name="ArrowBigLeftAnimate"]:hover path[d="M13 9a1 1 0 0 1-1-1V5.061a1 1 0 0 0-1.811-.75l-6.835 6.836a1.207 1.207 0 0 0 0 1.707l6.835 6.835a1 1 0 0 0 1.811-.75V16a1 1 0 0 1 1-1h6a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1z"] {
250    animation: arrowBigLeftAnimate 0.4s ease-in-out;
251}
252
253@keyframes arrowBigLeftAnimate {
254    0% { transform: translateX(0); }
255    50% { transform: translateX(-2px); }
256    100% { transform: translateX(0); }
257}"#;
258
259/// Static CSS for ArrowBigLeftDashAnimate animation
260pub static ARROWBIGLEFTDASH_CSS: &str = r#"/* Arrow body animation - targeting main path */
261[data-name="ArrowBigLeftDashAnimate"]:hover path[d="M13 9a1 1 0 0 1-1-1V5.061a1 1 0 0 0-1.811-.75l-6.835 6.836a1.207 1.207 0 0 0 0 1.707l6.835 6.835a1 1 0 0 0 1.811-.75V16a1 1 0 0 1 1-1h2a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1z"] {
262    animation: arrowAnimate 0.4s ease-in-out;
263}
264
265/* Dash animation - targeting dash path */
266[data-name="ArrowBigLeftDashAnimate"]:hover path[d="M20 9v6"] {
267    animation: dashAnimate 0.4s ease-in-out;
268}
269
270@keyframes arrowAnimate {
271    0% { transform: translateX(0); }
272    50% { transform: translateX(-3px); }
273    100% { transform: translateX(0); }
274}
275
276@keyframes dashAnimate {
277    0% { transform: translateX(0); }
278    50% { transform: translateX(-1px); }
279    100% { transform: translateX(0); }
280}"#;
281
282/// Static CSS for BlocksAnimate animation
283pub static BLOCKS_CSS: &str = r#"/* Blocks Animation - Animated block moves diagonally up-left and down-right */
284
285/* Initial state - smooth bounce back when not hovered */
286[data-name="BlocksAnimate"] rect[x="14"][y="2"][width="8"][height="8"] {
287    animation: blockRevert 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
288}
289
290/* On hover - move to new position */
291[data-name="BlocksAnimate"]:hover rect[x="14"][y="2"][width="8"][height="8"] {
292    animation: blockMove 0.3s ease-in-out forwards;
293}
294
295@keyframes blockMove {
296    0% {
297        transform: translateX(0) translateY(0);
298    }
299    100% {
300        transform: translateX(-4px) translateY(4px);
301    }
302}
303
304@keyframes blockRevert {
305    0% {
306        transform: translateX(-4px) translateY(4px);
307    }
308    100% {
309        transform: translateX(0) translateY(0);
310    }
311}"#;
312
313/// Static CSS for CalendarDaysAnimate animation
314pub static CALENDARDAYS_CSS: &str = r#"/* Calendar Days Animation - Sequential opacity pulse for calendar day dots */
315
316/* First row dots with staggered delays */
317[data-name="CalendarDaysAnimate"]:hover path[d="M8 14h.01"] {
318    animation: dotPulse 0.4s ease-in-out 0s;
319}
320
321[data-name="CalendarDaysAnimate"]:hover path[d="M12 14h.01"] {
322    animation: dotPulse 0.4s ease-in-out 0.1s;
323}
324
325[data-name="CalendarDaysAnimate"]:hover path[d="M16 14h.01"] {
326    animation: dotPulse 0.4s ease-in-out 0.2s;
327}
328
329/* Second row dots with continued staggered delays */
330[data-name="CalendarDaysAnimate"]:hover path[d="M8 18h.01"] {
331    animation: dotPulse 0.4s ease-in-out 0.3s;
332}
333
334[data-name="CalendarDaysAnimate"]:hover path[d="M12 18h.01"] {
335    animation: dotPulse 0.4s ease-in-out 0.4s;
336}
337
338[data-name="CalendarDaysAnimate"]:hover path[d="M16 18h.01"] {
339    animation: dotPulse 0.4s ease-in-out 0.5s;
340}
341
342@keyframes dotPulse {
343    0% { opacity: 1; }
344    50% { opacity: 0.3; }
345    100% { opacity: 1; }
346}"#;
347
348/// Static CSS for CompassAnimate animation
349pub static COMPASS_CSS: &str = r#"/* Compass Animation - Needle Rotation Effect */
350
351/* Base state with smooth transition for the compass needle */
352[data-name="CompassAnimate"] path[d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"] {
353    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
354    transform-origin: center;
355}
356
357/* Hover state with 360 degree rotation for the compass needle */
358[data-name="CompassAnimate"]:hover path[d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"] {
359    transform: rotate(360deg);
360}"#;
361
362/// Static CSS for ExpandAnimate animation
363pub static EXPAND_CSS: &str = r#"/* Expand icon - Corner arrows move outward on hover with spring-like transition */
364
365/* Base state with spring-like transition for smooth reverse animation */
366[data-name="ExpandAnimate"] path[d="m15 15 6 6"],
367[data-name="ExpandAnimate"] path[d="M21 16v5h-5"] {
368    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
369}
370
371[data-name="ExpandAnimate"] path[d="m15 9 6-6"],
372[data-name="ExpandAnimate"] path[d="M21 8V3h-5"] {
373    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
374}
375
376[data-name="ExpandAnimate"] path[d="M3 16v5h5"],
377[data-name="ExpandAnimate"] path[d="m3 21 6-6"] {
378    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
379}
380
381[data-name="ExpandAnimate"] path[d="M3 8V3h5"],
382[data-name="ExpandAnimate"] path[d="M9 9 3 3"] {
383    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
384}
385
386/* Hover states - each corner moves in its respective direction */
387/* Bottom-right corner moves down and right */
388[data-name="ExpandAnimate"]:hover path[d="m15 15 6 6"],
389[data-name="ExpandAnimate"]:hover path[d="M21 16v5h-5"] {
390    transform: translate(2px, 2px);
391}
392
393/* Top-right corner moves up and right */
394[data-name="ExpandAnimate"]:hover path[d="m15 9 6-6"],
395[data-name="ExpandAnimate"]:hover path[d="M21 8V3h-5"] {
396    transform: translate(2px, -2px);
397}
398
399/* Bottom-left corner moves down and left */
400[data-name="ExpandAnimate"]:hover path[d="M3 16v5h5"],
401[data-name="ExpandAnimate"]:hover path[d="m3 21 6-6"] {
402    transform: translate(-2px, 2px);
403}
404
405/* Top-left corner moves up and left */
406[data-name="ExpandAnimate"]:hover path[d="M3 8V3h5"],
407[data-name="ExpandAnimate"]:hover path[d="M9 9 3 3"] {
408    transform: translate(-2px, -2px);
409}"#;
410
411/// Static CSS for FrameAnimate animation
412pub static FRAME_CSS: &str = r#"/* Base state with transition for smooth animations */
413[data-name="FrameAnimate"] line[y1="6"] {
414    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
415}
416
417[data-name="FrameAnimate"] line[y1="18"] {
418    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
419}
420
421[data-name="FrameAnimate"] line[x1="6"] {
422    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
423}
424
425[data-name="FrameAnimate"] line[x1="18"] {
426    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
427}
428
429/* Hover state transforms */
430[data-name="FrameAnimate"]:hover line[y1="6"] {
431    transform: translateY(-4px);
432}
433
434[data-name="FrameAnimate"]:hover line[y1="18"] {
435    transform: translateY(4px);
436}
437
438[data-name="FrameAnimate"]:hover line[x1="6"] {
439    transform: translateX(-4px);
440}
441
442[data-name="FrameAnimate"]:hover line[x1="18"] {
443    transform: translateX(4px);
444}"#;
445
446/// Static CSS for HeartAnimate animation
447pub static HEART_CSS: &str = r#"[data-name="HeartAnimate"]:hover {
448    animation: HeartAnimation 1.2s ease-in-out;
449}
450
451@keyframes HeartAnimation {
452    0% { transform: scale(1); }
453    14% { transform: scale(1.15); }
454    28% { transform: scale(1); }
455    42% { transform: scale(1.08); }
456    56% { transform: scale(1); }
457    100% { transform: scale(1); }
458}"#;
459
460/// Static CSS for PanelLeftOpenAnimate animation
461pub static PANELLEFTOPEN_CSS: &str = r#"/* Panel Left Open Animation - Chevron slide animation */
462[data-name="PanelLeftOpenAnimate"]:hover path[d="m14 9 3 3-3 3"] {
463    animation: chevronSlideRight 0.5s ease-in-out;
464}
465
466@keyframes chevronSlideRight {
467    0% { transform: translateX(0); }
468    40% { transform: translateX(1.5px); }
469    100% { transform: translateX(0); }
470}"#;
471
472/// Static CSS for PlusAnimate animation
473pub static PLUS_CSS: &str = r#"[data-name="PlusAnimate"] {
474    transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
475}
476
477[data-name="PlusAnimate"]:hover {
478    transform: rotate(180deg);
479}"#;
480
481/// Static CSS for SearchAnimate animation
482pub static SEARCH_CSS: &str = r#"/* Base state with smooth transition for search movement */
483[data-name="SearchAnimate"] {
484    transition: transform 1s cubic-bezier(0.68, -0.3, 0.32, 1.3);
485    transform-origin: center;
486}
487
488/* Hover state triggers search scanning animation */
489[data-name="SearchAnimate"]:hover {
490    animation: searchScan 1s cubic-bezier(0.68, -0.3, 0.32, 1.3);
491}
492
493@keyframes searchScan {
494    0% { transform: translateX(0) translateY(0); }
495    25% { transform: translateX(0) translateY(-4px); }
496    50% { transform: translateX(-3px) translateY(0); }
497    100% { transform: translateX(0) translateY(0); }
498}"#;
499
500/// Static CSS for SquareChevronRightAnimate animation
501pub static SQUARECHEVRONRIGHT_CSS: &str = r#"/* Chevron bounce animation */
502[data-name="SquareChevronRightAnimate"]:hover path[d="m10 8 4 4-4 4"] {
503    animation: chevronBounce 0.5s ease-in-out;
504}
505
506@keyframes chevronBounce {
507    0% { transform: translateX(0); }
508    40% { transform: translateX(2px); }
509    100% { transform: translateX(0); }
510}"#;
511
512/// Static CSS for TornadoAnimate animation
513pub static TORNADO_CSS: &str = r#"/* Tornado lines - sequential horizontal sway animation */
514[data-name="TornadoAnimate"]:hover path[d="M21 4H3"] {
515    animation: tornadoSway1 0.6s ease-in-out 0.1s;
516}
517
518[data-name="TornadoAnimate"]:hover path[d="M18 8H6"] {
519    animation: tornadoSway2 0.6s ease-in-out 0.2s;
520}
521
522[data-name="TornadoAnimate"]:hover path[d="M19 12H9"] {
523    animation: tornadoSway3 0.6s ease-in-out 0.3s;
524}
525
526[data-name="TornadoAnimate"]:hover path[d="M16 16h-6"] {
527    animation: tornadoSway4 0.6s ease-in-out 0.4s;
528}
529
530[data-name="TornadoAnimate"]:hover path[d="M11 20H9"] {
531    animation: tornadoSway5 0.6s ease-in-out 0.5s;
532}
533
534@keyframes tornadoSway1 {
535    0% { transform: translateX(0); }
536    50% { transform: translateX(1px); }
537    100% { transform: translateX(0); }
538}
539
540@keyframes tornadoSway2 {
541    0% { transform: translateX(0); }
542    50% { transform: translateX(2px); }
543    100% { transform: translateX(0); }
544}
545
546@keyframes tornadoSway3 {
547    0% { transform: translateX(0); }
548    50% { transform: translateX(3px); }
549    100% { transform: translateX(0); }
550}
551
552@keyframes tornadoSway4 {
553    0% { transform: translateX(0); }
554    50% { transform: translateX(4px); }
555    100% { transform: translateX(0); }
556}
557
558@keyframes tornadoSway5 {
559    0% { transform: translateX(0); }
560    50% { transform: translateX(5px); }
561    100% { transform: translateX(0); }
562}"#;
563
564/// Static CSS for WindAnimate animation
565pub static WIND_CSS: &str = r#"/* Wind animation - path drawing with different delays */
566
567/* Base state - all wind paths visible */
568[data-name="WindAnimate"] path[d*="M12.8 19.6A2 2 0 1 0 14 16H2"],
569[data-name="WindAnimate"] path[d*="M17.5 8a2.5 2.5 0 1 1 2 4H2"],
570[data-name="WindAnimate"] path[d*="M9.8 4.4A2 2 0 1 1 11 8H2"] {
571    stroke-dasharray: 25;
572    stroke-dashoffset: 0;
573    opacity: 1;
574}
575
576/* Animation on hover - path drawing with staggered delays */
577/* Path 2 (custom: 0) - no delay */
578[data-name="WindAnimate"]:hover path[d*="M17.5 8a2.5 2.5 0 1 1 2 4H2"] {
579    animation: windPathDraw 0.5s ease-in-out both;
580}
581
582/* Path 1 (custom: 0.2) - 0.2s delay */
583[data-name="WindAnimate"]:hover path[d*="M12.8 19.6A2 2 0 1 0 14 16H2"] {
584    animation: windPathDraw 0.5s ease-in-out 0.2s both;
585}
586
587/* Path 3 (custom: 0.4) - 0.4s delay */
588[data-name="WindAnimate"]:hover path[d*="M9.8 4.4A2 2 0 1 1 11 8H2"] {
589    animation: windPathDraw 0.5s ease-in-out 0.4s both;
590}
591
592@keyframes windPathDraw {
593    0% {
594        opacity: 0;
595        stroke-dasharray: 25;
596        stroke-dashoffset: 25;
597    }
598    100% {
599        opacity: 1;
600        stroke-dasharray: 25;
601        stroke-dashoffset: 0;
602    }
603}"#;
icons/common/icon_registry_css.rs

icons/common/
icon_registry_css.rs
