src/app/lore/component/element/sidebar.component.scss
:host {
button {
transition: background-color 0.1s;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.spacer {
flex: 1 1 auto;
}
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
mat-sidenav {
width: 20rem;
height: 100vh;
margin-top: 4rem;
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.103), rgba(0, 0, 0, 0));
h2 {
margin-left: 5px;
}
.grid {
display: grid;
grid-template-columns: 1fr;
grid-gap: 1rem;
margin: 1rem;
}
.tools {
position: fixed;
bottom: 0;
}
}
mat-sidenav-container {
overflow: visible;
height: 0;
}
mat-sidenav-content {
margin-top: 4rem;
overflow: visible;
display: grid;
}
.circle {
border-radius: 50%;
}
.with-bg {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
max-height: 130px;
}
.no-shadow {
box-shadow: none !important;
}
::ng-deep .mat-expansion-panel-body {
padding: 0 !important;
padding-left: 10px !important;
}
.bottom-to-top {
border: 0;
}
::ng-deep .mat-drawer-backdrop.mat-drawer-shown {
pointer-events: auto;
background-color: rgba(31, 31, 31, 0.7);
height: 100vh;
}
}