From 626325066d4f35e930d13def352403ea05968410 Mon Sep 17 00:00:00 2001 From: MaysWind Date: Fri, 23 Jun 2023 13:23:10 +0800 Subject: [PATCH] code refactor --- package-lock.json | 366 ++++++++++-- package.json | 4 +- src/desktop-main.js | 31 +- src/styles/desktop/base.css | 42 -- src/styles/desktop/font-size-utils.css | 67 --- src/styles/desktop/gap-size-utils.css | 362 ------------ .../desktop/{classess.css => global.scss} | 4 - src/styles/desktop/layout.css | 544 ------------------ .../desktop/template/base/_components.scss | 160 ++++++ src/styles/desktop/template/base/_dark.scss | 19 + .../base/_default-layout-w-vertical-nav.scss | 107 ++++ .../template/base/_default-layout.scss | 19 + src/styles/desktop/template/base/_index.scss | 43 ++ .../desktop/template/base/_layouts.scss | 66 +++ src/styles/desktop/template/base/_misc.scss | 23 + src/styles/desktop/template/base/_mixins.scss | 81 +++ .../desktop/template/base/_utilities.scss | 142 +++++ src/styles/desktop/template/base/_utils.scss | 93 +++ .../desktop/template/base/_variables.scss | 189 ++++++ .../desktop/template/base/_vertical-nav.scss | 253 ++++++++ .../base/libs/_perfect-scrollbar.scss | 38 ++ .../template/base/libs/vuetify/_index.scss | 4 + .../base/libs/vuetify/_overrides.scss | 285 +++++++++ .../base/libs/vuetify/_variables.scss | 53 ++ .../_default-layout-vertical-nav.scss | 49 ++ .../base/placeholders/_default-layout.scss | 6 + .../template/base/placeholders/_index.scss | 8 + .../template/base/placeholders/_misc.scss | 10 + .../template/base/placeholders/_nav.scss | 37 ++ .../base/placeholders/_vertical-nav.scss | 84 +++ .../configured-variables/_template.scss | 1 + .../configured-variables/_vuetify.scss | 1 + .../desktop/template/layout/_classes.scss | 6 + .../template/layout/_default-layout.scss | 37 ++ .../desktop/template/layout/_global.scss | 13 + .../desktop/template/layout/_mixins.scss | 31 + .../template/layout/_placeholders.scss | 55 ++ src/styles/desktop/template/layout/_rtl.scss | 10 + .../desktop/template/layout/_variables.scss | 31 + .../template/layout/component/index.scss | 5 + .../layout/component/vertical-nav-layout.scss | 102 ++++ .../layout/component/vertical-nav.scss | 75 +++ src/styles/desktop/template/layout/index.scss | 6 + .../template/template/_components.scss | 201 +++++++ .../desktop/template/template/_mixins.scss | 15 + .../desktop/template/template/_utilities.scss | 27 + .../desktop/template/template/_utils.scss | 44 ++ .../desktop/template/template/_variables.scss | 36 ++ .../desktop/template/template/index.scss | 11 + .../template/placeholders/_index.scss | 5 + .../template/template/placeholders/_nav.scss | 11 + .../template/placeholders/_vertical-nav.scss | 67 +++ .../desktop/template/vuetify/variables.scss | 243 ++++++++ src/styles/desktop/vuetify.css | 226 -------- vite.config.js | 6 + 55 files changed, 3144 insertions(+), 1310 deletions(-) delete mode 100644 src/styles/desktop/base.css delete mode 100644 src/styles/desktop/font-size-utils.css delete mode 100644 src/styles/desktop/gap-size-utils.css rename src/styles/desktop/{classess.css => global.scss} (76%) delete mode 100644 src/styles/desktop/layout.css create mode 100644 src/styles/desktop/template/base/_components.scss create mode 100644 src/styles/desktop/template/base/_dark.scss create mode 100644 src/styles/desktop/template/base/_default-layout-w-vertical-nav.scss create mode 100644 src/styles/desktop/template/base/_default-layout.scss create mode 100644 src/styles/desktop/template/base/_index.scss create mode 100644 src/styles/desktop/template/base/_layouts.scss create mode 100644 src/styles/desktop/template/base/_misc.scss create mode 100644 src/styles/desktop/template/base/_mixins.scss create mode 100644 src/styles/desktop/template/base/_utilities.scss create mode 100644 src/styles/desktop/template/base/_utils.scss create mode 100644 src/styles/desktop/template/base/_variables.scss create mode 100644 src/styles/desktop/template/base/_vertical-nav.scss create mode 100644 src/styles/desktop/template/base/libs/_perfect-scrollbar.scss create mode 100644 src/styles/desktop/template/base/libs/vuetify/_index.scss create mode 100644 src/styles/desktop/template/base/libs/vuetify/_overrides.scss create mode 100644 src/styles/desktop/template/base/libs/vuetify/_variables.scss create mode 100644 src/styles/desktop/template/base/placeholders/_default-layout-vertical-nav.scss create mode 100644 src/styles/desktop/template/base/placeholders/_default-layout.scss create mode 100644 src/styles/desktop/template/base/placeholders/_index.scss create mode 100644 src/styles/desktop/template/base/placeholders/_misc.scss create mode 100644 src/styles/desktop/template/base/placeholders/_nav.scss create mode 100644 src/styles/desktop/template/base/placeholders/_vertical-nav.scss create mode 100644 src/styles/desktop/template/configured-variables/_template.scss create mode 100644 src/styles/desktop/template/configured-variables/_vuetify.scss create mode 100644 src/styles/desktop/template/layout/_classes.scss create mode 100644 src/styles/desktop/template/layout/_default-layout.scss create mode 100644 src/styles/desktop/template/layout/_global.scss create mode 100644 src/styles/desktop/template/layout/_mixins.scss create mode 100644 src/styles/desktop/template/layout/_placeholders.scss create mode 100644 src/styles/desktop/template/layout/_rtl.scss create mode 100644 src/styles/desktop/template/layout/_variables.scss create mode 100644 src/styles/desktop/template/layout/component/index.scss create mode 100644 src/styles/desktop/template/layout/component/vertical-nav-layout.scss create mode 100644 src/styles/desktop/template/layout/component/vertical-nav.scss create mode 100644 src/styles/desktop/template/layout/index.scss create mode 100644 src/styles/desktop/template/template/_components.scss create mode 100644 src/styles/desktop/template/template/_mixins.scss create mode 100644 src/styles/desktop/template/template/_utilities.scss create mode 100644 src/styles/desktop/template/template/_utils.scss create mode 100644 src/styles/desktop/template/template/_variables.scss create mode 100644 src/styles/desktop/template/template/index.scss create mode 100644 src/styles/desktop/template/template/placeholders/_index.scss create mode 100644 src/styles/desktop/template/template/placeholders/_nav.scss create mode 100644 src/styles/desktop/template/template/placeholders/_vertical-nav.scss create mode 100644 src/styles/desktop/template/vuetify/variables.scss delete mode 100644 src/styles/desktop/vuetify.css diff --git a/package-lock.json b/package-lock.json index a7a92b91..1e2ab17c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -43,8 +43,10 @@ "eslint-plugin-vue": "^9.14.1", "git-rev-sync": "^3.0.2", "postcss-preset-env": "^8.4.1", + "sass": "^1.63.6", "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": { @@ -2448,7 +2450,6 @@ "cpu": [ "arm" ], - "dev": true, "optional": true, "os": [ "android" @@ -2464,7 +2465,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "android" @@ -2480,7 +2480,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "android" @@ -2496,7 +2495,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "darwin" @@ -2512,7 +2510,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "darwin" @@ -2528,7 +2525,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "freebsd" @@ -2544,7 +2540,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "freebsd" @@ -2560,7 +2555,6 @@ "cpu": [ "arm" ], - "dev": true, "optional": true, "os": [ "linux" @@ -2576,7 +2570,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -2592,7 +2585,6 @@ "cpu": [ "ia32" ], - "dev": true, "optional": true, "os": [ "linux" @@ -2608,7 +2600,6 @@ "cpu": [ "loong64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -2624,7 +2615,6 @@ "cpu": [ "mips64el" ], - "dev": true, "optional": true, "os": [ "linux" @@ -2640,7 +2630,6 @@ "cpu": [ "ppc64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -2656,7 +2645,6 @@ "cpu": [ "riscv64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -2672,7 +2660,6 @@ "cpu": [ "s390x" ], - "dev": true, "optional": true, "os": [ "linux" @@ -2688,7 +2675,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "linux" @@ -2704,7 +2690,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "netbsd" @@ -2720,7 +2705,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "openbsd" @@ -2736,7 +2720,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "sunos" @@ -2752,7 +2735,6 @@ "cpu": [ "arm64" ], - "dev": true, "optional": true, "os": [ "win32" @@ -2768,7 +2750,6 @@ "cpu": [ "ia32" ], - "dev": true, "optional": true, "os": [ "win32" @@ -2784,7 +2765,6 @@ "cpu": [ "x64" ], - "dev": true, "optional": true, "os": [ "win32" @@ -2943,7 +2923,7 @@ "version": "0.3.3", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz", "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==", - "dev": true, + "devOptional": true, "dependencies": { "@jridgewell/set-array": "^1.0.1", "@jridgewell/sourcemap-codec": "^1.4.10", @@ -2957,7 +2937,7 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz", "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==", - "dev": true, + "devOptional": true, "engines": { "node": ">=6.0.0" } @@ -2966,7 +2946,7 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", - "dev": true, + "devOptional": true, "engines": { "node": ">=6.0.0" } @@ -2975,7 +2955,7 @@ "version": "0.3.3", "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.3.tgz", "integrity": "sha512-b+fsZXeLYi9fEULmfBrhxn4IrPlINf8fiNarzTof004v3lFdntdwa9PF7vFJqm3mg7s+ScJMxXaE3Acp1irZcg==", - "dev": true, + "devOptional": true, "dependencies": { "@jridgewell/gen-mapping": "^0.3.0", "@jridgewell/trace-mapping": "^0.3.9" @@ -2990,7 +2970,7 @@ "version": "0.3.18", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.18.tgz", "integrity": "sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==", - "dev": true, + "devOptional": true, "dependencies": { "@jridgewell/resolve-uri": "3.1.0", "@jridgewell/sourcemap-codec": "1.4.14" @@ -3000,7 +2980,7 @@ "version": "1.4.14", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", - "dev": true + "devOptional": true }, "node_modules/@mdi/js": { "version": "7.2.96", @@ -3072,7 +3052,7 @@ "version": "18.15.11", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.11.tgz", "integrity": "sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==", - "dev": true + "devOptional": true }, "node_modules/@types/resolve": { "version": "1.17.1", @@ -3246,11 +3226,35 @@ "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": { "version": "8.8.2", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz", "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==", - "dev": true, + "devOptional": true, "bin": { "acorn": "bin/acorn" }, @@ -3307,6 +3311,19 @@ "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": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", @@ -3455,6 +3472,15 @@ "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", "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": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", @@ -3474,7 +3500,7 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, + "devOptional": true, "dependencies": { "fill-range": "^7.0.1" }, @@ -3513,7 +3539,7 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==", - "dev": true + "devOptional": true }, "node_modules/builtin-modules": { "version": "3.3.0", @@ -3600,6 +3626,45 @@ "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": { "version": "2.0.11", "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.11.tgz", @@ -3648,7 +3713,7 @@ "version": "2.20.3", "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==", - "dev": true + "devOptional": true }, "node_modules/common-tags": { "version": "1.8.2", @@ -3659,6 +3724,12 @@ "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": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -3978,7 +4049,7 @@ "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", - "dev": true, + "devOptional": true, "dependencies": { "ms": "2.1.2" }, @@ -4217,7 +4288,7 @@ "version": "0.17.15", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.15.tgz", "integrity": "sha512-LBUV2VsUIc/iD9ME75qhT4aJj0r75abCVS0jakhFzOtR7TQsqQA5w0tZ+KTKnwl3kXE0MhskNdHDh/I5aCR1Zw==", - "dev": true, + "devOptional": true, "hasInstallScript": true, "bin": { "esbuild": "bin/esbuild" @@ -4540,7 +4611,7 @@ "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dev": true, + "devOptional": true, "dependencies": { "to-regex-range": "^5.0.1" }, @@ -4548,6 +4619,23 @@ "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": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -4696,7 +4784,6 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -5003,6 +5090,12 @@ "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": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", @@ -5093,6 +5186,18 @@ "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": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz", @@ -5151,7 +5256,7 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", - "dev": true, + "devOptional": true, "engines": { "node": ">=0.10.0" } @@ -5160,7 +5265,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, + "devOptional": true, "dependencies": { "is-extglob": "^2.1.1" }, @@ -5190,7 +5295,7 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true, + "devOptional": true, "engines": { "node": ">=0.12.0" } @@ -5575,6 +5680,30 @@ "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": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz", @@ -5662,7 +5791,7 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "dev": true + "devOptional": true }, "node_modules/nanoid": { "version": "3.3.6", @@ -5692,6 +5821,15 @@ "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz", "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": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", @@ -5815,6 +5953,15 @@ "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": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -5831,7 +5978,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "dev": true, + "devOptional": true, "engines": { "node": ">=8" } @@ -5878,7 +6025,7 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, + "devOptional": true, "engines": { "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": { "version": "8.4.23", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz", @@ -7040,6 +7251,18 @@ "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": { "version": "0.6.2", "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz", @@ -7207,7 +7430,7 @@ "version": "3.23.0", "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.23.0.tgz", "integrity": "sha512-h31UlwEi7FHihLe1zbk+3Q7z1k/84rb9BSwmBSr/XjOCEaBJ2YyedQDuM0t/kfOS0IxM+vk1/zI9XxYj9V+NJQ==", - "dev": true, + "devOptional": true, "bin": { "rollup": "dist/bin/rollup" }, @@ -7276,6 +7499,23 @@ "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": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", @@ -7382,7 +7622,7 @@ "version": "0.5.21", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz", "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==", - "dev": true, + "devOptional": true, "dependencies": { "buffer-from": "^1.0.0", "source-map": "^0.6.0" @@ -7647,7 +7887,7 @@ "version": "5.16.8", "resolved": "https://registry.npmjs.org/terser/-/terser-5.16.8.tgz", "integrity": "sha512-QI5g1E/ef7d+PsDifb+a6nnVgC4F22Bg6T0xrBrz6iloVB4PUkkunp6V8nzoOOZJIzjWVdAGqCdlKlhLq/TbIA==", - "dev": true, + "devOptional": true, "dependencies": { "@jridgewell/source-map": "^0.3.2", "acorn": "^8.5.0", @@ -7685,7 +7925,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, + "devOptional": true, "dependencies": { "is-number": "^7.0.0" }, @@ -7887,7 +8127,7 @@ "version": "4.3.9", "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.9.tgz", "integrity": "sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==", - "dev": true, + "devOptional": true, "dependencies": { "esbuild": "^0.17.5", "postcss": "^8.4.23", @@ -7964,6 +8204,34 @@ "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": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz", diff --git a/package.json b/package.json index 00a70580..71b830be 100644 --- a/package.json +++ b/package.json @@ -52,8 +52,10 @@ "eslint-plugin-vue": "^9.14.1", "git-rev-sync": "^3.0.2", "postcss-preset-env": "^8.4.1", + "sass": "^1.63.6", "vite": "^4.3.5", - "vite-plugin-pwa": "^0.15.1" + "vite-plugin-pwa": "^0.15.1", + "vite-plugin-vuetify": "^1.0.2" }, "browserslist": [ "> 1%", diff --git a/src/desktop-main.js b/src/desktop-main.js index 1dd68774..7fcb9309 100644 --- a/src/desktop-main.js +++ b/src/desktop-main.js @@ -24,16 +24,16 @@ import { VProgressLinear } from 'vuetify/components/VProgressLinear'; import { VSelect } from 'vuetify/components/VSelect'; import { VSheet } from 'vuetify/components/VSheet'; 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 { VTextField } from 'vuetify/components/VTextField'; +import { VWindow, VWindowItem } from 'vuetify/components/VWindow'; import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'; import 'vuetify/styles'; import 'line-awesome/dist/line-awesome/css/line-awesome.css'; import { PerfectScrollbar } from 'vue3-perfect-scrollbar'; -import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.min.css'; import VueDatePicker from '@vuepic/vue-datepicker'; import '@vuepic/vue-datepicker/dist/main.css'; @@ -52,12 +52,12 @@ import { import AmountInput from '@/components/desktop/AmountInput.vue'; -import '@/styles/desktop/base.css'; -import '@/styles/desktop/layout.css'; -import '@/styles/desktop/font-size-utils.css'; -import '@/styles/desktop/gap-size-utils.css'; -import '@/styles/desktop/vuetify.css'; -import '@/styles/desktop/classess.css'; +import '@/styles/desktop/template/base/libs/vuetify/_index.scss'; +import '@/styles/desktop/template/template/index.scss'; +import '@/styles/desktop/template/layout/index.scss'; +import '@/styles/desktop/template/layout/component/index.scss'; +import '@/styles/desktop/template/layout/_default-layout.scss'; +import '@/styles/desktop/global.scss'; import App from './DesktopApp.vue'; @@ -104,8 +104,11 @@ const vuetify = createVuetify({ VSheet, VSnackbar, VTabs, + VTab, VTable, - VTextField + VTextField, + VWindow, + VWindowItem }, icons: { defaultSet: 'mdi', @@ -228,9 +231,8 @@ const vuetify = createVuetify({ 'skin-bordered-surface': '#fff' }, variables: { - 'btn-height': '38px', 'code-color': '#ff8000', - 'overlay-scrim-background': '#3a3541', + 'overlay-scrim-background': '#413935', 'overlay-scrim-opacity': 0.5, 'hover-opacity': 0.04, 'focus-opacity': 0.1, @@ -278,9 +280,8 @@ const vuetify = createVuetify({ 'skin-bordered-surface': '#312d4b' }, variables: { - 'btn-height': '38px', 'code-color': '#ff8000', - 'overlay-scrim-background': '#2C2942', + 'overlay-scrim-background': '#1c1c1d', 'overlay-scrim-opacity': 0.6, 'hover-opacity': 0.04, 'focus-opacity': 0.1, @@ -288,8 +289,8 @@ const vuetify = createVuetify({ 'activated-opacity': 0.1, 'pressed-opacity': 0.14, 'dragged-opacity': 0.1, - 'border-color': '#E7E3FC', - 'table-header-background': '#3D3759', + 'border-color': '#e7e3fc', + 'table-header-background': '#3d3759', 'custom-background': '#373452', 'shadow-key-umbra-opacity': 'rgba(20, 18, 33, 0.08)', 'shadow-key-penumbra-opacity': 'rgba(20, 18, 33, 0.12)', diff --git a/src/styles/desktop/base.css b/src/styles/desktop/base.css deleted file mode 100644 index e5a12b26..00000000 --- a/src/styles/desktop/base.css +++ /dev/null @@ -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; -} diff --git a/src/styles/desktop/font-size-utils.css b/src/styles/desktop/font-size-utils.css deleted file mode 100644 index a863899e..00000000 --- a/src/styles/desktop/font-size-utils.css +++ /dev/null @@ -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; -} diff --git a/src/styles/desktop/gap-size-utils.css b/src/styles/desktop/gap-size-utils.css deleted file mode 100644 index a2eb5269..00000000 --- a/src/styles/desktop/gap-size-utils.css +++ /dev/null @@ -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; -} diff --git a/src/styles/desktop/classess.css b/src/styles/desktop/global.scss similarity index 76% rename from src/styles/desktop/classess.css rename to src/styles/desktop/global.scss index d880fd47..482f8368 100644 --- a/src/styles/desktop/classess.css +++ b/src/styles/desktop/global.scss @@ -6,7 +6,3 @@ .readonly { pointer-events: none !important; } - -.cursor-pointer { - cursor: pointer; -} diff --git a/src/styles/desktop/layout.css b/src/styles/desktop/layout.css deleted file mode 100644 index 25c4feeb..00000000 --- a/src/styles/desktop/layout.css +++ /dev/null @@ -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; -} - diff --git a/src/styles/desktop/template/base/_components.scss b/src/styles/desktop/template/base/_components.scss new file mode 100644 index 00000000..46489219 --- /dev/null +++ b/src/styles/desktop/template/base/_components.scss @@ -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; +} diff --git a/src/styles/desktop/template/base/_dark.scss b/src/styles/desktop/template/base/_dark.scss new file mode 100644 index 00000000..38e1e68d --- /dev/null +++ b/src/styles/desktop/template/base/_dark.scss @@ -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; + } +} diff --git a/src/styles/desktop/template/base/_default-layout-w-vertical-nav.scss b/src/styles/desktop/template/base/_default-layout-w-vertical-nav.scss new file mode 100644 index 00000000..a420cc28 --- /dev/null +++ b/src/styles/desktop/template/base/_default-layout-w-vertical-nav.scss @@ -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); + } + } + } + } + } +} diff --git a/src/styles/desktop/template/base/_default-layout.scss b/src/styles/desktop/template/base/_default-layout.scss new file mode 100644 index 00000000..d25a6d1f --- /dev/null +++ b/src/styles/desktop/template/base/_default-layout.scss @@ -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; + } +} diff --git a/src/styles/desktop/template/base/_index.scss b/src/styles/desktop/template/base/_index.scss new file mode 100644 index 00000000..b01d6e31 --- /dev/null +++ b/src/styles/desktop/template/base/_index.scss @@ -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; +} diff --git a/src/styles/desktop/template/base/_layouts.scss b/src/styles/desktop/template/base/_layouts.scss new file mode 100644 index 00000000..241fea38 --- /dev/null +++ b/src/styles/desktop/template/base/_layouts.scss @@ -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; + } + } +} diff --git a/src/styles/desktop/template/base/_misc.scss b/src/styles/desktop/template/base/_misc.scss new file mode 100644 index 00000000..c100a0ad --- /dev/null +++ b/src/styles/desktop/template/base/_misc.scss @@ -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; +} diff --git a/src/styles/desktop/template/base/_mixins.scss b/src/styles/desktop/template/base/_mixins.scss new file mode 100644 index 00000000..a7d1bfcd --- /dev/null +++ b/src/styles/desktop/template/base/_mixins.scss @@ -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)); + } + } + } +} diff --git a/src/styles/desktop/template/base/_utilities.scss b/src/styles/desktop/template/base/_utilities.scss new file mode 100644 index 00000000..f6393665 --- /dev/null +++ b/src/styles/desktop/template/base/_utilities.scss @@ -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; + } +} diff --git a/src/styles/desktop/template/base/_utils.scss b/src/styles/desktop/template/base/_utils.scss new file mode 100644 index 00000000..2acba816 --- /dev/null +++ b/src/styles/desktop/template/base/_utils.scss @@ -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; +} diff --git a/src/styles/desktop/template/base/_variables.scss b/src/styles/desktop/template/base/_variables.scss new file mode 100644 index 00000000..14177d5e --- /dev/null +++ b/src/styles/desktop/template/base/_variables.scss @@ -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 +); diff --git a/src/styles/desktop/template/base/_vertical-nav.scss b/src/styles/desktop/template/base/_vertical-nav.scss new file mode 100644 index 00000000..a45aaca2 --- /dev/null +++ b/src/styles/desktop/template/base/_vertical-nav.scss @@ -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 diff --git a/src/styles/desktop/template/base/libs/_perfect-scrollbar.scss b/src/styles/desktop/template/base/libs/_perfect-scrollbar.scss new file mode 100644 index 00000000..9f0feee9 --- /dev/null +++ b/src/styles/desktop/template/base/libs/_perfect-scrollbar.scss @@ -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; +} diff --git a/src/styles/desktop/template/base/libs/vuetify/_index.scss b/src/styles/desktop/template/base/libs/vuetify/_index.scss new file mode 100644 index 00000000..79a87302 --- /dev/null +++ b/src/styles/desktop/template/base/libs/vuetify/_index.scss @@ -0,0 +1,4 @@ +/** Materio Template base classes **/ +/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/ + +@use "./overrides"; diff --git a/src/styles/desktop/template/base/libs/vuetify/_overrides.scss b/src/styles/desktop/template/base/libs/vuetify/_overrides.scss new file mode 100644 index 00000000..d0f408c3 --- /dev/null +++ b/src/styles/desktop/template/base/libs/vuetify/_overrides.scss @@ -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; + } + } +} diff --git a/src/styles/desktop/template/base/libs/vuetify/_variables.scss b/src/styles/desktop/template/base/libs/vuetify/_variables.scss new file mode 100644 index 00000000..6bc0aa8d --- /dev/null +++ b/src/styles/desktop/template/base/libs/vuetify/_variables.scss @@ -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, +) +; diff --git a/src/styles/desktop/template/base/placeholders/_default-layout-vertical-nav.scss b/src/styles/desktop/template/base/placeholders/_default-layout-vertical-nav.scss new file mode 100644 index 00000000..b812694b --- /dev/null +++ b/src/styles/desktop/template/base/placeholders/_default-layout-vertical-nav.scss @@ -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 */ + } +} diff --git a/src/styles/desktop/template/base/placeholders/_default-layout.scss b/src/styles/desktop/template/base/placeholders/_default-layout.scss new file mode 100644 index 00000000..64ebc628 --- /dev/null +++ b/src/styles/desktop/template/base/placeholders/_default-layout.scss @@ -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)); +} diff --git a/src/styles/desktop/template/base/placeholders/_index.scss b/src/styles/desktop/template/base/placeholders/_index.scss new file mode 100644 index 00000000..f395f519 --- /dev/null +++ b/src/styles/desktop/template/base/placeholders/_index.scss @@ -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"; diff --git a/src/styles/desktop/template/base/placeholders/_misc.scss b/src/styles/desktop/template/base/placeholders/_misc.scss new file mode 100644 index 00000000..816ccbd1 --- /dev/null +++ b/src/styles/desktop/template/base/placeholders/_misc.scss @@ -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); +} diff --git a/src/styles/desktop/template/base/placeholders/_nav.scss b/src/styles/desktop/template/base/placeholders/_nav.scss new file mode 100644 index 00000000..974991d4 --- /dev/null +++ b/src/styles/desktop/template/base/placeholders/_nav.scss @@ -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; + } +} diff --git a/src/styles/desktop/template/base/placeholders/_vertical-nav.scss b/src/styles/desktop/template/base/placeholders/_vertical-nav.scss new file mode 100644 index 00000000..84ad0c39 --- /dev/null +++ b/src/styles/desktop/template/base/placeholders/_vertical-nav.scss @@ -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; +} diff --git a/src/styles/desktop/template/configured-variables/_template.scss b/src/styles/desktop/template/configured-variables/_template.scss new file mode 100644 index 00000000..7c02e4ba --- /dev/null +++ b/src/styles/desktop/template/configured-variables/_template.scss @@ -0,0 +1 @@ +@forward "../template/variables"; diff --git a/src/styles/desktop/template/configured-variables/_vuetify.scss b/src/styles/desktop/template/configured-variables/_vuetify.scss new file mode 100644 index 00000000..9f3132f9 --- /dev/null +++ b/src/styles/desktop/template/configured-variables/_vuetify.scss @@ -0,0 +1 @@ +@forward "../vuetify/variables"; diff --git a/src/styles/desktop/template/layout/_classes.scss b/src/styles/desktop/template/layout/_classes.scss new file mode 100644 index 00000000..cd11b2bd --- /dev/null +++ b/src/styles/desktop/template/layout/_classes.scss @@ -0,0 +1,6 @@ +/** Materio Template layout styles **/ +/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/ + +.cursor-pointer { + cursor: pointer; +} diff --git a/src/styles/desktop/template/layout/_default-layout.scss b/src/styles/desktop/template/layout/_default-layout.scss new file mode 100644 index 00000000..2d1ac1dc --- /dev/null +++ b/src/styles/desktop/template/layout/_default-layout.scss @@ -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; + } +} diff --git a/src/styles/desktop/template/layout/_global.scss b/src/styles/desktop/template/layout/_global.scss new file mode 100644 index 00000000..b40d52a0 --- /dev/null +++ b/src/styles/desktop/template/layout/_global.scss @@ -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; +} diff --git a/src/styles/desktop/template/layout/_mixins.scss b/src/styles/desktop/template/layout/_mixins.scss new file mode 100644 index 00000000..8aed90d4 --- /dev/null +++ b/src/styles/desktop/template/layout/_mixins.scss @@ -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; + } + } + } + } +} diff --git a/src/styles/desktop/template/layout/_placeholders.scss b/src/styles/desktop/template/layout/_placeholders.scss new file mode 100644 index 00000000..a8e18369 --- /dev/null +++ b/src/styles/desktop/template/layout/_placeholders.scss @@ -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; + } +} diff --git a/src/styles/desktop/template/layout/_rtl.scss b/src/styles/desktop/template/layout/_rtl.scss new file mode 100644 index 00000000..6f1e9c37 --- /dev/null +++ b/src/styles/desktop/template/layout/_rtl.scss @@ -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); + } +} diff --git a/src/styles/desktop/template/layout/_variables.scss b/src/styles/desktop/template/layout/_variables.scss new file mode 100644 index 00000000..04b33653 --- /dev/null +++ b/src/styles/desktop/template/layout/_variables.scss @@ -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; diff --git a/src/styles/desktop/template/layout/component/index.scss b/src/styles/desktop/template/layout/component/index.scss new file mode 100644 index 00000000..a0e7c8aa --- /dev/null +++ b/src/styles/desktop/template/layout/component/index.scss @@ -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"; diff --git a/src/styles/desktop/template/layout/component/vertical-nav-layout.scss b/src/styles/desktop/template/layout/component/vertical-nav-layout.scss new file mode 100644 index 00000000..734179b6 --- /dev/null +++ b/src/styles/desktop/template/layout/component/vertical-nav-layout.scss @@ -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; + } + } + } + } +} diff --git a/src/styles/desktop/template/layout/component/vertical-nav.scss b/src/styles/desktop/template/layout/component/vertical-nav.scss new file mode 100644 index 00000000..4878deca --- /dev/null +++ b/src/styles/desktop/template/layout/component/vertical-nav.scss @@ -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; + } +} diff --git a/src/styles/desktop/template/layout/index.scss b/src/styles/desktop/template/layout/index.scss new file mode 100644 index 00000000..df071338 --- /dev/null +++ b/src/styles/desktop/template/layout/index.scss @@ -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"; diff --git a/src/styles/desktop/template/template/_components.scss b/src/styles/desktop/template/template/_components.scss new file mode 100644 index 00000000..701830d7 --- /dev/null +++ b/src/styles/desktop/template/template/_components.scss @@ -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); +} diff --git a/src/styles/desktop/template/template/_mixins.scss b/src/styles/desktop/template/template/_mixins.scss new file mode 100644 index 00000000..d2a7be39 --- /dev/null +++ b/src/styles/desktop/template/template/_mixins.scss @@ -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; + } + } +} diff --git a/src/styles/desktop/template/template/_utilities.scss b/src/styles/desktop/template/template/_utilities.scss new file mode 100644 index 00000000..da60dbe6 --- /dev/null +++ b/src/styles/desktop/template/template/_utilities.scss @@ -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; + } + } +} diff --git a/src/styles/desktop/template/template/_utils.scss b/src/styles/desktop/template/template/_utils.scss new file mode 100644 index 00000000..f1565a05 --- /dev/null +++ b/src/styles/desktop/template/template/_utils.scss @@ -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; + } +} diff --git a/src/styles/desktop/template/template/_variables.scss b/src/styles/desktop/template/template/_variables.scss new file mode 100644 index 00000000..f0806ccb --- /dev/null +++ b/src/styles/desktop/template/template/_variables.scss @@ -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; diff --git a/src/styles/desktop/template/template/index.scss b/src/styles/desktop/template/template/index.scss new file mode 100644 index 00000000..abf02245 --- /dev/null +++ b/src/styles/desktop/template/template/index.scss @@ -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"; diff --git a/src/styles/desktop/template/template/placeholders/_index.scss b/src/styles/desktop/template/template/placeholders/_index.scss new file mode 100644 index 00000000..848767e4 --- /dev/null +++ b/src/styles/desktop/template/template/placeholders/_index.scss @@ -0,0 +1,5 @@ +/** Materio Template styles **/ +/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/ + +@forward "./nav"; +@forward "./vertical-nav"; diff --git a/src/styles/desktop/template/template/placeholders/_nav.scss b/src/styles/desktop/template/template/placeholders/_nav.scss new file mode 100644 index 00000000..abe5b2d1 --- /dev/null +++ b/src/styles/desktop/template/template/placeholders/_nav.scss @@ -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; +} diff --git a/src/styles/desktop/template/template/placeholders/_vertical-nav.scss b/src/styles/desktop/template/template/placeholders/_vertical-nav.scss new file mode 100644 index 00000000..4eb4d9d6 --- /dev/null +++ b/src/styles/desktop/template/template/placeholders/_vertical-nav.scss @@ -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; + } +} diff --git a/src/styles/desktop/template/vuetify/variables.scss b/src/styles/desktop/template/vuetify/variables.scss new file mode 100644 index 00000000..b8a6ebf7 --- /dev/null +++ b/src/styles/desktop/template/vuetify/variables.scss @@ -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)), +); diff --git a/src/styles/desktop/vuetify.css b/src/styles/desktop/vuetify.css deleted file mode 100644 index 701e7b9b..00000000 --- a/src/styles/desktop/vuetify.css +++ /dev/null @@ -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) -} diff --git a/vite.config.js b/vite.config.js index 0757839d..3c49689e 100644 --- a/vite.config.js +++ b/vite.config.js @@ -2,6 +2,7 @@ import fs from 'fs'; import { resolve } from 'path'; import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue'; +import vuetify from 'vite-plugin-vuetify'; import { VitePWA } from 'vite-plugin-pwa'; 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({ filename: 'sw.js', manifestFilename: 'manifest.json',