waveterm/frontend/app/element/magnify.less
Evan Simkowitz b5c6c1a937
Create reduced motIon setting (#226)
Adds a new setting that emulates the prefers-reduced-motion media query, allowing users to disable Wave animations without affecting other apps on their system. It also honors the prefers-reduced-motion query in case a system-level configuration is present.
2024-08-14 21:47:09 -07:00

37 lines
790 B
Plaintext

.magnify-icon {
display: inline-block;
width: 15px;
height: 15px;
svg {
#arrow1 {
transform: rotate(180deg);
transform-origin: calc(29.167% + 4px) calc(70.833% + 4px); // account for path offset in the svg itself
}
#arrow2 {
transform: rotate(-180deg);
transform-origin: calc(70.833% + 4px) calc(29.167% + 4px);
}
#arrow1,
#arrow2 {
transition: transform 300ms ease-in;
}
}
&.enabled {
svg {
#arrow1,
#arrow2 {
transform: rotate(0deg);
}
}
}
}
.prefers-reduced-motion {
.magnify-icon svg {
#arrow1,
#arrow2 {
transition: none;
}
}
}