Moku/Work
1
0
Fork 0
Code Issues Pull Requests Activity

Feat: Add notifications menu

Browse Source
This commit is contained in:
MangoPig
2026-06-16 17:00:51 +01:00
parent fd429bdcdd
commit 248a0b1828
8 changed files with 543 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
Frontend/src/components/shell/TopBar/NotificationsButton.module.scss Normal file
View File

@@ -0,0 +1,66 @@
.button {
display: inline-flex;
justify-content: center;
align-items: center;
width: 2.75rem;
height: 2.75rem;
aspect-ratio: 1;
padding: 0;
border: 0;
border-radius: 999px;
flex-shrink: 0;
cursor: pointer;
background: transparent;
color: var(--color-text-muted);
transition:
background-color 220ms var(--easing-standard),
color 220ms var(--easing-standard),
transform 180ms var(--easing-standard);
}
.button:hover {
background: color-mix(in srgb, var(--color-text) 8%, transparent);
color: var(--color-text);
}
.buttonOpen {
background: color-mix(in srgb, var(--color-surface) 92%, transparent);
color: var(--color-text);
}
.button:focus-visible {
outline: none;
background: color-mix(in srgb, var(--color-accent-strong) 12%, transparent);
box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-strong) 28%, transparent);
color: var(--color-text);
}
.iconWrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
}
.badge {
@include text-caption;
position: absolute;
top: -0.45rem;
right: -0.7rem;
min-width: 1rem;
height: 1rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 0.24rem;
border: 1px solid color-mix(in srgb, var(--color-surface) 68%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--color-primary-3) 84%, black 16%);
color: white;
font-weight: var(--font-weight-semibold);
line-height: 1;
box-shadow: 0 6px 14px color-mix(in srgb, black 18%, transparent);
pointer-events: none;
}