code refactor

2023-06-23 13:23:10 +08:00
parent 37195f6008
commit 626325066d
55 changed files with 3144 additions and 1310 deletions
@@ -0,0 +1,66 @@
+/** Materio Template base classes **/
+/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
+
+@use "@/styles/desktop/template/configured-variables/template" as variables;
+
+/* ℹ️ This styles extends the existing layout package's styles for handling cases that aren't related to layouts package */
+
+/*
+  ℹ️ When we use v-layout as immediate first child of `.page-content-container`, it adds display:flex and page doesn't get contained height
+*/
+// .layout-wrapper.layout-nav-type-vertical {
+//   &.layout-content-height-fixed {
+//     .page-content-container {
+//       > .v-layout:first-child > :not(.v-navigation-drawer):first-child {
+//         flex-grow: 1;
+//         block-size: 100%;
+//       }
+//     }
+//   }
+// }
+.layout-wrapper.layout-nav-type-vertical {
+    &.layout-content-height-fixed {
+        .page-content-container {
+            > .v-layout:first-child {
+                overflow: hidden;
+                min-block-size: 100%;
+
+                > .v-main {
+                    // overflow-y: auto;
+
+                    .v-main__wrap > :first-child {
+                        block-size: 100%;
+                        overflow-y: auto;
+                    }
+                }
+            }
+        }
+    }
+}
+
+// ℹ️ Let div/v-layout take full height. E.g. Email App
+.layout-wrapper.layout-nav-type-horizontal {
+    &.layout-content-height-fixed {
+        > .layout-page-content {
+            display: flex;
+        }
+    }
+}
+
+// 👉 Floating navbar styles
+@if variables.$vertical-nav-navbar-style == "floating" {
+    // ℹ️ Add spacing above navbar if navbar is floating (was in %layout-navbar-sticky placeholder)
+    .layout-wrapper.layout-nav-type-vertical.layout-navbar-sticky {
+        .layout-navbar {
+            inset-block-start: variables.$vertical-nav-floating-navbar-top;
+        }
+
+        /*
+          ℹ️ If it's floating navbar
+          Add `vertical-nav-floating-navbar-top` as margin top to .layout-page-content
+        */
+        .layout-page-content {
+            margin-block-start: variables.$vertical-nav-floating-navbar-top;
+        }
+    }
+}