.tangy-main-container { display: flex; flex-direction: column; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--document-background-color); } .tangy-main-is-mobile .tangy-main-toolbar { position: fixed; /* Make sure the toolbar will stay on top of the content as it scrolls past. */ z-index: 2; } h1.tangy-main-app-name { margin-left: 8px; } .tangy-main-sidenav-container { /* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This causes `` to act as our scrolling element for desktop layouts. */ flex: 1; background: var(--document-background-color); } .tangy-main-is-mobile .tangy-main-sidenav-container { /* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the `` to be our scrolling element for mobile layouts. */ flex: 1 0 auto; } .mat-sidenav { width: 15rem; background-color: var(--tertiary-color); color: var(--accent-text-color); } .toolbar-spacer { flex: 1 1 auto; } .text-black { color: var(--tertiary-color); } mat-list-item { line-height: 3; display: inline-flex; } mat-list-item a { text-decoration: none; color: var(--accent-text-color); margin-left: 1rem; } .mat-divider { border-top: var(--accent-text-color) 1px solid; } .menu-icon { padding-top: 0.8rem; margin-left: 1rem; font-size: 120%; } mat-toolbar.mat-toolbar { background: var(--accent-text-color); }