mirror of
https://github.com/sourcegraph/sourcegraph.git
synced 2026-02-06 16:51:55 +00:00
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:
parent
1819daa7a7
commit
975b14f244
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user