69 lines
1.4 KiB
SCSS
69 lines
1.4 KiB
SCSS
.nav-container {
|
|
width: 240px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-right: 1px solid var(--mat-sys-outline-variant, rgba(0,0,0,0.12));
|
|
background-color: rgba(153,153,153,0.16);
|
|
backdrop-filter: blur(8px);
|
|
position: fixed;
|
|
z-index: 100;
|
|
&.collapsed {
|
|
width: 64px;
|
|
|
|
.label {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-header {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
|
|
// border-bottom: 1px solid var(--mat-sys-outline-variant, rgba(0,0,0,0.12));
|
|
padding-bottom: 1px;
|
|
}
|
|
|
|
|
|
a.mat-mdc-list-item {
|
|
height: 44px;
|
|
border-radius: 8px;
|
|
margin: 4px 4px;
|
|
color: cyan;
|
|
&.active {
|
|
background: color-mix(in oklab, var(--mat-sys-primary, #3f51b5) 16%, transparent);
|
|
}
|
|
}
|
|
|
|
.nav-list{
|
|
//background-color: #f5f7fb; /* your color */
|
|
background-color: rgba(153,153,153,0.16);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.nav-list .mdc-list-item {
|
|
background-color: rgba(153,153,153,0.16);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.nav-list .mdc-list-item:hover,
|
|
.nav-list .mdc-list-item:focus {
|
|
background-color: rgba(153,153,153,0.16);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
.nav-list .mdc-list-item--selected {
|
|
background-color: rgba(153, 153, 153, 0.50);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
/* Primary and secondary text */
|
|
.nav-list .mdc-list-item__primary-text,
|
|
.nav-list .mdc-list-item__secondary-text {
|
|
color: cyan;
|
|
}
|
|
|
|
/* Optional: icons inside list items */
|
|
.nav-list .mat-icon {
|
|
color: cyan;
|
|
}
|
|
|