Initial commit

resources/styles/@core/template/placeholders/_default-layout-horizontal-nav.scss

@@ -0,0 +1,7 @@
+%default-layout-horizontal-nav-navbar-and-nav-container {
+  box-shadow: 0 1px 4px 0 rgba(var(--v-shadow-key-umbra-color), 0.1);
+
+  &.header-blur {
+    background-color: rgb(var(--v-theme-surface), 0.96);
+  }
+}

resources/styles/@core/template/placeholders/_default-layout-vertical-nav.scss

@@ -0,0 +1,8 @@
+@use "@configured-variables" as variables;
+
+%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
+  // If navbar is contained => Squeeze navbar content on scroll
+  @if variables.$layout-vertical-nav-navbar-is-contained {
+    padding-inline: 1.5rem;
+  }
+}

resources/styles/@core/template/placeholders/_horizontal-nav.scss

@@ -0,0 +1,47 @@
+@use "@core-scss/base/mixins";
+
+// Horizontal nav item icon (Including sub nav items)
+%horizontal-nav-item-icon {
+  font-size: 1.375rem;
+}
+
+// Horizontal nav item styles (including nested)
+%horizontal-nav-item {
+  padding-block: 0.5rem;
+  padding-inline: 1rem;
+}
+
+%nav-group-label-and-nav-link-style {
+  border-radius: 0.375rem;
+  margin-block: 0.125rem;
+  margin-inline: 0.5rem;
+}
+
+// Active styles for sub nav link
+%horizontal-nav-sub-nav-link-active {
+  background: rgba(var(--v-theme-primary), 0.08);
+
+  // Remove before pseudo element from sub nav link to avoid overlapping with active state
+  &::before {
+    content: none;
+  }
+}
+
+// Popper content styles
+%horizontal-nav-popper-content {
+  @include mixins.elevation(8);
+}
+
+// Top level horizontal nav item styles (`a` tag & group label)
+%horizontal-nav-top-level-item {
+  border-radius: 0.375rem;
+}
+
+// Horizontal nav item title
+%horizontal-nav-item-title {
+  line-height: 1.375rem;
+}
+
+%third-level-nav-item-icon {
+  margin-inline: 0 0.5rem;
+}

resources/styles/@core/template/placeholders/_index.scss

@@ -0,0 +1,6 @@
+@forward "nav";
+@forward "vertical-nav";
+@forward "horizontal-nav";
+@forward "default-layout-vertical-nav";
+@forward "default-layout-horizontal-nav";
+@forward "misc";

resources/styles/@core/template/placeholders/_misc.scss

@@ -0,0 +1,3 @@
+%blurry-bg {
+  background-color: rgb(var(--v-theme-surface), 0.88);
+}

resources/styles/@core/template/placeholders/_nav.scss

@@ -0,0 +1,27 @@
+// ℹ️ This is common style that needs to be applied to both navs
+%nav {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+
+  .nav-item-title {
+    letter-spacing: normal;
+  }
+}
+
+/*
+    Active nav link styles for horizontal & vertical nav
+
+    For horizontal nav it will be only applied to top level nav items
+    For vertical nav it will be only applied to nav links (not nav groups)
+*/
+%nav-link-active {
+  background: linear-gradient(270deg, rgba(var(--v-global-theme-primary), 0.7) 0%, rgb(var(--v-global-theme-primary)) 100%) !important;
+  box-shadow: 0 2px 6px rgba(var(--v-global-theme-primary), 0.3);
+
+  i {
+    color: rgb(var(--v-theme-on-primary)) !important;
+  }
+
+  html[dir="rtl"] &.router-link-exact-active {
+    background: linear-gradient(-270deg, rgba(var(--v-global-theme-primary), 0.7) 0%, rgb(var(--v-global-theme-primary)) 100%) !important;
+  }
+}

resources/styles/@core/template/placeholders/_vertical-nav.scss

@@ -0,0 +1,40 @@
+// Vertical nav item badge styles
+
+%nav-header-action {
+  font-size: 0;
+}
+
+%vertical-nav-item-badge {
+  z-index: 1;
+  font-size: 0.8125rem;
+  line-height: 1.25rem;
+  margin-inline-end: 0.5rem;
+  padding-block: 0.125rem;
+  padding-inline: 0.625rem;
+}
+
+// This is same as `%vertical-nav-item` except section title is excluded
+%vertical-nav-item-interactive {
+  border-radius: 0.375rem;
+  block-size: 2.375rem;
+  margin-block-end: 0.375rem;
+}
+
+%vertical-nav-items-icon-after-2nd-level {
+  margin-inline: 15px 0.8125rem;
+  visibility: visible;
+}
+
+// Section title
+// ℹ️ Setting height will prevent jerking when text & icon is toggled
+%vertical-nav-section-title {
+  block-size: 1.25rem;
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  text-transform: uppercase;
+}
+
+// ℹ️ Icon styling for icon nested inside another nav item (2nd level)
+%vertical-nav-items-nested-icon {
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+}