34 lines
859 B
SCSS
34 lines
859 B
SCSS
.hover-arrow {
|
|
--arrow-spacing: 5px;
|
|
--arrow-hover-transition: 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
--arrow-hover-offset: translateX(3px);
|
|
--arrow-tip-transform: none;
|
|
--arrow-line-opacity: 0;
|
|
|
|
position: relative;
|
|
top: var(--arrow-top, -1px);
|
|
margin-left: var(--arrow-spacing);
|
|
stroke-width: 2px;
|
|
fill: none;
|
|
stroke: currentColor;
|
|
|
|
.hover-arrow-line {
|
|
opacity: var(--arrow-line-opacity);
|
|
transition: opacity var(--hoverTransition, var(--arrow-hover-transition));
|
|
}
|
|
.hover-arrow-tip {
|
|
transform: var(--arrow-tip-transform);
|
|
transition: transform var(--hoverTransition, var(--arrow-hover-transition));
|
|
}
|
|
}
|
|
|
|
@media (pointer: fine) {
|
|
a:hover, button:hover {
|
|
.hover-arrow-line {
|
|
--arrow-line-opacity: 1;
|
|
}
|
|
.hover-arrow-tip {
|
|
--arrow-tip-transform: var(--arrow-hover-offset);
|
|
}
|
|
}
|
|
} |