dodil/erp-ui

src/components/app-shell/app-shell.css

/* The shell's layout. Colours, spacing and radius come from Radix tokens only. */
.erp-shell { min-height: 100vh; background: var(--color-background); }
.erp-shell-header { position: sticky; top: 0; z-index: 10; background: var(--color-panel-solid); }
.erp-shell-body { align-items: stretch; }
.erp-shell-aside {
  width: 220px; flex: 0 0 220px; padding: var(--space-4) var(--space-3);
  border-right: 1px solid var(--gray-a5); min-height: calc(100vh - 49px);
}
.erp-shell-main { flex: 1; min-width: 0; padding: var(--space-5); outline: none; }
.erp-shell-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.erp-shell-section { text-transform: uppercase; letter-spacing: 0.04em; padding: 0 var(--space-2); }
.erp-shell-link {
  display: block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-2);
  color: var(--gray-12); text-decoration: none; font-size: var(--font-size-2);
}
.erp-shell-link:hover { background: var(--gray-a3); }
.erp-shell-link[aria-current="page"] { background: var(--accent-a4); color: var(--accent-12); font-weight: 500; }
.erp-shell-link:focus-visible, .erp-shell-skip:focus-visible { outline: 2px solid var(--focus-8); outline-offset: 2px; }
.erp-shell-skip { position: absolute; left: -9999px; top: var(--space-2); z-index: 20; background: var(--color-panel-solid);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-2); color: var(--accent-11); }
.erp-shell-skip:focus { left: var(--space-2); }
.erp-shell-burger { display: none; }
.erp-shell-user { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.erp-shell-drawer.rt-DialogContent { position: fixed; left: 0; top: 0; bottom: 0; max-height: 100vh; height: 100vh;
  width: min(300px, 85vw); border-radius: 0; margin: 0; }
@media (max-width: 767px) {
  .erp-shell-aside { display: none; }
  .erp-shell-burger { display: inline-flex; }
  .erp-shell-main { padding: var(--space-4) var(--space-4); }
  .erp-shell-hide-sm { display: none; }
}