mirror of
https://github.com/GoogleChromeLabs/squoosh.git
synced 2025-11-11 16:26:20 +00:00
Add focus animation to back button
This commit is contained in:
@@ -113,6 +113,13 @@
|
|||||||
|
|
||||||
& > svg {
|
& > svg {
|
||||||
width: 47px;
|
width: 47px;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus .back-blob {
|
||||||
|
stroke: var(--deep-blue);
|
||||||
|
stroke-width: 5px;
|
||||||
|
animation: strokePulse 500ms ease forwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 600px) {
|
@media (min-width: 600px) {
|
||||||
@@ -124,6 +131,15 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes strokePulse {
|
||||||
|
from {
|
||||||
|
stroke-width: 8px;
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
stroke-width: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.back-blob {
|
.back-blob {
|
||||||
fill: var(--hot-pink);
|
fill: var(--hot-pink);
|
||||||
opacity: 0.77;
|
opacity: 0.77;
|
||||||
|
|||||||
Reference in New Issue
Block a user