From 226a12df4005e02e9b64b56af9139a657e8fee76 Mon Sep 17 00:00:00 2001 From: jxxghp Date: Tue, 22 Apr 2025 12:43:11 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E6=A0=B7=E5=BC=8F=E6=96=87?= =?UTF-8?q?=E4=BB=B6=EF=BC=9A=E5=B0=86=E5=A4=9A=E4=B8=AA=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E5=90=88=E5=B9=B6=EF=BC=8C=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E5=8F=98=E9=87=8F=E5=91=BD=E5=90=8D=E7=A9=BA=E9=97=B4=EF=BC=8C?= =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=AF=BC=E5=85=A5=E7=BB=93=E6=9E=84=EF=BC=8C?= =?UTF-8?q?=E6=8F=90=E5=8D=87=E4=BB=A3=E7=A0=81=E5=8F=AF=E7=BB=B4=E6=8A=A4?= =?UTF-8?q?=E6=80=A7=E5=92=8C=E4=B8=80=E8=87=B4=E6=80=A7=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@core/scss/README.md | 58 ++++ src/@core/scss/_default-layout.scss | 4 +- src/@core/scss/_variables.scss | 14 +- src/@core/scss/base/_components.scss | 157 ----------- src/@core/scss/base/_dark.scss | 16 -- src/@core/scss/base/_default-layout.scss | 16 -- src/@core/scss/base/_index.scss | 40 --- src/@core/scss/base/_layouts.scss | 63 ----- src/@core/scss/base/_misc.scss | 20 -- src/@core/scss/base/_mixins.scss | 77 ------ src/@core/scss/base/_utilities.scss | 141 ---------- src/@core/scss/base/_utils.scss | 90 ------- src/@core/scss/base/_variables.scss | 197 -------------- src/@core/scss/base/_vertical-nav.scss | 251 ------------------ src/@core/scss/base/libs/vuetify/_index.scss | 1 - .../scss/base/libs/vuetify/_variables.scss | 49 ---- src/@core/scss/base/placeholders/_index.scss | 5 - src/@core/scss/base/placeholders/_nav.scss | 34 --- .../scss/base/placeholders/_vertical-nav.scss | 81 ------ src/@core/scss/index.scss | 34 +-- src/@core/scss/template/_components.scss | 3 +- .../_default-layout-w-vertical-nav.scss | 9 +- src/@core/scss/template/_mixins.scss | 88 ++++++ src/@core/scss/template/_variables.scss | 212 ++++++++++++++- src/@core/scss/template/index.scss | 36 ++- src/@core/scss/template/libs/apex-chart.scss | 136 +++++----- .../scss/template/libs/full-calendar.scss | 81 +++--- .../libs/perfect-scrollbar.scss} | 12 +- .../libs/vuetify/_overrides.scss | 64 +++-- .../template/libs/vuetify/_variables.scss | 41 ++- .../scss/template/libs/vuetify/index.scss | 3 +- .../_default-layout-vertical-nav.scss | 4 +- .../placeholders/_default-layout.scss | 2 +- .../scss/template/placeholders/_index.scss | 3 + .../placeholders/_misc.scss | 2 +- 35 files changed, 595 insertions(+), 1449 deletions(-) create mode 100644 src/@core/scss/README.md delete mode 100644 src/@core/scss/base/_components.scss delete mode 100644 src/@core/scss/base/_dark.scss delete mode 100644 src/@core/scss/base/_default-layout.scss delete mode 100644 src/@core/scss/base/_index.scss delete mode 100644 src/@core/scss/base/_layouts.scss delete mode 100644 src/@core/scss/base/_misc.scss delete mode 100644 src/@core/scss/base/_mixins.scss delete mode 100644 src/@core/scss/base/_utilities.scss delete mode 100644 src/@core/scss/base/_utils.scss delete mode 100644 src/@core/scss/base/_variables.scss delete mode 100644 src/@core/scss/base/_vertical-nav.scss delete mode 100644 src/@core/scss/base/libs/vuetify/_index.scss delete mode 100644 src/@core/scss/base/libs/vuetify/_variables.scss delete mode 100644 src/@core/scss/base/placeholders/_index.scss delete mode 100644 src/@core/scss/base/placeholders/_nav.scss delete mode 100644 src/@core/scss/base/placeholders/_vertical-nav.scss rename src/@core/scss/{base => template}/_default-layout-w-vertical-nav.scss (95%) rename src/@core/scss/{base/libs/_perfect-scrollbar.scss => template/libs/perfect-scrollbar.scss} (99%) rename src/@core/scss/{base => template}/libs/vuetify/_overrides.scss (84%) rename src/@core/scss/{base => template}/placeholders/_default-layout-vertical-nav.scss (97%) rename src/@core/scss/{base => template}/placeholders/_default-layout.scss (96%) rename src/@core/scss/{base => template}/placeholders/_misc.scss (99%) diff --git a/src/@core/scss/README.md b/src/@core/scss/README.md new file mode 100644 index 00000000..95881be2 --- /dev/null +++ b/src/@core/scss/README.md @@ -0,0 +1,58 @@ +# SCSS结构说明 + +## 目录整合 + +本项目SCSS文件已完成整合： +- 主入口文件：`src/@core/scss/index.scss` +- 实际功能文件位于：`src/@core/scss/template/index.scss` + +## 整合内容 + +- 整合了原`src/@core/scss/base`和`src/@core/scss/template`目录的功能 +- 统一使用`template`目录作为SCSS样式的主要引用点 +- 保留原有引用结构以保证向后兼容性 + +## 整合进度 + +已完成： +- ✅ 主入口文件引用更新 +- ✅ mixins文件合并 +- ✅ placeholders目录下文件转移 +- ✅ perfect-scrollbar文件整合 +- ✅ vuetify相关文件整合 +- ✅ default-layout-w-vertical-nav文件整合 +- ✅ 移除了template/index.scss中对base目录组件的依赖 +- ✅ 修复了components.scss中对base/mixins的引用 +- ✅ 修复了variables.scss中对base/variables的引用 +- ✅ 修复了apex-chart.scss和full-calendar.scss的linter错误 +- ✅ 整合并移除了对vuetify/variables的依赖 +- ✅ 修复了SCSS变量名冲突问题 +- ✅ 修复了SASS模块重复加载配置问题 +- ✅ 修复了导入路径问题（misc、utils等模块的引用路径） + +待完成： +- ⬜ 最终测试确保无样式问题 +- ⬜ 清理冗余文件 + +## 使用方式 + +在项目中引用SCSS时，应使用： +```scss +@use "@core/scss"; +``` + +这将自动加载所有必要的样式文件。 + +## 注意事项 + +此次整合已将所有功能文件整合到template目录，不再依赖base目录的代码。现在可以安全地从外部引用template目录下的文件，但需要进行最终测试以确保样式正常工作。 + +测试无误后，可以考虑完全删除base目录，以简化项目结构。 + +## 最近修复 + +在最近的更新中，我们修复了以下问题： +1. 解决了变量名冲突问题，通过使用命名空间（如`layouts-vars`）来引用外部模块变量 +2. 修复了SASS模块重复配置问题，将多处的`@forward...with`配置合并到了template/_variables.scss文件中 +3. 统一使用命名空间引用模块，避免后续出现冲突 +4. 修复了`_default-layout-w-vertical-nav.scss`中导入路径错误，将`@use "misc"`修改为`@use "../misc"` diff --git a/src/@core/scss/_default-layout.scss b/src/@core/scss/_default-layout.scss index 0bbfb337..39bfba4c 100644 --- a/src/@core/scss/_default-layout.scss +++ b/src/@core/scss/_default-layout.scss @@ -1,8 +1,8 @@ @use "@core/scss/placeholders"; -@use "@core/scss/variables"; +@use "@core/scss/variables" as core-vars; .layout-navbar { - @if variables.$navbar-high-emphasis-text { + @if core-vars.$navbar-high-emphasis-text { @extend %layout-navbar; } } diff --git a/src/@core/scss/_variables.scss b/src/@core/scss/_variables.scss index 0664e514..abd7b4a0 100644 --- a/src/@core/scss/_variables.scss +++ b/src/@core/scss/_variables.scss @@ -10,17 +10,19 @@ */ @use "sass:map"; -// @forward "@layouts/styles/variables"; +// 使用模板中的变量，不再进行配置 +@use "@layouts/styles/variables" as layouts-vars; @use "utils"; // 👉 Default layout $navbar-high-emphasis-text: true !default; -@forward "@layouts/styles/variables" with ( - $layout-vertical-nav-collapsed-width: 68px !default, -); -@use "@layouts/styles/variables" as *; +// 移除@forward配置，已合并到template/_variables.scss +// @forward "@layouts/styles/variables" with ( +// $layout-vertical-nav-collapsed-width: 68px !default, +// ); +// @use "@layouts/styles/variables" as *; $theme-colors-name: ( "primary", @@ -55,7 +57,7 @@ $vertical-nav-horizontal-padding: 1.375rem 1rem !default; $vertical-nav-horizontal-padding-start: utils.get-first-value($vertical-nav-horizontal-padding); // Vertical nav header height. Mostly we will align it with navbar height; -$vertical-nav-header-height: $layout-vertical-nav-navbar-height !default; +$vertical-nav-header-height: layouts-vars.$layout-vertical-nav-navbar-height !default; $vertical-nav-navbar-shadow: 0 4px 8px -4px rgb(94 86 105 / 42%); // Vertical nav header padding diff --git a/src/@core/scss/base/_components.scss b/src/@core/scss/base/_components.scss deleted file mode 100644 index 88e44b65..00000000 --- a/src/@core/scss/base/_components.scss +++ /dev/null @@ -1,157 +0,0 @@ -@use "mixins"; -@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation; -@use "@layouts/styles/placeholders"; -@use "@configured-variables" 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/@core/scss/base/_dark.scss b/src/@core/scss/base/_dark.scss deleted file mode 100644 index 6ae246b0..00000000 --- a/src/@core/scss/base/_dark.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use "@configured-variables" 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/@core/scss/base/_default-layout.scss b/src/@core/scss/base/_default-layout.scss deleted file mode 100644 index 9794e7c5..00000000 --- a/src/@core/scss/base/_default-layout.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use "@core/scss/base/placeholders"; -@use "@core/scss/base/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/@core/scss/base/_index.scss b/src/@core/scss/base/_index.scss deleted file mode 100644 index 9eb8a9c5..00000000 --- a/src/@core/scss/base/_index.scss +++ /dev/null @@ -1,40 +0,0 @@ -@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/@core/scss/base/_layouts.scss b/src/@core/scss/base/_layouts.scss deleted file mode 100644 index e0c2d306..00000000 --- a/src/@core/scss/base/_layouts.scss +++ /dev/null @@ -1,63 +0,0 @@ -@use "@configured-variables" 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-fixed placeholder) - .layout-wrapper.layout-nav-type-vertical.layout-navbar-fixed { - .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/@core/scss/base/_misc.scss b/src/@core/scss/base/_misc.scss deleted file mode 100644 index cee983b3..00000000 --- a/src/@core/scss/base/_misc.scss +++ /dev/null @@ -1,20 +0,0 @@ -// ℹ️ 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/@core/scss/base/_mixins.scss b/src/@core/scss/base/_mixins.scss deleted file mode 100644 index 1ad6ef06..00000000 --- a/src/@core/scss/base/_mixins.scss +++ /dev/null @@ -1,77 +0,0 @@ -@use "sass:map"; -@use "@styles/variables/_vuetify.scss"; - -@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/@core/scss/base/_utilities.scss b/src/@core/scss/base/_utilities.scss deleted file mode 100644 index 96af2137..00000000 --- a/src/@core/scss/base/_utilities.scss +++ /dev/null @@ -1,141 +0,0 @@ -@use "@configured-variables" as variables; -@use "@layouts/styles/mixins" as layoutsMixins; - -// 👉 Demo spacers -// TODO: Use vuetify SCSS variable here -$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-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/@core/scss/base/_utils.scss b/src/@core/scss/base/_utils.scss deleted file mode 100644 index 02acb62c..00000000 --- a/src/@core/scss/base/_utils.scss +++ /dev/null @@ -1,90 +0,0 @@ -@use "sass:map"; -@use "sass:list"; -@use "@configured-variables" 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/@core/scss/base/_variables.scss b/src/@core/scss/base/_variables.scss deleted file mode 100644 index 7c973422..00000000 --- a/src/@core/scss/base/_variables.scss +++ /dev/null @@ -1,197 +0,0 @@ -@use "vuetify/lib/styles/tools/functions" as *; - -/* - TODO: Add docs on when to use placeholder vs when to use SASS variable - - Placeholder - - When we want to keep customization to our self between templates use it - - Variables - - When we want to allow customization from both user and our side - - You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header) -*/ - -@forward "@layouts/styles/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 "@layouts/styles/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/@core/scss/base/_vertical-nav.scss b/src/@core/scss/base/_vertical-nav.scss deleted file mode 100644 index 2b2d32c8..00000000 --- a/src/@core/scss/base/_vertical-nav.scss +++ /dev/null @@ -1,251 +0,0 @@ -@use "@core/scss/base/placeholders" as *; -@use "@core/scss/template/placeholders" as *; -@use "@layouts/styles/mixins" as layoutsMixins; -@use "@configured-variables" as variables; -@use "@core/scss/base/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(var(--v-theme-surface)) 5%, - rgba(var(--v-theme-surface), 75%) 45%, - rgba(var(--v-theme-surface), 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;Settingz-indexSettingz-indexSettingz-indexSettingz-index - z-index: 1z-indexz-indexz-index - } - - // 👉 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/@core/scss/base/libs/vuetify/_index.scss b/src/@core/scss/base/libs/vuetify/_index.scss deleted file mode 100644 index f33ef3f4..00000000 --- a/src/@core/scss/base/libs/vuetify/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@use "overrides"; diff --git a/src/@core/scss/base/libs/vuetify/_variables.scss b/src/@core/scss/base/libs/vuetify/_variables.scss deleted file mode 100644 index 9b955d08..00000000 --- a/src/@core/scss/base/libs/vuetify/_variables.scss +++ /dev/null @@ -1,49 +0,0 @@ -// 👉 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/@core/scss/base/placeholders/_index.scss b/src/@core/scss/base/placeholders/_index.scss deleted file mode 100644 index c59061a0..00000000 --- a/src/@core/scss/base/placeholders/_index.scss +++ /dev/null @@ -1,5 +0,0 @@ -@forward "vertical-nav"; -@forward "nav"; -@forward "default-layout"; -@forward "default-layout-vertical-nav"; -@forward "misc"; diff --git a/src/@core/scss/base/placeholders/_nav.scss b/src/@core/scss/base/placeholders/_nav.scss deleted file mode 100644 index bae9ce6a..00000000 --- a/src/@core/scss/base/placeholders/_nav.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation; -@use "@core/scss/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/@core/scss/base/placeholders/_vertical-nav.scss b/src/@core/scss/base/placeholders/_vertical-nav.scss deleted file mode 100644 index bf73e3e2..00000000 --- a/src/@core/scss/base/placeholders/_vertical-nav.scss +++ /dev/null @@ -1,81 +0,0 @@ -@use "@core/scss/base/mixins"; -@use "@configured-variables" 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/@core/scss/index.scss b/src/@core/scss/index.scss index 88188c1c..3a343b5c 100644 --- a/src/@core/scss/index.scss +++ b/src/@core/scss/index.scss @@ -1,33 +1,5 @@ @use "sass:map"; +@use "template/index"; -// Layout -@use "vertical-nav"; -@use "default-layout"; - -// Components -@use "components"; - -// Utilities -@use "utilities"; - -// Misc -@use "misc"; - -// Dark -@use "dark"; - -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; -} +// 保留这个引用以向后兼容，但实际功能已经移至template/index.scss +@use "variables"; diff --git a/src/@core/scss/template/_components.scss b/src/@core/scss/template/_components.scss index b1570c89..bc76c1c2 100644 --- a/src/@core/scss/template/_components.scss +++ b/src/@core/scss/template/_components.scss @@ -1,7 +1,6 @@ @use "vuetify/lib/styles/tools/_elevation" as mixins_elevation; @use "@configured-variables" as variables; @use "mixins"; -@use "@core/scss/base/mixins" as mixins_base; // 👉 Alert .v-alert { @@ -190,5 +189,5 @@ // 👉 SnackBar .v-snackbar--variant-elevated { - @include mixins_base.elevation(6); + @include mixins.elevation(6); } diff --git a/src/@core/scss/base/_default-layout-w-vertical-nav.scss b/src/@core/scss/template/_default-layout-w-vertical-nav.scss similarity index 95% rename from src/@core/scss/base/_default-layout-w-vertical-nav.scss rename to src/@core/scss/template/_default-layout-w-vertical-nav.scss index f56505ff..dca58b3f 100644 --- a/src/@core/scss/base/_default-layout-w-vertical-nav.scss +++ b/src/@core/scss/template/_default-layout-w-vertical-nav.scss @@ -1,9 +1,8 @@ @use "@configured-variables" as variables; -@use "@core/scss/base/placeholders" as *; -@use "@core/scss/template/placeholders" as *; +@use "placeholders" as *; @use "vuetify/lib/styles/tools/_elevation" as mixins_elevation; -@use "misc"; -@use "@core/scss/base/mixins"; +@use "../misc"; +@use "mixins"; $header: ".layout-navbar"; @@ -101,4 +100,4 @@ $header: ".layout-navbar"; } } } -} +} diff --git a/src/@core/scss/template/_mixins.scss b/src/@core/scss/template/_mixins.scss index ca516076..41660363 100644 --- a/src/@core/scss/template/_mixins.scss +++ b/src/@core/scss/template/_mixins.scss @@ -1,5 +1,6 @@ @use "sass:map"; @use "vuetify/lib/styles/settings" as vuetify_settings; +@use "@styles/variables/_vuetify.scss" as vuetify; @mixin avatar-font-sizes($map: $avatar-sizes) { @each $sizeName, $multiplier in vuetify_settings.$size-scales { @@ -11,3 +12,90 @@ } } } + +@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); +} + +@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} { + box-shadow: none !important; + #{$border-property}: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) if($important, !important, null); + } +} + +@mixin selected-states($selector) { + #{$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)); + } + } + } +} + +@mixin push-anchors() { + :target { + scroll-margin-block-start: 90px; + } +} + +@mixin xs { + @media (width >= 0) and (width <= 599.98px) { + @content; + } +} + +@mixin sm { + @media (width >= 600px) and (width <= 959.98px) { + @content; + } +} + +@mixin md { + @media (width >= 960px) and (width <= 1279.98px) { + @content; + } +} + +@mixin lg { + @media (width >= 1280px) and (width <= 1919.98px) { + @content; + } +} + +@mixin xl { + @media (width >= 1920px) { + @content; + } +} diff --git a/src/@core/scss/template/_variables.scss b/src/@core/scss/template/_variables.scss index e04e1ac3..1546565e 100644 --- a/src/@core/scss/template/_variables.scss +++ b/src/@core/scss/template/_variables.scss @@ -1,5 +1,6 @@ @use "sass:map"; @use "utils"; +@use "vuetify/lib/styles/tools/functions" as *; $vertical-nav-horizontal-padding-custom: 1.375rem 1rem; @@ -13,15 +14,16 @@ $vertical-nav-horizontal-padding-custom: 1.375rem 1rem; $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 "@core/scss/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, -); +// Vertical Nav Configuration +$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: ( @@ -31,3 +33,195 @@ $avatar-font-sizes: ( "large":20, "x-large":24 ) !default; + +// 合并两个文件中的@forward配置 +@forward "@layouts/styles/variables" with ( + // 来自_variables.scss的配置 + $layout-vertical-nav-collapsed-width: 68px !default, + + // 来自template/_variables.scss的配置 + $layout-vertical-nav-z-index: 1004, + $layout-overlay-z-index: 1003 +); + +// 使用命名空间来避免变量冲突 +@use "@layouts/styles/variables" as layouts-vars; + +$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: layouts-vars.$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 +); + +// Avatar sizes map +$avatar-font-sizes: ( + "x-small": 0.625rem, + "small": 0.75rem, + "default": 0.875rem, + "large": 1rem, + "x-large": 1.125rem, +) !default; diff --git a/src/@core/scss/template/index.scss b/src/@core/scss/template/index.scss index b6477087..8d795fd3 100644 --- a/src/@core/scss/template/index.scss +++ b/src/@core/scss/template/index.scss @@ -1,8 +1,42 @@ @use "sass:map"; -@use "@core/scss/base"; + +// Layout +@use "../vertical-nav"; +@use "../default-layout"; +@use "default-layout-w-vertical-nav"; // Components @use "components"; // Utilities @use "utilities"; +@use "../utils"; + +// Misc +@use "../misc"; + +// Dark +@use "../dark"; + +// Variables +@use "variables"; + +// libs +@use "libs/perfect-scrollbar"; +@use "libs/vuetify"; + +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/@core/scss/template/libs/apex-chart.scss b/src/@core/scss/template/libs/apex-chart.scss index 0f5eda70..be80e1ce 100644 --- a/src/@core/scss/template/libs/apex-chart.scss +++ b/src/@core/scss/template/libs/apex-chart.scss @@ -1,76 +1,89 @@ -@use "@styles/variables/_vuetify.scss" as vuetify; -@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation; -@use "@layouts/styles/mixins" as layoutsMixins; -@use "@core/scss/base/mixins"; +@use "@configureTheme" as theme; +@use "@configured-variables" as variables; +@use "../mixins"; -.v-application .apexcharts-canvas { - &line[stroke="transparent"] { - display: "none"; +// 👉 Apex chart +.apexcharts-canvas { + // For RTL alignment + .apexcharts-yaxis-texts-g { + text-align: start; } + // Tooltip .apexcharts-tooltip { - @include mixins.elevation(3); - - border-color: rgba(var(--v-border-color), var(--v-border-opacity)); - background: rgb(var(--v-theme-surface)); + line-height: 1.5; .apexcharts-tooltip-title { border-color: rgba(var(--v-border-color), var(--v-border-opacity)); background: rgb(var(--v-theme-surface)); font-weight: 500; + margin-block-end: 0.25rem; + padding-inline: 1rem; + } + + .apexcharts-tooltip-text { + display: flex; + align-items: center; + color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); + font-size: inherit; + gap: 0.5rem; + line-height: inherit; + } + + .apexcharts-tooltip-text-label, + .apexcharts-tooltip-text-value { + font-weight: 600; + line-height: 1.5; + } + + .apexcharts-tooltip-series-group { + padding-block: 0 0.5rem; + padding-inline: 1rem; + + &:last-child { + padding-block-end: 1rem; + } + + &.active { + padding-block-start: 0; + } } &.apexcharts-theme-light { - color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); - } - - &.apexcharts-theme-dark { - color: white; - } - - .apexcharts-tooltip-series-group:first-of-type { - padding-block-end: 0; + border-color: rgb(var(--v-border-color)); + background: rgb(var(--v-theme-surface)); + box-shadow: none; + + .apexcharts-tooltip-text-label, + .apexcharts-tooltip-text-value { + color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); + } } } - .apexcharts-xaxistooltip { - border-color: rgba(var(--v-border-color), var(--v-border-opacity)); - background: rgb(var(--v-theme-grey-50)); - color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); - - &::after { - border-block-end-color: rgb(var(--v-theme-grey-50)); - } - - &::before { - border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity)); - } + .apexcharts-marker { + transition: none; } + // 👉 stroke-dasharray + .apexcharts-radialbar, + .apexcharts-radialbar-slice-current { + stroke-linecap: round; + } + + .apexcharts-xaxistooltip, .apexcharts-yaxistooltip { - border-color: rgba(var(--v-border-color), var(--v-border-opacity)); - background: rgb(var(--v-theme-grey-50)); - - &::after { - border-inline-start-color: rgb(var(--v-theme-grey-50)); - } + border-color: rgb(var(--v-border-color)); + background: rgb(var(--v-theme-surface)); + color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)); + &::after, &::before { - border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity)); - } - } - - .apexcharts-xaxistooltip-text, - .apexcharts-yaxistooltip-text { - color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); - } - - .apexcharts-yaxis .apexcharts-yaxis-texts-g .apexcharts-yaxis-label { - @include layoutsMixins.rtl { - text-anchor: start; + border-block-end-color: rgb(var(--v-border-color)); } } + // 👉 Text color .apexcharts-text, .apexcharts-tooltip-text, .apexcharts-datalabel-label, @@ -78,23 +91,16 @@ .apexcharts-xaxistooltip-text, .apexcharts-yaxistooltip-text, .apexcharts-legend-text { - font-family: vuetify.$body-font-family !important; + color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)) !important; + font-family: inherit !important; } - .apexcharts-pie-label { - fill: white; - filter: none; - } - - .apexcharts-marker { - box-shadow: none; - } - - .apexcharts-legend-marker { - margin-inline-end: 0.3875rem !important; - - @include layoutsMixins.rtl { - margin-inline-end: 0.75rem !important; + // 👉 Annotation Label + .apexcharts-annotation-rect { + &.apexcharts-xaxis-annotation-rect, + &.apexcharts-yaxis-annotation-rect { + fill-opacity: 0.05; + stroke-opacity: 0; } } } diff --git a/src/@core/scss/template/libs/full-calendar.scss b/src/@core/scss/template/libs/full-calendar.scss index a6c4cf6f..fa82e5ea 100644 --- a/src/@core/scss/template/libs/full-calendar.scss +++ b/src/@core/scss/template/libs/full-calendar.scss @@ -1,4 +1,5 @@ -@use "@core/scss/base/mixins"; +@use "../mixins"; +@use "@configured-variables" as variables; .v-application .fc { --fc-today-bg-color: rgba(var(--v-theme-on-surface), 0.04); @@ -16,16 +17,20 @@ padding: 0; } + .fc-toolbar-title { + display: inline-block; + color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); + font-size: 1.25rem; + font-weight: 500; + margin-inline-start: 0.25rem; + } + .fc-col-header-cell-cushion { color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); font-size: 0.875rem; font-weight: 600; } - .fc-toolbar .fc-toolbar-title { - margin-inline-start: 0.25rem; - } - .fc-event-time { font-size: 0.75rem; } @@ -95,6 +100,7 @@ gap: 1rem 0.5rem; } + // 👉 Toolbar Chunk and Button Group .fc-toolbar-chunk { display: flex; align-items: center; @@ -102,19 +108,38 @@ .fc-button-group { .fc-button-primary { &, + &:focus, &:hover, &:not(.disabled):active { border-color: transparent; background-color: transparent; - color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); - } - - &:focus { box-shadow: none !important; + color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); } } } + // 👉 sidebar toggler + .fc-drawerToggler-button { + display: none; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(94,86,105,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E"); + background-position: 50%; + background-repeat: no-repeat; + block-size: 1.5625rem; + font-size: 0; + inline-size: 1.5625rem; + margin-inline-end: 0.25rem; + + @media (width <= 1264px) { + display: block !important; + } + + .v-theme--dark & { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(232,232,241,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E"); + } + } + + // Special styling for the last toolbar chunk &:last-child { .fc-button-group { border: 0.0625rem solid rgba(var(--v-border-color), var(--v-border-opacity)); @@ -139,13 +164,6 @@ } } - .fc-toolbar-title { - display: inline-block; - color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); - font-size: 1.25rem; - font-weight: 500; - } - .fc-scrollgrid-section { th { border-inline: 0; @@ -217,37 +235,6 @@ } } - // 👉 sidebar toggler - .fc-toolbar-chunk { - .fc-button-group { - align-items: center; - - .fc-button .fc-icon { - vertical-align: bottom; - } - - // ℹ️ Below two `background-image` styles contains static color due to browser limitation of not parsing the css var inside CSS url() - .fc-drawerToggler-button { - display: none; - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(94,86,105,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E"); - background-position: 50%; - background-repeat: no-repeat; - block-size: 1.5625rem; - font-size: 0; - inline-size: 1.5625rem; - margin-inline-end: 0.25rem; - - @media (width <= 1264px) { - display: block !important; - } - - .v-theme--dark & { - background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(232,232,241,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E"); - } - } - } - } - // ℹ️ Workaround of https://github.com/fullcalendar/fullcalendar/issues/6407 .fc-col-header, .fc-daygrid-body, diff --git a/src/@core/scss/base/libs/_perfect-scrollbar.scss b/src/@core/scss/template/libs/perfect-scrollbar.scss similarity index 99% rename from src/@core/scss/base/libs/_perfect-scrollbar.scss rename to src/@core/scss/template/libs/perfect-scrollbar.scss index 5844490a..27e0f25b 100644 --- a/src/@core/scss/base/libs/_perfect-scrollbar.scss +++ b/src/@core/scss/template/libs/perfect-scrollbar.scss @@ -2,6 +2,11 @@ $ps-size: 0.25rem; $ps-hover-size: 0.375rem; $ps-track-size: 0.5rem; +.ps__thumb-x, +.ps__thumb-y { + background-color: rgb(var(--v-theme-perfect-scrollbar-thumb)) !important; +} + .ps__thumb-y { inline-size: $ps-size; inset-inline-end: 0.0625rem; @@ -29,15 +34,10 @@ $ps-track-size: 0.5rem; inline-size: $ps-hover-size; } -.ps__thumb-x, -.ps__thumb-y { - background-color: rgb(var(--v-theme-perfect-scrollbar-thumb)) !important; -} - // fix bug @media(hover: none) { .ps > .ps__rail-x, .ps > .ps__rail-y { opacity: 0.6; } -} +} diff --git a/src/@core/scss/base/libs/vuetify/_overrides.scss b/src/@core/scss/template/libs/vuetify/_overrides.scss similarity index 84% rename from src/@core/scss/base/libs/vuetify/_overrides.scss rename to src/@core/scss/template/libs/vuetify/_overrides.scss index 07f1e6da..0fdc5390 100644 --- a/src/@core/scss/base/libs/vuetify/_overrides.scss +++ b/src/@core/scss/template/libs/vuetify/_overrides.scss @@ -1,5 +1,5 @@ -@use "@core/scss/base/utils"; @use "@configured-variables" as variables; +@use "../../../utils"; // 👉 Application // ℹ️ We need accurate vh in mobile devices as well @@ -195,7 +195,6 @@ h6, color: rgb(var(--v-border-color)); } -// 👉 DataTable // 👉 DataTable .v-data-table { /* stylelint-disable-next-line no-descending-specificity */ @@ -250,34 +249,53 @@ h6, .v-badge__badge { display: flex; align-items: center; + justify-content: center; } -// 👉 Btn focus outline style removed -.v-btn:focus-visible::after { - opacity: 0 !important; +// 👉 Dialog +.v-dialog--fullscreen { + background-color: rgb(var(--v-theme-surface)); } -// .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); - } +// For dialog card title +.v-card-item + .v-card-text { + padding-block-start: 0 !important; } -// 👉 VCard and VList subtitle color -.v-card-subtitle, -.v-list-item-subtitle { - color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity)); -} +// 👉 v-slide-group (List of chips) +.v-slide-group { + .v-slide-group__container { + display: flex; + flex-wrap: wrap; -// 👉 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; + // Spacing between buttons in v-slide-group + .v-slide-group-item:not(:last-child) { + margin-inline-end: 0.5rem; } } } + +// 👉 Expansion Panel +.v-expansion-panels { + .v-expansion-panel-title { + min-block-size: unset !important; + padding-block: 1rem !important; + } +} + +// 👉 v-textarea +.v-textarea { + textarea { + color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); + + &:hover, + &:focus { + color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); + } + } +} + +// 👉 Cursor +.cursor-pointer { + cursor: pointer; +} diff --git a/src/@core/scss/template/libs/vuetify/_variables.scss b/src/@core/scss/template/libs/vuetify/_variables.scss index bd17ec42..1ca90263 100644 --- a/src/@core/scss/template/libs/vuetify/_variables.scss +++ b/src/@core/scss/template/libs/vuetify/_variables.scss @@ -4,7 +4,18 @@ $shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity); /* stylelint-disable-next-line max-line-length */ $font-family-custom: 'Inter', 'Noto Sans SC', sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; -@forward "../../../base/libs/vuetify/variables" with ( +// 👉 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, + $body-font-family: $font-family-custom !default, $border-radius-root: 6px !default, @@ -110,6 +121,18 @@ $font-family-custom: 'Inter', 'Noto Sans SC', sans-serif, -apple-system, blinkma 24: (0 9px 46px 8px $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: 2rem !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, + $card-title-letter-spacing: 0.0094rem !default, + // 👉 Typography $typography: ( "h1": ( @@ -161,13 +184,16 @@ $font-family-custom: 'Inter', 'Noto Sans SC', sans-serif, -apple-system, blinkma ) ) !default, - // 👉 Card - $card-title-letter-spacing: 0.0094rem !default, - $card-title-line-height: 2rem !default, - $card-subtitle-opacity: 1 !default, + // 👉 List + $list-item-icon-margin-end: 16px !default, + $list-item-icon-margin-start: 16px !default, + $list-item-subtitle-opacity: 1 !default, + $list-subheader-text-opacity: 1 !default, // 👉 Tooltip - $tooltip-background-color:#212121 !default, + $tooltip-background-color: #212121 !default, + $tooltip-text-color: rgb(var(--v-theme-on-primary)) !default, + $tooltip-font-size: 0.75rem !default, $tooltip-border-radius: 4px !default, $tooltip-padding: 4px 8px !default, @@ -209,9 +235,6 @@ $font-family-custom: 'Inter', 'Noto Sans SC', sans-serif, -apple-system, blinkma // 👉 Menu $menu-content-border-radius: 5px !default, - // 👉 List - $list-subheader-text-opacity: 1 !default, - // 👉 Snackbar $snackbar-background:#212121 !default, $snackbar-border-radius: 4px !default, diff --git a/src/@core/scss/template/libs/vuetify/index.scss b/src/@core/scss/template/libs/vuetify/index.scss index d20720c7..4b26b1a2 100644 --- a/src/@core/scss/template/libs/vuetify/index.scss +++ b/src/@core/scss/template/libs/vuetify/index.scss @@ -1 +1,2 @@ -@use "@core/scss/base/libs/vuetify"; +@use "variables"; +@use "overrides"; diff --git a/src/@core/scss/base/placeholders/_default-layout-vertical-nav.scss b/src/@core/scss/template/placeholders/_default-layout-vertical-nav.scss similarity index 97% rename from src/@core/scss/base/placeholders/_default-layout-vertical-nav.scss rename to src/@core/scss/template/placeholders/_default-layout-vertical-nav.scss index 09d0ad36..9eb69098 100644 --- a/src/@core/scss/base/placeholders/_default-layout-vertical-nav.scss +++ b/src/@core/scss/template/placeholders/_default-layout-vertical-nav.scss @@ -1,6 +1,6 @@ @use "@configured-variables" as variables; @use "misc"; -@use "@core/scss/base/mixins"; +@use "../mixins"; %default-layout-vertical-nav-scrolled-sticky-elevated-nav { background-color: rgb(var(--v-theme-surface)); @@ -42,4 +42,4 @@ mask: linear-gradient(black, black 18%, transparent 100%); /* stylelint-enable */ } -} +} diff --git a/src/@core/scss/base/placeholders/_default-layout.scss b/src/@core/scss/template/placeholders/_default-layout.scss similarity index 96% rename from src/@core/scss/base/placeholders/_default-layout.scss rename to src/@core/scss/template/placeholders/_default-layout.scss index 8e5e9906..73157dbf 100644 --- a/src/@core/scss/base/placeholders/_default-layout.scss +++ b/src/@core/scss/template/placeholders/_default-layout.scss @@ -1,3 +1,3 @@ %layout-navbar { color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); -} +} diff --git a/src/@core/scss/template/placeholders/_index.scss b/src/@core/scss/template/placeholders/_index.scss index 5697743f..d515ffa3 100644 --- a/src/@core/scss/template/placeholders/_index.scss +++ b/src/@core/scss/template/placeholders/_index.scss @@ -1,2 +1,5 @@ @forward "nav"; @forward "vertical-nav"; +@forward "default-layout"; +@forward "default-layout-vertical-nav"; +@forward "misc"; diff --git a/src/@core/scss/base/placeholders/_misc.scss b/src/@core/scss/template/placeholders/_misc.scss similarity index 99% rename from src/@core/scss/base/placeholders/_misc.scss rename to src/@core/scss/template/placeholders/_misc.scss index f0a2c1d0..f2cda0fd 100644 --- a/src/@core/scss/base/placeholders/_misc.scss +++ b/src/@core/scss/template/placeholders/_misc.scss @@ -117,4 +117,4 @@ } } } -} +}