@flusys/ng-layout 6.3.0 → 6.4.0

package/assets/layout/modern/_menu.scss

@@ -0,0 +1,98 @@
+// Modern look for the shared <app-menu> structure (see base/_menu.scss), scoped to
+// the sidebar the same way the classic look is.
+.layout-modern-sidebar .layout-menu {
+  // The brand row sits directly above, so the list carries its own breathing room.
+  padding-top: 0.5rem;
+
+  // The one scroll region in the sidebar: the brand row above and the footer below
+  // stay pinned. `min-height: 0` lets this list shrink below its content height
+  // inside the flex column instead of pushing the footer off-screen.
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  // A hairline scrollbar tinted from the canvas ink — visible enough to signal the
+  // overflow without cutting a grey gutter into the fixed-width column.
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--layout-modern-ink) 40%, transparent)
+    transparent;
+
+  &::-webkit-scrollbar {
+    width: 0.25rem;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: color-mix(
+      in srgb,
+      var(--layout-modern-ink) 40%,
+      transparent
+    );
+    border-radius: 999px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: color-mix(
+      in srgb,
+      var(--layout-modern-ink) 60%,
+      transparent
+    );
+  }
+
+  li {
+    margin-top: 2px;
+  }
+
+  ul {
+    a {
+      color: var(--layout-modern-ink);
+      padding: 0.6875rem 0.75rem;
+      border-radius: var(--layout-modern-item-radius);
+      font-size: 0.875rem;
+      font-weight: 500;
+
+      .layout-menuitem-icon {
+        margin-inline-end: 0.75rem;
+        font-size: 1rem;
+      }
+
+      .layout-submenu-toggler {
+        opacity: 0.85;
+      }
+
+      &:not(.active-route):hover {
+        background-color: var(--layout-modern-item-hover);
+      }
+
+      &.active-route {
+        background-color: var(--layout-modern-item-active);
+        color: var(--layout-modern-item-active-color);
+        font-weight: 600;
+        box-shadow: var(--layout-modern-item-shadow);
+        // The preset's accent bar (0 for Aura and Nora, 3px for Lara), drawn in the
+        // row's own ink so it reads on the chip in both light and dark themes.
+        border-inline-start: var(--f-menuitem-active-border-width, 0px) solid
+          currentColor;
+      }
+    }
+
+    // Nested levels indent through the list, not per-item margins.
+    ul {
+      padding-inline-start: 0.75rem;
+    }
+  }
+
+  li.active-menuitem > a {
+    background-color: var(--layout-modern-item-hover);
+    border-radius: var(--layout-modern-item-radius);
+  }
+
+  li.active-menuitem > a.active-route {
+    background-color: var(--layout-modern-item-active);
+    color: var(--layout-modern-item-active-color);
+  }
+}

package/assets/layout/modern/_responsive.scss

@@ -0,0 +1,93 @@
+// Desktop overlay mode — sidebar floats above the canvas instead of holding a column.
+@media (min-width: 992px) {
+  .layout-modern.layout-modern-overlay {
+    .layout-modern-sidebar {
+      position: fixed;
+      z-index: var(--layout-sidebar-z);
+      inset-block: 0;
+      inset-inline-start: 0;
+      width: var(--layout-modern-sidebar-width);
+      flex-basis: var(--layout-modern-sidebar-width);
+      margin-inline-start: 0;
+      background: var(--layout-modern-canvas);
+      box-shadow: var(--layout-modern-shadow);
+      transform: translateX(-100%);
+    }
+
+    .layout-modern-main {
+      margin-inline-start: var(--layout-modern-card-margin);
+    }
+
+    &.layout-modern-overlay-active .layout-modern-sidebar {
+      transform: translateX(0);
+    }
+  }
+}
+
+// Tablet and below — sidebar becomes a drawer over a mask.
+@media (max-width: 991px) {
+  .layout-modern {
+    // The sidebar is a drawer down here, so the gradient canvas has nothing sitting on
+    // it — a frame of it around the card reads as a stray coloured border rather than
+    // as the shell. Let the card fill the viewport instead; the canvas still shows
+    // through on the drawer itself, which carries the same gradient.
+    // Units, not a bare 0: both feed calc() expressions (--layout-shell-topbar-bottom
+    // among them), where a unitless <number> invalidates the whole expression.
+    --layout-modern-card-margin: 0px;
+    --layout-modern-radius: 0px;
+
+    .layout-modern-sidebar {
+      position: fixed;
+      z-index: var(--layout-sidebar-z);
+      inset-block: 0;
+      inset-inline-start: 0;
+      width: var(--layout-modern-sidebar-width);
+      flex-basis: var(--layout-modern-sidebar-width);
+      background: var(--layout-modern-canvas);
+      box-shadow: var(--layout-modern-shadow);
+      transform: translateX(-100%);
+    }
+
+    .layout-modern-mask {
+      display: none;
+      position: fixed;
+      inset: 0;
+      z-index: var(--layout-mask-z);
+      background-color: var(--maskbg);
+    }
+
+    &.layout-modern-mobile-active {
+      .layout-modern-sidebar {
+        transform: translateX(0);
+      }
+
+      .layout-modern-mask {
+        display: block;
+      }
+    }
+
+    // A desktop collapse left over from a wider viewport must not push the drawer
+    // off-screen — down here the drawer is driven by transform, not by margin.
+    &.layout-modern-static-inactive .layout-modern-sidebar {
+      margin-inline-start: 0;
+    }
+  }
+}
+
+// The compact topbar itself is shared (see base/_topbar.scss); this skin only tightens
+// its own geometry tokens, which the shared rules read.
+@media (max-width: 1023.98px) {
+  .layout-modern {
+    --layout-topbar-inline-padding: 1rem;
+  }
+}
+
+@media (max-width: 639px) {
+  .layout-modern {
+    --layout-topbar-height: 4rem;
+
+    .layout-modern-content {
+      padding: 1rem 0.875rem 1.25rem;
+    }
+  }
+}

package/assets/layout/modern/_rtl.scss

@@ -0,0 +1,24 @@
+// The shell is built on logical properties; only the drawer transform needs mirroring.
+@media (min-width: 992px) {
+  html[dir='rtl'] .layout-modern.layout-modern-overlay {
+    .layout-modern-sidebar {
+      transform: translateX(100%);
+    }
+
+    &.layout-modern-overlay-active .layout-modern-sidebar {
+      transform: translateX(0);
+    }
+  }
+}
+
+@media (max-width: 991px) {
+  html[dir='rtl'] .layout-modern {
+    .layout-modern-sidebar {
+      transform: translateX(100%);
+    }
+
+    &.layout-modern-mobile-active .layout-modern-sidebar {
+      transform: translateX(0);
+    }
+  }
+}

package/assets/layout/modern/_shell.scss

@@ -0,0 +1,59 @@
+// The component hosts must not sit between the flex container and its item, or the
+// sidebar/topbar lose their flex sizing and full-height stretch.
+app-modern-sidebar,
+app-modern-topbar {
+  display: contents;
+}
+
+// Shell: gradient canvas holding a transparent sidebar and an elevated content card.
+.layout-modern {
+  display: flex;
+  align-items: stretch;
+  height: var(--layout-viewport-height);
+  overflow: hidden;
+  background: var(--layout-modern-canvas);
+  background-attachment: fixed;
+}
+
+.layout-modern-main {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  margin: var(--layout-modern-card-margin);
+  margin-inline-start: 0;
+  background-color: var(--layout-modern-surface);
+  border-radius: var(--layout-modern-radius);
+  box-shadow: var(--layout-modern-shadow);
+  transition: margin var(--layout-section-transition-duration);
+  // Deliberately not `overflow: hidden` — the topbar dropdowns (theme panel, profile,
+  // launcher) are absolutely positioned inside this card and size themselves against
+  // the viewport, so clipping here would cut them off. The rows below round their own
+  // outer corners instead, which keeps the card's silhouette without the clipping.
+}
+
+.layout-modern-content {
+  flex: 1 1 auto;
+  min-height: 0;
+  // `overflow-y: auto` also makes the inline axis scrollable, so page content stays
+  // inside these corners even without a clip on the card itself.
+  overflow-y: auto;
+  border-end-start-radius: var(--layout-modern-radius);
+  border-end-end-radius: var(--layout-modern-radius);
+  padding: 1.25rem 1.5rem 1.75rem;
+}
+
+.layout-modern-mask {
+  display: none;
+}
+
+// Collapsed sidebar (desktop): pull it out of flow and close the gap.
+.layout-modern.layout-modern-static-inactive {
+  .layout-modern-sidebar {
+    margin-inline-start: calc(-1 * var(--layout-modern-sidebar-width));
+  }
+
+  .layout-modern-main {
+    margin-inline-start: var(--layout-modern-card-margin);
+  }
+}

package/assets/layout/modern/_sidebar.scss

@@ -0,0 +1,101 @@
+@use '../base/mixins' as *;
+
+.layout-modern-sidebar {
+  width: var(--layout-modern-sidebar-width);
+  flex: 0 0 var(--layout-modern-sidebar-width);
+  display: flex;
+  flex-direction: column;
+  padding: 0 0.875rem 1.25rem;
+  color: var(--layout-modern-ink);
+  // Brand row and footer stay pinned — the menu list is the only scroll region,
+  // so the sidebar itself must never grow a scrollbar of its own.
+  overflow: hidden;
+  user-select: none;
+  transition:
+    margin-inline-start var(--layout-section-transition-duration),
+    transform var(--layout-section-transition-duration);
+
+  // The component host adds no box of its own, so `.layout-menu` is the flex item
+  // between the brand row and the footer (see modern/_menu.scss for its scrolling).
+  > app-menu {
+    display: contents;
+  }
+
+  .layout-modern-brand {
+    display: flex;
+    align-items: center;
+    gap: 0.625rem;
+    height: var(--layout-topbar-height);
+    flex: 0 0 var(--layout-topbar-height);
+    padding-inline: 0.25rem;
+  }
+
+  .layout-brand-logo {
+    color: var(--layout-modern-ink);
+
+    // The drawer keeps its full width on every viewport, so there is always room for
+    // the company name — undo the narrow-screen hide the shared brand applies.
+    span {
+      display: inline;
+    }
+  }
+
+  .layout-modern-menu-button {
+    margin-inline-start: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    flex-shrink: 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--layout-modern-control-radius);
+    background: transparent;
+    color: var(--layout-modern-ink);
+    cursor: pointer;
+    transition: background-color var(--element-transition-duration);
+
+    &:hover {
+      background-color: var(--layout-modern-item-hover);
+    }
+
+    &:focus-visible {
+      @include focused();
+    }
+
+    ui-icon {
+      font-size: 1.125rem;
+    }
+  }
+}
+
+.layout-modern-sidebar-footer {
+  flex: 0 0 auto;
+  padding-top: 1rem;
+  border-top: var(--layout-modern-divider-width) solid
+    var(--layout-modern-divider);
+
+  .layout-footer {
+    justify-content: flex-start;
+    gap: 0.5rem;
+    padding: 0;
+    border-top: 0;
+    font-size: 0.8125rem;
+    color: var(--layout-modern-ink-muted);
+
+    a {
+      color: var(--layout-modern-ink);
+    }
+
+    // Same reasoning as the brand above — the drawer has room for the whole line.
+    span {
+      display: inline;
+    }
+
+    .logo-image {
+      height: 1.5rem;
+      max-width: 2rem;
+    }
+  }
+}

package/assets/layout/modern/_topbar.scss

@@ -0,0 +1,37 @@
+// Bar itself, plus the two things only this skin puts in it: the brand block that
+// appears while the sidebar is a drawer, and the page title. The action rail is
+// shared — see base/_topbar.scss.
+.layout-modern-topbar {
+  // Own stacking context above the content (the table's sticky thead is z-10),
+  // but below dialogs (z-40) so a modal still covers the shell.
+  position: relative;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  height: var(--layout-topbar-height);
+  flex: 0 0 var(--layout-topbar-height);
+  padding-inline: var(--layout-topbar-inline-padding);
+  background-color: var(--layout-modern-panel);
+  // Same preset tokens the classic bar reads (classic/_topbar.scss), floored at a
+  // hairline: this bar divides two panels inside the card, so it always needs a line.
+  border-bottom: var(--layout-modern-topbar-border-width) solid
+    var(--surface-border);
+  box-shadow: var(--f-topbar-shadow);
+  // The card no longer clips its children (see modern/_shell.scss), so the topbar
+  // rounds its own top corners to keep the silhouette.
+  border-start-start-radius: var(--layout-modern-radius);
+  border-start-end-radius: var(--layout-modern-radius);
+
+  .layout-modern-page-title {
+    // Shrinks to an ellipsis instead of pushing the actions off the bar.
+    flex: 0 1 auto;
+    min-width: 0;
+    font-size: 0.9375rem;
+    font-weight: 500;
+    color: var(--text-color-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}

package/assets/layout/modern/_variables.scss

@@ -0,0 +1,114 @@
+// Modern skin tokens — every colour resolves from the active @flusys/ng-ui theme,
+// so switching preset / primary / surface repaints the shell automatically.
+.layout-modern {
+  // Geometry overrides for this skin — everything else (viewport height, stacking
+  // order, content padding) comes from the shared tokens in base/variables/_common.
+  --layout-modern-sidebar-width: 19rem;
+  --layout-modern-gap: 1.125rem;
+  // The gap around the content card. Narrower viewports shrink it (see
+  // modern/_responsive.scss); everything that has to line up with the card's edges
+  // reads this one token rather than repeating the value.
+  --layout-modern-card-margin: var(--layout-modern-gap);
+
+  // Preset-driven geometry. The active preset (Aura / Lara / Nora) publishes the same
+  // shell tokens the classic skin reads in classic/_menu.scss and classic/_topbar.scss,
+  // so this skin resolves its chrome from them instead of hard-coding it — switching
+  // preset now restyles both skins. min() / max() clamp each value into this skin's own
+  // range: its card and rows stay softer than a classic sidebar's, while a square preset
+  // still squares them and a heavy-bordered one still thickens its lines.
+  --layout-modern-radius: calc(var(--f-card-border-radius, 12px) + 2px);
+  --layout-modern-item-radius: min(
+    var(--f-menuitem-active-radius, 9999px),
+    0.625rem
+  );
+  --layout-modern-control-radius: min(var(--f-border-radius-lg, 8px), 0.5rem);
+  --layout-modern-topbar-border-width: max(
+    var(--f-topbar-border-width, 1px),
+    1px
+  );
+  --layout-modern-divider-width: max(var(--f-sidebar-border-width, 1px), 1px);
+
+  // Shared topbar tokens, retuned for a bar that sits inside the content card.
+  --layout-topbar-height: 4.5rem;
+  --layout-topbar-inline-padding: 1.5rem;
+  --layout-topbar-actions-gap: 0.75rem;
+  --layout-topbar-group-gap: 0.5rem;
+  --layout-topbar-action-icon-size: 1.125rem;
+
+  // The topbar sits inside the card, so it ends one card margin lower than in a
+  // skin whose topbar is flush with the viewport.
+  --layout-shell-topbar-bottom: calc(
+    var(--layout-topbar-height) + var(--layout-modern-card-margin)
+  );
+
+  // Ink used on top of the gradient canvas — every canvas tint derives from it.
+  --layout-modern-ink: var(--f-primary-contrast-color);
+  --layout-modern-ink-muted: color-mix(
+    in srgb,
+    var(--layout-modern-ink) 78%,
+    transparent
+  );
+  --layout-modern-item-hover: color-mix(
+    in srgb,
+    var(--layout-modern-ink) 16%,
+    transparent
+  );
+  --layout-modern-divider: color-mix(
+    in srgb,
+    var(--layout-modern-ink) 30%,
+    transparent
+  );
+
+  --layout-modern-canvas: linear-gradient(
+    150deg,
+    var(--f-primary-300) 0%,
+    var(--f-primary-500) 34%,
+    var(--f-primary-600) 68%,
+    var(--f-primary-700) 100%
+  );
+  --layout-modern-item-active: var(--f-surface-900);
+  --layout-modern-item-active-color: var(--f-surface-0);
+  --layout-modern-panel: var(--surface-card);
+  --layout-modern-surface: var(--surface-ground);
+  --layout-modern-shadow: 0 18px 46px -22px rgb(0 0 0 / 55%);
+  --layout-modern-item-shadow: 0 6px 14px -8px rgb(0 0 0 / 60%);
+}
+
+// A preset with no radius at all wants none here either. The clamps above are
+// written to keep this skin softer than a classic sidebar, which would otherwise
+// leave the card and its rows slightly rounded in a deliberately square preset.
+:root[data-f-preset='Nora'] .layout-modern {
+  --layout-modern-radius: 0px;
+  --layout-modern-item-radius: 0px;
+  --layout-modern-control-radius: 0px;
+}
+
+// A neutral primary — the "noir" swatch, and the Nora preset's signature — resolves
+// the primary ramp to the surface greys. The light-mode canvas would then fade to a
+// pale grey that the white ink on top cannot be read against, so anchor it in the dark
+// end of the ramp instead, the same trade the dark theme makes, and invert the active
+// row so it still stands out. Dark mode already handles itself below.
+:root.f-primary-noir:not([class*='app-dark']) .layout-modern {
+  --layout-modern-ink: var(--f-surface-0);
+  --layout-modern-canvas: linear-gradient(
+    150deg,
+    var(--f-surface-700) 0%,
+    var(--f-surface-800) 45%,
+    var(--f-surface-900) 100%
+  );
+  --layout-modern-item-active: var(--f-surface-0);
+  --layout-modern-item-active-color: var(--f-surface-900);
+}
+
+:root[class*='app-dark'] .layout-modern {
+  --layout-modern-ink: var(--f-surface-0);
+  --layout-modern-canvas: linear-gradient(
+    150deg,
+    var(--f-surface-800) 0%,
+    var(--f-surface-900) 45%,
+    var(--f-surface-950) 100%
+  );
+  --layout-modern-item-active: var(--f-primary-color);
+  --layout-modern-item-active-color: var(--f-primary-contrast-color);
+  --layout-modern-shadow: 0 18px 46px -22px rgb(0 0 0 / 80%);
+}

package/assets/layout/modern/modern.scss

@@ -0,0 +1,7 @@
+@use './variables';
+@use './shell';
+@use './sidebar';
+@use './menu';
+@use './topbar';
+@use './responsive';
+@use './rtl';