Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-09-08 20:26:08 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Improve top hover menus UX by introducing grace period

Browse Source
This commit is contained in:
Kalle
2026-08-26 17:51:27 +03:00
parent f952ca62af
commit e1eef816b5
1 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/components/layout/TopNavMenus.module.css
View File

@@ -83,7 +83,8 @@
top: calc(100% + var(--s-1));
left: 0;
z-index: 1;
display: none;
display: grid;
visibility: hidden;
width: max-content;
grid-auto-flow: column;
grid-template-rows: repeat(2, auto);
@@ -92,18 +93,22 @@
border: var(--border-style);
border-radius: var(--radius-field);
background-color: var(--color-bg-high);
transition: visibility 0s linear 0.3s;
.menuWrapper:hover & {
display: grid;
visibility: visible;
transition-delay: 0s;
}
.container:hover .menuWrapper:not(:hover) & {
display: none;
}
&::before {
content: "";
position: absolute;
top: calc(-1 * (var(--s-1) + var(--border-width)));
left: 0;
right: 0;
height: calc(var(--s-1) + var(--border-width));
z-index: -1;
inset: calc(-1 * (var(--s-1) + var(--border-width)));
}
}