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,49 @@
+/** Materio Template base classes **/
+/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
+
+@use "@/styles/desktop/template/configured-variables/template" as variables;
+@use "./misc";
+@use "@/styles/desktop/template/base/mixins";
+
+%default-layout-vertical-nav-scrolled-sticky-elevated-nav {
+    background-color: rgb(var(--v-theme-surface));
+}
+
+%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
+    @include mixins.elevation(variables.$vertical-nav-navbar-elevation);
+
+    // If navbar is contained => Squeeze navbar content on scroll
+    @if variables.$layout-vertical-nav-navbar-is-contained {
+        padding-inline: 1.2rem;
+    }
+}
+
+%default-layout-vertical-nav-floating-navbar-overlay {
+    isolation: isolate;
+
+    &::after {
+        position: absolute;
+        z-index: -1;
+        /* stylelint-disable property-no-vendor-prefix */
+        -webkit-backdrop-filter: blur(10px);
+        backdrop-filter: blur(10px);
+        /* stylelint-enable */
+        background:
+            linear-gradient(
+                    180deg,
+                    rgba(var(--v-theme-background), 70%) 44%,
+                    rgba(var(--v-theme-background), 43%) 73%,
+                    rgba(var(--v-theme-background), 0%)
+            );
+        background-repeat: repeat;
+        block-size: calc(variables.$layout-vertical-nav-navbar-height + variables.$vertical-nav-floating-navbar-top + 0.5rem);
+        content: "";
+        inset-block-start: -(variables.$vertical-nav-floating-navbar-top);
+        inset-inline-end: 0;
+        inset-inline-start: 0;
+        /* stylelint-disable property-no-vendor-prefix */
+        -webkit-mask: linear-gradient(black, black 18%, transparent 100%);
+        mask: linear-gradient(black, black 18%, transparent 100%);
+        /* stylelint-enable */
+    }
+}
@@ -0,0 +1,6 @@
+/** Materio Template base classes **/
+/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
+
+%layout-navbar {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+}
@@ -0,0 +1,8 @@
+/** Materio Template base classes **/
+/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
+
+@forward "./vertical-nav";
+@forward "./nav";
+@forward "./default-layout";
+@forward "./default-layout-vertical-nav";
+@forward "./misc";
@@ -0,0 +1,10 @@
+/** Materio Template base classes **/
+/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
+
+%blurry-bg {
+    /* stylelint-disable property-no-vendor-prefix */
+    -webkit-backdrop-filter: blur(6px);
+    backdrop-filter: blur(6px);
+    /* stylelint-enable */
+    background-color: rgb(var(--v-theme-surface), 0.9);
+}
@@ -0,0 +1,37 @@
+/** Materio Template base classes **/
+/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
+
+@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
+@use "@/styles/desktop/template/base/mixins";
+
+// ℹ️ This is common style that needs to be applied to both navs
+%nav {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+
+    .nav-item-title {
+        letter-spacing: 0.15px;
+    }
+
+    .nav-section-title {
+        letter-spacing: 0.4px;
+    }
+}
+
+/*
+    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-color: rgb(var(--v-theme-primary));
+    color: rgb(var(--v-theme-on-primary));
+
+    @include mixins.elevation(3);
+}
+
+%nav-link {
+    a {
+        color: inherit;
+    }
+}
@@ -0,0 +1,84 @@
+/** Materio Template base classes **/
+/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
+
+@use "@/styles/desktop/template/base/mixins";
+@use "@/styles/desktop/template/configured-variables/template" as variables;
+@use "vuetify/lib/styles/tools/states" as vuetifyStates;
+
+%nav-header-action {
+    font-size: 1.25rem;
+}
+
+// Nav items styles (including section title)
+%vertical-nav-item {
+    margin-block: 0;
+    margin-inline: variables.$vertical-nav-horizontal-spacing;
+    padding-block: 0;
+    padding-inline: variables.$vertical-nav-horizontal-padding;
+    white-space: nowrap;
+}
+
+// This is same as `%vertical-nav-item` except section title is excluded
+%vertical-nav-item-interactive {
+    border-radius: 0.4rem;
+    block-size: 2.75rem;
+
+    /*
+      ℹ️ We will use `margin-block-end` instead of `margin-block` to give more space for shadow to appear.
+      With `margin-block`, due to small space (space gets divided between top & bottom) shadow cuts
+    */
+    margin-block-end: 0.375rem;
+}
+
+// Common styles for nav item icon styles
+// ℹ️ Nav group's children icon styles are not here (Adjusts height, width & margin)
+%vertical-nav-items-icon {
+    flex-shrink: 0;
+    font-size: variables.$vertical-nav-items-icon-size;
+    margin-inline-end: variables.$vertical-nav-items-icon-margin-inline-end;
+}
+
+// ℹ️ Icon styling for icon nested inside another nav item (2nd level)
+%vertical-nav-items-nested-icon {
+    /*
+      ℹ️ `margin-inline` will be (normal icon font-size - small icon font-size) / 2
+      (1.5rem - 0.9rem) / 2 => 0.6rem / 2 => 0.3rem
+    */
+    $vertical-nav-items-nested-icon-margin-inline: calc((variables.$vertical-nav-items-icon-size - variables.$vertical-nav-items-nested-icon-size) / 2);
+
+    font-size: variables.$vertical-nav-items-nested-icon-size;
+    margin-inline-end: $vertical-nav-items-nested-icon-margin-inline + variables.$vertical-nav-items-icon-margin-inline-end;
+    margin-inline-start: $vertical-nav-items-nested-icon-margin-inline;
+}
+
+%vertical-nav-items-icon-after-2nd-level {
+    visibility: hidden;
+}
+
+// Open & Active nav group styles
+%vertical-nav-group-open-active {
+    @include mixins.selected-states("&::before");
+}
+
+// Section title
+%vertical-nav-section-title {
+    // ℹ️ Setting height will prevent jerking when text & icon is toggled
+    block-size: 1.5rem;
+    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+    font-size: 0.75rem;
+    text-transform: uppercase;
+}
+
+// Vertical nav item badge styles
+%vertical-nav-item-badge {
+    display: inline-block;
+    border-radius: 1.5rem;
+    font-size: 0.8em;
+    font-weight: 500;
+    line-height: 1;
+    padding-block: 0.25em;
+    padding-inline: 0.55em;
+    text-align: center;
+    vertical-align: baseline;
+    white-space: nowrap;
+}