leo/essence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add hover arrow

Browse Source
This commit is contained in:
Leo
2025-10-06 17:17:34 -05:00
parent 8d46ce60bd
commit c8c39a4b23
2 changed files with 35 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
scss/elements/_hover-arrow.scss Normal file
View File

@@ -0,0 +1,34 @@
.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);
}
}
}

1
scss/essence.scss
View File

@@ -23,6 +23,7 @@
@import 'elements/footer'; @import 'elements/footer';
@import 'elements/radio'; @import 'elements/radio';
@import 'elements/step-progress-bar'; @import 'elements/step-progress-bar';
@import 'elements/hover-arrow';
// Vendors // Vendors
@import 'vendors/prismjs'; @import 'vendors/prismjs';