@flusys/ng-layout 6.3.0 → 6.4.1

package/assets/layout/base/_topbar.scss

@@ -0,0 +1,132 @@
+@use 'mixins' as *;
+
+// Shared topbar chrome. Each skin positions and paints its own bar; everything the
+// bars render from the same components — the action rail, the round action buttons
+// and the widget menu — is styled once here and tuned through the topbar tokens in
+// base/variables/_common.scss. A new skin joins the selector list instead of
+// restating the block.
+.layout-topbar,
+.layout-modern-topbar {
+  .layout-topbar-actions {
+    margin-inline-start: auto;
+    display: flex;
+    align-items: center;
+    gap: var(--layout-topbar-actions-gap);
+    flex-shrink: 0;
+  }
+
+  .layout-config-menu,
+  .layout-topbar-menu-content {
+    display: flex;
+    align-items: center;
+    gap: var(--layout-topbar-group-gap);
+  }
+
+  .layout-topbar-action {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: var(--layout-topbar-action-size);
+    height: var(--layout-topbar-action-size);
+    flex-shrink: 0;
+    border-radius: var(--layout-topbar-action-radius, 50%);
+    background: transparent;
+    color: var(--text-color);
+    cursor: pointer;
+    transition: background-color var(--element-transition-duration);
+
+    &:hover {
+      background-color: var(--surface-hover);
+    }
+
+    &:focus-visible {
+      @include focused();
+    }
+
+    ui-icon {
+      font-size: var(--layout-topbar-action-icon-size);
+    }
+
+    // Revealed only inside the compact widget menu below, where the actions become
+    // labelled rows instead of icon buttons.
+    span {
+      font-size: 1rem;
+      display: none;
+    }
+
+    &.layout-topbar-action-highlight {
+      background-color: var(--primary-color);
+      color: var(--primary-contrast-color);
+    }
+  }
+
+  // Declared after `.layout-topbar-action` — same specificity, so the later rule
+  // wins and the overflow button stays hidden until the compact breakpoint reveals it.
+  .layout-topbar-menu-button {
+    display: none;
+  }
+}
+
+// Compact topbar — matches the `lg:` breakpoint the markup uses to reveal the menu,
+// so the overflow button and the menu it toggles are never both hidden.
+@media (max-width: 1023.98px) {
+  .layout-topbar,
+  .layout-modern-topbar {
+    .layout-topbar-menu-button {
+      display: inline-flex;
+    }
+
+    .layout-topbar-menu {
+      // Local to the bar's stacking context — only needs to clear its siblings.
+      position: absolute;
+      z-index: 1;
+      top: var(--layout-topbar-height);
+      inset-inline-end: var(--layout-topbar-inline-padding);
+      min-width: 15rem;
+      padding: 1rem;
+      background-color: var(--surface-overlay);
+      border: var(--f-border-width, 1px) solid var(--surface-border);
+      border-radius: var(--content-border-radius);
+      box-shadow: var(--f-shadow-xl);
+      transform-origin: top;
+
+      .layout-topbar-menu-content {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 0.5rem;
+      }
+
+      .layout-topbar-action {
+        width: 100%;
+        height: auto;
+        justify-content: flex-start;
+        gap: 0.5rem;
+        padding: 0.5rem 1rem;
+        border-radius: var(--content-border-radius);
+
+        ui-icon {
+          font-size: 1rem;
+        }
+
+        span {
+          display: block;
+          font-weight: 500;
+        }
+      }
+    }
+  }
+}
+
+// Compact bar. The tokens are re-declared on the bar itself rather than on :root so
+// they also win over a skin's own values, which sit on an ancestor shell class.
+@media (max-width: 639px) {
+  .layout-topbar,
+  .layout-modern-topbar {
+    --layout-topbar-inline-padding: 0.75rem;
+    --layout-topbar-actions-gap: 0.25rem;
+    --layout-topbar-group-gap: 0.25rem;
+    --layout-topbar-action-size: 2.25rem;
+
+    gap: 0.5rem;
+  }
+}

package/assets/layout/base/variables/_common.scss

@@ -0,0 +1,62 @@
+:root {
+  --primary-color: var(--f-primary-color);
+  --primary-contrast-color: var(--f-primary-contrast-color);
+  --text-color: var(--f-text-color);
+  --text-color-secondary: var(--f-text-muted-color);
+  --surface-border: var(--f-content-border-color);
+  --surface-card: var(--f-content-background);
+  --surface-hover: var(--f-content-hover-background);
+  --surface-overlay: var(--f-overlay-popover-background);
+  --transition-duration: var(--f-transition-duration);
+  --maskbg: var(--f-mask-background);
+  --content-border-radius: var(--f-content-border-radius);
+  --layout-section-transition-duration: 0.2s;
+  --element-transition-duration: var(--f-transition-duration);
+  --focus-ring-width: var(--f-focus-ring-width);
+  --focus-ring-style: var(--f-focus-ring-style);
+  --focus-ring-color: var(--f-focus-ring-color);
+  --focus-ring-offset: var(--f-focus-ring-offset);
+  --focus-ring-shadow: var(--f-focus-ring-shadow);
+
+  --layout-viewport-height: 100dvh;
+  --layout-sidebar-width: 19rem;
+  --layout-content-padding: 2rem;
+
+  /* Topbar geometry. A skin overrides these on its own shell class; the shared
+     topbar chrome in base/_topbar.scss reads them rather than hard-coding sizes. */
+  --layout-topbar-height: 4rem;
+  --layout-topbar-inline-padding: var(--layout-content-padding);
+  /* Gap between the rail's top-level groups, and inside each group. */
+  --layout-topbar-actions-gap: 1rem;
+  --layout-topbar-group-gap: 1rem;
+  --layout-topbar-action-size: 2.5rem;
+  --layout-topbar-action-radius: 50%;
+  --layout-topbar-action-icon-size: 1.25rem;
+
+  /* Distance from the top of the viewport to the bottom of the shell's topbar.
+     Shared topbar widgets that pin a full-width overlay (the mobile search sheet)
+     measure from this, so a skin that insets its topbar only overrides the token. */
+  --layout-shell-topbar-bottom: var(--layout-topbar-height);
+  /* The space left under the shell's topbar. Anything pinned below the topbar and
+     bounded by the viewport bottom (the classic sidebar) sizes from this, so a skin
+     that insets its topbar only has to override --layout-shell-topbar-bottom. */
+  --layout-content-viewport-height: calc(
+    var(--layout-viewport-height) - var(--layout-shell-topbar-bottom)
+  );
+
+  /* Stacking order: topbar < mask < sidebar */
+  --layout-topbar-z: 997;
+  --layout-mask-z: 998;
+  --layout-sidebar-z: 999;
+}
+
+/* ── Preset-scoped shell overrides ─────────────────────────────────────────────
+   `data-f-preset` is published on <html> by the theme applier. It exists for the
+   handful of shell rules that express a preset's design language as a whole
+   rather than as one token — a rule that has to know it is being asked for a
+   square, motionless look, not just a smaller radius. */
+:root[data-f-preset='Nora'] {
+  /* A brutalist preset squares its chrome as well: a circular topbar button next
+     to a square field and a square card reads as an oversight, not a choice. */
+  --layout-topbar-action-radius: 0px;
+}

package/assets/layout/classic/_main.scss

@@ -0,0 +1,14 @@
+.layout-main-container {
+  display: flex;
+  flex-direction: column;
+  min-height: var(--layout-viewport-height);
+  justify-content: space-between;
+  padding: calc(var(--layout-topbar-height) + var(--layout-content-padding))
+    var(--layout-content-padding) 0;
+  transition: margin-inline-start var(--layout-section-transition-duration);
+}
+
+.layout-main {
+  flex: 1 1 auto;
+  padding-bottom: var(--layout-content-padding);
+}

package/assets/layout/classic/_menu.scss

@@ -0,0 +1,77 @@
+.layout-sidebar {
+  position: fixed;
+  inset-inline-start: 0;
+  top: var(--layout-topbar-height);
+  width: var(--layout-sidebar-width);
+  // Fills exactly the space left under the topbar — never taller than the viewport,
+  // so the last menu item stays reachable.
+  height: var(--layout-content-viewport-height);
+  z-index: var(--layout-sidebar-z);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  user-select: none;
+  transition:
+    transform var(--layout-section-transition-duration),
+    inset-inline-start var(--layout-section-transition-duration);
+  background-color: var(--surface-overlay);
+  padding: 1rem 1.5rem;
+  border-inline-end: var(--f-sidebar-border-width) solid
+    var(--f-content-border-color);
+  border-end-end-radius: var(--f-sidebar-radius);
+  box-shadow: var(--f-sidebar-shadow);
+}
+
+// Classic look for the shared menu structure (see base/_menu.scss). Scoped to the
+// sidebar so the horizontal nav in topbar mode — which styles the same markup from
+// scratch in classic/_topbar_nav.scss — is left alone.
+.layout-sidebar .layout-menu {
+  li {
+    margin-top: 5px;
+  }
+
+  li.active-menuitem > a {
+    background-color: var(--f-highlight-background);
+    color: var(--f-highlight-color) !important;
+    border-radius: var(--f-menuitem-active-radius);
+    border-inline-start: var(--f-menuitem-active-border-width) solid
+      var(--f-primary-color);
+  }
+
+  ul {
+    a {
+      padding: 0.5rem 1rem;
+      border-radius: var(--content-border-radius);
+
+      &.active-route {
+        font-weight: 600;
+        background-color: var(--f-highlight-background);
+        color: var(--f-highlight-color);
+        border-radius: var(--f-menuitem-active-radius);
+        border-inline-start: var(--f-menuitem-active-border-width) solid
+          var(--f-primary-color);
+      }
+
+      &:not(.active-route):hover {
+        color: var(--f-primary-color);
+        font-weight: 600;
+      }
+    }
+
+    // Each nesting level steps the row further in. Generated rather than hand-written
+    // so the ladder stays consistent, and inline-start so RTL mirrors for free.
+    ul {
+      overflow: hidden;
+      border-radius: var(--content-border-radius);
+
+      $indents: 1rem, 2rem, 2.5rem, 3rem, 3.5rem, 4rem, 4.5rem, 5rem, 5.5rem;
+      $selector: '& > li';
+
+      @each $indent in $indents {
+        #{$selector} > a {
+          margin-inline-start: $indent;
+        }
+        $selector: '#{$selector} > ul > li';
+      }
+    }
+  }
+}

package/assets/layout/classic/_responsive.scss

@@ -0,0 +1,95 @@
+// Written with logical properties, so RTL only needs the drawer transform mirrored
+// (see classic/_rtl.scss) rather than a second copy of these rules.
+$sidebar-drawer-easing: 0.4s cubic-bezier(0.05, 0.74, 0.2, 0.99);
+$sidebar-drawer-shadow:
+  0px 3px 5px rgba(0, 0, 0, 0.02),
+  0px 0px 2px rgba(0, 0, 0, 0.05),
+  0px 1px 4px rgba(0, 0, 0, 0.08);
+
+// The sidebar leaves its column and floats over the content as a full-height drawer.
+@mixin sidebar-drawer {
+  transform: translateX(-100%);
+  top: 0;
+  height: var(--layout-viewport-height);
+  transition:
+    transform $sidebar-drawer-easing,
+    inset-inline-start $sidebar-drawer-easing;
+}
+
+@media screen and (min-width: 1960px) {
+  .layout-main {
+    width: 1504px;
+    margin-inline: auto !important;
+  }
+}
+
+@media (min-width: 992px) {
+  .layout-wrapper {
+    &.layout-overlay {
+      .layout-sidebar {
+        @include sidebar-drawer;
+        box-shadow: $sidebar-drawer-shadow;
+      }
+
+      &.layout-overlay-active .layout-sidebar {
+        transform: translateX(0);
+      }
+    }
+
+    &.layout-static {
+      .layout-main-container {
+        margin-inline-start: var(--layout-sidebar-width);
+      }
+
+      &.layout-static-inactive {
+        .layout-sidebar {
+          transform: translateX(-100%);
+        }
+
+        .layout-main-container {
+          margin-inline-start: 0;
+        }
+      }
+    }
+
+    &.layout-topbar-mode {
+      .layout-sidebar {
+        display: none;
+      }
+    }
+
+    .layout-mask {
+      display: none;
+    }
+  }
+}
+
+@media (max-width: 991px) {
+  .layout-wrapper {
+    .layout-main-container {
+      margin-inline-start: 0;
+    }
+
+    .layout-sidebar {
+      @include sidebar-drawer;
+    }
+
+    .layout-mask {
+      display: none;
+      position: fixed;
+      inset: 0;
+      z-index: var(--layout-mask-z);
+      background-color: var(--maskbg);
+    }
+
+    &.layout-mobile-active {
+      .layout-sidebar {
+        transform: translateX(0);
+      }
+
+      .layout-mask {
+        display: block;
+      }
+    }
+  }
+}

package/assets/layout/classic/_rtl.scss

@@ -0,0 +1,26 @@
+// The classic shell is built on logical properties, so only the drawer transform —
+// which has no logical equivalent — needs mirroring.
+@media (min-width: 992px) {
+  html[dir='rtl'] .layout-wrapper {
+    &.layout-overlay .layout-sidebar,
+    &.layout-static.layout-static-inactive .layout-sidebar {
+      transform: translateX(100%);
+    }
+
+    &.layout-overlay.layout-overlay-active .layout-sidebar {
+      transform: translateX(0);
+    }
+  }
+}
+
+@media (max-width: 991px) {
+  html[dir='rtl'] .layout-wrapper {
+    .layout-sidebar {
+      transform: translateX(100%);
+    }
+
+    &.layout-mobile-active .layout-sidebar {
+      transform: translateX(0);
+    }
+  }
+}

package/assets/layout/classic/_topbar.scss

@@ -0,0 +1,53 @@
+// Bar itself and the brand block on its leading edge. Everything on the trailing
+// edge — the action rail, the round buttons, the compact widget menu — is shared
+// with the other skins and lives in base/_topbar.scss.
+.layout-topbar {
+  position: fixed;
+  height: var(--layout-topbar-height);
+  z-index: var(--layout-topbar-z);
+  inset-inline-start: 0;
+  top: 0;
+  width: 100%;
+  padding: 0 var(--layout-topbar-inline-padding);
+  background-color: var(--surface-card);
+  transition: inset-inline-start var(--layout-section-transition-duration);
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  border-bottom: var(--f-topbar-border-width) solid
+    var(--f-content-border-color);
+  box-shadow: var(--f-topbar-shadow);
+
+  .layout-topbar-logo-container {
+    width: calc(var(--layout-sidebar-width) - 2rem);
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    &.layout-topbar-logo-container-desktop {
+      justify-content: space-between;
+    }
+  }
+
+  // Topbar mode has no sidebar for the brand to line up with — and no menu toggle
+  // beside it either — so the brand claims only the room it needs and the
+  // horizontal nav gets the rest of the bar.
+  .layout-topbar-mode & .layout-topbar-logo-container {
+    width: auto;
+  }
+
+  .layout-topbar-action-right {
+    margin-inline-start: auto !important;
+    margin-inline-end: -0.9rem !important;
+  }
+
+  .layout-menu-button {
+    margin-inline-end: 0.5rem;
+  }
+}
+
+@media (max-width: 991px) {
+  .layout-topbar .layout-topbar-logo-container {
+    width: auto;
+  }
+}

package/assets/layout/{_topbar_nav.scss → classic/_topbar_nav.scss}

@@ -1,4 +1,4 @@
-@use "mixins" as *;
+@use "../base/mixins" as *;
 
 // Define common values as variables
 $submenu-box-shadow:
@@ -19,7 +19,7 @@ $submenu-icon-margin: 0.5rem;
   pointer-events: none;
   position: $position;
   background-color: var(--surface-overlay);
-  border: 1px solid var(--surface-border);
+  border: var(--f-border-width, 1px) solid var(--surface-border);
   border-radius: var(--content-border-radius);
   box-shadow: $submenu-box-shadow;
   flex-direction: column;
@@ -58,7 +58,7 @@ $submenu-icon-margin: 0.5rem;
   transition: background-color var(--element-transition-duration);
 
   .layout-menuitem-icon {
-    margin-right: $submenu-icon-margin;
+    margin-inline-end: $submenu-icon-margin;
   }
 
   .layout-menuitem-text {
@@ -70,7 +70,8 @@ $submenu-icon-margin: 0.5rem;
     background-color: var(--f-highlight-background);
     color: var(--f-highlight-color);
     border-radius: var(--f-menuitem-active-radius);
-    border-inline-start: var(--f-menuitem-active-border-width) solid var(--f-primary-color);
+    border-inline-start: var(--f-menuitem-active-border-width) solid
+      var(--f-primary-color);
   }
 }
 
@@ -209,25 +210,55 @@ $submenu-icon-margin: 0.5rem;
   }
 }
 
+// Wrapper exists purely to hold the overlay scroll thumb: an absolute child of the
+// scroller itself would scroll away with the menu.
+.layout-topbar-nav {
+  position: relative;
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  align-self: stretch;
+}
+
+// Sits outside the flow, so it never takes height from the row — that height loss is
+// what pushed the menu items off centre — and it only fades in while the strip is hovered.
+.layout-topbar-nav-scroll-thumb {
+  position: absolute;
+  bottom: 0.125rem;
+  inset-inline-start: 0;
+  height: 0.125rem;
+  border-radius: 999px;
+  background-color: color-mix(in srgb, var(--text-color) 35%, transparent);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--element-transition-duration);
+}
+
+.layout-topbar-nav:hover .layout-topbar-nav-scroll-thumb {
+  opacity: 1;
+}
+
 .layout-topbar-nav-horizontal {
   display: flex;
   flex-direction: row;
   align-items: center;
   flex: 1 1 auto;
+  min-width: 0;
+
+  align-self: stretch;
   padding: 0 1rem;
   overflow-x: auto;
   overflow-y: hidden;
+  overscroll-behavior-x: contain;
   -webkit-overflow-scrolling: touch;
+
+  // Native scrollbar hidden in favour of the overlay thumb above.
   scrollbar-width: none;
 
   &::-webkit-scrollbar {
     display: none;
   }
 
-  &.layout-topbar-nav-hidden {
-    display: none;
-  }
-
   .layout-menu {
     display: flex;
     flex-direction: row;
@@ -237,11 +268,6 @@ $submenu-icon-margin: 0.5rem;
     gap: 0.25rem;
     flex-shrink: 0;
 
-    // Reset sidebar menu nested margins in topbar mode
-    a {
-      margin-left: 0 !important;
-    }
-
     > ul {
       display: flex;
       flex-direction: row;
@@ -285,12 +311,12 @@ $submenu-icon-margin: 0.5rem;
           transition: background-color var(--element-transition-duration);
 
           .layout-menuitem-icon {
-            margin-right: 0.5rem;
+            margin-inline-end: 0.5rem;
           }
 
           .layout-submenu-toggler {
             display: inline;
-            margin-left: 0.5rem;
+            margin-inline-start: 0.5rem;
             font-size: 0.75rem;
           }
 
@@ -302,7 +328,8 @@ $submenu-icon-margin: 0.5rem;
             background-color: var(--f-highlight-background);
             color: var(--f-highlight-color);
             border-radius: var(--f-menuitem-active-radius);
-            border-inline-start: var(--f-menuitem-active-border-width) solid var(--f-primary-color);
+            border-inline-start: var(--f-menuitem-active-border-width) solid
+              var(--f-primary-color);
           }
         }
 
@@ -344,7 +371,8 @@ $submenu-icon-margin: 0.5rem;
           background-color: var(--f-highlight-background);
           color: var(--f-highlight-color);
           border-radius: var(--f-menuitem-active-radius);
-          border-inline-start: var(--f-menuitem-active-border-width) solid var(--f-primary-color);
+          border-inline-start: var(--f-menuitem-active-border-width) solid
+            var(--f-primary-color);
         }
       }
     }

package/assets/layout/classic/classic.scss

@@ -0,0 +1,6 @@
+@use './main';
+@use './topbar_nav';
+@use './topbar';
+@use './menu';
+@use './responsive';
+@use './rtl';

package/assets/layout/layout.scss

@@ -1,16 +1,18 @@
-@use './variables/_common';
-@use './variables/_light';
-@use './variables/_dark';
-@use './_mixins';
-@use './_preloading';
-@use './_core';
-@use './_main';
-@use "./topbar_nav";
-@use "./topbar";
-@use './_menu';
-@use './_footer';
-@use './_forms';
-@use './_responsive';
-@use './_utils';
-@use './_typography';
-@use './_rtl';
+// Shared foundation — applies to every layout skin
+@use './base/variables/common';
+@use './base/variables/light';
+@use './base/variables/dark';
+@use './base/preloading';
+@use './base/core';
+@use './base/typography';
+@use './base/forms';
+@use './base/brand';
+@use './base/topbar';
+@use './base/menu';
+@use './base/footer';
+@use './base/utils';
+@use './base/rtl';
+
+// Layout skins — selected at runtime via LayoutConfig.layoutTheme
+@use './classic/classic';
+@use './modern/modern';