fix(svelte): Don't animate menu icon (#64358)

Fixes srch-858

Currently the menu icon rotates when hovering over it. The animation
should only target the Sourcegraph logo.

Additional changes:

- Move icon color style prop into CSS declaration (avoids inserting an
additional element)
- Let the animation target the link instead of the icon. There doesn't
seem to be reason why we actually need to target the `svg` element via
`:global`.


## Test plan

Manual testing.
This commit is contained in:
Felix Kling 2024-08-08 13:35:39 +02:00 committed by GitHub
parent 1819daa7a7
commit 975b14f244
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -58,8 +58,8 @@
<Icon icon={ILucideMenu} aria-label="Navigation menu" />
</button>
<a href="/search">
<Icon icon={ISgMark} aria-label="Sourcegraph" aria-hidden="true" --icon-color="initial" />
<a class="home-link" href="/search" aria-label="Got to search home">
<Icon icon={ISgMark} aria-label="Sourcegraph" aria-hidden="true" />
</a>
</div>
@ -174,18 +174,22 @@
margin-left: 0;
}
:global([data-icon]):hover {
@keyframes spin {
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(180deg) scale(1);
}
}
.home-link {
--icon-color: initial;
@media (prefers-reduced-motion: no-preference) {
animation: spin 0.5s ease-in-out 1;
&:hover {
@keyframes spin {
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(180deg) scale(1);
}
}
@media (prefers-reduced-motion: no-preference) {
animation: spin 0.5s ease-in-out 1;
}
}
}
}