Mirrors/moodist
1
0
Fork 0
mirror of https://github.com/remvze/moodist.git synced 2026-03-10 14:03:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add menu button

Browse Source
This commit is contained in:
MAZE
2024-01-02 16:24:55 +03:30
parent 660ee07a23
commit 184bb09f5a
4 changed files with 96 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/menu/menu.module.css Normal file
View File

@@ -0,0 +1,57 @@
.wrapper {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 5;
& .menuButton {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
font-size: var(--font-md);
color: var(--color-foreground);
cursor: pointer;
background-color: var(--color-neutral-100);
border: 1px solid var(--color-neutral-300);
border-radius: 50%;
transition: 0.2s;
&:hover {
background-color: var(--color-neutral-200);
}
}
& .menu {
position: absolute;
right: 0;
bottom: calc(100% + 12px);
width: 200px;
padding: 4px;
background-color: var(--color-neutral-100);
border: 1px solid var(--color-neutral-200);
border-radius: 4px;
& .menuItem {
position: flex;
align-items: center;
width: 100%;
padding: 12px 8px;
font-size: var(--font-sm);
font-weight: 500;
color: var(--color-foreground-subtle);
cursor: pointer;
background-color: transparent;
border: 1px solid var(--color-neutral-200);
border-radius: 4px;
outline: none;
transition: 0.2s;
&:hover {
color: var(--color-foreground);
background-color: var(--color-neutral-200);
}
}
}
}