From 4a16b827005b9f7bb2a31fa5078f21968640ca5e Mon Sep 17 00:00:00 2001 From: MaysWind Date: Fri, 5 Apr 2024 00:19:48 +0800 Subject: [PATCH] upgrade Materio to 2.2.1 --- src/desktop-main.js | 87 +- .../desktop/template/base/_components.scss | 44 +- src/styles/desktop/template/base/_dark.scss | 2 +- .../base/_default-layout-w-vertical-nav.scss | 3 +- .../desktop/template/base/_layouts.scss | 2 +- src/styles/desktop/template/base/_mixins.scss | 29 +- .../desktop/template/base/_utilities.scss | 37 +- .../desktop/template/base/_variables.scss | 7 +- .../desktop/template/base/_vertical-nav.scss | 7 +- .../base/libs/_perfect-scrollbar.scss | 4 +- .../base/libs/vuetify/_overrides.scss | 7 +- .../base/libs/vuetify/_variables.scss | 11 + .../template/base/placeholders/_nav.scss | 1 - .../desktop/template/layout/_variables.scss | 1 + .../template/template/_components.scss | 1295 ++++++++++++++--- .../_default-layout-w-vertical-nav.scss | 31 + .../desktop/template/template/_utilities.scss | 37 +- .../desktop/template/template/_variables.scss | 49 +- .../template/template/_vertical-nav.scss | 54 + .../desktop/template/template/index.scss | 4 + .../_default-layout-vertical-nav.scss | 14 + .../template/placeholders/_index.scss | 2 + .../template/template/placeholders/_misc.scss | 10 + .../template/template/placeholders/_nav.scss | 21 +- .../template/placeholders/_vertical-nav.scss | 40 +- .../desktop/template/vuetify/_overrides.scss | 41 + .../desktop/template/vuetify/_variables.scss | 314 ++++ .../desktop/template/vuetify/index.scss | 5 + .../desktop/template/vuetify/variables.scss | 243 ---- third-party-dependencies.json | 2 +- 30 files changed, 1892 insertions(+), 512 deletions(-) create mode 100644 src/styles/desktop/template/template/_default-layout-w-vertical-nav.scss create mode 100644 src/styles/desktop/template/template/_vertical-nav.scss create mode 100644 src/styles/desktop/template/template/placeholders/_default-layout-vertical-nav.scss create mode 100644 src/styles/desktop/template/template/placeholders/_misc.scss create mode 100644 src/styles/desktop/template/vuetify/_overrides.scss create mode 100644 src/styles/desktop/template/vuetify/_variables.scss create mode 100644 src/styles/desktop/template/vuetify/index.scss delete mode 100644 src/styles/desktop/template/vuetify/variables.scss diff --git a/src/desktop-main.js b/src/desktop-main.js index ae95ad10..85ededcb 100644 --- a/src/desktop-main.js +++ b/src/desktop-main.js @@ -95,7 +95,7 @@ import PieChartComponent from '@/components/desktop/PieChart.vue'; import DateRangeSelectionDialog from '@/components/desktop/DateRangeSelectionDialog.vue'; import SwitchToMobileDialog from '@/components/desktop/SwitchToMobileDialog.vue'; -import '@/styles/desktop/template/base/libs/vuetify/_index.scss'; +import '@/styles/desktop/template/vuetify/index.scss'; import '@/styles/desktop/template/template/index.scss'; import '@/styles/desktop/template/layout/index.scss'; import '@/styles/desktop/template/layout/component/index.scss'; @@ -274,19 +274,28 @@ const vuetify = createVuetify({ dark: false, colors: { 'primary': '#c67e48', + 'primary-darken-1': '#9a6238', + 'on-primary': '#ffffff', 'secondary': '#8a8d93', - 'on-secondary': '#fff', + 'secondary-darken-1': '#545659', + 'on-secondary': '#ffffff', 'success': '#4cd964', + 'success-darken-1': '#3ba64d', + 'on-success': '#ffffff', 'info': '#2196f3', + 'info-darken-1': '#1a74bd', + 'on-info': '#ffffff', 'warning': '#ff9500', + 'warning-darken-1': '#d07a01', + 'on-warning': '#ffffff', 'error': '#ff3b30', + 'error-darken-1': '#c73027', + 'on-error': '#ffffff', 'income': '#ff3b30', 'expense': '#009688', - 'on-primary': '#ffffff', - 'on-success': '#ffffff', - 'on-warning': '#ffffff', 'background': '#faf8f4', 'on-background': '#413935', + 'surface': '#fff', 'on-surface': '#413935', 'grey-50': '#fafafa', 'grey-100': '#f0f2f8', @@ -300,41 +309,59 @@ const vuetify = createVuetify({ 'grey-900': '#212121', 'perfect-scrollbar-thumb': '#dbdade', 'skin-bordered-background': '#fff', - 'skin-bordered-surface': '#fff' + 'skin-bordered-surface': '#fff', + 'expansion-panel-text-custom-bg': '#fafafa' }, variables: { 'code-color': '#ff8000', 'overlay-scrim-background': '#413935', + 'tooltip-background': '#1A0E33', 'overlay-scrim-opacity': 0.5, 'hover-opacity': 0.04, 'focus-opacity': 0.1, - 'selected-opacity': 0.12, - 'activated-opacity': 0.1, + 'selected-opacity': 0.08, + 'activated-opacity': 0.16, 'pressed-opacity': 0.14, 'dragged-opacity': 0.1, + 'disabled-opacity': 0.4, 'border-color': '#413f3b', - 'table-header-background': '#fdfcf9', - 'custom-background': '#f9f8f9', - 'shadow-key-umbra-opacity': 'rgba(var(--v-theme-on-surface), 0.08)', - 'shadow-key-penumbra-opacity': 'rgba(var(--v-theme-on-surface), 0.12)', - 'shadow-key-ambient-opacity': 'rgba(var(--v-theme-on-surface), 0.04)' + 'border-opacity': 0.12, + 'table-header-color': '#F6F7FB', + 'high-emphasis-opacity': 0.9, + 'medium-emphasis-opacity': 0.7, + + // 👉 shadows + 'shadow-key-umbra-color': '#2E263D', + 'shadow-xs-opacity': '0.16', + 'shadow-sm-opacity': '0.18', + 'shadow-md-opacity': '0.20', + 'shadow-lg-opacity': '0.22', + 'shadow-xl-opacity': '0.24', } }, dark: { dark: true, colors: { 'primary': '#c67e48', + 'primary-darken-1': '#9a6238', + 'on-primary': '#ffffff', 'secondary': '#8a8d93', + 'secondary-darken-1': '#545659', 'on-secondary': '#fff', 'success': '#4cd964', + 'success-darken-1': '#3ba64d', + 'on-success': '#ffffff', 'info': '#2196f3', + 'info-darken-1': '#1a74bd', + 'on-info': '#ffffff', 'warning': '#ff9500', + 'warning-darken-1': '#d07a01', + 'on-warning': '#ffffff', 'error': '#ff3b30', + 'error-darken-1': '#c73027', + 'on-error': '#ffffff', 'income': '#ff3b30', 'expense': '#009688', - 'on-primary': '#ffffff', - 'on-success': '#ffffff', - 'on-warning': '#ffffff', 'background': '#000000', 'on-background': '#fcf0e3', 'surface': '#1c1c1d', @@ -351,24 +378,34 @@ const vuetify = createVuetify({ 'grey-900': '#eaeaea', 'perfect-scrollbar-thumb': '#4a5072', 'skin-bordered-background': '#312d4b', - 'skin-bordered-surface': '#312d4b' + 'skin-bordered-surface': '#312d4b', + 'expansion-panel-text-custom-bg': '#373350' }, variables: { 'code-color': '#ff8000', 'overlay-scrim-background': '#1c1c1d', - 'overlay-scrim-opacity': 0.6, + 'tooltip-background': '#F7F4FF', + 'overlay-scrim-opacity': 0.5, 'hover-opacity': 0.04, 'focus-opacity': 0.1, - 'selected-opacity': 0.12, - 'activated-opacity': 0.1, + 'selected-opacity': 0.08, + 'activated-opacity': 0.16, 'pressed-opacity': 0.14, + 'disabled-opacity': 0.4, 'dragged-opacity': 0.1, 'border-color': '#edece9', - 'table-header-background': '#312f2b', - 'custom-background': '#373452', - 'shadow-key-umbra-opacity': 'rgba(20, 18, 33, 0.08)', - 'shadow-key-penumbra-opacity': 'rgba(20, 18, 33, 0.12)', - 'shadow-key-ambient-opacity': 'rgba(20, 18, 33, 0.04)' + 'border-opacity': 0.12, + 'table-header-color': '#3D3759', + 'high-emphasis-opacity': 0.9, + 'medium-emphasis-opacity': 0.7, + + // 👉 Shadows + 'shadow-key-umbra-color': '#131120', + 'shadow-xs-opacity': '0.20', + 'shadow-sm-opacity': '0.22', + 'shadow-md-opacity': '0.24', + 'shadow-lg-opacity': '0.26', + 'shadow-xl-opacity': '0.28', } } } diff --git a/src/styles/desktop/template/base/_components.scss b/src/styles/desktop/template/base/_components.scss index 0dd900c9..afaddd98 100644 --- a/src/styles/desktop/template/base/_components.scss +++ b/src/styles/desktop/template/base/_components.scss @@ -2,9 +2,10 @@ /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/ @use "./mixins"; -@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation; @use "@/styles/desktop/template/layout/placeholders"; +@use "@/styles/desktop/template/layout/mixins" as layoutMixins; @use "@/styles/desktop/configured-variables/template" as variables; +@use "@/styles/desktop/template/vuetify/variables" as vuetify; // 👉 Avatar group .v-avatar-group { @@ -68,6 +69,17 @@ } } +// 👉 Datatable +.v-data-table-footer__pagination { + @include layoutMixins.rtl { + .v-btn { + .v-icon { + transform: rotate(180deg); + } + } + } +} + // Dialog responsive width .v-dialog { // dialog custom close btn @@ -75,8 +87,8 @@ position: absolute; z-index: 1; color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important; - inset-block-start: 0.9375rem; - inset-inline-end: 0.9375rem; + inset-block-start: 0.5rem; + inset-inline-end: 0.5rem; .v-btn__overlay { display: none; @@ -119,8 +131,23 @@ } } -// v-tab with pill support +// 👉 Expansion panel +.v-expansion-panels.customized-panels { + border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)); + border-radius: vuetify.$border-radius-root; + .v-expansion-panel-title { + background-color: rgb(var(--v-theme-expansion-panel-text-custom-bg)); + border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)); + margin-block-end: -1px; + } + + .v-expansion-panel-text__wrapper { + padding: 20px; + } +} + +// v-tab with pill support .v-tabs.v-tabs-pill { .v-tab.v-btn { border-radius: 0.25rem !important; @@ -151,10 +178,7 @@ } } -// 👉 Textarea - -.v-textarea .v-field__input { - /* stylelint-disable-next-line property-no-vendor-prefix */ - -webkit-mask-image: none !important; - mask-image: none !important; +// 👉 Switch +.v-switch .v-selection-control:not(.v-selection-control--dirty) .v-switch__thumb { + color: #fff !important; } diff --git a/src/styles/desktop/template/base/_dark.scss b/src/styles/desktop/template/base/_dark.scss index 8d920797..141ddc49 100644 --- a/src/styles/desktop/template/base/_dark.scss +++ b/src/styles/desktop/template/base/_dark.scss @@ -7,7 +7,7 @@ // * ——— Perfect Scrollbar // ———————————————————————————————————— -.v-application.v-theme--dark { +body.v-theme--dark { .ps__rail-y, .ps__rail-x { background-color: transparent !important; diff --git a/src/styles/desktop/template/base/_default-layout-w-vertical-nav.scss b/src/styles/desktop/template/base/_default-layout-w-vertical-nav.scss index ce8a7a60..fe8f74b6 100644 --- a/src/styles/desktop/template/base/_default-layout-w-vertical-nav.scss +++ b/src/styles/desktop/template/base/_default-layout-w-vertical-nav.scss @@ -4,7 +4,6 @@ @use "@/styles/desktop/configured-variables/template" as variables; @use "./placeholders" as *; @use "@/styles/desktop/template/template/placeholders" as *; -@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation; @use "./misc"; @use "./mixins"; @@ -33,7 +32,7 @@ $header: ".layout-navbar"; // 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 + dialog is opened and window don't have any scroll. This removes window-scrolled class from layout and our style broke */ html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-sticky, &.window-scrolled.layout-navbar-sticky { diff --git a/src/styles/desktop/template/base/_layouts.scss b/src/styles/desktop/template/base/_layouts.scss index cb469ef1..0a567274 100644 --- a/src/styles/desktop/template/base/_layouts.scss +++ b/src/styles/desktop/template/base/_layouts.scss @@ -50,7 +50,7 @@ // 👉 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 { + body .layout-wrapper.layout-nav-type-vertical.layout-navbar-sticky { .layout-navbar { inset-block-start: variables.$vertical-nav-floating-navbar-top; } diff --git a/src/styles/desktop/template/base/_mixins.scss b/src/styles/desktop/template/base/_mixins.scss index a7d1bfcd..60cbafee 100644 --- a/src/styles/desktop/template/base/_mixins.scss +++ b/src/styles/desktop/template/base/_mixins.scss @@ -2,12 +2,13 @@ /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/ @use "sass:map"; -@use "@/styles/desktop/template/vuetify/variables.scss" as vuetify; +@use "@/styles/desktop/template/vuetify/variables" as vuetify; @mixin elevation($z, $important: false) { box-shadow: map.get(vuetify.$shadow-key-umbra, $z), map.get(vuetify.$shadow-key-penumbra, $z), map.get(vuetify.$shadow-key-ambient, $z) if($important, !important, null); } +// #region before-pseudo // ℹī¸ This mixin is inspired from vuetify for adding hover styles via before pseudo element @mixin before-pseudo() { position: relative; @@ -25,6 +26,8 @@ } } +// #endregion before-pseudo + @mixin bordered-skin($component, $border-property: "border", $important: false) { #{$component} { // background-color: rgb(var(--v-theme-background)); @@ -33,30 +36,10 @@ } } +// #region selected-states // ℹī¸ Inspired from vuetify's active-states mixin // focus => 0.12 & selected => 0.08 @mixin selected-states($selector) { - // #{$selector} { - // opacity: calc(#{map.get(vuetify.$states, "selected")} * var(--v-theme-overlay-multiplier)); - // } - - // &:hover - // #{$selector} { - // opacity: calc(#{map.get(vuetify.$states, "selected") + map.get(vuetify.$states, "hover")} * var(--v-theme-overlay-multiplier)); - // } - - // &:focus-visible - // #{$selector} { - // opacity: calc(#{map.get(vuetify.$states, "selected") + map.get(vuetify.$states, "focus")} * var(--v-theme-overlay-multiplier)); - // } - - // @supports not selector(:focus-visible) { - // &:focus { - // #{$selector} { - // opacity: calc(#{map.get(vuetify.$states, "selected") + map.get(vuetify.$states, "focus")} * var(--v-theme-overlay-multiplier)); - // } - // } - // } #{$selector} { opacity: calc(var(--v-selected-opacity) * var(--v-theme-overlay-multiplier)); } @@ -79,3 +62,5 @@ } } } + +// #endregion selected-states diff --git a/src/styles/desktop/template/base/_utilities.scss b/src/styles/desktop/template/base/_utilities.scss index 7ca42b2d..067f004d 100644 --- a/src/styles/desktop/template/base/_utilities.scss +++ b/src/styles/desktop/template/base/_utilities.scss @@ -54,10 +54,19 @@ $card-spacer-content: 16px; color: #fff !important; } +.text-white-variant { + color: rgba(255, 255, 255, var(--v-high-emphasis-opacity)); +} + .bg-var-theme-background { background-color: rgba(var(--v-theme-on-background), var(--v-hover-opacity)) !important; } +.bg-global-primary { + background-color: rgb(var(--v-theme-primary)) !important; + color: rgb(var(--v-theme-on-primary)) !important; +} + // [/^bg-light-(\w+)$/, ([, w]) => ({ backgroundColor: `rgba(var(--v-theme-${w}), var(--v-activated-opacity))` })], @each $color-name in variables.$theme-colors-name { .bg-light-#{$color-name} { @@ -74,6 +83,14 @@ $card-spacer-content: 16px; text-overflow: ellipsis; } +.custom-badge { + .v-badge__badge { + border-radius: 6px !important; + block-size: 12px !important; + inline-size: 12px !important; + } +} + .leading-normal { line-height: normal !important; } @@ -96,7 +113,7 @@ $card-spacer-content: 16px; .v-btn--icon.v-btn--density-default { block-size: calc(var(--v-btn-height) + -10px); color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); - inline-size: calc(var(--v-btn-height) + -10px); + inline-size: calc(var(--v-btn-height) + -8px); &.v-btn--active { color: #fff; @@ -105,6 +122,17 @@ $card-spacer-content: 16px; .v-btn__overlay { opacity: 0; } + + .v-ripple__container { + display: none; + } + + .v-btn__content { + .v-icon { + block-size: 8px !important; + inline-size: 8px !important; + } + } } } @@ -139,4 +167,11 @@ $card-spacer-content: 16px; font-size: 14px; line-height: 1.25rem; } + + .timeline-chip{ + border-radius: 6px; + background: rgba(var(--v-theme-on-surface), var(--v-hover-opacity)); + padding-block: 5px; + padding-inline: 10px + } } diff --git a/src/styles/desktop/template/base/_variables.scss b/src/styles/desktop/template/base/_variables.scss index 9a7ca52f..3aa17f13 100644 --- a/src/styles/desktop/template/base/_variables.scss +++ b/src/styles/desktop/template/base/_variables.scss @@ -5,8 +5,8 @@ @forward "@/styles/desktop/template/layout/variables" with ( // Adjust z-index so vertical nav & overlay stays on top of v-layout in v-main. E.g. Email app - $layout-vertical-nav-z-index: 1004, - $layout-overlay-z-index: 1003, + $layout-vertical-nav-z-index: 1003, + $layout-overlay-z-index: 1002, ); @use "@/styles/desktop/template/layout/variables" as *; @@ -90,10 +90,11 @@ $horizontal-nav-top-level-items-gap: 4px !default; $horizontal-nav-items-icon-size: 1.5rem !default; $horizontal-nav-third-level-icon-size: 0.9rem !default; $horizontal-nav-items-icon-margin-inline-end: 0.625rem !default; +$horizontal-nav-group-arrow-icon-size: 1.375rem !default; // ℹī¸ We used SCSS variable because we want to allow users to update max height of popper content // 120px is combined height of navbar & horizontal nav -$horizontal-nav-popper-content-max-height: calc((var(--vh, 1vh) * 100) - 120px - 4rem) !default; +$horizontal-nav-popper-content-max-height: calc(100dvh - 120px - 4rem) !default; // ℹī¸ This variable is used for horizontal nav popper content's `margin-top` and "The bridge"'s height. We need to sync both values. $horizontal-nav-popper-content-top: calc($horizontal-nav-padding + 0.375rem) !default; diff --git a/src/styles/desktop/template/base/_vertical-nav.scss b/src/styles/desktop/template/base/_vertical-nav.scss index ea21b206..525a1fe2 100644 --- a/src/styles/desktop/template/base/_vertical-nav.scss +++ b/src/styles/desktop/template/base/_vertical-nav.scss @@ -146,7 +146,10 @@ @include mixins.before-pseudo; // Adds vuetify states - @include vuetifyStates.states($active: false); + + &:not(.router-link-active, .router-link-exact-active){ + @include vuetifyStates.states($active: false); + } } } @@ -188,7 +191,9 @@ > :first-child { // Adds before psudo element to style hover state @include mixins.before-pseudo; + } + &:not(.active,.open) > :first-child { // Adds vuetify states @include vuetifyStates.states($active: false); } diff --git a/src/styles/desktop/template/base/libs/_perfect-scrollbar.scss b/src/styles/desktop/template/base/libs/_perfect-scrollbar.scss index 9f0feee9..b091e054 100644 --- a/src/styles/desktop/template/base/libs/_perfect-scrollbar.scss +++ b/src/styles/desktop/template/base/libs/_perfect-scrollbar.scss @@ -6,7 +6,7 @@ $ps-hover-size: 0.375rem; $ps-track-size: 0.5rem; .ps__thumb-y { - inline-size: $ps-size; + inline-size: $ps-size !important; inset-inline-end: 0.0625rem; } @@ -29,7 +29,7 @@ $ps-track-size: 0.5rem; .ps__rail-y.ps--clicking .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y:hover > .ps__thumb-y { - inline-size: $ps-hover-size; + inline-size: $ps-hover-size !important; } .ps__thumb-x, diff --git a/src/styles/desktop/template/base/libs/vuetify/_overrides.scss b/src/styles/desktop/template/base/libs/vuetify/_overrides.scss index 2f6e92e9..50062e9c 100644 --- a/src/styles/desktop/template/base/libs/vuetify/_overrides.scss +++ b/src/styles/desktop/template/base/libs/vuetify/_overrides.scss @@ -8,7 +8,7 @@ // ℹī¸ We need accurate vh in mobile devices as well .v-application__wrap { /* stylelint-disable-next-line liberty/use-logical-spec */ - min-height: calc(var(--vh, 1vh) * 100); + min-height: 100dvh; } // 👉 Typography @@ -30,7 +30,7 @@ h6, color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); } -.v-application, +body, .text-body-1, .text-body-2, .text-subtitle-1, @@ -193,7 +193,6 @@ h6, color: rgb(var(--v-border-color)); } -// 👉 DataTable // 👉 DataTable .v-data-table { /* stylelint-disable-next-line no-descending-specificity */ @@ -238,7 +237,7 @@ h6, // 👉 VMessages .v-messages { color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); - opacity: 1; + opacity: 1 !important; } // 👉 Alert close btn diff --git a/src/styles/desktop/template/base/libs/vuetify/_variables.scss b/src/styles/desktop/template/base/libs/vuetify/_variables.scss index 6bc0aa8d..5bdbed12 100644 --- a/src/styles/desktop/template/base/libs/vuetify/_variables.scss +++ b/src/styles/desktop/template/base/libs/vuetify/_variables.scss @@ -1,6 +1,8 @@ /** Materio Template base classes **/ /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/ +@use "sass:map"; + // 👉 Shadow opacities $shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity); $shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity); @@ -47,7 +49,16 @@ $card-transition-property-custom: box-shadow, opacity; // 👉 VTimeline $timeline-dot-size: 34px !default, + // 👉 table + $table-transition-property: height !default, + // 👉 VOverlay $overlay-opacity: 1 !default, + + // 👉 VContainer + $container-max-widths: ( + "xl": 1440px, + "xxl": 1440px + ) !default, ) ; diff --git a/src/styles/desktop/template/base/placeholders/_nav.scss b/src/styles/desktop/template/base/placeholders/_nav.scss index 974991d4..7d8af444 100644 --- a/src/styles/desktop/template/base/placeholders/_nav.scss +++ b/src/styles/desktop/template/base/placeholders/_nav.scss @@ -1,7 +1,6 @@ /** 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 diff --git a/src/styles/desktop/template/layout/_variables.scss b/src/styles/desktop/template/layout/_variables.scss index 04b33653..b6a8ed89 100644 --- a/src/styles/desktop/template/layout/_variables.scss +++ b/src/styles/desktop/template/layout/_variables.scss @@ -7,6 +7,7 @@ $layout-vertical-nav-z-index: 12 !default; $layout-vertical-nav-width: 260px !default; $layout-vertical-nav-collapsed-width: 80px !default; +$selector-vertical-nav-mini: '.layout-vertical-nav-collapsed .layout-vertical-nav:not(:hover)'; // 👉 Horizontal nav $layout-horizontal-nav-z-index: 11 !default; diff --git a/src/styles/desktop/template/template/_components.scss b/src/styles/desktop/template/template/_components.scss index 84a09513..6d357a69 100644 --- a/src/styles/desktop/template/template/_components.scss +++ b/src/styles/desktop/template/template/_components.scss @@ -1,201 +1,1166 @@ /** Materio Template styles **/ /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/ -@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation; +/* stylelint-disable no-descending-specificity */ @use "@/styles/desktop/configured-variables/template" as variables; -@use "./mixins"; -@use "@/styles/desktop/template/base/mixins" as mixins_base; +@use "sass:map"; +@use "@/styles/desktop/template/vuetify/variables" as vuetify; +@use "@/styles/desktop/template/base/mixins"; +@use "@/styles/desktop/template/base/utils"; -// 👉 Alert -.v-alert { - .v-alert__close { - .v-icon { - block-size: 20px !important; - font-size: 20px !important; - inline-size: 20px !important; +// increase the specificity of the selector +body { + // 👉 Avatar + .v-avatar { + font-size: .9375rem; + + .v-icon{ + block-size: 1.5rem; + font-size: 1.5rem; + inline-size: 1.5rem; + } + + &.v-avatar--variant-tonal:not([class*="text-"]) { + .v-avatar__underlay{ + --v-activated-opacity:0.08; + } } } - &:not(.v-alert--prominent) .v-alert__prepend { - .v-icon { - block-size: 1.375rem !important; - font-size: 1.375rem !important; - inline-size: 1.375rem !important; + .v-avatar-group { + > * { + &:hover { + @include mixins.elevation(6); + } } } - .v-alert-title { - line-height: 1.5rem; - margin-block-end: 0.25rem; - } -} + // 👉 Alert + .v-alert{ + .v-alert__content{ + font-size: 0.9375rem; + font-weight: 400; + line-height: 1.375rem; -// 👉 Avatar font-size -.v-avatar { - @include mixins.avatar-font-sizes($map: variables.$avatar-font-sizes); -} + .v-alert-title{ + margin-block-end: 0.25rem; + } -// 👉 Button -.v-btn { - /* stylelint-disable-next-line no-descending-specificity */ - &:not(.v-btn--icon) .v-icon { - --v-icon-size-multiplier: 0.9525 !important; - } -} + } -// 👉 Chip -.v-chip.v-chip--size-default .v-avatar { - --v-avatar-height: 24px; -} + &:not(.v-alert--prominent) .v-alert__prepend{ + border-radius: 0.375rem; + block-size: 1.875rem; + inline-size: 1.875rem; -.v-chip.v-chip--density-comfortable { - line-height: 1; -} + .v-icon{ + margin: auto; + block-size: 1.375rem !important; + font-size: 1.375rem !important; + inline-size: 1.375rem !important; + } + } -// 👉 Expansion Panel -.v-expansion-panel { - .v-expansion-panel-text { - font-size: 1rem; - } -} + &:not(.v-alert--prominent) { + &.v-alert--variant-flat, + &.v-alert--variant-elevated { + .v-alert__prepend { + background-color: #fff; -// 👉 Tooltip -.v-tooltip > .v-overlay__content { - font-weight: 500; - line-height: 0.875rem; -} + @include mixins.elevation(2); + } + } -// 👉 List + &.v-alert--variant-tonal{ + .v-alert__prepend{ + z-index: 1; + } + } + } -// 👉 Tab with pill support -.v-tabs.v-tabs-pill { - .v-tab.v-btn { - border-radius: 6px !important; - } -} + .v-alert__close { + .v-btn--icon{ + --v-btn-height: 34px; -// 👉 Timeline added box shadow -.v-timeline-item { - .v-timeline-divider__dot { - .v-timeline-divider__inner-dot { - box-shadow: 0 0 0 0.1875rem rgb(var(--v-theme-on-surface-variant)); + .v-btn__content{ + padding:0.375rem; - @each $color-name in variables.$theme-colors-name { - - &.bg-#{$color-name} { - box-shadow: 0 0 0 0.1875rem rgba(var(--v-theme-#{$color-name}), 0.12); + .v-icon{ + block-size: 1.25rem; + font-size: 1.25rem; + inline-size: 1.25rem; + } } } } } -} -// 👉 Timeline Outlined style -.v-timeline-variant-outlined.v-timeline { - .v-timeline-divider__dot { - .v-timeline-divider__inner-dot { - box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-on-surface-variant)); + @each $color-name in variables.$theme-colors-name { + .v-alert { + &:not(.v-alert--prominent) { + &.bg-#{$color-name}, + &.text-#{$color-name} { + .v-alert__prepend .v-icon { + color: rgb(var(--v-theme-#{$color-name})) !important; + } + } - @each $color-name in variables.$theme-colors-name { - background-color: rgb(var(--v-theme-surface)) !important; + &.v-alert--variant-tonal{ + &.text-#{$color-name}, + &.bg-#{$color-name}{ + .v-alert__underlay{ + background: rgb(var(--v-theme-#{$color-name})) !important; + } - &.bg-#{$color-name} { - box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-#{$color-name})); + .v-alert__prepend{ + background-color: rgb(var(--v-theme-#{$color-name})); + + .v-icon{ + color:#fff !important; + } + } + } + } + + &.v-alert--variant-outlined{ + &.text-#{$color-name}, + &.bg-#{$color-name}{ + .v-alert__prepend{ + background-color: rgba(var(--v-theme-#{$color-name}), 0.16); + } + } } } } } -} -// 👉 Expansion panels -.v-expansion-panel-title, -.v-expansion-panel-title--active, -.v-expansion-panel-title:hover, -.v-expansion-panel-title:focus, -.v-expansion-panel-title:focus-visible, -.v-expansion-panel-title--active:focus, -.v-expansion-panel-title--active:hover { - .v-expansion-panel-title__overlay { - opacity: 0 !important; - } -} - -// 👉 Set Elevation when panel open - -.v-expansion-panels:not(.v-expansion-panels--variant-accordion) { - .v-expansion-panel.v-expansion-panel--active { - .v-expansion-panel__shadow { - @include mixins_elevation.elevation(3); - } - } -} - -// 👉 Slider -.v-slider-thumb { - .v-slider-thumb__label { - background: rgb(117, 117, 117); - color: rgb(var(--v-theme-on-primary)); - - &::before { - color: rgb(117, 117, 117); - } - } -} - -// 👉 Switch -.v-switch { - .v-selection-control:not(.v-selection-control--dirty) .v-switch__thumb { - color: #fff; - } -} - -// 👉 Table -.v-table--density-default > .v-table__wrapper > table > tbody > tr > td, -.v-table--density-default > .v-table__wrapper > table > thead > tr > td, -.v-table--density-default > .v-table__wrapper > table > tfoot > tr > td { - block-size: 50px !important; -} - -.v-table { - --v-table-header-height: 54px !important; - - th { - color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important; - font-size: 0.75rem; - - .v-data-table-header__content { - display: flex; - justify-content: space-between; - } - } - - .v-selection-control { - color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important; - font-size: 1rem; - } -} - -.v-data-table { - th { - background: rgb(var(--v-table-header-background)) !important; - } - - .v-data-table-footer { - margin-block-start: 1rem; - } -} - -// 👉 Pagination -.v-pagination { + // 👉 Button .v-btn { - border-radius: 4px; - color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); - font-size: 14px; - font-weight: 400; + &:not(.v-btn--block) { + min-inline-size: auto; + } + + &--variant-elevated, + &--variant-flat { + &.v-btn--disabled { + .v-btn__overlay { + opacity: 0.45; + } + } + } + + // Default (elevated) button + /* stylelint-disable-next-line no-duplicate-selectors */ + &--variant-elevated, + &--variant-flat { + // We want darker background on hover instead of light + + &:hover{ + .v-btn__overlay{ + opacity: 0; + } + } + + &:not(.v-btn--loading, .v-btn--disabled) { + @each $color-name in variables.$theme-colors-name { + &.bg-#{$color-name}{ + &:hover, &:active, &:focus { + background-color: rgb(var(--v-theme-#{$color-name}-darken-1)) !important; + } + } + } + } + + } + + &--variant-elevated{ + &:active{ + box-shadow: none; + } + } + + // Outlined variant + &--variant-outlined, + &--variant-text { + .v-btn__overlay { + --v-hover-opacity: 0.08; + } + + &:active{ + .v-btn__overlay{ + opacity: var(--v-hover-opacity); + } + } + + &:focus{ + .v-btn__overlay{ + opacity: var(--v-hover-opacity); + } + } + } + + // Tonal variant + &--variant-tonal { + &:hover{ + .v-btn__underlay{ + opacity: 0; + } + + .v-btn__overlay { + --v-hover-opacity: 0.24; + } + } + + + &:active{ + .v-btn__overlay{ + --v-hover-opacity: 0.24; + + opacity: var(--v-hover-opacity); + } + + .v-btn__underlay{ + opacity: 0; + } + } + + &:focus{ + .v-btn__overlay{ + --v-hover-opacity: 0.24; + + opacity: var(--v-hover-opacity); + } + + .v-btn__underlay{ + opacity: 0; + } + } + } + + + &--icon.v-btn--density-default { + block-size: var(--v-btn-height); + inline-size: var(--v-btn-height); + padding-inline: 6px; + + &.v-btn--size-default { + .v-icon{ + --v-icon-size-multiplier: 1 !important; + } + } + + &.v-btn--size-small { + .v-icon{ + block-size: 20px; + font-size: 20px; + inline-size: 20px; + } + } + + &.v-btn--size-large { + .v-icon{ + block-size: 28px; + font-size: 28px; + inline-size: 28px; + } + } + } + + &:not(.v-btn--icon) .v-icon { + --v-icon-size-multiplier: 0.7115; + + inline-size: auto; + } + + &--variant-text, + &--variant-plain { + &:not(.v-btn--icon){ + padding-inline: 14px; + } + } + + // Button Size + &--size-x-small{ + --v-btn-height: 28px; + --v-btn-size: 11px; + + &:not(.v-btn--icon){ + border-radius: 0.125rem; + } + + line-height: 14px; + padding-block: 0; + padding-inline: 10px; + } + + &--size-small { + --v-btn-height: 34px; + --v-btn-size: 13px; + + &:not(.v-btn--icon){ + border-radius: 0.25rem; + } + + line-height: 18px; + padding-block: 0; + padding-inline: 14px; + + .v-icon{ + --v-icon-size-multiplier: 0.718; + } + } + + &--size-large { + --v-btn-height: 42px; + --v-btn-size: 17px; + + &:not(.v-btn--icon){ + border-radius: 0.5rem; + } + + line-height: 26px; + padding-block: 0; + padding-inline: 22px; + } + + &--size-x-large{ + --v-btn-height: 48px; + --v-btn-size: 19px; + + &:not(.v-btn--icon){ + border-radius: 0.625rem; + } + + line-height: 30px; + padding-block: 0; + padding-inline: 26px; + } + + // Toggle Button + &-toggle{ + .v-btn { + border-radius: 0.375rem; + block-size: 52px !important; + border-inline-end: none; + inline-size: 52px !important; + + + &.v-btn--density-comfortable{ + block-size: 44px !important; + inline-size: 44px !important; + } + + &.v-btn--density-compact{ + block-size: 36px !important; + inline-size: 36px !important; + } + + .v-icon { + color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); + font-size: 24px; + } + + &--active { + .v-icon { + color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); + } + } + } + + &.v-btn-group{ + align-items: center; + padding: 7px; + border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)); + block-size: 66px; + + .v-btn.v-btn--active{ + .v-btn__overlay{ + --v-activated-opacity: 0.08; + } + } + + &.v-btn-group--density-compact{ + block-size: 50px; + } + + &.v-btn-group--density-comfortable{ + block-size: 58px; + } + + } + + } + } + + // 👉 Btn group + .v-btn-group { + border: none; + + &.v-btn-group--divided .v-btn:not(:last-child){ + border-inline-end-color: unset; + } + } + + // 👉 VBadge + .v-badge { + &.v-badge--inline:not(.v-badge--dot) { + .v-badge__wrapper{ + .v-badge__badge{ + padding-block: 4px; + padding-inline: 8px; + } + } + } + + &.v-badge--tonal{ + @each $color-name in variables.$theme-colors-name{ + .v-badge__wrapper{ + .v-badge__badge.bg-#{$color-name}{ + background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important; + color: rgb(var(--v-theme-#{$color-name})) !important; + } + } + } + } + + &.v-badge--bordered.v-badge--dot .v-badge__badge { + border-radius: 10px; + block-size: 12px; + inline-size: 12px; + + &::after { + border-width: 2px; + } + } + } + + // 👉 Chip + .v-chip{ + line-height: 1.25rem !important; + + &:not(.v-chip--variant-elevated){ + color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); + } + + .v-chip__close{ + margin-inline: 4px -8px !important; + + .v-icon{ + opacity: 0.7; + } + } + + &:not([class*="text-"]){ + --v-activated-opacity: 0.08; + } + + + &.v-chip--size-small{ + --v-chip-height: 24px !important; + + font-size: 13px !important; + padding-block: 0 !important; + padding-inline: 12px !important; + + .v-chip__prepend{ + .v-icon--start{ + font-size: 1rem; + margin-inline: -8px 4px; + } + + .v-avatar{ + --v-avatar-height: 16px; + } + + .v-avatar--start{ + margin-inline: -8px 4px; + } + } + + .v-chip__append{ + .v-icon--end{ + font-size: 1rem; + margin-inline: 4px -8px; + } + + .v-avatar{ + --v-avatar-height: 16px; + } + + .v-avatar--end{ + margin-inline: 4px -8px; + } + } + + .v-chip__close{ + font-size: 16px; + max-block-size: 16px; + max-inline-size: 16px; + } + } + + &.v-chip--size-default{ + padding-block: 0 !important; + padding-inline: 16px !important; + + .v-chip__prepend{ + .v-icon--start{ + font-size: 1.25rem; + margin-inline: -8px 4px; + } + + .v-avatar{ + --v-avatar-height: 20px; + } + + .v-avatar--start{ + margin-inline: -8px 4px; + } + } + + .v-chip__append{ + .v-icon--end{ + font-size: 1.25rem; + margin-inline: 4px -8px; + } + + .v-avatar{ + --v-avatar-height: 20px; + } + + .v-avatar--end{ + margin-inline: 4px -8px; + } + } + } + } + + // 👉 checkbox box shadow + .v-checkbox-btn { + &.v-selection-control--dirty { + .v-selection-control__input { + .v-icon.custom-checkbox-checked, + .v-icon.custom-checkbox-indeterminate { + // ℹī¸ Using filter: drop-shadow() instead of box-shadow because box-shadow creates white background for SVG + filter: drop-shadow(rgba(var(--v-shadow-key-umbra-color), 16%) 0 2px 4px); + } + } + } + + &.v-selection-control{ + .v-label{ + color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) + } + + .v-selection-control__input{ + svg{ + font-size: 1.5rem; + } + } + } + + &:not(.v-selection-control--dirty) { + .v-selection-control__input { + > .v-icon { + color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); + opacity: 1; + } + + > .custom-checkbox-indeterminate { + color: rgb(var(--v-theme-primary)); + } + } + } + } + + // 👉 Radio + .v-radio, + .v-radio-btn { + &.v-selection-control--dirty { + .v-selection-control__input { + .custom-radio-checked { + filter: drop-shadow(rgba(var(--v-shadow-key-umbra-color), 16%) 0 2px 4px); + } + } + } + + &.v-selection-control{ + .v-selection-control__input{ + svg{ + font-size: 1.5rem; + } + } + + .v-label{ + color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) + } + } + + &:not(.v-selection-control--dirty) { + .v-selection-control__input > .v-icon { + color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); + opacity: 1; + } + } + } + + .v-radio-group.v-input > .v-input__control > .v-label { + font-size: 0.9375rem; + line-height: 22px; + margin-inline-start: 0; + } + + // 👉 Dialog + .v-dialog{ + font-size: .9375rem; + line-height: 1.375rem; + + .v-dialog-close-btn { + color: rgb(var(--v-theme-secondary)) !important; + } + } + + // 👉 Expansion Panel + .v-expansion-panels { + .v-expansion-panel{ + .v-expansion-panel-title { + font-weight: 500; + + &--active{ + .v-expansion-panel-title__overlay, + &:hover .v-expansion-panel-title__overlay + { + opacity: 0 !important; + } + } + + .v-expansion-panel-title__icon { + .v-icon{ + block-size: 1.25rem; + font-size: 1.25rem; + inline-size: 1.25rem; + } + } + + &:hover{ + .v-expansion-panel-title__overlay{ + opacity: 0 !important; + } + } + } + + .v-expansion-panel-text{ + color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); + font-size:15px; + line-height: 1.375rem; + } + } + + &:not(.v-expansion-panels--variant-accordion) { + .v-expansion-panel { + &.v-expansion-panel--active { + .v-expansion-panel__shadow { + @include mixins.elevation(6); + } + } + } + } + + } + + // 👉 VField + // Override Vuetify's default outline color for text fields to match the theme + // ℹī¸ We cannot override directly border color because it does not work with dirty or focus state + .v-field__outline { + color: rgba(var(--v-theme-on-surface)); + + &:not([class*="text-"]) .v-label { + color:rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); + } + } + + // override input height on comfortable and compact density + .v-text-field, + .v-autocomplete, + .v-combobox, + .v-file-input, + .v-select { + &.v-input.v-input--density-default:not(.v-textarea) .v-field__input { + min-block-size: 56px; + } + + &.v-input.v-input--density-comfortable:not(.v-textarea) .v-field__input { + min-block-size: 48px; + } + + &.v-input.v-input--density-compact:not(.v-textarea) .v-field__input { + min-block-size: 40px; + } + } + + .v-field.v-field--focused .v-field__outline, + .v-input.v-input--error .v-field__outline{ + --v-field-border-opacity: 1 !important; + } + + // hover state outline color + @media (hover: hover) { + .v-field:not(.v-field--focused):hover .v-field__outline { + --v-field-border-opacity: 0.6 !important; + } + } + + .v-field__prepend-inner, + .v-field__append-inner, + .v-field__clearable, + .v-input__prepend, + .v-input__append { + > .v-icon { + font-size: 20px; + opacity: var(--v-high-emphasis-opacity) !important; + } + } + + // 👉 VMenu + .v-menu { + .v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line { + padding-inline: 16px; + } + } + + // 👉 VList + .v-list { + // .v-icon { + // font-size: 1.375rem; + // } + + .v-list-item{ + &.v-list-item--active:not(.v-list-group__header){ + .v-list-item__content, + .v-list-item__prepend { + *{ + color: rgb(var(--v-theme-primary)); + } + } + + .v-list-item__overlay{ + background: rgb(var(--v-theme-primary)); + } + } + } + } + + // 👉 Switch + + .v-switch{ + .v-label{ + color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); + line-height: 22px; + } + } + + .v-switch.v-switch--inset { + .v-switch__track, + .v-selection-control__wrapper { + block-size: 1.125rem; + inline-size: 1.875rem; + } + + .v-ripple__container { + opacity: 0; + } + + .v-switch__track { + background-color: rgba(var(--v-theme-on-surface), var(--v-focus-opacity)); + box-shadow: 0 0 4px 0 rgba(0, 0, 0, 16%) inset; + opacity: 1; + } + + .v-selection-control__input { + transform: translateX(-5px); + + --v-selection-control-size: 1.125rem; + + .v-switch__thumb { + background-color: #fff; + block-size: 0.875rem; + box-shadow: none; + filter: drop-shadow(0 2px 4px rgba(var(--v-shadow-key-umbra-color), 16%)); + inline-size: 0.875rem; + transform: scale(1); + } + } + + .v-selection-control--dirty { + @each $color-name in variables.$theme-colors-name { + .text-#{$color-name} { + .v-switch__track { + border-color: rgb(var(--v-theme-#{$color-name})); + background-color: rgb(var(--v-theme-#{$color-name})); + } + } + } + + .v-selection-control__input { + transform: translateX(5px); + + + } + } + } + + // 👉 Tooltip + .v-tooltip.v-overlay{ + .v-overlay__content{ + font-weight: 500 !important; + } + } + + // 👉 VPagination + + .v-pagination{ + .v-pagination__list{ + .v-pagination__next, .v-pagination__last, .v-pagination__first,.v-pagination__prev{ + .v-btn{ + &.v-btn--icon{ + &.v-btn--size-default{ + .v-icon{ + block-size: 1.375rem; + font-size: 1.375rem; + inline-size: 1.375rem; + } + } + + &.v-btn--size-small{ + .v-icon{ + block-size: 1.25rem; + font-size: 1.25rem; + inline-size: 1.25rem; + } + } + + &.v-btn--size-large{ + .v-icon{ + block-size: 1.5rem; + font-size: 1.5rem; + inline-size: 1.5rem; + } + } + } + } + } + + .v-pagination__item, .v-pagination__next, .v-pagination__last, .v-pagination__first,.v-pagination__prev { + .v-btn{ + color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); + font-weight: 400; + + &--variant-tonal{ + --v-activated-opacity: 0.08; + + &:hover{ + .v-btn__underlay{ + opacity: 0; + } + + .v-btn__overlay{ + --v-hover-opacity: 0.16; + } + } + } + + @each $color-name in variables.$theme-colors-name { + &--variant-tonal.text-#{$color-name}{ + .v-btn__underlay{ + background: rgb(var(--v-theme-on-surface)); + } + + .v-btn__content{ + color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); + } + + &:hover{ + .v-btn__content{ + color: rgb(var(--v-theme-#{$color-name})); + } + } + } + } + + &--variant-outlined{ + &:hover{ + .v-btn__overlay{ + --v-hover-opacity: 0.04; + } + } + } + } + } + + .v-pagination__item--is-active{ + .v-btn.v-btn--variant-tonal{ + .v-btn__overlay{ + --v-hover-opacity: 0.16; + + background: rgb(var(--v-theme-primary)); + opacity: var(--v-hover-opacity); + } + + .v-btn__content{ + color: rgb(var(--v-theme-primary)); + } + + .v-btn__underlay{ + opacity: 0; + } + + &:hover{ + .v-btn__overlay{ + --v-hover-opacity:0.24; + } + } + } + + @each $color-name in variables.$theme-colors-name { + .v-btn.v-btn--variant-tonal.text-#{$color-name}{ + @include mixins.elevation(2); + + .v-btn__overlay{ + background: rgb(var(--v-theme-#{$color-name})); + opacity: 1; + } + + .v-btn__content{ + z-index: 1; + color: #fff; + } + } + } + + .v-btn.v-btn--variant-outlined{ + .v-btn__content{ + color: rgb(var(--v-theme-primary)); + } + + .v-btn__overlay{ + --v-hover-opacity:0.16; + + background: rgb(var(--v-theme-primary)); + opacity: var(--v-hover-opacity); + } + + + } + } + } + } + + + // 👉 VTabs + + .v-tabs{ + .v-tab.v-btn{ + color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); + padding-block: 0; + padding-inline: 1.375rem; + + .v-icon{ + block-size: 1.125rem; + font-size: 1.125rem; + inline-size: 1.125rem; + } + } + + &:not(.v-tabs-pill){ + &.v-tabs--vertical{ + border-inline-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)); + + .v-tab__slider { + inset-inline-end: 0; + inset-inline-start: unset; + } + } + + &.v-tabs--horizontal{ + border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)); + + .v-tab__slider { + inset-block-end: 1px; + inset-block-start: unset; + } + } + + .v-tab{ + &.v-tab--selected{ + &.v-btn.v-btn--variant-text{ + &:hover, &:active, &:focus{ + .v-btn__overlay{ + --v-hover-opacity: 0; + } + } + } + } + + &:not(.v-tab--selected){ + &.v-btn.v-btn--variant-text{ + &:hover, &:active, &:focus{ + color: rgb(var(--v-theme-primary)); + + .v-btn__overlay{ + --v-hover-opacity: 0; + } + + .v-btn__content{ + .v-tab__slider{ + opacity: var(--v-activated-opacity); + } + } + } + } + } + } + } + + &.v-tabs-pill{ + .v-slide-group__content{ + gap: 0.25rem; + } + + .v-tab{ + &.v-btn{ + border-radius: 0.375rem !important; + + } + + &:not(.v-tab--selected){ + &.v-btn.v-btn--variant-text{ + &:hover{ + color: rgb(var(--v-theme-primary)); + } + } + } + + &.v-tab--selected{ + @include mixins.elevation(2); + } + } + } + } + + // 👉 Timeline + + .v-timeline { + &:not(.v-timeline--variant-outlined) .v-timeline-divider__dot { + background: none !important; + + .v-timeline-divider__inner-dot { + box-shadow: 0 0 0 0.1875rem rgb(var(--v-theme-on-surface-variant)); + + @each $color-name in variables.$theme-colors-name { + + &.bg-#{$color-name} { + box-shadow: 0 0 0 0.1875rem rgba(var(--v-theme-#{$color-name}), 0.12); + } + } + } + } + + .v-timeline-item{ + .timeline-chip{ + border-radius: 6px; + background: rgba(var(--v-theme-on-surface), var(--v-hover-opacity)); + padding-block: 5px; + padding-inline: 10px + } + } + + &.v-timeline--variant-outlined{ + .v-timeline-item{ + .v-timeline-divider{ + .v-timeline-divider__dot{ + background: none !important; + } + } + + .v-timeline-divider__after{ + border: 1px dashed rgba(var(--v-border-color), var(--v-border-opacity)); + background: none; + } + + .v-timeline-divider__before{ + background: none; + } + } + } + } + + // 👉 Datatable + + .v-data-table{ + table{ + tbody{ + tr{ + &.v-data-table-group-header-row{ + td { + background:none; + } + } + } + + } + } + } + + // 👉 Table + .v-table { + .v-table__wrapper{ + border-radius: 0 ; + + table{ + thead{ + tr{ + th{ + background: rgb(var(--v-table-header-color)) !important; + border-block-end: none !important; + color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important; + font-size: 0.8125rem; + letter-spacing: 0.2px; + line-height: 24px; + text-transform: uppercase; + } + } + + } + } + } + } + + // 👉 Slider + + .v-slider{ + .v-slider-track__background--opacity { + opacity: 0.16; + } + } + + .v-slider-thumb { + .v-slider-thumb__surface::after { + border-radius: 50%; + background-color: #fff; + block-size: calc(var(--v-slider-thumb-size) - 10px); + inline-size: calc(var(--v-slider-thumb-size) - 10px); + } + + .v-slider-thumb__label { + background-color: rgb(var(--v-tooltip-background)); + color: rgb(var(--v-theme-surface)); + font-weight: 500; + letter-spacing: 0.15px; + line-height: 1.25rem; + + &::before{ + content: none; + } + } } } - -// 👉 SnackBar -.v-snackbar--variant-elevated { - @include mixins_base.elevation(6); -} diff --git a/src/styles/desktop/template/template/_default-layout-w-vertical-nav.scss b/src/styles/desktop/template/template/_default-layout-w-vertical-nav.scss new file mode 100644 index 00000000..62888b54 --- /dev/null +++ b/src/styles/desktop/template/template/_default-layout-w-vertical-nav.scss @@ -0,0 +1,31 @@ +/** Materio Template styles **/ +/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/ + +@use "@/styles/desktop/configured-variables/template" as variables; +@use "@/styles/desktop/template/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 { + // 👉 Layout footer + .layout-footer { + $ele-layout-footer: &; + + .footer-content-container { + // 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 { + box-shadow: 0 -4px 8px -4px rgba(var(--v-shadow-key-umbra-color), 42%); + padding-inline: 1.5rem; + } + } + } + } + } +} diff --git a/src/styles/desktop/template/template/_utilities.scss b/src/styles/desktop/template/template/_utilities.scss index da60dbe6..1f6f1697 100644 --- a/src/styles/desktop/template/template/_utilities.scss +++ b/src/styles/desktop/template/template/_utilities.scss @@ -1,11 +1,30 @@ /** Materio Template styles **/ /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/ -.bg-var-theme-background { - background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity)) !important; -} +.v-timeline{ + .v-timeline-item { + .app-timeline-title { + color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); + font-size: 15px; + font-weight: 500; + letter-spacing: 0.15px; + line-height: 1.375rem; + } -// 👉 Pagination small-select dropdown for table + .app-timeline-meta { + color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)); + font-size: 13px; + letter-spacing: 0.4px; + line-height: 1.125rem; + } + + .app-timeline-text { + color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); + font-size: .9375rem; + line-height: 1.375rem; + } + } +} .per-page-select { margin-block: auto; @@ -13,7 +32,6 @@ .v-field__input { align-items: center; padding: 2px; - font-size: 14px; } .v-field__append-inner { @@ -25,3 +43,12 @@ } } } + +.leading-normal { + font-weight: 600; + letter-spacing: .0094rem; +} + +.bg-custom-background{ + background-color: rgb(var(--v-table-header-color)) !important; +} diff --git a/src/styles/desktop/template/template/_variables.scss b/src/styles/desktop/template/template/_variables.scss index a054cb07..b0bce739 100644 --- a/src/styles/desktop/template/template/_variables.scss +++ b/src/styles/desktop/template/template/_variables.scss @@ -4,7 +4,7 @@ @use "sass:map"; @use "./utils"; -$vertical-nav-horizontal-padding-custom: 1.375rem 1rem; +$vertical-nav-horizontal-padding-custom: 1.4375rem 1rem; // ℹī¸ We created this SCSS var to extract the start padding // Docs: https://sass-lang.com/documentation/modules/string @@ -14,23 +14,46 @@ $vertical-nav-horizontal-padding-custom: 1.375rem 1rem; // string.slice(0 8px, 2, -1) => 8px => $card-actions-padding-x $vertical-nav-horizontal-padding-start: utils.get-first-value($vertical-nav-horizontal-padding-custom) !default; -$vertical-nav-items-icon-margin-inline-end: 0.625rem !default; +$vertical-nav-items-icon-margin-inline-end: 0 !default; @forward "@/styles/desktop/template/base/variables" with ( $layout-vertical-nav-collapsed-width: 68px !default, // ℹī¸ This is used to keep consistency between nav items and nav header left & right margin // This is used by nav items & nav header - $vertical-nav-horizontal-spacing: 0 0.7rem !default, + $vertical-nav-horizontal-spacing: 0 1rem !default, $vertical-nav-horizontal-padding: $vertical-nav-horizontal-padding-custom !default, // Vertical nav header padding - $vertical-nav-header-padding: 1rem 0.25rem 1rem $vertical-nav-horizontal-padding-start !default, -); + $vertical-nav-header-padding: 1.25rem 0 1.25rem $vertical-nav-horizontal-padding-start !default, -// 👉 Custom Variables -$avatar-font-sizes: ( - "x-small":12, - "small":14, - "default":18, - "large":20, - "x-large":24 -) !default; + // Vertical nav icons + $vertical-nav-items-icon-size: 1.375rem !default, + $vertical-nav-items-nested-icon-size: 0.75rem !default, + + + // Section title margin top (when its not first child) + $vertical-nav-section-title-mt: 1.25rem !default, + + $layout-vertical-nav-footer-height: 54px !default, + + // Horizontal nav icons + $horizontal-nav-items-icon-size: 1.375rem !default, + $horizontal-nav-items-icon-margin-inline-end: 0.5rem !default, + + // 👉 Horizontal nav + $horizontal-nav-padding: 0.625rem !default, + $horizontal-nav-third-level-icon-size: 0.75rem !default, + + // Gap between top level horizontal nav items + $horizontal-nav-top-level-items-gap: 8px !default, + + // ℹī¸ This variable is used for horizontal nav popper content's `margin-top` and "The bridge"'s height. We need to sync both values. + $horizontal-nav-popper-content-top: calc(0.625rem + 0.375rem - 0.25rem) !default, + + $font-sizes: ( + "sm": 0.8125rem, + "base": 0.9375rem, + ), + $font-line-height: ( + "base": 1.375rem, + ), +); diff --git a/src/styles/desktop/template/template/_vertical-nav.scss b/src/styles/desktop/template/template/_vertical-nav.scss new file mode 100644 index 00000000..c4f3874f --- /dev/null +++ b/src/styles/desktop/template/template/_vertical-nav.scss @@ -0,0 +1,54 @@ +/** Materio Template styles **/ +/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/ + +@use "@/styles/desktop/template/layout/mixins" as layoutsMixins; + +.layout-nav-type-vertical { + // 👉 Layout Vertical nav + .layout-vertical-nav { + .nav-items{ + padding-block-start: .25rem; + } + + // 👉 Vertical nav group + .nav-group { + .nav-group-arrow { + font-size: 1.375rem; + } + } + + // 👉 Nav group & Link + .nav-link, + .nav-group { + // shadow cut issue fix + margin-block-end: -0.5rem; + padding-block-end: 0.5rem; + + a { + outline: none; + } + } + + // 👉 Nav section title + .nav-section-title { + .placeholder-icon { + transform: translateX(-3px); + + @include layoutsMixins.rtl { + transform: translateX(3px); + } + } + } + + // 👉 Nav header + .nav-header { + padding-block: 1.25rem; + padding-inline: 23px 0; + } + } +} + +// 👉 Overlay +.layout-overlay{ + touch-action: none; +} diff --git a/src/styles/desktop/template/template/index.scss b/src/styles/desktop/template/template/index.scss index abf02245..5ab1d498 100644 --- a/src/styles/desktop/template/template/index.scss +++ b/src/styles/desktop/template/template/index.scss @@ -4,6 +4,10 @@ @use "sass:map"; @use "@/styles/desktop/template/base"; +// layouts +@use "./vertical-nav"; +@use "./default-layout-w-vertical-nav"; + // Components @use "./components"; diff --git a/src/styles/desktop/template/template/placeholders/_default-layout-vertical-nav.scss b/src/styles/desktop/template/template/placeholders/_default-layout-vertical-nav.scss new file mode 100644 index 00000000..29461ed4 --- /dev/null +++ b/src/styles/desktop/template/template/placeholders/_default-layout-vertical-nav.scss @@ -0,0 +1,14 @@ +/** Materio Template styles **/ +/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/ + +@use "@/styles/desktop/configured-variables/template" as variables; +@use "@/styles/desktop/template/base/mixins"; + +%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled { + box-shadow: 0 4px 8px -4px rgba(var(--v-shadow-key-umbra-color), 42%); + + // If navbar is contained => Squeeze navbar content on scroll + @if variables.$layout-vertical-nav-navbar-is-contained { + padding-inline: 1.5rem; + } +} diff --git a/src/styles/desktop/template/template/placeholders/_index.scss b/src/styles/desktop/template/template/placeholders/_index.scss index 848767e4..94b51504 100644 --- a/src/styles/desktop/template/template/placeholders/_index.scss +++ b/src/styles/desktop/template/template/placeholders/_index.scss @@ -2,4 +2,6 @@ /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/ @forward "./nav"; +@forward "./default-layout-vertical-nav"; @forward "./vertical-nav"; +@forward "misc"; diff --git a/src/styles/desktop/template/template/placeholders/_misc.scss b/src/styles/desktop/template/template/placeholders/_misc.scss new file mode 100644 index 00000000..5283be83 --- /dev/null +++ b/src/styles/desktop/template/template/placeholders/_misc.scss @@ -0,0 +1,10 @@ +/** Materio Template styles **/ +/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/ + +%blurry-bg { + /* stylelint-disable property-no-vendor-prefix */ + -webkit-backdrop-filter: blur(9px); + backdrop-filter: blur(9px); + /* stylelint-enable */ + background-color: rgb(var(--v-theme-surface), 0.85); +} diff --git a/src/styles/desktop/template/template/placeholders/_nav.scss b/src/styles/desktop/template/template/placeholders/_nav.scss index abe5b2d1..d913ab12 100644 --- a/src/styles/desktop/template/template/placeholders/_nav.scss +++ b/src/styles/desktop/template/template/placeholders/_nav.scss @@ -1,11 +1,20 @@ /** Materio Template styles **/ /** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/ +@use "@/styles/desktop/template/base/mixins"; + %nav-link-active { - background: - linear-gradient( - -72.47deg, - rgb(var(--v-theme-primary)) 22.16%, - rgba(var(--v-theme-primary), 0.7) 76.47% - ) !important; + background: linear-gradient(-72.47deg, rgb(var(--v-theme-primary)) 22.16%, + rgba(var(--v-theme-primary), 0.7) 76.47%) !important; + + i { color: rgb(var(--v-theme-on-primary)) !important; } + + @include mixins.elevation(4); +} + +// ℹī¸ This is common style that needs to be applied to both navs +%nav { + .nav-item-title { + line-height: 1.375rem; + } } diff --git a/src/styles/desktop/template/template/placeholders/_vertical-nav.scss b/src/styles/desktop/template/template/placeholders/_vertical-nav.scss index 1e900247..d9aa2b3f 100644 --- a/src/styles/desktop/template/template/placeholders/_vertical-nav.scss +++ b/src/styles/desktop/template/template/placeholders/_vertical-nav.scss @@ -3,8 +3,15 @@ @use "@/styles/desktop/configured-variables/template" as variables; +%nav-header-action { + color:rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); +} + // ℹī¸ Add divider around section title %vertical-nav-section-title { + block-size: 2rem; + font-size: 0.8125rem; + line-height: 1.125rem; /* ℹī¸ We will use this to add gap between divider and text. Moreover, we will use this to adjust the `flex-basis` property of left divider @@ -45,18 +52,13 @@ %vertical-nav-item-interactive { // Add pill shape styles - block-size: 2.625rem !important; + block-size: 2.375rem !important; border-end-end-radius: 3.125rem !important; border-end-start-radius: 0 !important; border-start-end-radius: 3.125rem !important; border-start-start-radius: 0 !important; -} -%vertical-nav-item-interactive { // ℹī¸ Wobble effect - // transition: margin-inline 0.4s ease-in-out; - // will-change: margin-inline; - transition: margin-inline 0.15s ease-in-out; will-change: margin-inline; @@ -65,3 +67,29 @@ margin-inline: 0 5px; } } + +// Vertical nav item badge styles +%vertical-nav-item-badge { + font-size: 0.75rem; + line-height: 20px; + padding-block: 1px; + padding-inline: 0.625rem; +} + +// Nav items styles (including section title) +%vertical-nav-item { + gap: .5rem; + padding-block: 0.4375rem; +} + + +// ℹī¸ 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)); + margin-inline: .375rem; +} + +%vertical-nav-items-icon-after-2nd-level { + margin-inline-start: 1rem; + visibility: visible; +} diff --git a/src/styles/desktop/template/vuetify/_overrides.scss b/src/styles/desktop/template/vuetify/_overrides.scss new file mode 100644 index 00000000..51d1ee8d --- /dev/null +++ b/src/styles/desktop/template/vuetify/_overrides.scss @@ -0,0 +1,41 @@ +/** Materio Template Vuetify variables **/ +/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/ + +@use "@/styles/desktop/template/base/utils"; +@use "@/styles/desktop/configured-variables/template" as variables; + +// 👉 Body +// set body font size 15px +body { + font-size: 15px !important; +} + +// 👉 Typography +.text-h1, +.text-h2, +.text-h3, +.text-h4, +.text-h5, +.text-h6, +.text-overline, +.v-input { + color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); +} + +.text-caption{ + color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity)); +} + +.v-card-subtitle, +.text-subtitle-1, +.text-subtitle-2 { + color: rgba(var(--v-theme-on-background), 0.55); +} + +// 👉 Input placeholder alignment +.v-input--density-compact{ + input::placeholder { + position: relative; + inset-block-start: 1px; + } +} diff --git a/src/styles/desktop/template/vuetify/_variables.scss b/src/styles/desktop/template/vuetify/_variables.scss new file mode 100644 index 00000000..52d63feb --- /dev/null +++ b/src/styles/desktop/template/vuetify/_variables.scss @@ -0,0 +1,314 @@ +/** Materio Template Vuetify variables **/ +/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/ + +$font-family-custom: "Inter", sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, + "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; +/* stylelint-disable length-zero-no-unit */ +@forward "@/styles/desktop/template/base/libs/vuetify/variables" with ( + $body-font-family: $font-family-custom !default, + $border-radius-root: 6px, + + $rounded: ( + "sm": 4px, + "shaped": 25px 0, + "lg":8px, + ) !default, + + // 👉 Typography + $typography: ( + "h1": ( + "size": 2.875rem, + "weight": 500, + "line-height": 4.25rem, + "letter-spacing": normal, + ), + "h2": ( + "size": 2.375rem, + "weight": 500, + "line-height": 3.5rem, + "letter-spacing": normal, + ), + "h3": ( + "size": 1.75rem, + "weight": 500, + "line-height": 2.625rem, + "letter-spacing": normal, + ), + "h4": ( + "size": 1.5rem, + "weight": 500, + "line-height": 2.375rem, + "letter-spacing": normal, + ), + "h5": ( + "size": 1.125rem, + "weight": 500, + "line-height": 1.75rem, + "letter-spacing": normal, + ), + "h6": ( + "size": 0.9375rem, + "line-height": 1.375rem, + "letter-spacing": normal, + ), + "subtitle-1": ( + "size": 0.9375rem, + "line-height": 1.375rem, + "letter-spacing": normal, + ), + "subtitle-2": ( + "size": 0.8125rem, + "line-height": 1.25rem, + "letter-spacing": normal, + ), + "body-1": ( + "size": 0.9375rem, + "line-height": 1.375rem, + "letter-spacing": normal, + ), + "body-2": ( + "size": 0.8125rem, + "line-height": 1.25rem, + "letter-spacing": normal, + ), + "caption": ( + "size": 0.8125rem, + "line-height": 1.125rem, + "letter-spacing": 0.025rem, + ), + "overline": ( + "weight": 400, + "line-height": 0.875rem, + "letter-spacing": 0.05rem, + ), + 'button': ( + 'size': 0.9375rem, + 'weight': 500, + 'letter-spacing': normal, + 'font-family': $font-family-custom, + 'text-transform': capitalize, + ), + )!default, + + // 👉 Shadows + $shadow-key-umbra: ( + 0: (0 0 0 0 rgba(var(--v-shadow-key-umbra-color), 1)), + 1: (0 2px 4px rgba(var(--v-shadow-key-umbra-color), 0.12)), + 2: (0 2px 4px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xs-opacity))), + 3: (0 3px 8px rgba(var(--v-shadow-key-umbra-color), 0.14)), + 4: (0 3px 6px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-sm-opacity))), + 5: (0 4px 10px rgba(var(--v-shadow-key-umbra-color), 0.15)), + 6: (0 4px 10px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-md-opacity))), + 7: (0 4px 18px rgba(var(--v-shadow-key-umbra-color), 0.1)), + 8: (0 6px 16px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-lg-opacity))), + 9: (0 5px 14px rgba(var(--v-shadow-key-umbra-color), 0.18)), + 10: (0 8px 28px 0 rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xl-opacity))), + 11: (0 5px 16px rgba(var(--v-shadow-key-umbra-color), 0.2)), + 12: (0 6px 17px rgba(var(--v-shadow-key-umbra-color), 0.22)), + 13: (0 6px 18px rgba(var(--v-shadow-key-umbra-color), 0.22)), + 14: (0 6px 19px rgba(var(--v-shadow-key-umbra-color), 0.24)), + 15: (0 7px 20px rgba(var(--v-shadow-key-umbra-color), 0.24)), + 16: (0 7px 21px rgba(var(--v-shadow-key-umbra-color), 0.26)), + 17: (0 7px 22px rgba(var(--v-shadow-key-umbra-color), 0.26)), + 18: (0 8px 23px rgba(var(--v-shadow-key-umbra-color), 0.28)), + 19: (0 8px 24px 6px rgba(var(--v-shadow-key-umbra-color), 0.28)), + 20: (0 9px 25px rgba(var(--v-shadow-key-umbra-color), 0.3)), + 21: (0 9px 26px rgba(var(--v-shadow-key-umbra-color), 0.32)), + 22: (0 9px 27px rgba(var(--v-shadow-key-umbra-color), 0.32)), + 23: (0 10px 28px rgba(var(--v-shadow-key-umbra-color), 0.34)), + 24: (0 10px 30px rgba(var(--v-shadow-key-umbra-color), 0.34)) + ) !default, + + $shadow-key-penumbra: ( + 0: (0 0 transparent), + 1: (0 0 transparent), + 2: (0 0 transparent), + 3: (0 0 transparent), + 4: (0 0 transparent), + 5: (0 0 transparent), + 6: (0 0 transparent), + 7: (0 0 transparent), + 8: (0 0 transparent), + 9: (0 0 transparent), + 10: (0 0 transparent), + 11: (0 0 transparent), + 12: (0 0 transparent), + 13: (0 0 transparent), + 14: (0 0 transparent), + 15: (0 0 transparent), + 16: (0 0 transparent), + 17: (0 0 transparent), + 18: (0 0 transparent), + 19: (0 0 transparent), + 20: (0 0 transparent), + 21: (0 0 transparent), + 22: (0 0 transparent), + 23: (0 0 transparent), + 24: (0 0 transparent), + ) !default, + + $shadow-key-ambient: ( + 0: (0 0 transparent), + 1: (0 0 transparent), + 2: (0 0 transparent), + 3: (0 0 transparent), + 4: (0 0 transparent), + 5: (0 0 transparent), + 6: (0 0 transparent), + 7: (0 0 transparent), + 8: (0 0 transparent), + 9: (0 0 transparent), + 10: (0 0 transparent), + 11: (0 0 transparent), + 12: (0 0 transparent), + 13: (0 0 transparent), + 14: (0 0 transparent), + 15: (0 0 transparent), + 16: (0 0 transparent), + 17: (0 0 transparent), + 18: (0 0 transparent), + 19: (0 0 transparent), + 20: (0 0 transparent), + 21: (0 0 transparent), + 22: (0 0 transparent), + 23: (0 0 transparent), + 24: (0 0 transparent), + ) !default, + + // 👉 Avatar + $avatar-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default, + + // 👉 Alert + $alert-title-font-size: 1.125rem !default, + $alert-text-line-height: 1.625rem !default, + + // 👉 Autocomplete + $autocomplete-content-elevation: 8 !default, + $combobox-content-elevation: 8 !default, + $select-content-elevation: 8 !default, + + // 👉 Badge + $badge-height: 1.375rem !default, + $badge-min-width: 1.375rem !default, + $badge-dot-height: 8px !default, + $badge-dot-width: 8px !default, + $badge-border-radius: 50px !default, + $badge-font-size: 0.8125rem !default, + + // 👉 Buttons + $button-height: 38px !default, + $button-padding-ratio: 2.15 !default, + $button-margin-start: 0 !default, + $button-disabled-opacity: .45 !default, + $button-elevation: ('default': 2, 'hover': 2, 'active': 0) !default, + $button-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default, + $button-line-height: 1.375rem !default, + $button-margin-end: 0.375rem !default, + $button-card-actions-padding: 0 18px !default, + + // 👉 Chip + $chip-font-size: 13px !default, + $chip-close-size: 20px !default, + $chip-font-weight: 500 !default, + + // 👉 Cards + $card-actions-padding: 0 6px 6px !default, + $card-title-font-size: 1.125rem !default, + $card-title-line-height: 1.75rem !default, + $card-text-font-size: 0.9375rem !default, + $card-text-line-height: 1.375rem !default, + $card-subtitle-font-size: 0.9375rem !default, + $card-subtitle-line-height: 1.375rem !default, + $card-subtitle-font-weight: 400 !default, + $card-subtitle-header-padding: 0 !default, + + // 👉 Dialog + $dialog-elevation: 10 !default, + $dialog-card-header-padding: 20px !default, + $dialog-card-text-padding: 0 20px 20px !default, + + // 👉 Expansion Panel + $expansion-panel-active-margin: 0.5rem !default, + $expansion-panel-text-padding: 0 20px 20px !default, + $expansion-panel-title-padding: 12px 20px !default, + $expansion-panel-title-min-height: 46px !default, + $expansion-panel-active-title-min-height: 46px !default, + + // 👉 Field + $field-outline-opacity: 0.22 !default, + $field-control-affixed-padding: 16px !default, + $field-control-affixed-inner-padding: 10px !default, + $field-font-size: 15px !default, + + // 👉 Label + $label-font-size: 0.9375rem !default, + $label-letter-spacing: normal !default, + + // 👉 List + $list-item-one-line-min-height: 38px !default, + $list-subheader-min-height: 38px !default, + $list-item-padding: 8px 20px !default, + $list-subheader-font-weight: 500 !default, + $list-item-icon-margin-start: 12px !default, + $list-item-min-height: 38px !default, + $list-item-nav-title-font-size: 0.9375rem !default, + $list-item-nav-title-font-weight: 400 !default, + $list-item-nav-subtitle-font-size: 0.8125rem !default, + $list-item-subtitle-line-height: 1.25rem !default, + + // 👉 label + $field-label-floating-scale: 0.8125 !default, + + // 👉 Snackbar + $snackbar-background: rgb(var(--v-tooltip-background)) !default, + $snackbar-color: rgb(var(--v-theme-surface)) !default, + $snackbar-content-padding: 12px 16px !default, + $snackbar-wrapper-padding: 0 !default, + $snackbar-wrapper-min-height: 44px !default, + $snackbar-elevation: 2 !default, + $snackbar-btn-padding: 0 10px !default, + $snackbar-action-margin: 16px !default, + + // 👉 Slider + $slider-thumb-hover-opacity: var(--v-activated-opacity) !default, + + // 👉 Tooltip + $tooltip-background-color: rgb(var(--v-tooltip-background)) !default, + $tooltip-text-color: rgb(var(--v-theme-surface)) !default, + $tooltip-border-radius: 0.25rem !default, + $tooltip-font-size: 0.8125rem !default, + $tooltip-padding: 4px 12px !default, + $tooltip-line-height: 1.25rem !default, + + // 👉 VPagination + $pagination-item-margin: 0.1875rem !default, + + // 👉 Tabs + $tabs-height: 38px !default, + $tab-min-width: 60px !default, + + // 👉 Timeline + $timeline-divider-line-background: rgba(var(--v-border-color), var(--v-border-opacity)) !default, + $timeline-divider-line-thickness: 1.5px !default, + $timeline-item-padding: 16px !default, + + // 👉 Slider + $slider-track-active-size-offset: 0px !default, + $slider-thumb-label-border-radius: 6px !default, + $slider-thumb-label-height: 28px !default, + $slider-thumb-label-padding: 4px 10px !default, + + // 👉 Table + $table-row-height: 50px !default, + $table-header-font-weight: 500 !default, + $table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default, + $table-font-size: 15px !default, + $table-column-padding: 0 20px !default, + + // navigation drawer + $navigation-drawer-temporary-elevation: 8 !default, + $navigation-drawer-transition-duration: 0.4s !default, + + // 👉 Messages + $messages-font-size: 13px !default, +); diff --git a/src/styles/desktop/template/vuetify/index.scss b/src/styles/desktop/template/vuetify/index.scss new file mode 100644 index 00000000..7fef5703 --- /dev/null +++ b/src/styles/desktop/template/vuetify/index.scss @@ -0,0 +1,5 @@ +/** Materio Template Vuetify variables **/ +/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/ + +@use "@/styles/desktop/template/base/libs/vuetify"; +@use "./overrides"; diff --git a/src/styles/desktop/template/vuetify/variables.scss b/src/styles/desktop/template/vuetify/variables.scss deleted file mode 100644 index b8a6ebf7..00000000 --- a/src/styles/desktop/template/vuetify/variables.scss +++ /dev/null @@ -1,243 +0,0 @@ -/** Materio Template Vuetify variables **/ -/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/ - -$shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity); -$shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity); -$shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity); -/* stylelint-disable-next-line max-line-length */ -$font-family-custom: inter, sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - -@forward "@/styles/desktop/template/base/libs/vuetify/variables" with ( - $body-font-family: $font-family-custom !default, - $border-radius-root: 6px !default, - - $shadow-key-umbra: ( - 0: (0 0 0 0 var(--v-shadow-key-umbra-opacity)), - 1: (0 2px 1px -1px var(--v-shadow-key-umbra-opacity)), - 2: (0 3px 1px -2px var(--v-shadow-key-umbra-opacity)), - - // ℹī¸ Modified - 3: (0 4px 14px -4px var(--v-shadow-key-umbra-opacity)), - - 4: (0 2px 4px -1px var(--v-shadow-key-umbra-opacity)), - 5: (0 3px 5px -1px var(--v-shadow-key-umbra-opacity)), - - // ℹī¸ Modified - 6: (0 4px 5px -2px var(--v-shadow-key-umbra-opacity)), - - 7: (0 4px 5px -2px var(--v-shadow-key-umbra-opacity)), - 8: (0 5px 5px -3px var(--v-shadow-key-umbra-opacity)), - 9: (0 5px 6px -3px var(--v-shadow-key-umbra-opacity)), - 10: (0 6px 6px -3px var(--v-shadow-key-umbra-opacity)), - 11: (0 6px 7px -4px var(--v-shadow-key-umbra-opacity)), - 12: (0 7px 8px -4px var(--v-shadow-key-umbra-opacity)), - 13: (0 7px 8px -4px var(--v-shadow-key-umbra-opacity)), - 14: (0 7px 9px -4px var(--v-shadow-key-umbra-opacity)), - 15: (0 8px 9px -5px var(--v-shadow-key-umbra-opacity)), - 16: (0 8px 10px -5px var(--v-shadow-key-umbra-opacity)), - 17: (0 8px 11px -5px var(--v-shadow-key-umbra-opacity)), - 18: (0 9px 11px -5px var(--v-shadow-key-umbra-opacity)), - 19: (0 9px 12px -6px var(--v-shadow-key-umbra-opacity)), - 20: (0 10px 13px -6px var(--v-shadow-key-umbra-opacity)), - 21: (0 10px 13px -6px var(--v-shadow-key-umbra-opacity)), - 22: (0 10px 14px -6px var(--v-shadow-key-umbra-opacity)), - 23: (0 11px 14px -7px var(--v-shadow-key-umbra-opacity)), - 24: (0 11px 15px -7px var(--v-shadow-key-umbra-opacity)) - ) !default, - - $shadow-key-penumbra: ( - 0: (0 0 0 0 $shadow-key-penumbra-opacity-custom), - 1: (0 1px 1px 0 $shadow-key-penumbra-opacity-custom), - 2: (0 2px 2px 0 $shadow-key-penumbra-opacity-custom), - - // ℹī¸ Modified - 3: (0 4px 8px -4px $shadow-key-penumbra-opacity-custom), - - 4: (0 4px 5px 0 $shadow-key-penumbra-opacity-custom), - 5: (0 5px 8px 0 $shadow-key-penumbra-opacity-custom), - - // ℹī¸ Modified - 6: (0 2px 10px 1px $shadow-key-penumbra-opacity-custom), - - 7: (0 7px 10px 1px $shadow-key-penumbra-opacity-custom), - 8: (0 8px 10px 1px $shadow-key-penumbra-opacity-custom), - 9: (0 9px 12px 1px $shadow-key-penumbra-opacity-custom), - 10: (0 10px 14px 1px $shadow-key-penumbra-opacity-custom), - 11: (0 11px 15px 1px $shadow-key-penumbra-opacity-custom), - 12: (0 12px 17px 2px $shadow-key-penumbra-opacity-custom), - 13: (0 13px 19px 2px $shadow-key-penumbra-opacity-custom), - 14: (0 14px 21px 2px $shadow-key-penumbra-opacity-custom), - 15: (0 15px 22px 2px $shadow-key-penumbra-opacity-custom), - 16: (0 16px 24px 2px $shadow-key-penumbra-opacity-custom), - 17: (0 17px 26px 2px $shadow-key-penumbra-opacity-custom), - 18: (0 18px 28px 2px $shadow-key-penumbra-opacity-custom), - 19: (0 19px 29px 2px $shadow-key-penumbra-opacity-custom), - 20: (0 20px 31px 3px $shadow-key-penumbra-opacity-custom), - 21: (0 21px 33px 3px $shadow-key-penumbra-opacity-custom), - 22: (0 22px 35px 3px $shadow-key-penumbra-opacity-custom), - 23: (0 23px 36px 3px $shadow-key-penumbra-opacity-custom), - 24: (0 24px 38px 3px $shadow-key-penumbra-opacity-custom) - ) !default, - - $shadow-key-ambient: ( - 0: (0 0 0 0 $shadow-key-ambient-opacity-custom), - 1: (0 1px 3px 0 $shadow-key-ambient-opacity-custom), - 2: (0 1px 5px 0 $shadow-key-ambient-opacity-custom), - - // ℹī¸ Modified - 3: (0 4px 8px -4px $shadow-key-ambient-opacity-custom), - - 4: (0 1px 10px 0 $shadow-key-ambient-opacity-custom), - 5: (0 1px 14px 0 $shadow-key-ambient-opacity-custom), - - // ℹī¸ Modified - 6: (0 2px 16px 1px $shadow-key-ambient-opacity-custom), - - 7: (0 2px 16px 1px $shadow-key-ambient-opacity-custom), - 8: (0 3px 14px 2px $shadow-key-ambient-opacity-custom), - 9: (0 3px 16px 2px $shadow-key-ambient-opacity-custom), - 10: (0 4px 18px 3px $shadow-key-ambient-opacity-custom), - 11: (0 4px 20px 3px $shadow-key-ambient-opacity-custom), - 12: (0 5px 22px 4px $shadow-key-ambient-opacity-custom), - 13: (0 5px 24px 4px $shadow-key-ambient-opacity-custom), - 14: (0 5px 26px 4px $shadow-key-ambient-opacity-custom), - 15: (0 6px 28px 5px $shadow-key-ambient-opacity-custom), - 16: (0 6px 30px 5px $shadow-key-ambient-opacity-custom), - 17: (0 6px 32px 5px $shadow-key-ambient-opacity-custom), - 18: (0 7px 34px 6px $shadow-key-ambient-opacity-custom), - 19: (0 7px 36px 6px $shadow-key-ambient-opacity-custom), - 20: (0 8px 38px 7px $shadow-key-ambient-opacity-custom), - 21: (0 8px 40px 7px $shadow-key-ambient-opacity-custom), - 22: (0 8px 42px 7px $shadow-key-ambient-opacity-custom), - 23: (0 9px 44px 8px $shadow-key-ambient-opacity-custom), - 24: (0 9px 46px 8px $shadow-key-ambient-opacity-custom) - ) !default, - - // 👉 Typography - $typography: ( - "h1": ( - "weight": 500, - "line-height": 7rem, - "letter-spacing": -0.0938rem - ), - "h2": ( - "weight": 500, - "line-height": 4.5rem, - "letter-spacing": -0.0313rem - ), - "h3": ( - "weight": 500, - "line-height": 3.5rem - ), - "h4": ( - "weight": 500, - "line-height": 2.625rem, - "letter-spacing": 0.0156rem - ), - "h5": ( - "weight": 500, - "line-height": 2rem - ), - "h6": ( - "letter-spacing": 0.0094rem - ), - "subtitle-1": ( - "letter-spacing": 0.0094rem - ), - "subtitle-2": ( - "line-height": 1.375rem, - "letter-spacing": 0.0063rem, - ), - "body-1": ( - "letter-spacing": 0.0094rem, - ), - "body-2": ( - "letter-spacing": 0.0094rem, - ), - "caption": ( - "letter-spacing": 0.025rem, - ), - "overline": ( - "weight": 400, - "line-height": 1.125rem, - "letter-spacing": 0.0625rem, - ) - ) !default, - - // 👉 Card - $card-title-letter-spacing: 0.0094rem !default, - $card-title-line-height: 2rem !default, - $card-subtitle-opacity: 1 !default, - - // 👉 Tooltip - $tooltip-background-color:#212121 !default, - $tooltip-border-radius: 4px !default, - $tooltip-padding: 4px 8px !default, - - // 👉 Alert - $alert-title-font-size: 1rem !default, - $alert-border-radius: 5px !default, - $alert-title-letter-spacing: 0.15px !default, - - // 👉 Badge - $badge-border-color:rgb(var(--v-theme-surface)) !default, - $badge-dot-height: 0.5rem !default, - $badge-dot-width: 0.5rem !default, - - // 👉 Button - $button-height: 38px !default, - $button-elevation: ("default": 3, "hover": 4, "active": 8) !default, - $button-border-radius: 5px !default, - $button-padding-ratio: 1.7 !default, - $button-text-letter-spacing: 0.025rem !default, - $button-icon-density: ("default": 0.5, "comfortable": -2, "compact": -3) !default, - - // 👉 Dialog - $dialog-card-header-padding: 20px !default, - $dialog-card-header-text-padding-top: 0 !default, - $dialog-card-text-padding: 20px !default, - - // 👉 Chip - $chip-label-border-radius: 4px !default, - $chip-close-size: 20px !default, - - // 👉 Expansion panel - $expansion-panel-title-padding: 16px 20px !default, - $expansion-panel-title-font-size: 1rem !default, - $expansion-panel-disabled-overlay: 0 !default, - $expansion-panel-active-title-min-height: 51px !default, - $expansion-panel-title-min-height: 51px !default, - $expansion-panel-text-padding: 0 20px 20px !default, - - // 👉 Menu - $menu-content-border-radius: 5px !default, - - // 👉 List - $list-subheader-text-opacity: 1 !default, - - // 👉 Snackbar - $snackbar-background:#212121 !default, - $snackbar-border-radius: 4px !default, - $snackbar-color: rgb(var(--v-theme-on-primary)) !default, - - // 👉 Tabs - $tabs-height: 40px !default, - - // 👉 Slider - $slider-track-active-size: 4px !default, - $slider-thumb-label-padding: 4px 12px !default, - $slider-thumb-label-font-size: 0.875rem !default, - - // 👉 Timeline - $timeline-dot-size: 34px !default, - $timeline-dot-divider-background: transparent !default, - - // 👉 Overlay - $overlay-opacity: 0.5 !default, - - // 👉 Navigation Drawer - $navigation-drawer-scrim-opacity:0.5 !default, - - // 👉 Table - $table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)), -); diff --git a/third-party-dependencies.json b/third-party-dependencies.json index a121f42c..79f94df6 100644 --- a/third-party-dependencies.json +++ b/third-party-dependencies.json @@ -264,7 +264,7 @@ "name": "Materio - Vuetify VueJS 3 Free Admin Template", "copyright": "Copyright (c) 2022 ThemeSelection", "url": "https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free", - "licenseUrl": "https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free/blob/v2.1.0/LICENSE" + "licenseUrl": "https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free/blob/v2.2.1/LICENSE" }, { "name": "Icons8 Line Awesome",