66 lines
1.3 KiB
SCSS
66 lines
1.3 KiB
SCSS
/* Path: src/components/Navbar/UserIcon.module.scss */
|
|
|
|
.user-icon {
|
|
display: inline-flex;
|
|
// 1. Fix alignment (Flexbox uses justify-content)
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
// 2. Create a positioning context for the absolute child
|
|
position: relative;
|
|
|
|
margin-left: 1rem;
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
border-radius: 50%;
|
|
|
|
// Optional: Reset link styles
|
|
text-decoration: none;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
// 3. Trigger the animation when the USER hovers the main button
|
|
&:hover .spin-container {
|
|
animation-play-state: running;
|
|
}
|
|
}
|
|
|
|
.spin-container {
|
|
position: absolute;
|
|
// 4. Force the container to fill the parent exactly
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
// Animation 1: Rotate CCW fast
|
|
animation: spin 1.5s ease-in-out infinite reverse;
|
|
animation-play-state: paused;
|
|
|
|
// Allow clicks to pass through to the link/button underneath
|
|
pointer-events: none;
|
|
}
|
|
|
|
.spin-animation {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
animation: spin 15s linear infinite normal;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|