zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

code refactor

Browse Source
This commit is contained in:
MaysWind
2023-06-23 13:23:10 +08:00
parent 37195f6008
commit 626325066d
55 changed files with 3144 additions and 1310 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+317 -49
View File
@@ -43,8 +43,10 @@
"eslint-plugin-vue": "^9.14.1", "eslint-plugin-vue": "^9.14.1",
"git-rev-sync": "^3.0.2", "git-rev-sync": "^3.0.2",
"postcss-preset-env": "^8.4.1", "postcss-preset-env": "^8.4.1",
"sass": "^1.63.6",
"vite": "^4.3.5", "vite": "^4.3.5",
"vite-plugin-pwa": "^0.15.1" "vite-plugin-pwa": "^0.15.1",
"vite-plugin-vuetify": "^1.0.2"
} }
}, },
"node_modules/@ampproject/remapping": { "node_modules/@ampproject/remapping": {
@@ -2448,7 +2450,6 @@
"cpu": [ "cpu": [
"arm" "arm"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"android" "android"
@@ -2464,7 +2465,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"android" "android"
@@ -2480,7 +2480,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"android" "android"
@@ -2496,7 +2495,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"darwin" "darwin"
@@ -2512,7 +2510,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"darwin" "darwin"
@@ -2528,7 +2525,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"freebsd" "freebsd"
@@ -2544,7 +2540,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"freebsd" "freebsd"
@@ -2560,7 +2555,6 @@
"cpu": [ "cpu": [
"arm" "arm"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"linux" "linux"
@@ -2576,7 +2570,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"linux" "linux"
@@ -2592,7 +2585,6 @@
"cpu": [ "cpu": [
"ia32" "ia32"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"linux" "linux"
@@ -2608,7 +2600,6 @@
"cpu": [ "cpu": [
"loong64" "loong64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"linux" "linux"
@@ -2624,7 +2615,6 @@
"cpu": [ "cpu": [
"mips64el" "mips64el"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"linux" "linux"
@@ -2640,7 +2630,6 @@
"cpu": [ "cpu": [
"ppc64" "ppc64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"linux" "linux"
@@ -2656,7 +2645,6 @@
"cpu": [ "cpu": [
"riscv64" "riscv64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"linux" "linux"
@@ -2672,7 +2660,6 @@
"cpu": [ "cpu": [
"s390x" "s390x"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"linux" "linux"
@@ -2688,7 +2675,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"linux" "linux"
@@ -2704,7 +2690,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"netbsd" "netbsd"
@@ -2720,7 +2705,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"openbsd" "openbsd"
@@ -2736,7 +2720,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"sunos" "sunos"
@@ -2752,7 +2735,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"win32" "win32"
@@ -2768,7 +2750,6 @@
"cpu": [ "cpu": [
"ia32" "ia32"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"win32" "win32"
@@ -2784,7 +2765,6 @@
"cpu": [ "cpu": [
"x64" "x64"
], ],
"dev": true,
"optional": true, "optional": true,
"os": [ "os": [
"win32" "win32"
@@ -2943,7 +2923,7 @@
"version": "0.3.3", "version": "0.3.3",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
"integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==", "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
"dev": true, "devOptional": true,
"dependencies": { "dependencies": {
"@jridgewell/set-array": "^1.0.1", "@jridgewell/set-array": "^1.0.1",
"@jridgewell/sourcemap-codec": "^1.4.10", "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -2957,7 +2937,7 @@
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
"integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==", "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
"dev": true, "devOptional": true,
"engines": { "engines": {
"node": ">=6.0.0" "node": ">=6.0.0"
} }
@@ -2966,7 +2946,7 @@
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz",
"integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==",
"dev": true, "devOptional": true,
"engines": { "engines": {
"node": ">=6.0.0" "node": ">=6.0.0"
} }
@@ -2975,7 +2955,7 @@
"version": "0.3.3", "version": "0.3.3",
"resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.3.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.3.tgz",
"integrity": "sha512-b+fsZXeLYi9fEULmfBrhxn4IrPlINf8fiNarzTof004v3lFdntdwa9PF7vFJqm3mg7s+ScJMxXaE3Acp1irZcg==", "integrity": "sha512-b+fsZXeLYi9fEULmfBrhxn4IrPlINf8fiNarzTof004v3lFdntdwa9PF7vFJqm3mg7s+ScJMxXaE3Acp1irZcg==",
"dev": true, "devOptional": true,
"dependencies": { "dependencies": {
"@jridgewell/gen-mapping": "^0.3.0", "@jridgewell/gen-mapping": "^0.3.0",
"@jridgewell/trace-mapping": "^0.3.9" "@jridgewell/trace-mapping": "^0.3.9"
@@ -2990,7 +2970,7 @@
"version": "0.3.18", "version": "0.3.18",
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz",
"integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==", "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==",
"dev": true, "devOptional": true,
"dependencies": { "dependencies": {
"@jridgewell/resolve-uri": "3.1.0", "@jridgewell/resolve-uri": "3.1.0",
"@jridgewell/sourcemap-codec": "1.4.14" "@jridgewell/sourcemap-codec": "1.4.14"
@@ -3000,7 +2980,7 @@
"version": "1.4.14", "version": "1.4.14",
"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
"integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
"dev": true "devOptional": true
}, },
"node_modules/@mdi/js": { "node_modules/@mdi/js": {
"version": "7.2.96", "version": "7.2.96",
@@ -3072,7 +3052,7 @@
"version": "18.15.11", "version": "18.15.11",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.11.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.11.tgz",
"integrity": "sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==", "integrity": "sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==",
"dev": true "devOptional": true
}, },
"node_modules/@types/resolve": { "node_modules/@types/resolve": {
"version": "1.17.1", "version": "1.17.1",
@@ -3246,11 +3226,35 @@
"vue": ">=3.2.0" "vue": ">=3.2.0"
} }
}, },
"node_modules/@vuetify/loader-shared": {
"version": "1.7.1",
"resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.7.1.tgz",
"integrity": "sha512-kLUvuAed6RCvkeeTNJzuy14pqnkur8lTuner7v7pNE/kVhPR97TuyXwBSBMR1cJeiLiOfu6SF5XlCYbXByEx1g==",
"devOptional": true,
"dependencies": {
"find-cache-dir": "^3.3.2",
"upath": "^2.0.1"
},
"peerDependencies": {
"vue": "^3.0.0",
"vuetify": "^3.0.0-beta.4"
}
},
"node_modules/@vuetify/loader-shared/node_modules/upath": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
"integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
"devOptional": true,
"engines": {
"node": ">=4",
"yarn": "*"
}
},
"node_modules/acorn": { "node_modules/acorn": {
"version": "8.8.2", "version": "8.8.2",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
"integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==", "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
"dev": true, "devOptional": true,
"bin": { "bin": {
"acorn": "bin/acorn" "acorn": "bin/acorn"
}, },
@@ -3307,6 +3311,19 @@
"url": "https://github.com/chalk/ansi-styles?sponsor=1" "url": "https://github.com/chalk/ansi-styles?sponsor=1"
} }
}, },
"node_modules/anymatch": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
"integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
"devOptional": true,
"dependencies": {
"normalize-path": "^3.0.0",
"picomatch": "^2.0.4"
},
"engines": {
"node": ">= 8"
}
},
"node_modules/argparse": { "node_modules/argparse": {
"version": "2.0.1", "version": "2.0.1",
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -3455,6 +3472,15 @@
"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
"dev": true "dev": true
}, },
"node_modules/binary-extensions": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"devOptional": true,
"engines": {
"node": ">=8"
}
},
"node_modules/boolbase": { "node_modules/boolbase": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -3474,7 +3500,7 @@
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"dev": true, "devOptional": true,
"dependencies": { "dependencies": {
"fill-range": "^7.0.1" "fill-range": "^7.0.1"
}, },
@@ -3513,7 +3539,7 @@
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
"integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
"dev": true "devOptional": true
}, },
"node_modules/builtin-modules": { "node_modules/builtin-modules": {
"version": "3.3.0", "version": "3.3.0",
@@ -3600,6 +3626,45 @@
"url": "https://github.com/chalk/chalk?sponsor=1" "url": "https://github.com/chalk/chalk?sponsor=1"
} }
}, },
"node_modules/chokidar": {
"version": "3.5.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
"integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
"devOptional": true,
"funding": [
{
"type": "individual",
"url": "https://paulmillr.com/funding/"
}
],
"dependencies": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
"glob-parent": "~5.1.2",
"is-binary-path": "~2.1.0",
"is-glob": "~4.0.1",
"normalize-path": "~3.0.0",
"readdirp": "~3.6.0"
},
"engines": {
"node": ">= 8.10.0"
},
"optionalDependencies": {
"fsevents": "~2.3.2"
}
},
"node_modules/chokidar/node_modules/glob-parent": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"devOptional": true,
"dependencies": {
"is-glob": "^4.0.1"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/clipboard": { "node_modules/clipboard": {
"version": "2.0.11", "version": "2.0.11",
"resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz", "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz",
@@ -3648,7 +3713,7 @@
"version": "2.20.3", "version": "2.20.3",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
"dev": true "devOptional": true
}, },
"node_modules/common-tags": { "node_modules/common-tags": {
"version": "1.8.2", "version": "1.8.2",
@@ -3659,6 +3724,12 @@
"node": ">=4.0.0" "node": ">=4.0.0"
} }
}, },
"node_modules/commondir": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
"integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
"devOptional": true
},
"node_modules/concat-map": { "node_modules/concat-map": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -3978,7 +4049,7 @@
"version": "4.3.4", "version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
"dev": true, "devOptional": true,
"dependencies": { "dependencies": {
"ms": "2.1.2" "ms": "2.1.2"
}, },
@@ -4217,7 +4288,7 @@
"version": "0.17.15", "version": "0.17.15",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.15.tgz", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.15.tgz",
"integrity": "sha512-LBUV2VsUIc/iD9ME75qhT4aJj0r75abCVS0jakhFzOtR7TQsqQA5w0tZ+KTKnwl3kXE0MhskNdHDh/I5aCR1Zw==", "integrity": "sha512-LBUV2VsUIc/iD9ME75qhT4aJj0r75abCVS0jakhFzOtR7TQsqQA5w0tZ+KTKnwl3kXE0MhskNdHDh/I5aCR1Zw==",
"dev": true, "devOptional": true,
"hasInstallScript": true, "hasInstallScript": true,
"bin": { "bin": {
"esbuild": "bin/esbuild" "esbuild": "bin/esbuild"
@@ -4540,7 +4611,7 @@
"version": "7.0.1", "version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
"dev": true, "devOptional": true,
"dependencies": { "dependencies": {
"to-regex-range": "^5.0.1" "to-regex-range": "^5.0.1"
}, },
@@ -4548,6 +4619,23 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/find-cache-dir": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
"integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
"devOptional": true,
"dependencies": {
"commondir": "^1.0.1",
"make-dir": "^3.0.2",
"pkg-dir": "^4.1.0"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/avajs/find-cache-dir?sponsor=1"
}
},
"node_modules/find-up": { "node_modules/find-up": {
"version": "5.0.0", "version": "5.0.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -4696,7 +4784,6 @@
"version": "2.3.2", "version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
"dev": true,
"hasInstallScript": true, "hasInstallScript": true,
"optional": true, "optional": true,
"os": [ "os": [
@@ -5003,6 +5090,12 @@
"node": ">= 4" "node": ">= 4"
} }
}, },
"node_modules/immutable": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.0.tgz",
"integrity": "sha512-0AOCmOip+xgJwEVTQj1EfiDDOkPmuyllDuTuEX+DDXUgapLAsBIfkg3sxCYyCEA8mQqZrrxPUGjcOQ2JS3WLkg==",
"devOptional": true
},
"node_modules/import-fresh": { "node_modules/import-fresh": {
"version": "3.3.0", "version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -5093,6 +5186,18 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"devOptional": true,
"dependencies": {
"binary-extensions": "^2.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/is-boolean-object": { "node_modules/is-boolean-object": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz", "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -5151,7 +5256,7 @@
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
"integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
"dev": true, "devOptional": true,
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
} }
@@ -5160,7 +5265,7 @@
"version": "4.0.3", "version": "4.0.3",
"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
"integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
"dev": true, "devOptional": true,
"dependencies": { "dependencies": {
"is-extglob": "^2.1.1" "is-extglob": "^2.1.1"
}, },
@@ -5190,7 +5295,7 @@
"version": "7.0.0", "version": "7.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"dev": true, "devOptional": true,
"engines": { "engines": {
"node": ">=0.12.0" "node": ">=0.12.0"
} }
@@ -5575,6 +5680,30 @@
"sourcemap-codec": "^1.4.8" "sourcemap-codec": "^1.4.8"
} }
}, },
"node_modules/make-dir": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
"integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
"devOptional": true,
"dependencies": {
"semver": "^6.0.0"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/make-dir/node_modules/semver": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
"integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
"devOptional": true,
"bin": {
"semver": "bin/semver.js"
}
},
"node_modules/mdn-data": { "node_modules/mdn-data": {
"version": "2.0.14", "version": "2.0.14",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -5662,7 +5791,7 @@
"version": "2.1.2", "version": "2.1.2",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"dev": true "devOptional": true
}, },
"node_modules/nanoid": { "node_modules/nanoid": {
"version": "3.3.6", "version": "3.3.6",
@@ -5692,6 +5821,15 @@
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
"integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==" "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w=="
}, },
"node_modules/normalize-path": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"devOptional": true,
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/normalize-range": { "node_modules/normalize-range": {
"version": "0.1.2", "version": "0.1.2",
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
@@ -5815,6 +5953,15 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/p-try": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
"integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
"devOptional": true,
"engines": {
"node": ">=6"
}
},
"node_modules/parent-module": { "node_modules/parent-module": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -5831,7 +5978,7 @@
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
"integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
"dev": true, "devOptional": true,
"engines": { "engines": {
"node": ">=8" "node": ">=8"
} }
@@ -5878,7 +6025,7 @@
"version": "2.3.1", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"dev": true, "devOptional": true,
"engines": { "engines": {
"node": ">=8.6" "node": ">=8.6"
}, },
@@ -5944,6 +6091,70 @@
} }
} }
}, },
"node_modules/pkg-dir": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
"integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
"devOptional": true,
"dependencies": {
"find-up": "^4.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/pkg-dir/node_modules/find-up": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
"integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
"devOptional": true,
"dependencies": {
"locate-path": "^5.0.0",
"path-exists": "^4.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/pkg-dir/node_modules/locate-path": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
"integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
"devOptional": true,
"dependencies": {
"p-locate": "^4.1.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/pkg-dir/node_modules/p-limit": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
"integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
"devOptional": true,
"dependencies": {
"p-try": "^2.0.0"
},
"engines": {
"node": ">=6"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/pkg-dir/node_modules/p-locate": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
"integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
"devOptional": true,
"dependencies": {
"p-limit": "^2.2.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/postcss": { "node_modules/postcss": {
"version": "8.4.23", "version": "8.4.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
@@ -7040,6 +7251,18 @@
"pify": "^2.3.0" "pify": "^2.3.0"
} }
}, },
"node_modules/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"devOptional": true,
"dependencies": {
"picomatch": "^2.2.1"
},
"engines": {
"node": ">=8.10.0"
}
},
"node_modules/rechoir": { "node_modules/rechoir": {
"version": "0.6.2", "version": "0.6.2",
"resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz", "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
@@ -7207,7 +7430,7 @@
"version": "3.23.0", "version": "3.23.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-3.23.0.tgz", "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.23.0.tgz",
"integrity": "sha512-h31UlwEi7FHihLe1zbk+3Q7z1k/84rb9BSwmBSr/XjOCEaBJ2YyedQDuM0t/kfOS0IxM+vk1/zI9XxYj9V+NJQ==", "integrity": "sha512-h31UlwEi7FHihLe1zbk+3Q7z1k/84rb9BSwmBSr/XjOCEaBJ2YyedQDuM0t/kfOS0IxM+vk1/zI9XxYj9V+NJQ==",
"dev": true, "devOptional": true,
"bin": { "bin": {
"rollup": "dist/bin/rollup" "rollup": "dist/bin/rollup"
}, },
@@ -7276,6 +7499,23 @@
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
}, },
"node_modules/sass": {
"version": "1.63.6",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.63.6.tgz",
"integrity": "sha512-MJuxGMHzaOW7ipp+1KdELtqKbfAWbH7OLIdoSMnVe3EXPMTmxTmlaZDCTsgIpPCs3w99lLo9/zDKkOrJuT5byw==",
"devOptional": true,
"dependencies": {
"chokidar": ">=3.0.0 <4.0.0",
"immutable": "^4.0.0",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=14.0.0"
}
},
"node_modules/select": { "node_modules/select": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
@@ -7382,7 +7622,7 @@
"version": "0.5.21", "version": "0.5.21",
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
"integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==", "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
"dev": true, "devOptional": true,
"dependencies": { "dependencies": {
"buffer-from": "^1.0.0", "buffer-from": "^1.0.0",
"source-map": "^0.6.0" "source-map": "^0.6.0"
@@ -7647,7 +7887,7 @@
"version": "5.16.8", "version": "5.16.8",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.16.8.tgz", "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.8.tgz",
"integrity": "sha512-QI5g1E/ef7d+PsDifb+a6nnVgC4F22Bg6T0xrBrz6iloVB4PUkkunp6V8nzoOOZJIzjWVdAGqCdlKlhLq/TbIA==", "integrity": "sha512-QI5g1E/ef7d+PsDifb+a6nnVgC4F22Bg6T0xrBrz6iloVB4PUkkunp6V8nzoOOZJIzjWVdAGqCdlKlhLq/TbIA==",
"dev": true, "devOptional": true,
"dependencies": { "dependencies": {
"@jridgewell/source-map": "^0.3.2", "@jridgewell/source-map": "^0.3.2",
"acorn": "^8.5.0", "acorn": "^8.5.0",
@@ -7685,7 +7925,7 @@
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dev": true, "devOptional": true,
"dependencies": { "dependencies": {
"is-number": "^7.0.0" "is-number": "^7.0.0"
}, },
@@ -7887,7 +8127,7 @@
"version": "4.3.9", "version": "4.3.9",
"resolved": "https://registry.npmjs.org/vite/-/vite-4.3.9.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.9.tgz",
"integrity": "sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==", "integrity": "sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==",
"dev": true, "devOptional": true,
"dependencies": { "dependencies": {
"esbuild": "^0.17.5", "esbuild": "^0.17.5",
"postcss": "^8.4.23", "postcss": "^8.4.23",
@@ -7964,6 +8204,34 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/vite-plugin-vuetify": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/vite-plugin-vuetify/-/vite-plugin-vuetify-1.0.2.tgz",
"integrity": "sha512-MubIcKD33O8wtgQXlbEXE7ccTEpHZ8nPpe77y9Wy3my2MWw/PgehP9VqTp92BLqr0R1dSL970Lynvisx3UxBFw==",
"devOptional": true,
"dependencies": {
"@vuetify/loader-shared": "^1.7.1",
"debug": "^4.3.3",
"upath": "^2.0.1"
},
"engines": {
"node": ">=12"
},
"peerDependencies": {
"vite": "^2.7.0 || ^3.0.0 || ^4.0.0",
"vuetify": "^3.0.0-beta.4"
}
},
"node_modules/vite-plugin-vuetify/node_modules/upath": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
"integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
"devOptional": true,
"engines": {
"node": ">=4",
"yarn": "*"
}
},
"node_modules/vue": { "node_modules/vue": {
"version": "3.3.4", "version": "3.3.4",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
package.json
+3 -1
View File
@@ -52,8 +52,10 @@
"eslint-plugin-vue": "^9.14.1", "eslint-plugin-vue": "^9.14.1",
"git-rev-sync": "^3.0.2", "git-rev-sync": "^3.0.2",
"postcss-preset-env": "^8.4.1", "postcss-preset-env": "^8.4.1",
"sass": "^1.63.6",
"vite": "^4.3.5", "vite": "^4.3.5",
"vite-plugin-pwa": "^0.15.1" "vite-plugin-pwa": "^0.15.1",
"vite-plugin-vuetify": "^1.0.2"
}, },
"browserslist": [ "browserslist": [
"> 1%", "> 1%",
src/desktop-main.js
+16 -15
View File
@@ -24,16 +24,16 @@ import { VProgressLinear } from 'vuetify/components/VProgressLinear';
import { VSelect } from 'vuetify/components/VSelect'; import { VSelect } from 'vuetify/components/VSelect';
import { VSheet } from 'vuetify/components/VSheet'; import { VSheet } from 'vuetify/components/VSheet';
import { VSnackbar } from 'vuetify/components/VSnackbar'; import { VSnackbar } from 'vuetify/components/VSnackbar';
import { VTabs } from 'vuetify/components/VTabs'; import { VTabs, VTab } from 'vuetify/components/VTabs';
import { VTable } from 'vuetify/components/VTable'; import { VTable } from 'vuetify/components/VTable';
import { VTextField } from 'vuetify/components/VTextField'; import { VTextField } from 'vuetify/components/VTextField';
import { VWindow, VWindowItem } from 'vuetify/components/VWindow';
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'; import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';
import 'vuetify/styles'; import 'vuetify/styles';
import 'line-awesome/dist/line-awesome/css/line-awesome.css'; import 'line-awesome/dist/line-awesome/css/line-awesome.css';
import { PerfectScrollbar } from 'vue3-perfect-scrollbar'; import { PerfectScrollbar } from 'vue3-perfect-scrollbar';
import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.min.css';
import VueDatePicker from '@vuepic/vue-datepicker'; import VueDatePicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css'; import '@vuepic/vue-datepicker/dist/main.css';
@@ -52,12 +52,12 @@ import {
import AmountInput from '@/components/desktop/AmountInput.vue'; import AmountInput from '@/components/desktop/AmountInput.vue';
import '@/styles/desktop/base.css'; import '@/styles/desktop/template/base/libs/vuetify/_index.scss';
import '@/styles/desktop/layout.css'; import '@/styles/desktop/template/template/index.scss';
import '@/styles/desktop/font-size-utils.css'; import '@/styles/desktop/template/layout/index.scss';
import '@/styles/desktop/gap-size-utils.css'; import '@/styles/desktop/template/layout/component/index.scss';
import '@/styles/desktop/vuetify.css'; import '@/styles/desktop/template/layout/_default-layout.scss';
import '@/styles/desktop/classess.css'; import '@/styles/desktop/global.scss';
import App from './DesktopApp.vue'; import App from './DesktopApp.vue';
@@ -104,8 +104,11 @@ const vuetify = createVuetify({
VSheet, VSheet,
VSnackbar, VSnackbar,
VTabs, VTabs,
VTab,
VTable, VTable,
VTextField VTextField,
VWindow,
VWindowItem
}, },
icons: { icons: {
defaultSet: 'mdi', defaultSet: 'mdi',
@@ -228,9 +231,8 @@ const vuetify = createVuetify({
'skin-bordered-surface': '#fff' 'skin-bordered-surface': '#fff'
}, },
variables: { variables: {
'btn-height': '38px',
'code-color': '#ff8000', 'code-color': '#ff8000',
'overlay-scrim-background': '#3a3541', 'overlay-scrim-background': '#413935',
'overlay-scrim-opacity': 0.5, 'overlay-scrim-opacity': 0.5,
'hover-opacity': 0.04, 'hover-opacity': 0.04,
'focus-opacity': 0.1, 'focus-opacity': 0.1,
@@ -278,9 +280,8 @@ const vuetify = createVuetify({
'skin-bordered-surface': '#312d4b' 'skin-bordered-surface': '#312d4b'
}, },
variables: { variables: {
'btn-height': '38px',
'code-color': '#ff8000', 'code-color': '#ff8000',
'overlay-scrim-background': '#2C2942', 'overlay-scrim-background': '#1c1c1d',
'overlay-scrim-opacity': 0.6, 'overlay-scrim-opacity': 0.6,
'hover-opacity': 0.04, 'hover-opacity': 0.04,
'focus-opacity': 0.1, 'focus-opacity': 0.1,
@@ -288,8 +289,8 @@ const vuetify = createVuetify({
'activated-opacity': 0.1, 'activated-opacity': 0.1,
'pressed-opacity': 0.14, 'pressed-opacity': 0.14,
'dragged-opacity': 0.1, 'dragged-opacity': 0.1,
'border-color': '#E7E3FC', 'border-color': '#e7e3fc',
'table-header-background': '#3D3759', 'table-header-background': '#3d3759',
'custom-background': '#373452', 'custom-background': '#373452',
'shadow-key-umbra-opacity': 'rgba(20, 18, 33, 0.08)', 'shadow-key-umbra-opacity': 'rgba(20, 18, 33, 0.08)',
'shadow-key-penumbra-opacity': 'rgba(20, 18, 33, 0.12)', 'shadow-key-penumbra-opacity': 'rgba(20, 18, 33, 0.12)',
src/styles/desktop/base.css
-42
View File
@@ -1,42 +0,0 @@
/** Base class **/
/** reference: https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
*,
::before,
::after {
box-sizing: inherit;
background-repeat: no-repeat;
}
:root {
--v-theme-overlay-multiplier: 1;
--v-scrollbar-offset: 0px;
}
html {
box-sizing: border-box;
}
html {
font-family: inter,sans-serif,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;
line-height: 1.5;
font-size: 1rem;
overflow-x: hidden;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
html.overflow-y-hidden {
overflow-y: hidden!important;
}
a {
color: rgb(var(--v-theme-primary));
text-decoration: none;
}
p {
margin-block-end: 1rem;
}
src/styles/desktop/font-size-utils.css
-67
View File
@@ -1,67 +0,0 @@
/** Text size class **/
/** reference: https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
.text-xs {
font-size: .75rem;
line-height: 1rem;
}
.text-sm {
font-size: .875rem;
line-height: 1.25rem;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.text-6xl {
font-size: 3.75rem;
line-height: 1;
}
.text-7xl {
font-size: 4.5rem;
line-height: 1;
}
.text-8xl {
font-size: 6rem;
line-height: 1;
}
.text-9xl {
font-size: 8rem;
line-height: 1;
}
src/styles/desktop/gap-size-utils.css
-362
View File
@@ -1,362 +0,0 @@
/** Gap size class **/
/** reference: https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
.gap-0 {
gap: 0;
}
.gap-x-0 {
column-gap: 0;
}
.gap-y-0 {
row-gap: 0;
}
.gap-1 {
gap: .25rem;
}
.gap-x-1 {
column-gap: .25rem;
}
.gap-y-1 {
row-gap: .25rem;
}
.gap-2 {
gap: .5rem;
}
.gap-x-2 {
column-gap: .5rem;
}
.gap-y-2 {
row-gap: .5rem;
}
.gap-3 {
gap: .75rem;
}
.gap-x-3 {
column-gap: .75rem;
}
.gap-y-3 {
row-gap: .75rem;
}
.gap-4 {
gap: 1rem;
}
.gap-x-4 {
column-gap: 1rem;
}
.gap-y-4 {
row-gap: 1rem;
}
.gap-5 {
gap: 1.25rem;
}
.gap-x-5 {
column-gap: 1.25rem;
}
.gap-y-5 {
row-gap: 1.25rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-x-6 {
column-gap: 1.5rem;
}
.gap-y-6 {
row-gap: 1.5rem;
}
.gap-7 {
gap: 1.75rem;
}
.gap-x-7 {
column-gap: 1.75rem;
}
.gap-y-7 {
row-gap: 1.75rem;
}
.gap-8 {
gap: 2rem;
}
.gap-x-8 {
column-gap: 2rem;
}
.gap-y-8 {
row-gap: 2rem;
}
.gap-9 {
gap: 2.25rem;
}
.gap-x-9 {
column-gap: 2.25rem;
}
.gap-y-9 {
row-gap: 2.25rem;
}
.gap-10 {
gap: 2.5rem;
}
.gap-x-10 {
column-gap: 2.5rem;
}
.gap-y-10 {
row-gap: 2.5rem;
}
.gap-11 {
gap: 2.75rem;
}
.gap-x-11 {
column-gap: 2.75rem;
}
.gap-y-11 {
row-gap: 2.75rem;
}
.gap-12 {
gap: 3rem;
}
.gap-x-12 {
column-gap: 3rem;
}
.gap-y-12 {
row-gap: 3rem;
}
.gap-14 {
gap: 3.5rem;
}
.gap-x-14 {
column-gap: 3.5rem;
}
.gap-y-14 {
row-gap: 3.5rem;
}
.gap-16 {
gap: 4rem;
}
.gap-x-16 {
column-gap: 4rem;
}
.gap-y-16 {
row-gap: 4rem;
}
.gap-20 {
gap: 5rem;
}
.gap-x-20 {
column-gap: 5rem;
}
.gap-y-20 {
row-gap: 5rem;
}
.gap-24 {
gap: 6rem;
}
.gap-x-24 {
column-gap: 6rem;
}
.gap-y-24 {
row-gap: 6rem;
}
.gap-28 {
gap: 7rem;
}
.gap-x-28 {
column-gap: 7rem;
}
.gap-y-28 {
row-gap: 7rem;
}
.gap-32 {
gap: 8rem;
}
.gap-x-32 {
column-gap: 8rem;
}
.gap-y-32 {
row-gap: 8rem;
}
.gap-36 {
gap: 9rem;
}
.gap-x-36 {
column-gap: 9rem;
}
.gap-y-36 {
row-gap: 9rem;
}
.gap-40 {
gap: 10rem;
}
.gap-x-40 {
column-gap: 10rem;
}
.gap-y-40 {
row-gap: 10rem;
}
.gap-44 {
gap: 11rem;
}
.gap-x-44 {
column-gap: 11rem;
}
.gap-y-44 {
row-gap: 11rem;
}
.gap-48 {
gap: 12rem;
}
.gap-x-48 {
column-gap: 12rem;
}
.gap-y-48 {
row-gap: 12rem;
}
.gap-52 {
gap: 13rem;
}
.gap-x-52 {
column-gap: 13rem;
}
.gap-y-52 {
row-gap: 13rem;
}
.gap-56 {
gap: 14rem;
}
.gap-x-56 {
column-gap: 14rem;
}
.gap-y-56 {
row-gap: 14rem;
}
.gap-60 {
gap: 15rem;
}
.gap-x-60 {
column-gap: 15rem;
}
.gap-y-60 {
row-gap: 15rem;
}
.gap-64 {
gap: 16rem;
}
.gap-x-64 {
column-gap: 16rem;
}
.gap-y-64 {
row-gap: 16rem;
}
.gap-72 {
gap: 18rem;
}
.gap-x-72 {
column-gap: 18rem;
}
.gap-y-72 {
row-gap: 18rem;
}
.gap-80 {
gap: 20rem;
}
.gap-x-80 {
column-gap: 20rem;
}
.gap-y-80 {
row-gap: 20rem;
}
.gap-96 {
gap: 24rem;
}
.gap-x-96 {
column-gap: 24rem;
}
.gap-y-96 {
row-gap: 24rem;
}
src/styles/desktop/classess.css → src/styles/desktop/global.scss
-4
View File
@@ -6,7 +6,3 @@
.readonly { .readonly {
pointer-events: none !important; pointer-events: none !important;
} }
.cursor-pointer {
cursor: pointer;
}
src/styles/desktop/layout.css
-544
View File
@@ -1,544 +0,0 @@
/** Layout class **/
/** reference: https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
html,
body {
min-block-size: 100%;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title,
.layout-nav-type-vertical .layout-vertical-nav .nav-link > :first-child,
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child {
margin-block: 0;
margin-inline: 0 1.125rem;
padding-block: 0;
padding-inline: 1.375rem 1rem;
white-space: nowrap;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-link > :first-child,
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child {
border-radius: .4rem;
block-size: 2.75rem;
margin-block-end: .375rem;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-link .nav-item-icon,
.layout-nav-type-vertical .layout-vertical-nav .nav-group .nav-item-icon {
flex-shrink: 0;
font-size: 1.5rem;
margin-inline-end: .625rem;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-group .nav-group .nav-item-icon,
.layout-nav-type-vertical .layout-vertical-nav .nav-group .nav-link .nav-item-icon {
font-size: .9rem;
margin-inline-end: .925rem;
margin-inline-start: .3rem;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-group .nav-group .nav-link .nav-item-icon,
.layout-nav-type-vertical .layout-vertical-nav .nav-group .nav-group .nav-group .nav-item-icon {
visibility: hidden;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-group.active > :first-child:before,
.layout-nav-type-vertical .layout-vertical-nav .nav-group.open > :first-child:before {
opacity: calc(var(--v-selected-opacity) * var(--v-theme-overlay-multiplier));
}
.layout-nav-type-vertical .layout-vertical-nav .nav-group.active > :hover:first-child .nav-group.active > :first-child:before,
.layout-nav-type-vertical .layout-vertical-nav .nav-group.open > :hover:first-child .nav-group.active > :first-child:before,
.layout-nav-type-vertical .layout-vertical-nav .nav-group.active > :hover:first-child .nav-group.open > :first-child:before,
.layout-nav-type-vertical .layout-vertical-nav .nav-group.open > :hover:first-child .nav-group.open > :first-child:before {
opacity: calc(var(--v-selected-opacity) + var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
}
.layout-nav-type-vertical .layout-vertical-nav .nav-group.active > :focus-visible:first-child .nav-group.active > :first-child:before,
.layout-nav-type-vertical .layout-vertical-nav .nav-group.open > :focus-visible:first-child .nav-group.active > :first-child:before,
.layout-nav-type-vertical .layout-vertical-nav .nav-group.active > :focus-visible:first-child .nav-group.open > :first-child:before,
.layout-nav-type-vertical .layout-vertical-nav .nav-group.open > :focus-visible:first-child .nav-group.open > :first-child:before {
opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
}
@supports not selector(:focus-visible) {
.layout-nav-type-vertical .layout-vertical-nav .nav-group.active > :focus:first-child:before,
.layout-nav-type-vertical .layout-vertical-nav .nav-group.open > :focus:first-child:before {
opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
}
}
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title {
block-size: 1.5rem;
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
font-size: .75rem;
text-transform: uppercase;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-item-badge {
display: inline-block;
border-radius: 1.5rem;
font-size: .8em;
font-weight: 500;
line-height: 1;
padding-block: .25em;
padding-inline: .55em;
text-align: center;
vertical-align: baseline;
white-space: nowrap;
}
.layout-nav-type-vertical .layout-vertical-nav {
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
}
.layout-nav-type-vertical .layout-vertical-nav .nav-item-title {
letter-spacing: .15px;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title {
letter-spacing: .4px;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-link > .router-link-exact-active {
background-color: rgb(var(--v-theme-primary));
color: rgb(var(--v-theme-on-primary));
box-shadow: 0 4px 14px -4px var(--v-shadow-key-umbra-opacity), 0 4px 8px -4px var(--v-shadow-key-penumbra-opacity), 0 4px 8px -4px var(--v-shadow-key-ambient-opacity);
}
.layout-nav-type-vertical .layout-vertical-nav .nav-link a {
color: inherit;
}
.layout-navbar {
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
}
html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-sticky .navbar-blur.layout-navbar .navbar-content-container,
.layout-wrapper.layout-nav-type-vertical.window-scrolled.layout-navbar-sticky .navbar-blur.layout-navbar .navbar-content-container {
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
background-color: rgb(var(--v-theme-surface), .9);
}
html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-sticky .layout-navbar .navbar-content-container,
.layout-wrapper.layout-nav-type-vertical.window-scrolled.layout-navbar-sticky .layout-navbar .navbar-content-container {
background-color: rgb(var(--v-theme-surface));
}
html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-sticky .layout-navbar .navbar-content-container,
.layout-wrapper.layout-nav-type-vertical.window-scrolled.layout-navbar-sticky .layout-navbar .navbar-content-container {
box-shadow: 0 4px 14px -4px var(--v-shadow-key-umbra-opacity), 0 4px 8px -4px var(--v-shadow-key-penumbra-opacity), 0 4px 8px -4px var(--v-shadow-key-ambient-opacity);
padding-inline: 1.2rem;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-link > .router-link-exact-active {
background: linear-gradient(-72.47deg, rgb(var(--v-theme-primary)) 22.16%, rgba(var(--v-theme-primary), .7) 76.47%) !important;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title .title-text {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
column-gap: .625rem;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title .title-text:before,
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title .title-text:after {
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
content: "";
}
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title .title-text:after {
flex: 1 1 auto;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title .title-text:before {
flex: 0 1 .75rem;
margin-inline-start: -1.375rem;
}
.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-section-title {
margin-inline: 4px 0;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-link > :first-child,
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child {
block-size: 2.625rem !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;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-link > :first-child,
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child {
transition: margin-inline .15s ease-in-out;
will-change: margin-inline;
}
.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-link > :first-child,
.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-group > :first-child {
margin-inline: 0 5px;
}
.layout-nav-type-vertical .layout-vertical-nav {
background-color: rgb(var(--v-theme-background));
}
.layout-vertical-nav-collapsed.layout-nav-type-vertical .layout-vertical-nav.hovered {
box-shadow: 0 4px 5px -2px var(--v-shadow-key-umbra-opacity), 0 2px 10px 1px var(--v-shadow-key-penumbra-opacity), 0 2px 16px 1px var(--v-shadow-key-ambient-opacity);
}
.layout-nav-type-vertical .layout-vertical-nav .nav-header {
overflow: hidden;
padding: 1rem .25rem 1rem 1.375rem;
margin-inline: 0 1.125rem;
min-block-size: 64px;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-header .app-logo {
flex-shrink: 0;
transition: transform .25s ease-in-out;
}
.layout-vertical-nav-collapsed.layout-nav-type-vertical .layout-vertical-nav:not(.hovered) .nav-header .app-logo {
transform: translate(-4px);
}
.layout-nav-type-vertical .layout-vertical-nav .nav-header .app-title {
margin-inline-start: .9rem;
}
.layout-nav-type-vertical .layout-vertical-nav .vertical-nav-items-shadow {
position: absolute;
z-index: 1;
background: linear-gradient(rgb(var(--v-theme-background)) 5%, rgba(var(--v-theme-background), 75%) 45%, rgba(var(--v-theme-background), 20%) 80%, transparent);
block-size: 55px;
inline-size: 100%;
inset-block-start: 62px;
opacity: 0;
pointer-events: none;
transition: opacity .15s ease-in-out;
will-change: opacity;
}
.layout-nav-type-vertical .layout-vertical-nav.scrolled .vertical-nav-items-shadow {
opacity: 1;
}
.layout-nav-type-vertical .layout-vertical-nav .ps__rail-y {
z-index: 1;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title {
margin-block-end: .5rem;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title:not(:first-child) {
margin-block-start: 1.5rem;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-section-title .placeholder-icon {
margin-inline: auto;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-link,
.layout-nav-type-vertical .layout-vertical-nav .nav-group {
overflow: hidden;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-link.disabled,
.layout-nav-type-vertical .layout-vertical-nav .nav-group.disabled {
opacity: var(--v-disabled-opacity);
pointer-events: none;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-link > a {
position: relative;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-link > a:before {
position: absolute;
border-radius: inherit;
background: currentcolor;
block-size: 100%;
content: "";
inline-size: 100%;
inset: 0;
opacity: 0;
pointer-events: none;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-link > a:hover:before {
opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
}
.layout-nav-type-vertical .layout-vertical-nav .nav-link > a:focus-visible:before {
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
}
@supports not selector(:focus-visible) {
.layout-nav-type-vertical .layout-vertical-nav .nav-link > a:focus:before {
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
}
}
.layout-nav-type-vertical .layout-vertical-nav .nav-group .nav-group-arrow {
flex-shrink: 0;
transform-origin: center;
transition: transform .15s ease-in-out;
will-change: transform;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-group.open > .nav-group-label .nav-group-arrow {
transform: rotate(90deg);
}
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child {
position: relative;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child:before {
position: absolute;
border-radius: inherit;
background: currentcolor;
block-size: 100%;
content: "";
inline-size: 100%;
inset: 0;
opacity: 0;
pointer-events: none;
}
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child:hover:before {
opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
}
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child:focus-visible:before {
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
}
@supports not selector(:focus-visible) {
.layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child:focus:before {
opacity: calc(var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
}
}
.vertical-nav-section-title-enter-active,
.vertical-nav-section-title-leave-active {
transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}
.vertical-nav-section-title-enter-from,
.vertical-nav-section-title-leave-to {
opacity: 0;
transform: translate(15px);
}
.transition-slide-x-enter-active,
.transition-slide-x-leave-active {
transition: opacity .1s ease-in-out, transform .12s ease-in-out;
}
.transition-slide-x-enter-from,
.transition-slide-x-leave-to {
opacity: 0;
transform: translate(-15px);
}
.vertical-nav-app-title-enter-active,
.vertical-nav-app-title-leave-active {
transition: opacity .1s ease-in-out, transform .12s ease-in-out;
}
.vertical-nav-app-title-enter-from,
.vertical-nav-app-title-leave-to {
opacity: 0;
transform: translate(-15px);
}
.layout-vertical-nav ol, .layout-vertical-nav ul,
.layout-horizontal-nav ol, .layout-horizontal-nav ul {
list-style: none;
}
.scrollable-content.v-navigation-drawer .v-navigation-drawer__content {
display: flex;
overflow: hidden;
flex-direction: column;
}
.layout-wrapper.layout-nav-type-vertical .layout-navbar .navbar-content-container {
transition: padding .2s ease, background-color .18s ease;
}
.layout-wrapper.layout-nav-type-vertical .layout-navbar .navbar-content-container {
border-radius: 0 0 10px 10px;
}
.layout-wrapper.layout-nav-type-vertical .layout-footer .footer-content-container {
border-radius: 10px 10px 0 0;
}
.layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer .footer-content-container {
background-color: rgb(var(--v-theme-surface));
padding-block: 0;
padding-inline: 1.2rem;
box-shadow: 0 4px 14px -4px var(--v-shadow-key-umbra-opacity), 0 4px 8px -4px var(--v-shadow-key-penumbra-opacity), 0 4px 8px -4px var(--v-shadow-key-ambient-opacity);
}
.layout-wrapper.layout-nav-type-vertical.layout-content-height-fixed .page-content-container > .v-layout:first-child {
overflow: hidden;
min-block-size: 100%;
}
.layout-wrapper.layout-nav-type-vertical.layout-content-height-fixed .page-content-container > .v-layout:first-child > .v-main .v-main__wrap > :first-child {
block-size: 100%;
overflow-y: auto;
}
.layout-wrapper.layout-nav-type-horizontal.layout-content-height-fixed > .layout-page-content {
display: flex;
}
.layout-vertical-nav {
position: fixed;
z-index: 1004;
display: flex;
flex-direction: column;
block-size: 100%;
inline-size: 260px;
inset-block-start: 0;
inset-inline-start: 0;
transition: transform .25s ease-in-out, inline-size .25s ease-in-out, box-shadow .25s ease-in-out;
will-change: transform, inline-size;
}
.layout-vertical-nav .nav-header {
display: flex;
align-items: center;
}
.layout-vertical-nav .app-title-wrapper {
margin-inline-end: auto;
}
.layout-vertical-nav .nav-items {
block-size: 100%;
}
.layout-vertical-nav .nav-item-title {
overflow: hidden;
margin-inline-end: auto;
text-overflow: ellipsis;
white-space: nowrap;
}
.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) {
inline-size: 68px
}
.layout-vertical-nav.overlay-nav:not(.visible) {
transform: translate(-260px);
}
.layout-content-width-boxed.layout-wrapper.layout-nav-type-vertical .layout-navbar {
inline-size: 100%;
margin-inline: auto;
max-inline-size: 1440px;
}
.layout-wrapper.layout-nav-type-vertical .layout-navbar {
padding-inline: 1.5rem;
}
.layout-wrapper.layout-nav-type-vertical.layout-navbar-hidden .layout-navbar {
display: none;
}
.layout-wrapper.layout-nav-type-vertical.layout-navbar-sticky .layout-navbar {
position: sticky;
inset-block-start: 0;
}
.layout-wrapper.layout-nav-type-vertical {
block-size: 100%;
}
.layout-wrapper.layout-nav-type-vertical .layout-content-wrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
min-block-size: calc(var(--vh, 1vh) * 100);
transition: padding-inline-start .2s ease-in-out;
will-change: padding-inline-start;
}
.layout-wrapper.layout-nav-type-vertical .layout-navbar {
z-index: 11;
}
.layout-wrapper.layout-nav-type-vertical .layout-navbar .navbar-content-container {
block-size: 64px;
}
.layout-wrapper.layout-nav-type-vertical .layout-overlay {
position: fixed;
z-index: 1003;
background-color: #0009;
cursor: pointer;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity .25s ease-in-out;
will-change: transform;
}
.layout-wrapper.layout-nav-type-vertical .layout-overlay.visible {
opacity: 1;
pointer-events: auto;
}
.layout-wrapper.layout-nav-type-vertical:not(.layout-overlay-nav) .layout-content-wrapper {
padding-inline-start: 260px;
}
.layout-wrapper.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-content-wrapper {
padding-inline-start: 68px;
}
.layout-wrapper.layout-nav-type-vertical.layout-content-height-fixed .layout-content-wrapper {
max-block-size: calc(var(--vh) * 100);
}
.layout-wrapper.layout-nav-type-vertical.layout-content-height-fixed .layout-page-content {
display: flex;
overflow: hidden;
}
.layout-wrapper.layout-nav-type-vertical.layout-content-height-fixed .layout-page-content .page-content-container {
inline-size: 100%;
}
.layout-wrapper.layout-nav-type-vertical.layout-content-height-fixed .layout-page-content .page-content-container > :first-child {
max-block-size: 100%;
overflow-y: auto;
}
.layout-vertical-nav .nav-link a {
display: flex;
align-items: center;
cursor: pointer;
}
.layout-page-content {
flex-grow: 1;
padding-block: 1.5rem;
}
.layout-page-content {
padding-inline: 1.5rem;
}
src/styles/desktop/template/base/_components.scss
+160
View File
@@ -0,0 +1,160 @@
/** Materio Template base classes **/
/** 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/configured-variables/template" as variables;
// 👉 Avatar group
.v-avatar-group {
display: flex;
align-items: center;
> * {
&:not(:first-child) {
margin-inline-start: -0.8rem;
}
transition: transform 0.25s ease, box-shadow 0.15s ease;
&:hover {
z-index: 2;
transform: translateY(-5px) scale(1.05);
@include mixins.elevation(3);
}
}
> .v-avatar {
border: 2px solid rgb(var(--v-theme-surface));
transition: transform 0.15s ease;
}
}
// 👉 Button outline with default color border color
.v-alert--variant-outlined,
.v-avatar--variant-outlined,
.v-btn.v-btn--variant-outlined,
.v-card--variant-outlined,
.v-chip--variant-outlined,
.v-list-item--variant-outlined {
&:not([class*="text-"]) {
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
}
&.text-default {
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
}
}
// 👉 Custom Input
.v-label.custom-input {
padding: 1rem;
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
opacity: 1;
white-space: normal;
&:hover {
border-color: rgba(var(--v-border-color), 0.25);
}
&.active {
border-color: rgb(var(--v-theme-primary));
.v-icon {
color: rgb(var(--v-theme-primary)) !important;
}
}
}
// Dialog responsive width
.v-dialog {
// dialog custom close btn
.v-dialog-close-btn {
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;
.v-btn__overlay {
display: none;
}
}
.v-card {
@extend %style-scroll-bar;
}
}
@media (min-width: 600px) {
.v-dialog {
&.v-dialog-sm,
&.v-dialog-lg,
&.v-dialog-xl {
.v-overlay__content {
inline-size: 565px !important;
}
}
}
}
@media (min-width: 960px) {
.v-dialog {
&.v-dialog-lg,
&.v-dialog-xl {
.v-overlay__content {
inline-size: 865px !important;
}
}
}
}
@media (min-width: 1264px) {
.v-dialog.v-dialog-xl {
.v-overlay__content {
inline-size: 1165px !important;
}
}
}
// v-tab with pill support
.v-tabs.v-tabs-pill {
.v-tab.v-btn {
border-radius: 0.25rem !important;
transition: none;
.v-tab__slider {
visibility: hidden;
}
}
}
// loop for all colors bg
@each $color-name in variables.$theme-colors-name {
.v-tabs.v-tabs-pill {
.v-slide-group-item--active.v-tab--selected.text-#{$color-name} {
background-color: rgb(var(--v-theme-#{$color-name}));
color: rgb(var(--v-theme-on-#{$color-name})) !important;
}
}
}
// ℹ️ We are make even width of all v-timeline body
.v-timeline--vertical.v-timeline {
.v-timeline-item {
.v-timeline-item__body {
justify-self: stretch !important;
}
}
}
// 👉 Textarea
.v-textarea .v-field__input {
/* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-mask-image: none !important;
mask-image: none !important;
}
src/styles/desktop/template/base/_dark.scss
+19
View File
@@ -0,0 +1,19 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "@/styles/desktop/template/configured-variables/template" as variables;
// ————————————————————————————————————
// * ——— Perfect Scrollbar
// ————————————————————————————————————
.v-application.v-theme--dark {
.ps__rail-y,
.ps__rail-x {
background-color: transparent !important;
}
.ps__thumb-y {
background-color: variables.$plugin-ps-thumb-y-dark;
}
}
src/styles/desktop/template/base/_default-layout-w-vertical-nav.scss
+107
View File
@@ -0,0 +1,107 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "@/styles/desktop/template/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";
$header: ".layout-navbar";
@if variables.$layout-vertical-nav-navbar-is-contained {
$header: ".layout-navbar .navbar-content-container";
}
.layout-wrapper.layout-nav-type-vertical {
// SECTION Layout Navbar
// 👉 Elevated navbar
@if variables.$vertical-nav-navbar-style == "elevated" {
// Add transition
#{$header} {
transition: padding 0.2s ease, background-color 0.18s ease;
}
// If navbar is contained => Add border radius to header
@if variables.$layout-vertical-nav-navbar-is-contained {
#{$header} {
border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
}
}
// 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
*/
html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-sticky,
&.window-scrolled.layout-navbar-sticky {
#{$header} {
@extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
@extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
}
.navbar-blur#{$header} {
@extend %blurry-bg;
}
}
}
}
// 👉 Floating navbar
@else if variables.$vertical-nav-navbar-style == "floating" {
// ℹ️ Regardless of navbar is contained or not => Apply overlay to .layout-navbar
.layout-navbar {
&.navbar-blur {
@extend %default-layout-vertical-nav-floating-navbar-overlay;
}
}
&:not(.layout-navbar-sticky) {
#{$header} {
margin-block-start: variables.$vertical-nav-floating-navbar-top;
}
}
#{$header} {
@if variables.$layout-vertical-nav-navbar-is-contained {
border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
}
background-color: rgb(var(--v-theme-surface));
@extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
}
.navbar-blur#{$header} {
@extend %blurry-bg;
}
}
// !SECTION
// 👉 Layout footer
.layout-footer {
$ele-layout-footer: &;
.footer-content-container {
border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness 0 0;
// 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 {
background-color: rgb(var(--v-theme-surface));
padding-block: 0;
padding-inline: 1.2rem;
@include mixins.elevation(3);
}
}
}
}
}
}
src/styles/desktop/template/base/_default-layout.scss
+19
View File
@@ -0,0 +1,19 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "@/styles/desktop/template/base/placeholders";
@use "./variables";
.layout-vertical-nav,
.layout-horizontal-nav {
ol,
ul {
list-style: none;
}
}
.layout-navbar {
@if variables.$navbar-high-emphasis-text {
@extend %layout-navbar;
}
}
src/styles/desktop/template/base/_index.scss
+43
View File
@@ -0,0 +1,43 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "sass:map";
// Layout
@use "./vertical-nav";
@use "./default-layout";
@use "./default-layout-w-vertical-nav";
// Layouts package
@use "./layouts";
// Components
@use "./components";
// Utilities
@use "./utilities";
// Misc
@use "./misc";
// Dark
@use "./dark";
// libs
@use "./libs/perfect-scrollbar";
a {
color: rgb(var(--v-theme-primary));
text-decoration: none;
}
// Vuetify 3 don't provide margin bottom style like vuetify 2
p {
margin-block-end: 1rem;
}
// Iconify icon size
svg.iconify {
block-size: 1em;
inline-size: 1em;
}
src/styles/desktop/template/base/_layouts.scss
+66
View File
@@ -0,0 +1,66 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "@/styles/desktop/template/configured-variables/template" as variables;
/* ℹ️ This styles extends the existing layout package's styles for handling cases that aren't related to layouts package */
/*
ℹ️ When we use v-layout as immediate first child of `.page-content-container`, it adds display:flex and page doesn't get contained height
*/
// .layout-wrapper.layout-nav-type-vertical {
// &.layout-content-height-fixed {
// .page-content-container {
// > .v-layout:first-child > :not(.v-navigation-drawer):first-child {
// flex-grow: 1;
// block-size: 100%;
// }
// }
// }
// }
.layout-wrapper.layout-nav-type-vertical {
&.layout-content-height-fixed {
.page-content-container {
> .v-layout:first-child {
overflow: hidden;
min-block-size: 100%;
> .v-main {
// overflow-y: auto;
.v-main__wrap > :first-child {
block-size: 100%;
overflow-y: auto;
}
}
}
}
}
}
// ℹ️ Let div/v-layout take full height. E.g. Email App
.layout-wrapper.layout-nav-type-horizontal {
&.layout-content-height-fixed {
> .layout-page-content {
display: flex;
}
}
}
// 👉 Floating navbar styles
@if variables.$vertical-nav-navbar-style == "floating" {
// ℹ️ Add spacing above navbar if navbar is floating (was in %layout-navbar-sticky placeholder)
.layout-wrapper.layout-nav-type-vertical.layout-navbar-sticky {
.layout-navbar {
inset-block-start: variables.$vertical-nav-floating-navbar-top;
}
/*
ℹ️ If it's floating navbar
Add `vertical-nav-floating-navbar-top` as margin top to .layout-page-content
*/
.layout-page-content {
margin-block-start: variables.$vertical-nav-floating-navbar-top;
}
}
}
src/styles/desktop/template/base/_misc.scss
+23
View File
@@ -0,0 +1,23 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
// ℹ️ scrollable-content allows creating fixed header and scrollable content for VNavigationDrawer (Used when perfect scrollbar is used)
.scrollable-content {
&.v-navigation-drawer {
.v-navigation-drawer__content {
display: flex;
overflow: hidden;
flex-direction: column;
}
}
}
// ℹ️ adding styling for code tag
code {
border-radius: 3px;
color: rgb(var(--v-code-color));
font-size: 90%;
font-weight: 400;
padding-block: 0.2em;
padding-inline: 0.4em;
}
src/styles/desktop/template/base/_mixins.scss
+81
View File
@@ -0,0 +1,81 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "sass:map";
@use "@/styles/desktop/template/vuetify/variables.scss" 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);
}
// ℹ️ This mixin is inspired from vuetify for adding hover styles via before pseudo element
@mixin before-pseudo() {
position: relative;
&::before {
position: absolute;
border-radius: inherit;
background: currentcolor;
block-size: 100%;
content: "";
inline-size: 100%;
inset: 0;
opacity: 0;
pointer-events: none;
}
}
@mixin bordered-skin($component, $border-property: "border", $important: false) {
#{$component} {
// background-color: rgb(var(--v-theme-background));
box-shadow: none !important;
#{$border-property}: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) if($important, !important, null);
}
}
// ℹ️ 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));
}
&:hover
#{$selector} {
opacity: calc(var(--v-selected-opacity) + var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
}
&:focus-visible
#{$selector} {
opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
}
@supports not selector(:focus-visible) {
&:focus {
#{$selector} {
opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
}
}
}
}
src/styles/desktop/template/base/_utilities.scss
+142
View File
@@ -0,0 +1,142 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "@/styles/desktop/template/configured-variables/template" as variables;
@use "@/styles/desktop/template/layout/mixins" as layoutsMixins;
$card-spacer-content: 16px;
.demo-space-x {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-block-start: -$card-spacer-content;
& > * {
margin-block-start: $card-spacer-content;
margin-inline-end: $card-spacer-content;
}
}
.demo-space-y {
& > * {
margin-block-end: $card-spacer-content;
&:last-child {
margin-block-end: 0;
}
}
}
// 👉 Card match height
.match-height.v-row {
.v-card {
block-size: 100%;
}
}
// 👉 Whitespace
.whitespace-no-wrap {
white-space: nowrap;
}
// 👉 Colors
/*
ℹ️ Vuetify is applying `.text-white` class to badge icon but don't provide its styles
Moreover, we also use this class in some places
ℹ️ In vuetify 2 with `$color-pack: false` SCSS var config this class was getting generated but this is not the case in v3
ℹ️ We also need !important to get correct color in badge icon
*/
.text-white {
color: #fff !important;
}
.bg-var-theme-background {
background-color: rgba(var(--v-theme-on-background), var(--v-hover-opacity)) !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} {
background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important;
}
}
// 👉 clamp text
.clamp-text {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
.leading-normal {
line-height: normal !important;
}
// 👉 for rtl only
.flip-in-rtl {
@include layoutsMixins.rtl {
transform: scaleX(-1);
}
}
// 👉 Carousel
.carousel-delimiter-top-end {
.v-carousel__controls {
justify-content: end;
block-size: 40px;
inset-block-start: 0;
padding-inline: 1rem;
.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);
&.v-btn--active {
color: #fff;
}
.v-btn__overlay {
opacity: 0;
}
}
}
@each $color-name in variables.$theme-colors-name {
&.dots-active-#{$color-name} {
.v-carousel__controls {
.v-btn--active {
color: rgb(var(--v-theme-#{$color-name})) !important;
}
}
}
}
}
.v-timeline-item {
.app-timeline-title {
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
font-size: 16px;
font-weight: 500;
line-height: 1.3125rem;
}
.app-timeline-meta {
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
font-size: 12px;
line-height: 0.875rem;
}
.app-timeline-text {
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
font-size: 14px;
line-height: 1.25rem;
}
}
src/styles/desktop/template/base/_utils.scss
+93
View File
@@ -0,0 +1,93 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "sass:map";
@use "sass:list";
@use "@/styles/desktop/template/configured-variables/template" as variables;
// Thanks: https://css-tricks.com/snippets/sass/deep-getset-maps/
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map.get($map, $key);
}
@return $map;
}
@function map-deep-set($map, $keys, $value) {
$maps: ($map,);
$result: null;
// If the last key is a map already
// Warn the user we will be overriding it with $value
@if type-of(nth($keys, -1)) == "map" {
@warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
}
// If $keys is a single key
// Just merge and return
@if length($keys) == 1 {
@return map-merge($map, ($keys: $value));
}
// Loop from the first to the second to last key from $keys
// Store the associated map to this key in the $maps list
// If the key doesn't exist, throw an error
@for $i from 1 through length($keys) - 1 {
$current-key: list.nth($keys, $i);
$current-map: list.nth($maps, -1);
$current-get: map.get($current-map, $current-key);
@if not $current-get {
@error "Key `#{$key}` doesn't exist at current level in map.";
}
$maps: list.append($maps, $current-get);
}
// Loop from the last map to the first one
// Merge it with the previous one
@for $i from length($maps) through 1 {
$current-map: list.nth($maps, $i);
$current-key: list.nth($keys, $i);
$current-val: if($i == list.length($maps), $value, $result);
$result: map.map-merge($current-map, ($current-key: $current-val));
}
// Return result
@return $result;
}
// font size utility classes
@each $name, $size in variables.$font-sizes {
.text-#{$name} {
font-size: $size;
line-height: map.get(variables.$font-line-height, $name);
}
}
// truncate utility class
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// gap utility class
@each $name, $size in variables.$gap {
.gap-#{$name} {
gap: $size;
}
.gap-x-#{$name} {
column-gap: $size;
}
.gap-y-#{$name} {
row-gap: $size;
}
}
.list-none {
list-style-type: none;
}
src/styles/desktop/template/base/_variables.scss
+189
View File
@@ -0,0 +1,189 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "vuetify/lib/styles/tools/functions" as *;
@forward "../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,
);
@use "@/styles/desktop/template/layout/variables" as *;
// 👉 Default layout
$navbar-high-emphasis-text: true !default;
// @forward "@layouts/styles/variables" with (
// $layout-vertical-nav-width: 350px !default,
// );
$theme-colors-name: (
"primary",
"secondary",
"error",
"info",
"success",
"warning"
) !default;
// 👉 Default layout with vertical nav
$default-layout-with-vertical-nav-navbar-footer-roundness: 10px !default;
// 👉 Vertical nav
$vertical-nav-background-color-rgb: var(--v-theme-background) !default;
$vertical-nav-background-color: rgb(#{$vertical-nav-background-color-rgb}) !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: 1rem !default;
$vertical-nav-horizontal-padding: 0.75rem !default;
// Vertical nav header height. Mostly we will align it with navbar height;
$vertical-nav-header-height: $layout-vertical-nav-navbar-height !default;
$vertical-nav-navbar-elevation: 3 !default;
$vertical-nav-navbar-style: "elevated" !default; // options: elevated, floating
$vertical-nav-floating-navbar-top: 1rem !default;
// Vertical nav header padding
$vertical-nav-header-padding: 1rem $vertical-nav-horizontal-padding !default;
$vertical-nav-header-inline-spacing: $vertical-nav-horizontal-spacing !default;
// Move logo when vertical nav is mini (collapsed but not hovered)
$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px !default;
// Space between logo and title
$vertical-nav-header-logo-title-spacing: 0.9rem !default;
// Section title margin top (when its not first child)
$vertical-nav-section-title-mt: 1.5rem !default;
// Section title margin bottom
$vertical-nav-section-title-mb: 0.5rem !default;
// Vertical nav icons
$vertical-nav-items-icon-size: 1.5rem !default;
$vertical-nav-items-nested-icon-size: 0.9rem !default;
$vertical-nav-items-icon-margin-inline-end: 0.5rem !default;
// Transition duration for nav group arrow
$vertical-nav-nav-group-arrow-transition-duration: 0.15s !default;
// Timing function for nav group arrow
$vertical-nav-nav-group-arrow-transition-timing-function: ease-in-out !default;
// 👉 Horizontal nav
/*
❗ Heads up
==================
Here we assume we will always use shorthand property which will apply same padding on four side
This is because this have been used as value of top property by `.popper-content`
*/
$horizontal-nav-padding: 0.6875rem !default;
// Gap between top level horizontal nav items
$horizontal-nav-top-level-items-gap: 4px !default;
// Horizontal nav icons
$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;
// ℹ️ 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;
// ℹ️ 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;
// 👉 Plugins
$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35) !default;
// 👉 Vuetify
// Used in src/@core/scss/base/libs/vuetify/_overrides.scss
$vuetify-reduce-default-compact-button-icon-size: true !default;
// 👉 Custom variables
// for utility classes
$font-sizes: () !default;
$font-sizes: map-deep-merge(
(
"xs": 0.75rem,
"sm": 0.875rem,
"base": 1rem,
"lg": 1.125rem,
"xl": 1.25rem,
"2xl": 1.5rem,
"3xl": 1.875rem,
"4xl": 2.25rem,
"5xl": 3rem,
"6xl": 3.75rem,
"7xl": 4.5rem,
"8xl": 6rem,
"9xl": 8rem
),
$font-sizes
);
// line height
$font-line-height: () !default;
$font-line-height: map-deep-merge(
(
"xs": 1rem,
"sm": 1.25rem,
"base": 1.5rem,
"lg": 1.75rem,
"xl": 1.75rem,
"2xl": 2rem,
"3xl": 2.25rem,
"4xl": 2.5rem,
"5xl": 1,
"6xl": 1,
"7xl": 1,
"8xl": 1,
"9xl": 1
),
$font-line-height
);
// gap utility class
$gap: () !default;
$gap: map-deep-merge(
(
"0": 0,
"1": 0.25rem,
"2": 0.5rem,
"3": 0.75rem,
"4": 1rem,
"5": 1.25rem,
"6":1.5rem,
"7": 1.75rem,
"8": 2rem,
"9": 2.25rem,
"10": 2.5rem,
"11": 2.75rem,
"12": 3rem,
"14": 3.5rem,
"16": 4rem,
"20": 5rem,
"24": 6rem,
"28": 7rem,
"32": 8rem,
"36": 9rem,
"40": 10rem,
"44": 11rem,
"48": 12rem,
"52": 13rem,
"56": 14rem,
"60": 15rem,
"64": 16rem,
"72": 18rem,
"80": 20rem,
"96": 24rem
),
$gap
);
src/styles/desktop/template/base/_vertical-nav.scss
+253
View File
@@ -0,0 +1,253 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "./placeholders" as *;
@use "@/styles/desktop/template/template/placeholders" as *;
@use "@/styles/desktop/template/layout/mixins" as layoutsMixins;
@use "@/styles/desktop/template/configured-variables/template" as variables;
@use "./mixins" as mixins;
@use "vuetify/lib/styles/tools/states" as vuetifyStates;
.layout-nav-type-vertical {
// 👉 Layout Vertical nav
.layout-vertical-nav {
$sl-layout-nav-type-vertical: &;
@extend %nav;
@at-root {
// ℹ️ Add styles for collapsed vertical nav
.layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}.hovered {
@include mixins.elevation(6);
}
}
background-color: variables.$vertical-nav-background-color;
// 👉 Nav header
.nav-header {
overflow: hidden;
padding: variables.$vertical-nav-header-padding;
margin-inline: variables.$vertical-nav-header-inline-spacing;
min-block-size: variables.$vertical-nav-header-height;
// TEMPLATE: Check if we need to move this to master
.app-logo {
flex-shrink: 0;
transition: transform 0.25s ease-in-out;
@at-root {
// Move logo a bit to align center with the icons in vertical nav mini variant
.layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}:not(.hovered) .nav-header .app-logo {
transform: translateX(variables.$vertical-nav-header-logo-translate-x-when-vertical-nav-mini);
@include layoutsMixins.rtl {
transform: translateX(-(variables.$vertical-nav-header-logo-translate-x-when-vertical-nav-mini));
}
}
}
}
.app-title {
margin-inline-start: variables.$vertical-nav-header-logo-title-spacing;
}
.header-action {
@extend %nav-header-action;
}
}
// 👉 Nav items shadow
.vertical-nav-items-shadow {
position: absolute;
z-index: 1;
background:
linear-gradient(
rgb(#{variables.$vertical-nav-background-color-rgb}) 5%,
rgba(#{variables.$vertical-nav-background-color-rgb}, 75%) 45%,
rgba(#{variables.$vertical-nav-background-color-rgb}, 20%) 80%,
transparent
);
block-size: 55px;
inline-size: 100%;
inset-block-start: calc(#{variables.$vertical-nav-header-height} - 2px);
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease-in-out;
will-change: opacity;
@include layoutsMixins.rtl {
transform: translateX(8px);
}
}
&.scrolled {
.vertical-nav-items-shadow {
opacity: 1;
}
}
.ps__rail-y {
// ℹ️ Setting z-index: 1 will make perfect scrollbar thumb appear on top of vertical nav items shadow
z-index: 1;
}
// 👉 Nav section title
.nav-section-title {
@extend %vertical-nav-item;
@extend %vertical-nav-section-title;
margin-block-end: variables.$vertical-nav-section-title-mb;
&:not(:first-child) {
margin-block-start: variables.$vertical-nav-section-title-mt;
}
.placeholder-icon {
margin-inline: auto;
}
}
// Nav item badge
.nav-item-badge {
@extend %vertical-nav-item-badge;
}
// 👉 Nav group & Link
.nav-link,
.nav-group {
overflow: hidden;
> :first-child {
@extend %vertical-nav-item;
@extend %vertical-nav-item-interactive;
}
.nav-item-icon {
@extend %vertical-nav-items-icon;
}
&.disabled {
opacity: var(--v-disabled-opacity);
pointer-events: none;
}
}
// 👉 Vertical nav link
.nav-link {
@extend %nav-link;
> .router-link-exact-active {
@extend %nav-link-active;
}
> a {
// Adds before psudo element to style hover state
@include mixins.before-pseudo;
// Adds vuetify states
@include vuetifyStates.states($active: false);
}
}
// 👉 Vertical nav group
.nav-group {
// Reduce the size of icon if link/group is inside group
.nav-group,
.nav-link {
.nav-item-icon {
@extend %vertical-nav-items-nested-icon;
}
}
// Hide icons after 2nd level
& .nav-group {
.nav-link,
.nav-group {
.nav-item-icon {
@extend %vertical-nav-items-icon-after-2nd-level;
}
}
}
.nav-group-arrow {
flex-shrink: 0;
transform-origin: center;
transition: transform variables.$vertical-nav-nav-group-arrow-transition-duration variables.$vertical-nav-nav-group-arrow-transition-timing-function;
will-change: transform;
}
// Rotate arrow icon if group is opened
&.open {
> .nav-group-label .nav-group-arrow {
transform: rotateZ(90deg);
}
}
// Nav group label
> :first-child {
// Adds before psudo element to style hover state
@include mixins.before-pseudo;
// Adds vuetify states
@include vuetifyStates.states($active: false);
}
// Active & open states for nav group label
&.active,
&.open {
> :first-child {
@extend %vertical-nav-group-open-active;
}
}
}
}
}
// SECTION: Transitions
.vertical-nav-section-title-enter-active,
.vertical-nav-section-title-leave-active {
transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
.vertical-nav-section-title-enter-from,
.vertical-nav-section-title-leave-to {
opacity: 0;
transform: translateX(15px);
@include layoutsMixins.rtl {
transform: translateX(-15px);
}
}
.transition-slide-x-enter-active,
.transition-slide-x-leave-active {
transition: opacity 0.1s ease-in-out, transform 0.12s ease-in-out;
}
.transition-slide-x-enter-from,
.transition-slide-x-leave-to {
opacity: 0;
transform: translateX(-15px);
@include layoutsMixins.rtl {
transform: translateX(15px);
}
}
.vertical-nav-app-title-enter-active,
.vertical-nav-app-title-leave-active {
transition: opacity 0.1s ease-in-out, transform 0.12s ease-in-out;
}
.vertical-nav-app-title-enter-from,
.vertical-nav-app-title-leave-to {
opacity: 0;
transform: translateX(-15px);
@include layoutsMixins.rtl {
transform: translateX(15px);
}
}
// !SECTION
src/styles/desktop/template/base/libs/_perfect-scrollbar.scss
+38
View File
@@ -0,0 +1,38 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
$ps-size: 0.25rem;
$ps-hover-size: 0.375rem;
$ps-track-size: 0.5rem;
.ps__thumb-y {
inline-size: $ps-size;
inset-inline-end: 0.0625rem;
}
.ps__thumb-x {
block-size: $ps-size !important;
}
.ps__rail-x {
background: transparent !important;
block-size: $ps-track-size;
}
.ps__rail-y {
background: transparent !important;
inline-size: $ps-track-size !important;
inset-inline-end: 0.125rem !important;
inset-inline-start: unset !important;
}
.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;
}
.ps__thumb-x,
.ps__thumb-y {
background-color: rgb(var(--v-theme-perfect-scrollbar-thumb)) !important;
}
src/styles/desktop/template/base/libs/vuetify/_index.scss
+4
View File
@@ -0,0 +1,4 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "./overrides";
src/styles/desktop/template/base/libs/vuetify/_overrides.scss
+285
View File
@@ -0,0 +1,285 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "@/styles/desktop/template/base/utils";
@use "@/styles/desktop/template/configured-variables/template" as variables;
// 👉 Application
// ℹ️ 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);
}
// 👉 Typography
h1,
h2,
h3,
h4,
h5,
h6,
.text-h1,
.text-h2,
.text-h3,
.text-h4,
.text-h5,
.text-h6,
.text-button,
.text-overline,
.v-card-title {
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
}
.v-application,
.text-body-1,
.text-body-2,
.text-subtitle-1,
.text-subtitle-2 {
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
}
// 👉 Grid
// Remove margin-bottom of v-input_details inside grid (validation error message)
.v-row {
.v-col,
[class^="v-col-*"] {
.v-input__details {
margin-block-end: 0;
}
}
}
// 👉 Button
@if variables.$vuetify-reduce-default-compact-button-icon-size {
.v-btn--density-compact.v-btn--size-default {
.v-btn__content > svg {
block-size: 22px;
font-size: 22px;
inline-size: 22px;
}
}
}
// 👉 Card
// Removes padding-top for immediately placed v-card-text after itself
.v-card-text {
& + & {
padding-block-start: 0 !important;
}
}
// 👉 Checkbox & Radio Ripple
.v-checkbox.v-input,
.v-switch.v-input {
--v-input-control-height: auto;
flex: unset;
}
.v-selection-control--density-comfortable {
&.v-checkbox-btn,
&.v-radio,
&.v-radio-btn {
.v-selection-control__wrapper {
margin-inline-start: -0.5625rem;
}
}
}
.v-selection-control--density-compact {
&.v-radio,
&.v-radio-btn,
&.v-checkbox-btn {
.v-selection-control__wrapper {
margin-inline-start: -0.3125rem;
}
}
}
.v-selection-control--density-default {
&.v-checkbox-btn,
&.v-radio,
&.v-radio-btn {
.v-selection-control__wrapper {
margin-inline-start: -0.6875rem;
}
}
}
.v-radio-group {
.v-selection-control-group {
.v-radio:not(:last-child) {
margin-inline-end: 0.9rem;
}
}
}
/*
👉 Tabs
Disable tab transition
This is for tabs where we don't have card wrapper to tabs and have multiple cards as tab content.
This class will disable transition and adds `overflow: unset` on `VWindow` to allow spreading shadow
*/
.disable-tab-transition {
overflow: unset !important;
.v-window__container {
block-size: auto !important;
}
.v-window-item:not(.v-window-item--active) {
display: none !important;
}
.v-window__container .v-window-item {
transform: none !important;
}
}
// 👉 List
.v-list {
// Set icons opacity to .87
.v-list-item__prepend > .v-icon,
.v-list-item__append > .v-icon {
opacity: var(--v-high-emphasis-opacity);
}
}
// 👉 Card list
/*
ℹ️ Custom class
Remove list spacing inside card
This is because card title gets padding of 20px and list item have padding of 16px. Moreover, list container have padding-bottom as well.
*/
.card-list {
--v-card-list-gap: 20px;
&.v-list {
padding-block: 0;
}
.v-list-item {
min-block-size: unset;
min-block-size: auto !important;
padding-block: 0 !important;
padding-inline: 0 !important;
> .v-ripple__container {
opacity: 0;
}
&:not(:last-child) {
padding-block-end: var(--v-card-list-gap) !important;
}
}
.v-list-item:hover,
.v-list-item:focus,
.v-list-item:active,
.v-list-item.active {
> .v-list-item__overlay {
opacity: 0 !important;
}
}
}
// 👉 Divider
.v-divider {
color: rgb(var(--v-border-color));
}
// 👉 DataTable
// 👉 DataTable
.v-data-table {
/* stylelint-disable-next-line no-descending-specificity */
.v-checkbox-btn .v-selection-control__wrapper {
margin-inline-start: 0 !important;
}
.v-selection-control {
display: flex !important;
}
.v-pagination {
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
}
}
.v-data-table-footer {
margin-block-start: 1rem;
}
// 👉 v-field
.v-field:hover .v-field__outline {
--v-field-border-opacity: var(--v-medium-emphasis-opacity);
}
// 👉 VLabel
.v-label {
opacity: 1 !important;
&:not(.v-field-label--floating) {
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
}
}
// 👉 Overlay
.v-overlay__scrim,
.v-navigation-drawer__scrim {
background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity)) !important;
opacity: 1 !important;
}
// 👉 VMessages
.v-messages {
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
opacity: 1;
}
// 👉 Alert close btn
.v-alert__close {
.v-btn--icon .v-icon {
--v-icon-size-multiplier: 1.5;
}
}
// 👉 Badge icon alignment
.v-badge__badge {
display: flex;
align-items: center;
}
// 👉 Btn focus outline style removed
.v-btn:focus-visible::after {
opacity: 0 !important;
}
// .v-select chip spacing for slot
.v-input:not(.v-select--chips) .v-select__selection {
.v-chip {
margin-block: 2px var(--select-chips-margin-bottom);
}
}
// 👉 VCard and VList subtitle color
.v-card-subtitle,
.v-list-item-subtitle {
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
}
// 👉 placeholders
.v-field__input {
@at-root {
& input::placeholder,
input#{&}::placeholder,
textarea#{&}::placeholder {
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
opacity: 1 !important;
}
}
}
src/styles/desktop/template/base/libs/vuetify/_variables.scss
+53
View File
@@ -0,0 +1,53 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
// 👉 Shadow opacities
$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);
// 👉 Card transition properties
$card-transition-property-custom: box-shadow, opacity;
@forward "vuetify/settings" with (
// 👉 General settings
$color-pack: false !default,
// 👉 Shadow opacity
$shadow-key-umbra-opacity: $shadow-key-umbra-opacity-custom !default,
$shadow-key-penumbra-opacity: $shadow-key-penumbra-opacity-custom !default,
$shadow-key-ambient-opacity: $shadow-key-ambient-opacity-custom !default,
// 👉 Card
$card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
$card-elevation: 6 !default,
$card-title-line-height: 1.6 !default,
$card-actions-min-height: unset !default,
$card-text-padding: 1.25rem !default,
$card-item-padding: 1.25rem !default,
$card-actions-padding: 0 12px 12px !default,
$card-transition-property: $card-transition-property-custom !default,
$card-subtitle-opacity: 1 !default,
// 👉 Expansion Panel
$expansion-panel-active-title-min-height: 48px !default,
// 👉 List
$list-item-icon-margin-end: 16px !default,
$list-item-icon-margin-start: 16px !default,
$list-item-subtitle-opacity: 1 !default,
// 👉 Tooltip
$tooltip-background-color: rgba(59, 55, 68, 0.9) !default,
$tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
$tooltip-font-size: 0.75rem !default,
$button-icon-density: ("default": 2, "comfortable": 0, "compact": -1) !default,
// 👉 VTimeline
$timeline-dot-size: 34px !default,
// 👉 VOverlay
$overlay-opacity: 1 !default,
)
;
src/styles/desktop/template/base/placeholders/_default-layout-vertical-nav.scss
+49
View File
@@ -0,0 +1,49 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "@/styles/desktop/template/configured-variables/template" as variables;
@use "./misc";
@use "@/styles/desktop/template/base/mixins";
%default-layout-vertical-nav-scrolled-sticky-elevated-nav {
background-color: rgb(var(--v-theme-surface));
}
%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
@include mixins.elevation(variables.$vertical-nav-navbar-elevation);
// If navbar is contained => Squeeze navbar content on scroll
@if variables.$layout-vertical-nav-navbar-is-contained {
padding-inline: 1.2rem;
}
}
%default-layout-vertical-nav-floating-navbar-overlay {
isolation: isolate;
&::after {
position: absolute;
z-index: -1;
/* stylelint-disable property-no-vendor-prefix */
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
/* stylelint-enable */
background:
linear-gradient(
180deg,
rgba(var(--v-theme-background), 70%) 44%,
rgba(var(--v-theme-background), 43%) 73%,
rgba(var(--v-theme-background), 0%)
);
background-repeat: repeat;
block-size: calc(variables.$layout-vertical-nav-navbar-height + variables.$vertical-nav-floating-navbar-top + 0.5rem);
content: "";
inset-block-start: -(variables.$vertical-nav-floating-navbar-top);
inset-inline-end: 0;
inset-inline-start: 0;
/* stylelint-disable property-no-vendor-prefix */
-webkit-mask: linear-gradient(black, black 18%, transparent 100%);
mask: linear-gradient(black, black 18%, transparent 100%);
/* stylelint-enable */
}
}
src/styles/desktop/template/base/placeholders/_default-layout.scss
+6
View File
@@ -0,0 +1,6 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
%layout-navbar {
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
}
src/styles/desktop/template/base/placeholders/_index.scss
+8
View File
@@ -0,0 +1,8 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@forward "./vertical-nav";
@forward "./nav";
@forward "./default-layout";
@forward "./default-layout-vertical-nav";
@forward "./misc";
src/styles/desktop/template/base/placeholders/_misc.scss
+10
View File
@@ -0,0 +1,10 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
%blurry-bg {
/* stylelint-disable property-no-vendor-prefix */
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
/* stylelint-enable */
background-color: rgb(var(--v-theme-surface), 0.9);
}
src/styles/desktop/template/base/placeholders/_nav.scss
+37
View File
@@ -0,0 +1,37 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
@use "@/styles/desktop/template/base/mixins";
// ℹ️ This is common style that needs to be applied to both navs
%nav {
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
.nav-item-title {
letter-spacing: 0.15px;
}
.nav-section-title {
letter-spacing: 0.4px;
}
}
/*
Active nav link styles for horizontal & vertical nav
For horizontal nav it will be only applied to top level nav items
For vertical nav it will be only applied to nav links (not nav groups)
*/
%nav-link-active {
background-color: rgb(var(--v-theme-primary));
color: rgb(var(--v-theme-on-primary));
@include mixins.elevation(3);
}
%nav-link {
a {
color: inherit;
}
}
src/styles/desktop/template/base/placeholders/_vertical-nav.scss
+84
View File
@@ -0,0 +1,84 @@
/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "@/styles/desktop/template/base/mixins";
@use "@/styles/desktop/template/configured-variables/template" as variables;
@use "vuetify/lib/styles/tools/states" as vuetifyStates;
%nav-header-action {
font-size: 1.25rem;
}
// Nav items styles (including section title)
%vertical-nav-item {
margin-block: 0;
margin-inline: variables.$vertical-nav-horizontal-spacing;
padding-block: 0;
padding-inline: variables.$vertical-nav-horizontal-padding;
white-space: nowrap;
}
// This is same as `%vertical-nav-item` except section title is excluded
%vertical-nav-item-interactive {
border-radius: 0.4rem;
block-size: 2.75rem;
/*
ℹ️ We will use `margin-block-end` instead of `margin-block` to give more space for shadow to appear.
With `margin-block`, due to small space (space gets divided between top & bottom) shadow cuts
*/
margin-block-end: 0.375rem;
}
// Common styles for nav item icon styles
// ℹ️ Nav group's children icon styles are not here (Adjusts height, width & margin)
%vertical-nav-items-icon {
flex-shrink: 0;
font-size: variables.$vertical-nav-items-icon-size;
margin-inline-end: variables.$vertical-nav-items-icon-margin-inline-end;
}
// ℹ️ Icon styling for icon nested inside another nav item (2nd level)
%vertical-nav-items-nested-icon {
/*
ℹ️ `margin-inline` will be (normal icon font-size - small icon font-size) / 2
(1.5rem - 0.9rem) / 2 => 0.6rem / 2 => 0.3rem
*/
$vertical-nav-items-nested-icon-margin-inline: calc((variables.$vertical-nav-items-icon-size - variables.$vertical-nav-items-nested-icon-size) / 2);
font-size: variables.$vertical-nav-items-nested-icon-size;
margin-inline-end: $vertical-nav-items-nested-icon-margin-inline + variables.$vertical-nav-items-icon-margin-inline-end;
margin-inline-start: $vertical-nav-items-nested-icon-margin-inline;
}
%vertical-nav-items-icon-after-2nd-level {
visibility: hidden;
}
// Open & Active nav group styles
%vertical-nav-group-open-active {
@include mixins.selected-states("&::before");
}
// Section title
%vertical-nav-section-title {
// ℹ️ Setting height will prevent jerking when text & icon is toggled
block-size: 1.5rem;
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
font-size: 0.75rem;
text-transform: uppercase;
}
// Vertical nav item badge styles
%vertical-nav-item-badge {
display: inline-block;
border-radius: 1.5rem;
font-size: 0.8em;
font-weight: 500;
line-height: 1;
padding-block: 0.25em;
padding-inline: 0.55em;
text-align: center;
vertical-align: baseline;
white-space: nowrap;
}
src/styles/desktop/template/configured-variables/_template.scss
+1
View File
@@ -0,0 +1 @@
@forward "../template/variables";
src/styles/desktop/template/configured-variables/_vuetify.scss
+1
View File
@@ -0,0 +1 @@
@forward "../vuetify/variables";
src/styles/desktop/template/layout/_classes.scss
+6
View File
@@ -0,0 +1,6 @@
/** Materio Template layout styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
.cursor-pointer {
cursor: pointer;
}
src/styles/desktop/template/layout/_default-layout.scss
+37
View File
@@ -0,0 +1,37 @@
/** Materio Template layout styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
// These are styles which are both common in layout w/ vertical nav & horizontal nav
@use "./rtl";
@use "./placeholders";
@use "./mixins";
@use "@/styles/desktop/template/configured-variables/template" as variables;
html,
body {
min-block-size: 100%;
}
.layout-page-content {
@include mixins.boxed-content(true);
flex-grow: 1;
padding-block: 1.5rem;
}
.layout-footer {
.footer-content-container {
block-size: variables.$layout-vertical-nav-footer-height;
}
.layout-footer-sticky & {
position: sticky;
inset-block-end: 0;
will-change: transform;
}
.layout-footer-hidden & {
display: none;
}
}
src/styles/desktop/template/layout/_global.scss
+13
View File
@@ -0,0 +1,13 @@
/** Materio Template layout styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
*,
::before,
::after {
box-sizing: inherit;
background-repeat: no-repeat;
}
html {
box-sizing: border-box;
}
src/styles/desktop/template/layout/_mixins.scss
+31
View File
@@ -0,0 +1,31 @@
/** Materio Template layout styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "./placeholders";
@use "@/styles/desktop/template/configured-variables/template" as variables;
@mixin rtl {
@if variables.$enable-rtl-styles {
[dir="rtl"] & {
@content;
}
}
}
@mixin boxed-content($nest-selector: false) {
& {
@extend %boxed-content-spacing;
@at-root {
@if $nest-selector == false {
.layout-content-width-boxed#{&} {
@extend %boxed-content;
}
} @else {
.layout-content-width-boxed & {
@extend %boxed-content;
}
}
}
}
}
src/styles/desktop/template/layout/_placeholders.scss
+55
View File
@@ -0,0 +1,55 @@
/** Materio Template layout styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
// placeholders
@use "@/styles/desktop/template/configured-variables/template" as variables;
%boxed-content {
@at-root #{&}-spacing {
padding-inline: 1.5rem;
}
inline-size: 100%;
margin-inline: auto;
max-inline-size: variables.$layout-boxed-content-width;
}
%layout-navbar-hidden {
display: none;
}
// ℹ️ We created this placeholder even it is being used in just layout w/ vertical nav because in future we might apply style to both navbar & horizontal nav separately
%layout-navbar-sticky {
position: sticky;
inset-block-start: 0;
// will-change: transform;
// inline-size: 100%;
}
%style-scroll-bar {
/* width */
&::-webkit-scrollbar {
background: rgb(var(--v-theme-surface));
block-size: 8px;
border-end-end-radius: 14px;
border-start-end-radius: 14px;
inline-size: 4px;
}
/* Track */
&::-webkit-scrollbar-track {
background: transparent;
}
/* Handle */
&::-webkit-scrollbar-thumb {
border-radius: 0.5rem;
background: rgb(var(--v-theme-perfect-scrollbar-thumb));
}
&::-webkit-scrollbar-corner {
display: none;
}
}
src/styles/desktop/template/layout/_rtl.scss
+10
View File
@@ -0,0 +1,10 @@
/** Materio Template layout styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "./mixins";
.layout-vertical-nav .nav-group-arrow {
@include mixins.rtl {
transform: rotate(180deg);
}
}
src/styles/desktop/template/layout/_variables.scss
+31
View File
@@ -0,0 +1,31 @@
/** Materio Template layout styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
// @use "@styles/style.scss";
// 👉 Vertical nav
$layout-vertical-nav-z-index: 12 !default;
$layout-vertical-nav-width: 260px !default;
$layout-vertical-nav-collapsed-width: 80px !default;
// 👉 Horizontal nav
$layout-horizontal-nav-z-index: 11 !default;
$layout-horizontal-nav-navbar-height: 64px !default;
// 👉 Navbar
$layout-vertical-nav-navbar-height: 64px !default;
$layout-vertical-nav-navbar-is-contained: true !default;
$layout-vertical-nav-layout-navbar-z-index: 11 !default;
$layout-horizontal-nav-layout-navbar-z-index: 11 !default;
// 👉 Main content
$layout-boxed-content-width: 1440px !default;
// 👉Footer
$layout-vertical-nav-footer-height: 56px !default;
// 👉 Layout overlay
$layout-overlay-z-index: 11 !default;
// 👉 RTL
$enable-rtl-styles: true !default;
src/styles/desktop/template/layout/component/index.scss
+5
View File
@@ -0,0 +1,5 @@
/** Materio Template layout styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "./vertical-nav-layout";
@use "./vertical-nav";
src/styles/desktop/template/layout/component/vertical-nav-layout.scss
+102
View File
@@ -0,0 +1,102 @@
/** Materio Template layout styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "@/styles/desktop/template/configured-variables/template" as variables;
@use "@/styles/desktop/template/layout/placeholders";
@use "@/styles/desktop/template/layout/mixins";
.layout-wrapper.layout-nav-type-vertical {
block-size: 100%;
.layout-content-wrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
min-block-size: calc(var(--vh, 1vh) * 100);
transition: padding-inline-start 0.2s ease-in-out;
will-change: padding-inline-start;
}
.layout-navbar {
z-index: variables.$layout-vertical-nav-layout-navbar-z-index;
.navbar-content-container {
block-size: variables.$layout-vertical-nav-navbar-height;
}
@at-root {
.layout-wrapper.layout-nav-type-vertical {
.layout-navbar {
@if variables.$layout-vertical-nav-navbar-is-contained {
@include mixins.boxed-content;
} @else {
.navbar-content-container {
@include mixins.boxed-content;
}
}
}
}
}
}
&.layout-navbar-sticky .layout-navbar {
@extend %layout-navbar-sticky;
}
&.layout-navbar-hidden .layout-navbar {
@extend %layout-navbar-hidden;
}
// 👉 Footer
.layout-footer {
@include mixins.boxed-content;
}
// 👉 Layout overlay
.layout-overlay {
position: fixed;
z-index: variables.$layout-overlay-z-index;
background-color: rgb(0 0 0 / 60%);
cursor: pointer;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease-in-out;
will-change: transform;
&.visible {
opacity: 1;
pointer-events: auto;
}
}
&:not(.layout-overlay-nav) .layout-content-wrapper {
padding-inline-start: variables.$layout-vertical-nav-width;
}
// Adjust right column pl when vertical nav is collapsed
&.layout-vertical-nav-collapsed .layout-content-wrapper {
padding-inline-start: variables.$layout-vertical-nav-collapsed-width;
}
// 👉 Content height fixed
&.layout-content-height-fixed {
.layout-content-wrapper {
max-block-size: calc(var(--vh) * 100);
}
.layout-page-content {
display: flex;
overflow: hidden;
.page-content-container {
inline-size: 100%;
> :first-child {
max-block-size: 100%;
overflow-y: auto;
}
}
}
}
}
src/styles/desktop/template/layout/component/vertical-nav.scss
+75
View File
@@ -0,0 +1,75 @@
/** Materio Template layout styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "@/styles/desktop/template/configured-variables/template" as variables;
@use "@/styles/desktop/template/layout/mixins";
// 👉 Vertical Nav
.layout-vertical-nav {
position: fixed;
z-index: variables.$layout-vertical-nav-z-index;
display: flex;
flex-direction: column;
block-size: 100%;
inline-size: variables.$layout-vertical-nav-width;
inset-block-start: 0;
inset-inline-start: 0;
transition: transform 0.25s ease-in-out, inline-size 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
will-change: transform, inline-size;
.nav-header {
display: flex;
align-items: center;
.header-action {
cursor: pointer;
}
}
.app-title-wrapper {
margin-inline-end: auto;
}
.nav-items {
block-size: 100%;
// ℹ️ We no loner needs this overflow styles as perfect scrollbar applies it
// overflow-x: hidden;
// // ℹ️ We used `overflow-y` instead of `overflow` to mitigate overflow x. Revert back if any issue found.
// overflow-y: auto;
}
.nav-item-title {
overflow: hidden;
margin-inline-end: auto;
text-overflow: ellipsis;
white-space: nowrap;
}
// 👉 Collapsed
.layout-vertical-nav-collapsed & {
&:not(.hovered) {
inline-size: variables.$layout-vertical-nav-collapsed-width;
}
}
// 👉 Overlay nav
&.overlay-nav {
&:not(.visible) {
transform: translateX(-#{variables.$layout-vertical-nav-width});
@include mixins.rtl {
transform: translateX(variables.$layout-vertical-nav-width);
}
}
}
}
.layout-vertical-nav {
.nav-link a {
display: flex;
align-items: center;
cursor: pointer;
}
}
src/styles/desktop/template/layout/index.scss
+6
View File
@@ -0,0 +1,6 @@
/** Materio Template layout styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "./_global";
@use "vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.min.css";
@use "./_classes";
src/styles/desktop/template/template/_components.scss
+201
View File
@@ -0,0 +1,201 @@
/** Materio Template styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
@use "@/styles/desktop/template/configured-variables/template" as variables;
@use "./mixins";
@use "@/styles/desktop/template/base/mixins" as mixins_base;
// 👉 Alert
.v-alert {
.v-alert__close {
.v-icon {
block-size: 20px !important;
font-size: 20px !important;
inline-size: 20px !important;
}
}
&: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-alert-title {
line-height: 1.5rem;
margin-block-end: 0.25rem;
}
}
// 👉 Avatar font-size
.v-avatar {
@include mixins.avatar-font-sizes($map: variables.$avatar-font-sizes);
}
// 👉 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;
}
.v-chip.v-chip--density-comfortable {
line-height: 1;
}
// 👉 Expansion Panel
.v-expansion-panel {
.v-expansion-panel-text {
font-size: 1rem;
}
}
// 👉 Tooltip
.v-tooltip > .v-overlay__content {
font-weight: 500;
line-height: 0.875rem;
}
// 👉 List
// 👉 Tab with pill support
.v-tabs.v-tabs-pill {
.v-tab.v-btn {
border-radius: 6px !important;
}
}
// 👉 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));
@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);
}
}
}
}
}
// 👉 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 {
background-color: rgb(var(--v-theme-surface)) !important;
&.bg-#{$color-name} {
box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-#{$color-name}));
}
}
}
}
}
// 👉 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 {
.v-btn {
border-radius: 4px;
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
font-size: 14px;
font-weight: 400;
}
}
// 👉 SnackBar
.v-snackbar--variant-elevated {
@include mixins_base.elevation(6);
}
src/styles/desktop/template/template/_mixins.scss
+15
View File
@@ -0,0 +1,15 @@
/** Materio Template styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "vuetify/lib/styles/settings" as vuetify_settings;
@mixin avatar-font-sizes($map: $avatar-sizes) {
@each $sizeName, $multiplier in vuetify_settings.$size-scales {
/* stylelint-disable-next-line scss/no-global-function-names */
$size: map-get($map, $sizeName);
&.v-avatar--size-#{$sizeName} {
font-size: #{$size}px;
}
}
}
src/styles/desktop/template/template/_utilities.scss
+27
View File
@@ -0,0 +1,27 @@
/** 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;
}
// 👉 Pagination small-select dropdown for table
.per-page-select {
margin-block: auto;
.v-field__input {
align-items: center;
padding: 2px;
font-size: 14px;
}
.v-field__append-inner {
align-items: center;
padding: 0;
.v-icon {
margin-inline-start: 0 !important;
}
}
}
src/styles/desktop/template/template/_utils.scss
+44
View File
@@ -0,0 +1,44 @@
/** Materio Template styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "sass:string";
/*
ℹ️ This function is helpful when we have multi dimensional value
Assume we have padding variable `$nav-padding-horizontal: 10px;`
With above variable let's say we use it in some style:
```scss
.selector {
margin-left: $nav-padding-horizontal;
}
```
Now, problem is we can also have value as `$nav-padding-horizontal: 10px 15px;`
In this case above style will be invalid.
This function will extract the left most value from the variable value.
$nav-padding-horizontal: 10px; => 10px;
$nav-padding-horizontal: 10px 15px; => 10px;
This is safe:
```scss
.selector {
margin-left: get-first-value($nav-padding-horizontal);
}
```
*/
@function get-first-value($var) {
$start-at: string.index(#{$var}, " ");
@if $start-at {
@return string.slice(
#{$var},
0,
$start-at
);
} @else {
@return $var;
}
}
src/styles/desktop/template/template/_variables.scss
+36
View File
@@ -0,0 +1,36 @@
/** Materio Template styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "sass:map";
@use "./utils";
$vertical-nav-horizontal-padding-custom: 1.375rem 1rem;
// ℹ️ We created this SCSS var to extract the start padding
// Docs: https://sass-lang.com/documentation/modules/string
// $vertical-nav-horizontal-padding => 0 8px;
// string.index(#{$vertical-nav-horizontal-padding}, " ") + 1 => 2
// string.index(#{$vertical-nav-horizontal-padding}, " ") => 1
// 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;
@forward "../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 1.125rem !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,
);
// 👉 Custom Variables
$avatar-font-sizes: (
"x-small":12,
"small":14,
"default":18,
"large":20,
"x-large":24
) !default;
src/styles/desktop/template/template/index.scss
+11
View File
@@ -0,0 +1,11 @@
/** Materio Template styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "sass:map";
@use "@/styles/desktop/template/base";
// Components
@use "./components";
// Utilities
@use "./utilities";
src/styles/desktop/template/template/placeholders/_index.scss
+5
View File
@@ -0,0 +1,5 @@
/** Materio Template styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@forward "./nav";
@forward "./vertical-nav";
src/styles/desktop/template/template/placeholders/_nav.scss
+11
View File
@@ -0,0 +1,11 @@
/** Materio Template styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
%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;
}
src/styles/desktop/template/template/placeholders/_vertical-nav.scss
+67
View File
@@ -0,0 +1,67 @@
/** Materio Template styles **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
@use "@/styles/desktop/template/configured-variables/template" as variables;
// ℹ️ Add divider around section title
%vertical-nav-section-title {
/*
ℹ️ 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
*/
$divider-gap: 0.625rem;
// Thanks: https://stackoverflow.com/a/62359101/10796681
.title-text {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
column-gap: $divider-gap;
&::before,
&::after {
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
content: "";
}
&::after {
flex: 1 1 auto;
}
&::before {
flex: 0 1 calc(variables.$vertical-nav-horizontal-padding-start - $divider-gap);
margin-inline-start: -#{variables.$vertical-nav-horizontal-padding-start};
}
}
// ℹ️ Update the margin-inline-end when vertical nav is in mini state. We done same for link & group.
@at-root {
.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-section-title {
margin-inline: 4px 0;
}
}
}
%vertical-nav-item-interactive {
// Add pill shape styles
block-size: 2.625rem !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;
// Reduce margin inline end when vertical nav is in collapsed mode and not hovered
.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) & {
margin-inline: 0 5px;
}
}
src/styles/desktop/template/vuetify/variables.scss
+243
View File
@@ -0,0 +1,243 @@
/** 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)),
);
src/styles/desktop/vuetify.css
-226
View File
@@ -1,226 +0,0 @@
/** Vuetify class overrides **/
/** reference: https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/
.v-application__wrap {
min-height: calc(var(--vh, 1vh) * 100);
}
h1,
h2,
h3,
h4,
h5,
h6,
.text-h1,
.text-h2,
.text-h3,
.text-h4,
.text-h5,
.text-h6,
.text-button,
.text-overline,
.v-card-title {
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
}
.v-application,
.text-body-1,
.text-body-2,
.text-subtitle-1,
.text-subtitle-2 {
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
}
.v-row .v-col .v-input__details,
.v-row [class^="v-col-*"] .v-input__details {
margin-block-end: 0;
}
.v-btn--density-compact.v-btn--size-default .v-btn__content > svg {
block-size: 22px;
font-size: 22px;
inline-size: 22px;
}
.v-card-text + .v-card-text {
padding-block-start: 0 !important;
}
.v-checkbox.v-input,
.v-switch.v-input {
--v-input-control-height: auto;
flex: unset;
}
.v-selection-control--density-comfortable.v-checkbox-btn .v-selection-control__wrapper,
.v-selection-control--density-comfortable.v-radio .v-selection-control__wrapper,
.v-selection-control--density-comfortable.v-radio-btn .v-selection-control__wrapper {
margin-inline-start: -.5625rem;
}
.v-selection-control--density-compact.v-radio .v-selection-control__wrapper,
.v-selection-control--density-compact.v-radio-btn .v-selection-control__wrapper,
.v-selection-control--density-compact.v-checkbox-btn .v-selection-control__wrapper {
margin-inline-start: -.3125rem;
}
.v-selection-control--density-default.v-checkbox-btn .v-selection-control__wrapper,
.v-selection-control--density-default.v-radio .v-selection-control__wrapper,
.v-selection-control--density-default.v-radio-btn .v-selection-control__wrapper {
margin-inline-start: -.6875rem;
}
.v-radio-group .v-selection-control-group .v-radio:not(:last-child) {
margin-inline-end: .9rem;
}
.disable-tab-transition {
overflow: unset !important;
}
.disable-tab-transition .v-window__container {
block-size: auto !important;
}
.disable-tab-transition .v-window-item:not(.v-window-item--active) {
display: none !important;
}
.disable-tab-transition .v-window__container .v-window-item {
transform: none !important;
}
.v-list .v-list-item__prepend > .v-icon,
.v-list .v-list-item__append > .v-icon {
opacity: var(--v-high-emphasis-opacity);
}
.card-list {
--v-card-list-gap: 20px;
}
.card-list.v-list {
padding-block: 0;
}
.card-list .v-list-item {
min-block-size: unset;
min-block-size: auto !important;
padding-block: 0 !important;
padding-inline: 0 !important;
}
.card-list .v-list-item > .v-ripple__container {
opacity: 0;
}
.card-list .v-list-item:not(:last-child) {
padding-block-end: var(--v-card-list-gap) !important;
}
.card-list .v-list-item: hover > .v-list-item__overlay,
.card-list .v-list-item:focus > .v-list-item__overlay,
.card-list .v-list-item:active > .v-list-item__overlay,
.card-list .v-list-item.active > .v-list-item__overlay {
opacity: 0 !important;
}
.v-divider {
color: rgb(var(--v-border-color));
}
.v-data-table .v-checkbox-btn .v-selection-control__wrapper {
margin-inline-start: 0 !important;
}
.v-data-table .v-selection-control {
display: flex !important;
}
.v-data-table .v-pagination {
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
}
.v-data-table-footer {
margin-block-start: 1rem;
}
.v-field:hover .v-field__outline {
--v-field-border-opacity: var(--v-medium-emphasis-opacity);
}
.v-label {
opacity: 1 !important;
}
.v-label:not(.v-field-label--floating) {
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
}
.v-messages {
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
opacity: 1;
}
.v-alert__close .v-btn--icon .v-icon {
--v-icon-size-multiplier: 1.5;
}
.v-badge__badge {
display: flex;
align-items: center;
}
.v-btn:focus-visible:after {
opacity: 0 !important;
}
.v-input:not(.v-select--chips) .v-select__selection .v-chip {
margin-block: 2px var(--select-chips-margin-bottom);
}
.v-card-subtitle,
.v-list-item-subtitle {
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
}
.v-field__input input::placeholder,
input.v-field__input::placeholder,
textarea.v-field__input::placeholder {
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
opacity: 1 !important;
}
.v-card-item {
padding: 1.25rem;
}
.v-card-text {
letter-spacing: .0094rem;
padding: 1.25rem;
}
.v-card--variant-elevated {
box-shadow: 0 4px 5px -2px var(--v-shadow-key-umbra-opacity), 0 2px 10px 1px var(--v-shadow-key-penumbra-opacity), 0 2px 16px 1px var(--v-shadow-key-ambient-opacity);
}
.v-card--variant-elevated,
.v-card--variant-flat {
background: rgb(var(--v-theme-surface));
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
}
.v-btn--icon.v-btn--density-default {
width: calc(var(--v-btn-height) + 2px);
height: calc(var(--v-btn-height) + 2px)
}
.v-btn--icon.v-btn--density-comfortable {
width: calc(var(--v-btn-height) + -8px);
height: calc(var(--v-btn-height) + -8px)
}
.v-btn--icon.v-btn--density-compact {
width: calc(var(--v-btn-height) + -12px);
height: calc(var(--v-btn-height) + -12px)
}
vite.config.js
+6
View File
@@ -2,6 +2,7 @@ import fs from 'fs';
import { resolve } from 'path'; import { resolve } from 'path';
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'; import vue from '@vitejs/plugin-vue';
import vuetify from 'vite-plugin-vuetify';
import { VitePWA } from 'vite-plugin-pwa'; import { VitePWA } from 'vite-plugin-pwa';
import git from 'git-rev-sync'; import git from 'git-rev-sync';
@@ -35,6 +36,11 @@ export default defineConfig(async () => {
} }
} }
}), }),
vuetify({
styles: {
configFile: 'styles/desktop/template/configured-variables/_vuetify.scss'
}
}),
VitePWA({ VitePWA({
filename: 'sw.js', filename: 'sw.js',
manifestFilename: 'manifest.json', manifestFilename: 'manifest.json',