Feat: Add notifications menu
This commit is contained in:
MangoPig
@@ -0,0 +1,227 @@
|
||||
.menu {
|
||||
position: absolute;
|
||||
top: calc(100% + var(--space-2));
|
||||
right: 0;
|
||||
width: min(24rem, calc(100vw - (var(--space-4) * 2)));
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
padding: var(--space-3);
|
||||
border: 1px solid var(--color-border-strong);
|
||||
border-radius: calc(var(--radius-lg) + 0.1rem);
|
||||
background: color-mix(in srgb, var(--color-surface-muted) 96%, transparent);
|
||||
box-shadow: 0 18px 36px color-mix(in srgb, black 16%, transparent);
|
||||
backdrop-filter: blur(18px);
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.header,
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.header {
|
||||
padding-bottom: var(--space-3);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.headerCopy {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 0.08rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
@include text-label;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.subtitle,
|
||||
.sectionLabel,
|
||||
.itemMeta,
|
||||
.itemTime {
|
||||
@include text-caption;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.headerAction,
|
||||
.footerAction {
|
||||
@include text-caption;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-1);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--color-text-muted);
|
||||
transition: color 160ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.headerAction:hover,
|
||||
.headerAction:focus-visible,
|
||||
.footerAction:hover,
|
||||
.footerAction:focus-visible {
|
||||
outline: none;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.listWrap {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
max-height: min(24rem, 60vh);
|
||||
overflow-y: auto;
|
||||
padding-right: var(--space-1);
|
||||
margin-right: calc(var(--space-1) * -1);
|
||||
}
|
||||
|
||||
.stateCard {
|
||||
display: grid;
|
||||
justify-items: start;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-3);
|
||||
border: 1px solid color-mix(in srgb, var(--color-border) 18%, transparent);
|
||||
border-radius: var(--radius-md);
|
||||
background: color-mix(in srgb, var(--color-surface) 92%, transparent);
|
||||
}
|
||||
|
||||
.stateIcon {
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
background: color-mix(in srgb, var(--color-surface-muted) 88%, transparent);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.stateTitle {
|
||||
@include text-label;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.stateCopy {
|
||||
@include text-caption;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.section {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.section + .section {
|
||||
padding-top: var(--space-3);
|
||||
border-top: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.sectionLabel {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
.list {
|
||||
display: grid;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: start;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-2);
|
||||
border: 1px solid transparent;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
text-align: left;
|
||||
transition:
|
||||
background-color 160ms var(--easing-standard),
|
||||
border-color 160ms var(--easing-standard),
|
||||
color 160ms var(--easing-standard);
|
||||
}
|
||||
|
||||
.item:hover {
|
||||
background: color-mix(in srgb, var(--color-surface) 88%, transparent);
|
||||
border-color: color-mix(in srgb, var(--color-border) 20%, transparent);
|
||||
}
|
||||
|
||||
.item:focus-visible {
|
||||
outline: none;
|
||||
background: color-mix(in srgb, var(--color-surface) 92%, transparent);
|
||||
border-color: color-mix(in srgb, var(--color-accent-soft) 52%, transparent);
|
||||
box-shadow: 0 0 0 0.12rem color-mix(in srgb, var(--color-accent-soft) 14%, transparent);
|
||||
}
|
||||
|
||||
.itemUnread {
|
||||
background: color-mix(in srgb, var(--color-surface) 90%, transparent);
|
||||
border-color: color-mix(in srgb, var(--color-border) 16%, transparent);
|
||||
}
|
||||
|
||||
.itemMarker,
|
||||
.itemMarkerMuted {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
margin-top: 0.45rem;
|
||||
border-radius: 999px;
|
||||
flex-shrink: 0;
|
||||
background: color-mix(in srgb, var(--color-primary-2) 78%, white 22%);
|
||||
}
|
||||
|
||||
.itemMarkerMuted {
|
||||
background: color-mix(in srgb, var(--color-text-subtle) 36%, transparent);
|
||||
}
|
||||
|
||||
.itemBody {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 0.12rem;
|
||||
}
|
||||
|
||||
.itemTitle {
|
||||
@include text-label;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.itemTime {
|
||||
padding-top: 0.05rem;
|
||||
white-space: nowrap;
|
||||
color: var(--color-text-subtle);
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-top: var(--space-3);
|
||||
border-top: 1px solid var(--color-border);
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
@include respond-down(mobile) {
|
||||
.menu {
|
||||
width: min(22rem, calc(100vw - (var(--space-3) * 2)));
|
||||
}
|
||||
|
||||
.item {
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.itemTime {
|
||||
grid-column: 2;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.footer {
|
||||
align-items: flex-start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.footerAction {
|
||||
padding: var(--space-1) 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user