105 lines
2.0 KiB
SCSS
105 lines
2.0 KiB
SCSS
.sidebar {
|
|
--sidebar-nav-item-min-height: var(--control-size-lg);
|
|
--sidebar-dock-clearance: 8rem;
|
|
position: relative;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-rows: auto auto minmax(0, 1fr);
|
|
gap: var(--space-4);
|
|
padding: var(--space-4);
|
|
overflow: hidden;
|
|
border-top-left-radius: inherit;
|
|
isolation: isolate;
|
|
}
|
|
|
|
.header {
|
|
display: grid;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.headerDrawerOpen {
|
|
z-index: 4;
|
|
}
|
|
|
|
.section {
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
gap: var(--space-2);
|
|
min-height: 0;
|
|
position: relative;
|
|
z-index: 1;
|
|
transition:
|
|
opacity 180ms var(--easing-standard),
|
|
transform 220ms var(--easing-standard);
|
|
}
|
|
|
|
.sectionHidden {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transform: translateX(var(--space-3));
|
|
}
|
|
|
|
.navScroller {
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
padding-right: var(--space-1);
|
|
padding-bottom: calc(var(--space-4) + var(--sidebar-dock-clearance));
|
|
margin-right: calc(var(--space-1) * -1);
|
|
}
|
|
|
|
.sectionLabel {
|
|
@include text-label;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.navList {
|
|
list-style: none;
|
|
display: grid;
|
|
gap: var(--space-1);
|
|
padding: 0;
|
|
}
|
|
|
|
.navItem {
|
|
width: 100%;
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
min-height: var(--sidebar-nav-item-min-height);
|
|
padding: var(--space-2) var(--space-3);
|
|
@include interactive-frame(transparent, transparent, var(--color-text-muted), var(--radius-lg));
|
|
text-align: left;
|
|
@include interactive-frame-hover(var(--color-surface-hover), transparent, var(--color-text));
|
|
}
|
|
|
|
.navItemActive {
|
|
border-color: var(--color-border);
|
|
background: var(--color-surface);
|
|
color: var(--color-text);
|
|
box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
|
|
}
|
|
|
|
.icon {
|
|
color: inherit;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.label {
|
|
@include text-label;
|
|
min-width: 0;
|
|
}
|
|
|
|
.itemMeta {
|
|
@include text-caption;
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
@include respond-down(mobile) {
|
|
.sidebar {
|
|
display: none;
|
|
}
|
|
}
|