initial commit

resources/styles/@core/base/_default-layout-w-vertical-nav.scss

@@ -0,0 +1,103 @@
+@use "@configured-variables" as variables;
+@use "@core-scss/base/placeholders" as *;
+@use "@core-scss/template/placeholders" as *;
+@use "misc";
+@use "@core-scss/base/mixins";
+
+$header: ".layout-navbar";
+
+@if variables.$layout-vertical-nav-navbar-is-contained {
+  $header: ".layout-navbar .navbar-content-container";
+}
+
+.layout-wrapper.layout-nav-type-vertical {
+  // SECTION  Layout Navbar
+  // 👉 Elevated navbar
+  @if variables.$vertical-nav-navbar-style == "elevated" {
+    // Add transition
+    #{$header} {
+      transition: padding 0.2s ease, background-color 0.18s ease;
+    }
+
+    // If navbar is contained => Add border radius to header
+    @if variables.$layout-vertical-nav-navbar-is-contained {
+      #{$header} {
+        border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
+      }
+    }
+
+    // Scrolled styles for sticky navbar
+    @at-root {
+      /* ℹ️ This html selector with not selector is required when:
+        dialog is opened and window don't have any scroll. This removes window-scrolled class from layout and out style broke
+    */
+      html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-sticky,
+      &.window-scrolled.layout-navbar-sticky {
+
+        #{$header} {
+          @extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
+          @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
+        }
+
+        .navbar-blur#{$header} {
+          @extend %blurry-bg;
+        }
+      }
+    }
+  }
+
+  // 👉 Floating navbar
+  @else if  variables.$vertical-nav-navbar-style == "floating" {
+    // ℹ️ Regardless of navbar is contained or not => Apply overlay to .layout-navbar
+    .layout-navbar {
+      &.navbar-blur {
+        @extend %default-layout-vertical-nav-floating-navbar-overlay;
+      }
+    }
+
+    &:not(.layout-navbar-sticky) {
+      #{$header} {
+        margin-block-start: variables.$vertical-nav-floating-navbar-top;
+      }
+    }
+
+    #{$header} {
+      @if variables.$layout-vertical-nav-navbar-is-contained {
+        border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
+      }
+
+      background-color: rgb(var(--v-theme-surface));
+
+      @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
+    }
+
+    .navbar-blur#{$header} {
+      @extend %blurry-bg;
+    }
+  }
+
+  // !SECTION
+
+  // 👉 Layout footer
+  .layout-footer {
+    $ele-layout-footer: &;
+
+    .footer-content-container {
+      border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness 0 0;
+
+      // Sticky footer
+      @at-root {
+        // ℹ️ .layout-footer-sticky#{$ele-layout-footer} => .layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer
+        .layout-footer-sticky#{$ele-layout-footer} {
+          .footer-content-container {
+            background-color: rgb(var(--v-theme-surface));
+            padding-block: 0;
+            padding-inline: 1.2rem;
+
+            @include mixins.elevation(3);
+          }
+        }
+      }
+    }
+  }
+}