mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-14 06:57:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

upgrade Materio to 2.2.1

Browse Source
This commit is contained in:
MaysWind
2024-04-05 00:19:48 +08:00
parent ea97f8cf7a
commit 4a16b82700
30 changed files with 1892 additions and 512 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/desktop-main.js
+62 -25
View File
@@ -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',
}
}
}
src/styles/desktop/template/base/_components.scss
+34 -10
View File
@@ -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;
}
src/styles/desktop/template/base/_dark.scss
+1 -1
View File
@@ -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;
src/styles/desktop/template/base/_default-layout-w-vertical-nav.scss
+1 -2
View File
@@ -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 {
src/styles/desktop/template/base/_layouts.scss
+1 -1
View File
@@ -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;
}
src/styles/desktop/template/base/_mixins.scss
+7 -22
View File
@@ -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
src/styles/desktop/template/base/_utilities.scss
+36 -1
View File
@@ -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
}
}
src/styles/desktop/template/base/_variables.scss
+4 -3
View File
@@ -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;
src/styles/desktop/template/base/_vertical-nav.scss
+6 -1
View File
@@ -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);
}
src/styles/desktop/template/base/libs/_perfect-scrollbar.scss
+2 -2
View File
@@ -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,
src/styles/desktop/template/base/libs/vuetify/_overrides.scss
+3 -4
View File
@@ -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
src/styles/desktop/template/base/libs/vuetify/_variables.scss
+11
View File
@@ -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,
)
;
src/styles/desktop/template/base/placeholders/_nav.scss
-1
View File
@@ -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
src/styles/desktop/template/layout/_variables.scss
+1
View File
@@ -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;
src/styles/desktop/template/template/_components.scss
+1130 -165
View File
File diff suppressed because it is too large Load Diff
src/styles/desktop/template/template/_default-layout-w-vertical-nav.scss
+31
View File
@@ -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;
}
}
}
}
}
}
src/styles/desktop/template/template/_utilities.scss
+32 -5
View File
@@ -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;
}
src/styles/desktop/template/template/_variables.scss
+36 -13
View File
@@ -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,
),
);
src/styles/desktop/template/template/_vertical-nav.scss
+54
View File
@@ -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;
}
src/styles/desktop/template/template/index.scss
+4
View File
@@ -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";
src/styles/desktop/template/template/placeholders/_default-layout-vertical-nav.scss
+14
View File
@@ -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;
}
}
src/styles/desktop/template/template/placeholders/_index.scss
+2
View File
@@ -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";
src/styles/desktop/template/template/placeholders/_misc.scss
+10
View File
@@ -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);
}
src/styles/desktop/template/template/placeholders/_nav.scss
+15 -6
View File
@@ -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;
}
}
src/styles/desktop/template/template/placeholders/_vertical-nav.scss
+34 -6
View File
@@ -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;
}
src/styles/desktop/template/vuetify/_overrides.scss
+41
View File
@@ -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;
}
}
src/styles/desktop/template/vuetify/_variables.scss
+314
View File
@@ -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,
);
src/styles/desktop/template/vuetify/index.scss
+5
View File
@@ -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";
src/styles/desktop/template/vuetify/variables.scss
-243
View File
@@ -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)),
);
third-party-dependencies.json
+1 -1
View File
@@ -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",