From 34e7fb62f32278e1f285282511b272760f37ff4fbd1a80314247e444174343fc Mon Sep 17 00:00:00 2001 From: Claude Dev Date: Sat, 14 Mar 2026 16:47:00 -0400 Subject: [PATCH] Phase 0: Replace Vuexy design system with custom EZSCALE foundation - Install echarts, vue-echarts, @vueuse/core; remove @mdi/font - Switch fonts from Inter/Public Sans to Plus Jakarta Sans/JetBrains Mono - Delete all 38 @core SCSS files, replace with 6 new design token files (_variables, _mixins, _animations, _typography, _component-overrides, _layouts) - Rewrite _marketing.scss with glass morphism and dark grid hero styles - Update Vuetify theme from purple (#7367F0) to navy blue (#1d4ed8) - Add pill-shaped buttons, tonal chips, rounded cards to Vuetify defaults - Make default theme subdomain-aware (light for marketing, dark for app) - Remove @core-scss and @configured-variables Vite aliases - Fix AuthLayout and AppStepper to remove deleted @core SCSS imports Co-Authored-By: Claude Opus 4.6 (1M context) --- website/package-lock.json | 95 ++++- website/package.json | 4 +- .../resources/styles/@core/base/_mixins.scss | 63 ---- .../resources/styles/@core/base/_utils.scss | 90 ----- .../styles/@core/base/_variables.scss | 198 ---------- .../@core/base/libs/vuetify/_index.scss | 1 - .../@core/base/libs/vuetify/_overrides.scss | 262 ------------- .../@core/base/libs/vuetify/_variables.scss | 62 ---- .../styles/@core/template/_mixins.scss | 6 - .../styles/@core/template/_variables.scss | 102 ----- .../template/libs/vuetify/_variables.scss | 348 ------------------ .../libs/vuetify/components/_alert.scss | 114 ------ .../libs/vuetify/components/_avatar.scss | 27 -- .../libs/vuetify/components/_badge.scss | 25 -- .../libs/vuetify/components/_button.scss | 280 -------------- .../libs/vuetify/components/_cards.scss | 3 - .../libs/vuetify/components/_checkbox.scss | 65 ---- .../libs/vuetify/components/_chip.scss | 102 ----- .../libs/vuetify/components/_dialog.scss | 27 -- .../vuetify/components/_expansion-panels.scss | 106 ------ .../libs/vuetify/components/_field.scss | 308 ---------------- .../libs/vuetify/components/_list.scss | 30 -- .../libs/vuetify/components/_menu.scss | 35 -- .../libs/vuetify/components/_otp-input.scss | 17 - .../libs/vuetify/components/_pagination.scss | 140 ------- .../libs/vuetify/components/_progress.scss | 13 - .../libs/vuetify/components/_radio.scss | 46 --- .../libs/vuetify/components/_rating.scss | 20 - .../libs/vuetify/components/_slider.scss | 27 -- .../libs/vuetify/components/_snackbar.scss | 10 - .../libs/vuetify/components/_switch.scss | 58 --- .../libs/vuetify/components/_table.scss | 48 --- .../libs/vuetify/components/_tabs.scss | 91 ----- .../libs/vuetify/components/_textarea.scss | 9 - .../libs/vuetify/components/_timeline.scss | 99 ----- .../libs/vuetify/components/_tooltip.scss | 6 - .../libs/vuetify/components/index.scss | 25 -- .../@core/template/libs/vuetify/index.scss | 3 - .../template/libs/vuetify/overrides.scss | 18 - .../@core/template/pages/page-auth.scss | 63 ---- website/resources/styles/_animations.scss | 84 +++++ .../styles/_component-overrides.scss | 128 +++++++ website/resources/styles/_layouts.scss | 246 +++++++++++++ website/resources/styles/_marketing.scss | 141 +++++-- website/resources/styles/_mixins.scss | 55 +++ website/resources/styles/_typography.scss | 38 ++ website/resources/styles/_variables.scss | 67 ++++ website/resources/styles/styles.scss | 29 +- .../resources/styles/variables/_template.scss | 2 +- .../resources/styles/variables/_vuetify.scss | 15 +- .../ts/@core/components/AppStepper.vue | 8 +- website/resources/ts/Layouts/AuthLayout.vue | 2 - .../resources/ts/plugins/vuetify/defaults.ts | 7 +- website/resources/ts/plugins/vuetify/index.ts | 7 +- website/resources/ts/plugins/vuetify/theme.ts | 76 ++-- website/resources/views/app.blade.php | 2 +- website/vite.config.ts | 2 - 57 files changed, 898 insertions(+), 3057 deletions(-) delete mode 100644 website/resources/styles/@core/base/_mixins.scss delete mode 100644 website/resources/styles/@core/base/_utils.scss delete mode 100644 website/resources/styles/@core/base/_variables.scss delete mode 100644 website/resources/styles/@core/base/libs/vuetify/_index.scss delete mode 100644 website/resources/styles/@core/base/libs/vuetify/_overrides.scss delete mode 100644 website/resources/styles/@core/base/libs/vuetify/_variables.scss delete mode 100644 website/resources/styles/@core/template/_mixins.scss delete mode 100644 website/resources/styles/@core/template/_variables.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/_variables.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_alert.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_avatar.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_badge.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_button.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_cards.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_checkbox.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_chip.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_dialog.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_expansion-panels.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_field.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_list.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_menu.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_otp-input.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_pagination.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_progress.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_radio.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_rating.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_slider.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_snackbar.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_switch.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_table.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_tabs.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_textarea.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_timeline.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/_tooltip.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/components/index.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/index.scss delete mode 100644 website/resources/styles/@core/template/libs/vuetify/overrides.scss delete mode 100644 website/resources/styles/@core/template/pages/page-auth.scss create mode 100644 website/resources/styles/_animations.scss create mode 100644 website/resources/styles/_component-overrides.scss create mode 100644 website/resources/styles/_layouts.scss create mode 100644 website/resources/styles/_mixins.scss create mode 100644 website/resources/styles/_typography.scss create mode 100644 website/resources/styles/_variables.scss diff --git a/website/package-lock.json b/website/package-lock.json index 4396bee..c4c40a0 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -7,14 +7,16 @@ "dependencies": { "@iconify/vue": "^5.0.0", "@inertiajs/vue3": "^2.3.13", - "@mdi/font": "^7.4.47", "@noble/ed25519": "^3.0.0", "@stripe/stripe-js": "^8.7.0", "@vitejs/plugin-vue": "^6.0.4", + "@vueuse/core": "^14.2.1", + "echarts": "^6.0.0", "pinia": "^3.0.4", "sass": "^1.97.3", "vite-plugin-vuetify": "^2.1.3", "vue": "^3.5.27", + "vue-echarts": "^8.0.1", "vuetify": "^3.11.8" }, "devDependencies": { @@ -555,12 +557,6 @@ "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", "license": "MIT" }, - "node_modules/@mdi/font": { - "version": "7.4.47", - "resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.4.47.tgz", - "integrity": "sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==", - "license": "Apache-2.0" - }, "node_modules/@noble/ed25519": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/@noble/ed25519/-/ed25519-3.0.0.tgz", @@ -1238,6 +1234,12 @@ "undici-types": "~7.16.0" } }, + "node_modules/@types/web-bluetooth": { + "version": "0.0.21", + "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz", + "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==", + "license": "MIT" + }, "node_modules/@vitejs/plugin-vue": { "version": "6.0.4", "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.4.tgz", @@ -1445,6 +1447,44 @@ "vuetify": ">=3" } }, + "node_modules/@vueuse/core": { + "version": "14.2.1", + "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.2.1.tgz", + "integrity": "sha512-3vwDzV+GDUNpdegRY6kzpLm4Igptq+GA0QkJ3W61Iv27YWwW/ufSlOfgQIpN6FZRMG0mkaz4gglJRtq5SeJyIQ==", + "license": "MIT", + "dependencies": { + "@types/web-bluetooth": "^0.0.21", + "@vueuse/metadata": "14.2.1", + "@vueuse/shared": "14.2.1" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "vue": "^3.5.0" + } + }, + "node_modules/@vueuse/metadata": { + "version": "14.2.1", + "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.2.1.tgz", + "integrity": "sha512-1ButlVtj5Sb/HDtIy1HFr1VqCP4G6Ypqt5MAo0lCgjokrk2mvQKsK2uuy0vqu/Ks+sHfuHo0B9Y9jn9xKdjZsw==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/@vueuse/shared": { + "version": "14.2.1", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.2.1.tgz", + "integrity": "sha512-shTJncjV9JTI4oVNyF1FQonetYAiTBd+Qj7cY89SWbXSkx7gyhrgtEdF2ZAVWS1S3SHlaROO6F2IesJxQEkZBw==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "vue": "^3.5.0" + } + }, "node_modules/alien-signals": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.1.2.tgz", @@ -1721,6 +1761,22 @@ "node": ">= 0.4" } }, + "node_modules/echarts": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/echarts/-/echarts-6.0.0.tgz", + "integrity": "sha512-Tte/grDQRiETQP4xz3iZWSvoHrkCQtwqd6hs+mifXcjrCuo2iKWbajFObuLJVBlDIJlOzgQPd1hsaKt/3+OMkQ==", + "license": "Apache-2.0", + "dependencies": { + "tslib": "2.3.0", + "zrender": "6.0.0" + } + }, + "node_modules/echarts/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==", + "license": "0BSD" + }, "node_modules/emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", @@ -2791,6 +2847,16 @@ } } }, + "node_modules/vue-echarts": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-8.0.1.tgz", + "integrity": "sha512-23rJTFLu1OUEGRWjJGmdGt8fP+8+ja1gVgzMYPIPaHWpXegcO1viIAaeu2H4QHESlVeHzUAHIxKXGrwjsyXAaA==", + "license": "MIT", + "peerDependencies": { + "echarts": "^6.0.0", + "vue": "^3.3.0" + } + }, "node_modules/vue-tsc": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.2.4.tgz", @@ -2892,6 +2958,21 @@ "engines": { "node": ">=12" } + }, + "node_modules/zrender": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/zrender/-/zrender-6.0.0.tgz", + "integrity": "sha512-41dFXEEXuJpNecuUQq6JlbybmnHaqqpGlbH1yxnA5V9MMP4SbohSVZsJIwz+zdjQXSSlR1Vc34EgH1zxyTDvhg==", + "license": "BSD-3-Clause", + "dependencies": { + "tslib": "2.3.0" + } + }, + "node_modules/zrender/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==", + "license": "0BSD" } } } diff --git a/website/package.json b/website/package.json index 08465e6..a63638d 100644 --- a/website/package.json +++ b/website/package.json @@ -19,14 +19,16 @@ "dependencies": { "@iconify/vue": "^5.0.0", "@inertiajs/vue3": "^2.3.13", - "@mdi/font": "^7.4.47", "@noble/ed25519": "^3.0.0", "@stripe/stripe-js": "^8.7.0", "@vitejs/plugin-vue": "^6.0.4", + "@vueuse/core": "^14.2.1", + "echarts": "^6.0.0", "pinia": "^3.0.4", "sass": "^1.97.3", "vite-plugin-vuetify": "^2.1.3", "vue": "^3.5.27", + "vue-echarts": "^8.0.1", "vuetify": "^3.11.8" } } diff --git a/website/resources/styles/@core/base/_mixins.scss b/website/resources/styles/@core/base/_mixins.scss deleted file mode 100644 index 0fa189c..0000000 --- a/website/resources/styles/@core/base/_mixins.scss +++ /dev/null @@ -1,63 +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); -} - -// #region before-pseudo -// โ„น๏ธ 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; - } -} - -// #endregion before-pseudo - -@mixin bordered-skin($component, $border-property: "border", $important: false) { - #{$component} { - box-shadow: none !important; - // stylelint-disable-next-line annotation-no-unknown - #{$border-property}: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) if($important, !important, null); - } -} - -// #region selected-states -// โ„น๏ธ Inspired from vuetify's active-states mixin -// focus => 0.12 & selected => 0.08 -@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)); - } - } - } -} - -// #endregion selected-states diff --git a/website/resources/styles/@core/base/_utils.scss b/website/resources/styles/@core/base/_utils.scss deleted file mode 100644 index ce84357..0000000 --- a/website/resources/styles/@core/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/website/resources/styles/@core/base/_variables.scss b/website/resources/styles/@core/base/_variables.scss deleted file mode 100644 index 71b3529..0000000 --- a/website/resources/styles/@core/base/_variables.scss +++ /dev/null @@ -1,198 +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: 1003, - $layout-overlay-z-index: 1002, -); -@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; -$horizontal-nav-group-arrow-icon-size: 1.375rem !default; - -// โ„น๏ธ We used SCSS variable because we want to allow users to update max height of popper content -// 120px is combined height of navbar & horizontal nav -$horizontal-nav-popper-content-max-height: calc(100dvh - 120px - 4rem) !default; - -// โ„น๏ธ This variable is used for horizontal nav popper content's `margin-top` and "The bridge"'s height. We need to sync both values. -$horizontal-nav-popper-content-top: calc($horizontal-nav-padding + 0.375rem) !default; - -// ๐Ÿ‘‰ 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/website/resources/styles/@core/base/libs/vuetify/_index.scss b/website/resources/styles/@core/base/libs/vuetify/_index.scss deleted file mode 100644 index f44f80d..0000000 --- a/website/resources/styles/@core/base/libs/vuetify/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@use "overrides"; diff --git a/website/resources/styles/@core/base/libs/vuetify/_overrides.scss b/website/resources/styles/@core/base/libs/vuetify/_overrides.scss deleted file mode 100644 index c34bf3c..0000000 --- a/website/resources/styles/@core/base/libs/vuetify/_overrides.scss +++ /dev/null @@ -1,262 +0,0 @@ -@use "@core-scss/base/utils"; -@use "@configured-variables" 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: 100dvh; -} - -// ๐Ÿ‘‰ 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)); -} - -body, -.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 -// Update tonal variant disabled opacity -.v-btn--disabled { - opacity: 0.65; -} - -@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 - - TODO Checkbox and switch component. Remove it when vuetify resolve the extra spacing: https://github.com/vuetifyjs/vuetify/issues/15519 - We need this because form elements likes checkbox and switches are by default set to height of textfield height which is way big than we want - Tested with checkbox & switches -*/ -.v-checkbox.v-input, -.v-switch.v-input { - --v-input-control-height: auto; - - flex: unset; -} - -.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: 1; - } -} - -// ๐Ÿ‘‰ 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)); -} - -.v-divider.v-divider--vertical { - block-size: inherit; -} - -// ๐Ÿ‘‰ 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-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 !important; -} - -// ๐Ÿ‘‰ 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-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/website/resources/styles/@core/base/libs/vuetify/_variables.scss b/website/resources/styles/@core/base/libs/vuetify/_variables.scss deleted file mode 100644 index fef87f0..0000000 --- a/website/resources/styles/@core/base/libs/vuetify/_variables.scss +++ /dev/null @@ -1,62 +0,0 @@ -@use "sass:map"; - -/* ๐Ÿ‘‰ Shadow opacities */ -$shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity); -$shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity); -$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, - - // ๐Ÿ‘‰ Navigation Drawer - $navigation-drawer-content-overflow-y: hidden !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, - - // ๐Ÿ‘‰ VTimeline - $timeline-dot-size: 34px !default, - - // ๐Ÿ‘‰ table - $table-transition-property: height !default, - - // ๐Ÿ‘‰ VOverlay - $overlay-opacity: 1 !default, - - // ๐Ÿ‘‰ VContainer - $container-max-widths: ( - "xl": 1440px, - "xxl": 1440px - ) !default, - -); diff --git a/website/resources/styles/@core/template/_mixins.scss b/website/resources/styles/@core/template/_mixins.scss deleted file mode 100644 index 6a97343..0000000 --- a/website/resources/styles/@core/template/_mixins.scss +++ /dev/null @@ -1,6 +0,0 @@ -@use "sass:map"; -@use "@configured-variables" as variables; - -@mixin custom-elevation($color, $size) { - box-shadow: (map.get(variables.$shadow-params, $size) rgba($color, map.get(variables.$shadow-opacity, $size))); -} diff --git a/website/resources/styles/@core/template/_variables.scss b/website/resources/styles/@core/template/_variables.scss deleted file mode 100644 index 56df826..0000000 --- a/website/resources/styles/@core/template/_variables.scss +++ /dev/null @@ -1,102 +0,0 @@ -@forward "@core-scss/base/variables" with ( - $default-layout-with-vertical-nav-navbar-footer-roundness: 6px !default, - - $vertical-nav-navbar-style: "floating" !default, // options: elevated, floating - - // ๐Ÿ‘‰ Vertical nav - $vertical-nav-background-color-rgb: var(--v-theme-surface) !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.75rem !default, - - // Section title margin top (when its not first child) - $vertical-nav-section-title-mt: 1rem !default, - $vertical-nav-navbar-elevation: 4 !default, - $vertical-nav-horizontal-padding: 0.75rem !default, - $layout-vertical-nav-collapsed-width: 70px !default, - - // Move logo when vertical nav is mini (collapsed but not hovered) - $vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -1px !default, - - // Section title margin bottom - $vertical-nav-section-title-mb: 0.375rem !default, - - // Vertical nav header padding - $vertical-nav-header-padding: 1.25rem 0.5rem !default, - - // Vertical nav icons - $vertical-nav-items-icon-size: 1.375rem !default, - $vertical-nav-items-nested-icon-size: 0.75rem !default, - - // ๐Ÿ‘‰Footer - $layout-vertical-nav-footer-height: 54px !default, - - // Gap between top level horizontal nav items - $horizontal-nav-top-level-items-gap: 6px !default, - - $horizontal-nav-items-icon-margin-inline-end: 0.5rem !default, - - $horizontal-nav-popper-content-top: 0.375rem !default, - - $horizontal-nav-group-arrow-icon-size: 1.25rem !default, - $horizontal-nav-third-level-icon-size: 0.75rem !default, - /* - โ— 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.5rem !default, - - // ๐Ÿ‘‰ Navbar - $layout-vertical-nav-navbar-height: 54px !default, - $layout-horizontal-nav-navbar-height: 54px !default, - - // Font sizes - $font-sizes: ( - "xs": 0.6875rem, - "sm": 0.8125rem, - "base": 0.9375rem, - "lg": 1.125rem, - "xl": 1.5rem, - "2xl": 1.75rem, - "3xl": 2rem, - "4xl": 2.375rem, - "5xl": 3rem, - "6xl": 3.5rem, - "7xl": 4rem, - "8xl": 4.5rem, - "9xl": 5.25rem, - ) !default, - - // Line heights - $font-line-height: ( - "xs": 0.9375rem, - "sm": 1.25rem, - "base": 1.375rem, - "lg": 1.75rem, - "xl": 2.375rem, - "2xl": 2.625rem, - "3xl": 2.75rem, - "4xl": 3.25rem, - "5xl": 1, - "6xl": 1, - "7xl": 1, - "8xl": 1, - "9xl": 1 - ) !default, -); - -/* Custom shadow opacity */ -$shadow-opacity: ( - "sm": 0.3, - "md": 0.4, - "lg": 0.5, -) !default; - -/* Custom shadow params */ -$shadow-params: ( - "sm": 0 2px 6px 0, - "md": 0 4px 16px 0, - "lg": 0 6px 20px 0, -) !default; diff --git a/website/resources/styles/@core/template/libs/vuetify/_variables.scss b/website/resources/styles/@core/template/libs/vuetify/_variables.scss deleted file mode 100644 index b9f2891..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/_variables.scss +++ /dev/null @@ -1,348 +0,0 @@ -@use "sass:math"; - -$font-family-custom: "Public Sans",sans-serif,-apple-system,blinkmacsystemfont, - "Segoe UI",roboto,"Helvetica Neue",arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; - -/* ๐Ÿ‘‰ Typography custom variables */ -$typography-h5-font-size: 1.125rem; -$typography-body-1-font-size: 0.9375rem; -$typography-body-1-line-height: 1.375rem; - -@forward "../../../base/libs/vuetify/variables" with ( - $body-font-family: $font-family-custom !default, - $border-radius-root: 6px !default, - - // ๐Ÿ‘‰ Rounded - $rounded: ( - "sm": 4px, - "lg": 8px, - "shaped": 30px 0, - ) !default, - - // ๐Ÿ‘‰ Shadows - $shadow-key-umbra: ( - 0: (0 0 0 0 rgba(var(--v-shadow-key-umbra-color), 1)), - 1: (0 2px 4px rgba(var(--v-shadow-key-umbra-color), 0.12)), - 2: (0 1px 6px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xs-opacity))), - 3: (0 3px 8px rgba(var(--v-shadow-key-umbra-color), 0.14)), - 4: (0 2px 8px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-sm-opacity))), - 5: (0 4px 10px rgba(var(--v-shadow-key-umbra-color), 0.15)), - 6: (0 3px 12px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-md-opacity))), - 7: (0 4px 18px rgba(var(--v-shadow-key-umbra-color), 0.1)), - 8: (0 4px 18px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-lg-opacity))), - 9: (0 5px 14px rgba(var(--v-shadow-key-umbra-color), 0.18)), - 10: (0 5px 30px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xl-opacity))), - 11: (0 5px 16px rgba(var(--v-shadow-key-umbra-color), 0.2)), - 12: (0 6px 17px rgba(var(--v-shadow-key-umbra-color), 0.22)), - 13: (0 6px 18px rgba(var(--v-shadow-key-umbra-color), 0.22)), - 14: (0 6px 19px rgba(var(--v-shadow-key-umbra-color), 0.24)), - 15: (0 7px 20px rgba(var(--v-shadow-key-umbra-color), 0.24)), - 16: (0 7px 21px rgba(var(--v-shadow-key-umbra-color), 0.26)), - 17: (0 7px 22px rgba(var(--v-shadow-key-umbra-color), 0.26)), - 18: (0 8px 23px rgba(var(--v-shadow-key-umbra-color), 0.28)), - 19: (0 8px 24px 6px rgba(var(--v-shadow-key-umbra-color), 0.28)), - 20: (0 9px 25px rgba(var(--v-shadow-key-umbra-color), 0.3)), - 21: (0 9px 26px rgba(var(--v-shadow-key-umbra-color), 0.32)), - 22: (0 9px 27px rgba(var(--v-shadow-key-umbra-color), 0.32)), - 23: (0 10px 28px rgba(var(--v-shadow-key-umbra-color), 0.34)), - 24: (0 10px 30px rgba(var(--v-shadow-key-umbra-color), 0.34)) - ) !default, - - $shadow-key-penumbra: ( - 0: (0 0 transparent), - 1: (0 0 transparent), - 2: (0 0 transparent), - 3: (0 0 transparent), - 4: (0 0 transparent), - 5: (0 0 transparent), - 6: (0 0 transparent), - 7: (0 0 transparent), - 8: (0 0 transparent), - 9: (0 0 transparent), - 10: (0 0 transparent), - 11: (0 0 transparent), - 12: (0 0 transparent), - 13: (0 0 transparent), - 14: (0 0 transparent), - 15: (0 0 transparent), - 16: (0 0 transparent), - 17: (0 0 transparent), - 18: (0 0 transparent), - 19: (0 0 transparent), - 20: (0 0 transparent), - 21: (0 0 transparent), - 22: (0 0 transparent), - 23: (0 0 transparent), - 24: (0 0 transparent), - ) !default, - - $shadow-key-ambient: ( - 0: (0 0 transparent), - 1: (0 0 transparent), - 2: (0 0 transparent), - 3: (0 0 transparent), - 4: (0 0 transparent), - 5: (0 0 transparent), - 6: (0 0 transparent), - 7: (0 0 transparent), - 8: (0 0 transparent), - 9: (0 0 transparent), - 10: (0 0 transparent), - 11: (0 0 transparent), - 12: (0 0 transparent), - 13: (0 0 transparent), - 14: (0 0 transparent), - 15: (0 0 transparent), - 16: (0 0 transparent), - 17: (0 0 transparent), - 18: (0 0 transparent), - 19: (0 0 transparent), - 20: (0 0 transparent), - 21: (0 0 transparent), - 22: (0 0 transparent), - 23: (0 0 transparent), - 24: (0 0 transparent), - ) !default, - - // ๐Ÿ‘‰ Typography - $typography: ( - "h1": ( - "size": 2.875rem, - "weight": 500, - "line-height": 4.25rem, - "letter-spacing": normal - ), - "h2": ( - "size": 2.375rem, - "weight": 500, - "line-height": 3.5rem, - "letter-spacing": normal - ), - "h3": ( - "size": 1.75rem, - "weight": 500, - "line-height": 2.625rem - ), - "h4": ( - "size": 1.5rem, - "weight": 500, - "line-height": 2.375rem, - "letter-spacing": normal - ), - "h5": ( - "size": $typography-h5-font-size, - "weight": 500, - "line-height": 1.75rem - ), - "h6":( - "size": 0.9375rem, - "line-height": 1.375rem, - "letter-spacing": normal - ), - "body-1":( - "size": $typography-body-1-font-size, - "line-height": $typography-body-1-line-height, - "letter-spacing": normal - ), - "body-2": ( - "size": 0.8125rem, - "line-height": 1.25rem, - "letter-spacing": normal - ), - "subtitle-1":( - "size": 0.9375rem, - "weight": 400, - "line-height": 1.375rem - ), - "subtitle-2": ( - "size": 0.8125rem, - "weight": 400, - "line-height": 1.25rem, - "letter-spacing": normal - ), - "button": ( - "size": 0.9375rem, - "weight": 500, - "line-height": 1.125rem, - "letter-spacing": 0.0269rem, - "text-transform": capitalize - ), - "caption":( - "size": 0.8125rem, - "line-height": 1.125rem, - "letter-spacing": 0.025rem - ), - "overline": ( - "size": 0.75rem, - "weight": 400, - "line-height": 0.875rem, - "letter-spacing": 0.05rem, - ), - ) !default, - - // ๐Ÿ‘‰ Alert - $alert-title-font-size: 1.125rem !default, - $alert-title-line-height: 1.5rem !default, - $alert-border-opacity: 0.38 !default, - - // ๐Ÿ‘‰ Badge - $badge-dot-height: 8px !default, - $badge-dot-width: 8px !default, - $badge-min-width: 24px !default, - $badge-height: 1.5rem !default, - $badge-font-size: 0.8125rem !default, - $badge-border-radius: 12px !default, - $badge-border-color: rgb(var(--v-theme-surface)) !default, - $badge-border-transform: scale(1.5) !default, - $badge-dot-border-width: 2px !default, - - // ๐Ÿ‘‰ Chip - $chip-font-size: 13px !default, - $chip-font-weight: 500 !default, - $chip-label-border-radius: 0.375rem !default, - $chip-height: 32px !default, - $chip-close-size: 1.25rem !default, - $chip-elevation: 0 !default, - - // ๐Ÿ‘‰ Button - $button-height: 38px !default, - $button-padding-ratio: 1.9 !default, - $button-line-height: 1.375rem !default, - $button-disabled-opacity: 0.45 !default, - $button-disabled-overlay: 0.2025 !default, - $button-icon-font-size: 0.9375rem !default, - - // ๐Ÿ‘‰ Button Group - $btn-group-border-radius: 8px !default, - - // ๐Ÿ‘‰ Dialog - $dialog-card-header-padding: 24px 24px 0 !default, - $dialog-card-header-text-padding-top: 24px !default, - $dialog-card-text-padding: 24px !default, - $dialog-elevation: 8 !default, - - // ๐Ÿ‘‰ Card - $card-title-font-size: $typography-h5-font-size !default, - $card-text-font-size: $typography-body-1-font-size !default, - $card-subtitle-font-size: 0.9375rem !default, - $card-subtitle-header-padding: 0 !default, - $card-subtitle-line-height: 1.375rem !default, - $card-title-line-height: 1.75rem !default, - $card-text-padding: 24px !default, - $card-text-line-height: 1.375rem !default, - $card-item-padding: 24px !default, - $card-elevation: 6 !default, - - // ๐Ÿ‘‰ Carousel - $carousel-dot-margin: 0 !default, - $carousel-dot-inactive-opacity: 0.4 !default, - - // ๐Ÿ‘‰ Expansion Panel - $expansion-panel-title-padding: 12px 20px 12px 24px !default, - $expansion-panel-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default, - $expansion-panel-active-title-min-height: 46px !default, - $expansion-panel-title-min-height: 46px !default, - $expansion-panel-text-padding: 0 20px 20px 24px !default, - - // ๐Ÿ‘‰ Field - $field-font-size: 0.9375rem !default, - $input-density: ("default": -2, "comfortable": -4.5, "compact": -6.5) !default, - $field-outline-opacity: 0.22 !default, - $field-border-width: 1px !default, - $field-focused-border-width: 2px !default, - $field-control-affixed-padding: 14px !default, - - // ๐Ÿ‘‰ Input - $input-details-padding-above: 4px !default, - $input-details-font-size: 0.8125rem !default, - - // ๐Ÿ‘‰ List - $list-density: ("default": 0, "comfortable": -1.5, "compact": -2.5) !default, - $list-border-radius: 6px !default, - $list-item-padding: 8px 20px !default, - $list-item-icon-margin-end: 10px !default, - $list-item-icon-margin-start : 12px !default, - $list-item-subtitle-line-height: 20px !default, - $list-subheader-font-size: 13px !default, - $list-subheader-line-height: 1.25rem !default, - $list-subheader-padding-end: 20px !default, - $list-subheader-min-height: 40px !default, - $list-item-avatar-margin-start: 12px !default, - $list-item-avatar-margin-end: 12px !default, - $list-disabled-opacity: 0.4, - - // ๐Ÿ‘‰ label - $label-font-size: 0.9375rem !default, - - // ๐Ÿ‘‰ message - $messages-font-size: 13px !default, - - // ๐Ÿ‘‰ menu - $menu-elevation: 8 !default, - - // ๐Ÿ‘‰ navigation drawer - $navigation-drawer-temporary-elevation: 8 !default, - - // ๐Ÿ‘‰ pagination - $pagination-item-margin: 0.1875rem !default, - - // ๐Ÿ‘‰ Progress Linear - $progress-linear-background-opacity: 1 !default, - - // ๐Ÿ‘‰ Radio - $radio-group-label-selection-group-padding-inline: 0 !default, - - // ๐Ÿ‘‰ slider - $slider-thumb-hover-opacity: var(--v-activated-opacity) !default, - $slider-thumb-label-padding: 2px 10px !default, - $slider-thumb-label-font-size: 0.8125rem !default, - $slider-track-active-size: 6px !default, - - // ๐Ÿ‘‰ select - $select-chips-margin-bottom: ("default": 1, "comfortable": 1, "compact": 1) !default, - - // ๐Ÿ‘‰ snackbar - $snackbar-background: rgb(var(--v-tooltip-background)) !default, - $snackbar-color: rgb(var(--v-theme-surface)) !default, - $snackbar-content-padding: 12px 16px !default, - $snackbar-font-size: 0.8125rem !default, - $snackbar-elevation: 2 !default, - $snackbar-wrapper-min-height:44px !default, - $snackbar-btn-padding: 0 9px !default, - $snackbar-action-margin: 16px !default, - - // ๐Ÿ‘‰ switch - $switch-inset-track-width: 1.875rem !default, - $switch-inset-track-height: 1.125rem !default, - $switch-inset-thumb-height: 0.875rem !default, - $switch-inset-thumb-width: 0.875rem !default, - $switch-inset-thumb-off-height: 0.875rem !default, - $switch-inset-thumb-off-width: 0.875rem !default, - $switch-thumb-elevation: 2 !default, - $switch-track-opacity: 1 !default, - $switch-track-background: rgba(var(--v-theme-on-surface), var(--v-focus-opacity)) !default, - $switch-thumb-background: rgb(var(--v-theme-on-primary)), - - // ๐Ÿ‘‰ table - $table-row-height: 50px !default, - $table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default, - $table-font-size: 0.9375rem !default, - - // ๐Ÿ‘‰ tabs - $tabs-height: 42px !default, - $tab-min-width: 50px !default, - - // ๐Ÿ‘‰ tooltip - $tooltip-background-color: rgb(var(--v-tooltip-background)) !default, - $tooltip-text-color: rgb(var(--v-theme-surface)) !default, - $tooltip-font-size: 0.8125rem !default, - $tooltip-border-radius: 0.25rem !default, - $tooltip-padding: 5px 12px !default, - - // ๐Ÿ‘‰ timeline - $timeline-dot-size: 34px !default, - $timeline-dot-divider-background: rgba(var(--v-border-color),0.08) !default, - $timeline-divider-line-background: rgba(var(--v-border-color), var(--v-border-opacity)) !default, - $timeline-divider-line-thickness: 1.5px !default, - $timeline-item-padding: 16px !default, -); diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_alert.scss b/website/resources/styles/@core/template/libs/vuetify/components/_alert.scss deleted file mode 100644 index 67fadb1..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_alert.scss +++ /dev/null @@ -1,114 +0,0 @@ -@use "@core-scss/base/mixins"; -@use "@configured-variables" as variables; - -/* ๐Ÿ‘‰ Alert -/ โ„น๏ธ custom icon styling */ - -$alert-prepend-icon-font-size: 1.375rem !important; - -.v-alert { - .v-alert__content { - line-height: 1.375rem; - } - - &:not(.v-alert--prominent) .v-alert__prepend { - block-size: 1.875rem !important; - inline-size: 1.875rem !important; - - .v-icon { - margin: auto; - block-size: 1.375rem !important; - font-size: 1.375rem !important; - inline-size: 1.375rem !important; - } - } - - .v-alert-title { - margin-block-end: 0.25rem; - } - - .v-alert__close { - .v-btn--icon { - .v-icon { - block-size: 1.25rem; - font-size: 1.25rem; - inline-size: 1.25rem; - } - - .v-btn__overlay, - .v-ripple__container { - opacity: 0; - } - } - } - - &:not(.v-alert--prominent) { - /* stylelint-disable-next-line no-duplicate-selectors */ - .v-alert__prepend { - border-radius: 0.375rem; - } - - &.v-alert--variant-flat, - &.v-alert--variant-elevated { - .v-alert__prepend { - background-color: #fff; - - @include mixins.elevation(2); - } - } - - &.v-alert--variant-tonal { - .v-alert__prepend { - z-index: 1; - background-color: rgb(var(--v-theme-surface)); - } - } - } -} - -.v-alert.v-alert--density-compact { - border-radius: 0.25rem; -} - -.v-alert.v-alert--density-default { - border-radius: 0.5rem; -} - -@each $color-name in variables.$theme-colors-name { - .v-alert { - &:not(.v-alert--prominent) { - &.bg-#{$color-name}, - &.text-#{$color-name} { - .v-alert__prepend .v-icon { - color: rgb(var(--v-theme-#{$color-name})) !important; - } - } - - &.v-alert--variant-tonal { - &.text-#{$color-name}, - &.bg-#{$color-name} { - .v-alert__underlay { - background: rgb(var(--v-theme-#{$color-name})) !important; - } - - .v-alert__prepend { - background-color: rgb(var(--v-theme-#{$color-name})); - - .v-icon { - color: #fff !important; - } - } - } - } - - &.v-alert--variant-outlined { - &.text-#{$color-name}, - &.bg-#{$color-name} { - .v-alert__prepend { - background-color: rgba(var(--v-theme-#{$color-name}), 0.16); - } - } - } - } - } -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_avatar.scss b/website/resources/styles/@core/template/libs/vuetify/components/_avatar.scss deleted file mode 100644 index 204679c..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_avatar.scss +++ /dev/null @@ -1,27 +0,0 @@ -@use "@core-scss/base/mixins"; - -// ๐Ÿ‘‰ Avatar -body { - .v-avatar { - .v-icon { - block-size: 1.5rem; - inline-size: 1.5rem; - } - - &.v-avatar--variant-tonal:not([class*="text-"]) { - .v-avatar__underlay { - --v-activated-opacity: 0.08; - } - } - } - - .v-avatar-group { - > * { - &:hover { - transform: translateY(-5px) scale(1); - - @include mixins.elevation(6); - } - } - } -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_badge.scss b/website/resources/styles/@core/template/libs/vuetify/components/_badge.scss deleted file mode 100644 index 0cf46aa..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_badge.scss +++ /dev/null @@ -1,25 +0,0 @@ -@use "@configured-variables" as variables; - -// ๐Ÿ‘‰ Badge -.v-badge { - .v-badge__badge .v-icon { - font-size: 0.9375rem; - } - - &.v-badge--bordered:not(.v-badge--dot) { - .v-badge__badge { - &::after { - transform: scale(1.05); - } - } - } - - &.v-badge--tonal { - @each $color-name in variables.$theme-colors-name { - .v-badge__badge.bg-#{$color-name} { - background-color: rgba(var(--v-theme-#{$color-name}), 0.16) !important; - color: rgb(var(--v-theme-#{$color-name})) !important; - } - } - } -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_button.scss b/website/resources/styles/@core/template/libs/vuetify/components/_button.scss deleted file mode 100644 index 24fc473..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_button.scss +++ /dev/null @@ -1,280 +0,0 @@ -@use "sass:list"; -@use "sass:map"; -@use "@core-scss/template/mixins" as templateMixins; -@use "@configured-variables" as variables; - -/* ๐Ÿ‘‰ Button - Above map but opacity values as key and variant as value */ - -$btn-active-overlay-opacity: ( - 0.08: (outlined, flat, text, plain), - 0.24: (tonal), -); -$btn-hover-overlay-opacity: ( - 0: (elevated), - 0.08: (outlined, flat, text, plain), - 0.24: (tonal), -); -$btn-focus-overlay-opacity: ( - 0.08: (outlined, flat, text, plain), - 0.24: (tonal), -); - -body .v-btn { - // โ„น๏ธ This is necessary because as we have darker overlay on hover for elevated variant, button text doesn't get dimmed - // This style is already applied to `.v-icon` - .v-btn__content { - z-index: 0; - } - - transition: all 0.135s ease; /* Add transition */ - - &:active { - transform: scale(0.98); - } - - // Add transition on hover - &:not(.v-btn--loading) .v-btn__overlay { - transition: opacity 0.15s ease-in-out; - will-change: opacity; - } - - // box-shadow - @each $color-name in variables.$theme-colors-name { - &:not(.v-btn--disabled) { - &.bg-#{$color-name}.v-btn--variant-elevated { - &, - &:hover, - &:active, - &:focus { - @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm"); - } - } - } - } - - /* - Loop over $btn-active-overlay-opacity map and add active styles for each variant. - Group variants with same opacity value. - */ - @each $opacity, $variants in $btn-active-overlay-opacity { - $overlay-selectors: (); - $underlay-selectors: (); - - // append each variant to selectors list - @each $variant in $variants { - $overlay-selectors: list.append($overlay-selectors, "&.v-btn--variant-#{$variant}:active > .v-btn__overlay,"); - $underlay-selectors: list.append($underlay-selectors, "&.v-btn--variant-#{$variant}:active > .v-btn__underlay,"); - } - - #{$overlay-selectors} { - --v-hover-opacity: #{$opacity}; - - opacity: var(--v-hover-opacity); - } - - #{$underlay-selectors} { - opacity: 0; - } - } - - @each $opacity, $variants in $btn-focus-overlay-opacity { - $selectors: (); - - // append each variant to selectors list - @each $variant in $variants { - $selectors: list.append($selectors, "&.v-btn--variant-#{$variant}:focus > .v-btn__overlay,"); - } - - #{$selectors} { - opacity: $opacity; - } - } - - /* - Loop over $btn-hover-overlay-opacity map and add hover styles for each variant. - Group variants with same opacity value. - */ - @each $opacity, $variants in $btn-hover-overlay-opacity { - $selectors: (); - - // append each variant to selectors list - @each $variant in $variants { - $selectors: list.append($selectors, "&.v-btn--variant-#{$variant}:hover > .v-btn__overlay,"); - } - - #{$selectors} { - --v-hover-opacity: #{$opacity}; - } - } - - // Default (elevated) button - &--variant-elevated, - &--variant-flat { - // We want a darken color on hover - &:not(.v-btn--loading, .v-btn--disabled) { - @each $color-name in variables.$theme-colors-name { - &.bg-#{$color-name} { - &:hover, - &:active, - &:focus { - background-color: rgb(var(--v-theme-#{$color-name}-darken-1)) !important; - } - } - } - } - } - - // Outlined button - &:not(.v-btn--icon, .v-tab).v-btn--variant-text { - &.v-btn--size-default { - padding-inline: 0.75rem; - } - - &.v-btn--size-small { - padding-inline: 0.5625rem; - } - - &.v-btn--size-large { - padding-inline: 1rem; - } - } - - // Button border-radius - &:not(.v-btn--icon).v-btn--size-x-small { - border-radius: 2px; - } - - &:not(.v-btn--icon).v-btn--size-small { - border-radius: 4px; - line-height: 1.125rem; - padding-block: 0; - padding-inline: 0.875rem; - } - - &:not(.v-btn--icon).v-btn--size-default { - .v-btn__content, - .v-btn__append, - .v-btn__prepend { - .v-icon { - --v-icon-size-multiplier: 0.7113; - - block-size: 1rem; - font-size: 1rem; - inline-size: 1rem; - } - - .v-icon--start { - margin-inline: -2px 6px; - } - - .v-icon--end { - margin-inline: 6px -2px; - } - } - } - - &:not(.v-btn--icon).v-btn--size-large { - --v-btn-height: 3rem; - - border-radius: 8px; - line-height: 1.625rem; - padding-block: 0; - padding-inline: 1.625rem; - } - - &:not(.v-btn--icon).v-btn--size-x-large { - border-radius: 10px; - } - - // icon buttons - &.v-btn--icon.v-btn--density-default { - block-size: var(--v-btn-height); - inline-size: var(--v-btn-height); - - &.v-btn--size-default { - .v-icon { - --v-icon-size-multiplier: 0.978 !important; - - block-size: 1.375rem; - font-size: 1.375rem; - inline-size: 1.375rem; - } - } - - &.v-btn--size-small { - --v-btn-height: 2.125rem; - - .v-icon { - block-size: 1.25rem; - font-size: 1.25rem; - inline-size: 1.25rem; - } - } - - &.v-btn--size-large { - --v-btn-height: 2.625rem; - - .v-icon { - block-size: 1.75rem; - font-size: 1.75rem; - inline-size: 1.75rem; - } - } - } - - &-group.v-btn-toggle { - .v-btn { - border-radius: 0.5rem; - block-size: 52px !important; - border-inline-end: none; - inline-size: 52px !important; - - &.v-btn--density-comfortable { - border-radius: 0.375rem; - block-size: 44px !important; - inline-size: 44px !important; - } - - &.v-btn--density-compact { - border-radius: 0.25rem; - block-size: 36px !important; - inline-size: 36px !important; - } - - &.v-btn--icon .v-icon { - block-size: 1.5rem; - color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); - font-size: 1.5rem; - inline-size: 1.5rem; - } - - &.v-btn--icon.v-btn--active { - .v-icon { - color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); - } - } - } - - &.v-btn-group { - align-items: center; - padding: 7px; - border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)); - block-size: 66px; - - .v-btn.v-btn--active { - .v-btn__overlay { - --v-activated-opacity: 0.08; - } - } - - &.v-btn-group--density-compact { - block-size: 50px; - } - - &.v-btn-group--density-comfortable { - block-size: 58px; - } - } - } -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_cards.scss b/website/resources/styles/@core/template/libs/vuetify/components/_cards.scss deleted file mode 100644 index fe680cb..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_cards.scss +++ /dev/null @@ -1,3 +0,0 @@ -.v-card-subtitle { - color: rgba(var(--v-theme-on-background), 0.55); -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_checkbox.scss b/website/resources/styles/@core/template/libs/vuetify/components/_checkbox.scss deleted file mode 100644 index 8ed13de..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_checkbox.scss +++ /dev/null @@ -1,65 +0,0 @@ -@use "sass:list"; -@use "sass:map"; -@use "@styles/variables/vuetify"; -@use "@configured-variables" as variables; - -// ๐Ÿ‘‰ Checkbox -.v-checkbox { - // We adjusted it to vertically align the label - - .v-selection-control--disabled { - --v-disabled-opacity: 0.45; - } - - // Remove extra space below the label - .v-input__details { - min-block-size: unset !important; - padding-block-start: 0 !important; - } -} - -// ๐Ÿ‘‰ checkbox size and box shadow -.v-checkbox-btn { - // ๐Ÿ‘‰ Checkbox icon opacity - .v-selection-control__input > .v-icon { - opacity: 1; - } - - &.v-selection-control--dirty { - @each $color-name in variables.$theme-colors-name { - .v-selection-control__wrapper.text-#{$color-name} { - .v-selection-control__input { - /* โ„น๏ธ Using filter: drop-shadow() instead of box-shadow because box-shadow creates white background for SVG; */ - .v-icon { - filter: drop-shadow(0 2px 6px rgba(var(--v-theme-#{$color-name}), 0.3)); - } - } - } - } - } -} - -// checkbox icon size -.v-checkbox, -.v-checkbox-btn { - &.v-selection-control { - .v-selection-control__input { - svg { - font-size: 1.5rem; - } - } - - .v-label { - color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); - line-height: 1.375rem; - } - } - - &:not(.v-selection-control--dirty) { - .v-selection-control__input { - > .custom-checkbox-indeterminate { - color: rgb(var(--v-theme-primary)) !important; - } - } - } -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_chip.scss b/website/resources/styles/@core/template/libs/vuetify/components/_chip.scss deleted file mode 100644 index 85754cd..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_chip.scss +++ /dev/null @@ -1,102 +0,0 @@ -// ๐Ÿ‘‰ Chip -.v-chip { - line-height: 1.25rem; - - .v-chip__close { - margin-inline: 4px -6px !important; - - .v-icon { - opacity: 0.7; - } - } - - .v-chip__content { - .v-icon { - block-size: 20px; - font-size: 20px; - inline-size: 20px; - } - } - - &:not(.v-chip--variant-elevated) { - color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); - } - - &.v-chip--variant-elevated { - background-color: rgba(var(--v-theme-on-surface), var(--v-activated-opacity)); - color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); - } - - &:not([class*="text-"]) { - --v-activated-opacity: 0.08; - } - - // common style for all sizes - &.v-chip--size-default, - &.v-chip--size-small { - .v-icon--start, - .v-chip__filter { - margin-inline-start: 0 !important; - } - - &:not(.v-chip--pill) { - .v-avatar--start { - margin-inline: -6px 4px; - } - - .v-avatar--end { - margin-inline: 4px -6px; - } - } - } - - // small size - &:not(.v-chip--pill).v-chip--size-small { - --v-chip-height: 24px; - - &.v-chip--label { - border-radius: 0.25rem; - } - - font-size: 13px; - - .v-avatar { - --v-avatar-height: 16px; - } - - .v-chip__close { - font-size: 16px; - max-block-size: 16px; - max-inline-size: 16px; - } - } - - // extra small size - &:not(.v-chip--pill).v-chip--size-x-small { - --v-chip-height: 20px; - - &.v-chip--label { - border-radius: 0.25rem; - padding-inline: 0.625rem; - } - - font-size: 13px; - - .v-avatar { - --v-avatar-height: 16px; - } - - .v-chip__close { - font-size: 16px; - max-block-size: 16px; - max-inline-size: 16px; - } - } - - // default size - &:not(.v-chip--pill).v-chip--size-default { - .v-avatar { - --v-avatar-height: 20px; - } - } -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_dialog.scss b/website/resources/styles/@core/template/libs/vuetify/components/_dialog.scss deleted file mode 100644 index 054b4aa..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_dialog.scss +++ /dev/null @@ -1,27 +0,0 @@ -@use "@layouts/styles/mixins" as layoutsMixins; - -// ๐Ÿ‘‰ Dialog -body .v-dialog { - // dialog custom close btn - .v-dialog-close-btn { - border-radius: 0.375rem; - background-color: rgb(var(--v-theme-surface)) !important; - block-size: 2rem; - inline-size: 2rem; - inset-block-start: 0; - inset-inline-end: 0; - transform: translate(0.5rem, -0.5rem); - - @include layoutsMixins.rtl { - transform: translate(-0.5rem, -0.5rem); - } - - &:hover { - transform: translate(0.3125rem, -0.3125rem); - - @include layoutsMixins.rtl { - transform: translate(-0.3125rem, -0.3125rem); - } - } - } -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_expansion-panels.scss b/website/resources/styles/@core/template/libs/vuetify/components/_expansion-panels.scss deleted file mode 100644 index 72c8882..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_expansion-panels.scss +++ /dev/null @@ -1,106 +0,0 @@ -@use "@core-scss/base/mixins"; -@use "@layouts/styles/mixins" as layoutsMixins; - -// ๐Ÿ‘‰ Expansion panels -body .v-layout .v-application__wrap .v-expansion-panels { - .v-expansion-panel { - margin-block-start: 0 !important; - - // expansion panel arrow font size - .v-expansion-panel-title { - color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); - font-weight: 500; - - .v-expansion-panel-title__icon { - transition: transform 0.2s ease-in-out; - - .v-icon { - block-size: 1.25rem !important; - font-size: 1.25rem !important; - inline-size: 1.25rem !important; - } - } - } - - .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 - &:not(.v-expansion-panels--variant-accordion) { - &.v-expansion-panel--active { - .v-expansion-panel__shadow { - @include mixins.elevation(6); - } - } - } - } - - // custom style for expansion panels - &.expansion-panels-width-border { - border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)); - border-radius: 0.375rem; - - .v-expansion-panel-title { - background-color: rgb(var(--v-theme-grey-light)); - border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)); - margin-block-end: -1px; - } - - .v-expansion-panel-text { - .v-expansion-panel-text__wrapper { - padding: 1.25rem; - } - } - } - - &:not(.no-icon-rotate, .expansion-panels-width-border) { - .v-expansion-panel { - .v-expansion-panel-title__icon { - .v-icon { - @include layoutsMixins.rtl { - transform: scaleX(-1); - } - } - } - - &.v-expansion-panel--active { - .v-expansion-panel-title__icon { - transform: rotate(90deg); - - @include layoutsMixins.rtl { - transform: rotate(-90deg); - } - } - } - } - } - - &:not(.expansion-panels-width-border) { - .v-expansion-panel { - &:not(:last-child) { - margin-block-end: 0.5rem; - } - - &:not(:first-child)::after { - content: none; - } - - // โ„น๏ธ we have to use below style of increase the specificity and override the default style - /* stylelint-disable-next-line no-descending-specificity */ - &:first-child:not(:last-child), - &:not(:first-child, :last-child), - &:not(:first-child) { - border-radius: 0.375rem !important; - } - } - } -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_field.scss b/website/resources/styles/@core/template/libs/vuetify/components/_field.scss deleted file mode 100644 index cd6b16b..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_field.scss +++ /dev/null @@ -1,308 +0,0 @@ -@use "sass:map"; -@use "@configured-variables" as variables; -@use "@core-scss/template/mixins" as templateMixins; - -$v-input-density: ( - comfortable: ( - icon-size: 1rem, - font-size: 0.9375rem, - line-height: 1.5rem, - ), - default: ( - icon-size: 1.125rem, - font-size: 1.0625rem, - line-height: 1.5rem, - ), - compact: ( - icon-size: 0.8125rem, - font-size: 0.8125rem, - line-height: 1.375rem, - ), -); - -// ๐Ÿ‘‰ VInput -.v-input { - // ๐Ÿ‘‰ VField - .v-field { - .v-field__loader { - .v-progress-linear { - .v-progress-linear__background { - background-color: transparent !important; - } - } - } - - &.v-field--variant-solo, - &.v-field--variant-filled { - --v-field-padding-top: 7px !important; - - color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); - } - - // Color for text field - .v-field__input { - color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); - } - - // Make field border width 2px when error - &.v-field--error { - .v-field__outline { - --v-field-border-width: 2px; - } - } - - // Label - &.v-field--variant-outlined { - .v-label { - &.v-field-label--floating { - line-height: 0.9375rem; - margin-block: 0; - margin-inline: 6px; - } - } - } - - &:not(.v-field--focused, .v-field--error):hover .v-field__outline { - --v-field-border-opacity: 0.6 !important; - } - - // Shadow on focus - &.v-field--variant-outlined.v-field--focused:not(.v-field--error, .v-field--success) { - .v-field__outline { - @each $color-name in variables.$theme-colors-name { - &.text-#{$color-name} { - @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm"); - } - } - - &:not([class*="text-"]) { - @include templateMixins.custom-elevation(var(--v-theme-primary), "sm"); - } - } - } - } - - // Give hint messages color based on theme color - @each $color-name in variables.$theme-colors-name { - &:has( .v-field.v-field--focused .v-field__outline.text-#{$color-name}) { - .v-messages { - color: rgb(var(--v-theme-#{$color-name})); - } - } - } - - // Loop through each density setting in the map - @each $density, $settings in $v-input-density { - &.v-input--density-#{$density} { - .v-input__append, - .v-input__prepend, - .v-input__details, - .v-field .v-field__append-inner, - .v-field .v-field__prepend-inner, - .v-field .v-field__clearable { - > .v-icon { - block-size: map.get($settings, icon-size); - color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); - font-size: map.get($settings, icon-size); - inline-size: map.get($settings, icon-size); - opacity: 1; - } - } - - .v-field { - .v-field__input { - font-size: map.get($settings, font-size); - line-height: map.get($settings, line-height); - } - } - } - } -} - -// ๐Ÿ‘‰ TextField, Select, AutoComplete, ComboBox, Textarea -// โ„น๏ธ We added .v-application to increase the specificity of the selector - -// Styles related to our custom input components -body { - .app-text-field, - .app-select, - .app-autocomplete, - .app-combobox, - .app-textarea, - .app-picker-field { - // making padding 0 for help text - .v-text-field .v-input__details { - padding-inline-start: 0; - } - - // Placeholder - .v-input { - .v-field { - // Placeholder transition - input, - .v-field__input { - &::placeholder { - transition: transform 0.2s ease-out; - } - } - - &.v-field--focused { - input, - .v-field__input { - &::placeholder { - transform: translateX(4px) !important; - - [dir="rtl"] & { - transform: translateX(-4px) !important; - } - } - } - } - } - - // padding for different density - &.v-input--density-default { - .v-field { - .v-field__input { - --v-field-padding-start: 16px; - --v-field-padding-end: 16px; - } - } - } - - &.v-input--density-comfortable { - .v-field { - .v-field__input { - --v-field-padding-start: 14px; - --v-field-padding-end: 14px; - } - } - } - - &.v-input--density-compact { - .v-field { - .v-field__input { - --v-field-padding-start: 12px; - --v-field-padding-end: 12px; - } - } - } - } - - // Disabled state - &:has(.v-input.v-input--disabled) { - .v-label { - color: rgba(var(--v-theme-on-surface), 0.38); - } - - .v-input { - .v-field.v-field--disabled { - background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity)); - opacity: 1; - - .v-field__outline { - --v-field-border-opacity: 0.24; - } - - .v-field__input { - color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)); - } - } - } - } - - // Apply color to label - @each $color-name in variables.$theme-colors-name { - .v-label { - color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); - - &:has(+ .v-input .v-field.v-field--focused .v-field__outline.text-#{$color-name}) { - color: rgb(var(--v-theme-#{$color-name})); - } - - &:has(+ .v-input .v-field.v-field--error) { - color: rgb(var(--v-theme-error)); - } - } - } - } - - @mixin style-selectable-component($component-name) { - .app-#{$component-name} { - .v-#{$component-name}__selection { - line-height: 24px; - margin-block: 0 !important; - } - - // Vertical alignment of placeholder & text - .v-#{$component-name} .v-field .v-field__input > input { - align-self: center; - } - - // Chips - - .v-#{$component-name}.v-#{$component-name}--chips.v-input--dirty { - .v-#{$component-name}__selection { - margin: 0; - } - - .v-field__input { - gap: 3px; - } - - &.v-input--density-compact { - .v-field__input { - padding-inline-start: 0.5rem; - } - } - - &.v-input--density-comfortable { - .v-field__input { - padding-inline-start: 0.75rem; - } - } - - &.v-input--density-default { - .v-field__input { - padding-inline-start: 1rem; - } - } - } - } - } - - @include style-selectable-component("autocomplete"); - @include style-selectable-component("select"); - @include style-selectable-component("combobox"); - - // AutoComplete - @at-root { - .app-autocomplete__content { - .v-list-item--active { - .v-autocomplete__mask { - background: rgba(92, 82, 192, 60%); - } - } - - .v-theme--dark { - .v-list-item:not(.v-list-item--active) { - .v-autocomplete__mask { - background: rgba(59, 64, 92, 60%); - } - } - } - } - } -} - -.app-inner-list { - // Hide checkboxes - .v-selection-control { - display: none; - } -} - -// Hide resizer -::-webkit-resizer { - background: transparent; -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_list.scss b/website/resources/styles/@core/template/libs/vuetify/components/_list.scss deleted file mode 100644 index 1b1d080..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_list.scss +++ /dev/null @@ -1,30 +0,0 @@ -// ๐Ÿ‘‰ List -.v-list-item { - --v-hover-opacity: 0.06 !important; - - .v-checkbox-btn.v-selection-control--density-compact { - margin-inline-end: 0.5rem; - } - - .v-list-item__overlay { - transition: none; - } - - .v-list-item__prepend { - .v-icon { - font-size: 1.375rem; - } - } - - &.v-list-item--active { - &.v-list-group__header { - color: rgb(var(--v-theme-primary)); - } - - &:not(.v-list-group__header) { - .v-list-item-subtitle { - color: rgb(var(--v-theme-primary)); - } - } - } -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_menu.scss b/website/resources/styles/@core/template/libs/vuetify/components/_menu.scss deleted file mode 100644 index 9bb5329..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_menu.scss +++ /dev/null @@ -1,35 +0,0 @@ -// Style list differently when it's used in a components like select, menu etc -.v-menu { - // Adjust padding of list item inside menu - .v-list-item { - padding-block: 8px !important; - padding-inline: 16px !important; - } -} - -// ๐Ÿ‘‰ Menu -// Menu custom style -.v-menu.v-overlay { - .v-overlay__content { - .v-list { - .v-list-item { - border-radius: 0.375rem !important; - margin-block: 0.125rem; - margin-inline: 0.5rem; - min-block-size: 2.375rem; - - &:first-child { - margin-block-start: 0; - } - - &:last-child { - margin-block-end: 0; - } - } - - .v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line { - padding-block: 0.5rem; - } - } - } -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_otp-input.scss b/website/resources/styles/@core/template/libs/vuetify/components/_otp-input.scss deleted file mode 100644 index ed38ad9..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_otp-input.scss +++ /dev/null @@ -1,17 +0,0 @@ -// otp input -.v-otp-input { - justify-content: unset !important; - - .v-otp-input__content { - max-inline-size: 100%; - - .v-field.v-field--focused { - .v-field__outline { - .v-field__outline__start, - .v-field__outline__end { - border-color: rgb(var(--v-theme-primary)) !important; - } - } - } - } -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_pagination.scss b/website/resources/styles/@core/template/libs/vuetify/components/_pagination.scss deleted file mode 100644 index df3fb5d..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_pagination.scss +++ /dev/null @@ -1,140 +0,0 @@ -/* stylelint-disable no-descending-specificity */ -@use "@core-scss/template/mixins" as templateMixins; -@use "@configured-variables" as variables; - -// ๐Ÿ‘‰ Pagination -.v-pagination { - // pagination - .v-pagination__next, - .v-pagination__prev { - .v-btn--icon { - &.v-btn--size-small { - .v-icon { - font-size: 1rem; - } - } - - &.v-btn--size-default { - .v-icon { - font-size: 1.125rem; - } - } - - &.v-btn--size-large { - .v-icon { - font-size: 1.5rem; - } - } - } - } - - // common style for all components - .v-pagination__next, - .v-pagination__prev, - .v-pagination__first, - .v-pagination__last, - .v-pagination__item { - .v-btn { - color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); - font-size: 0.8125rem; - font-weight: 400; - line-height: 1; - - --v-activated-opacity: 0.08; - - &:hover { - .v-btn__overlay { - --v-hover-opacity: 0.16; - } - } - - &.v-btn--disabled { - opacity: 0.45; - } - - &.v-btn--size-large { - font-size: 0.9375rem; - } - } - } - - // Disable scale animation for button - .v-pagination__item { - .v-btn { - transform: scale(1) !important; - - /* We disabled transition because it looks ugly ๐Ÿคฎ */ - transition-duration: 0s; - - &:active { - transform: scale(1); - } - } - } - - .v-pagination__list { - @each $color-name in variables.$theme-colors-name { - &:has(.v-pagination__item.v-pagination__item--is-active .v-btn.text-#{$color-name}) { - .v-pagination__item { - .v-btn { - &:hover { - color: rgb(var(--v-theme-#{$color-name})); - - .v-btn__overlay { - background-color: rgb(var(--v-theme-#{$color-name})); - } - } - } - } - } - } - - .v-pagination__item--is-active { - .v-btn { - &:not([class*="text-"]) { - color: rgb(var(--v-theme-primary)); - - &:not(.v-btn--variant-outlined) { - .v-btn__underlay { - --v-activated-opacity: 0.04; - } - } - - &.v-btn--variant-outlined { - border-color: rgb(var(--v-theme-primary)); - - .v-btn__overlay { - opacity: 0.16; - } - } - } - - // box-shadow - @each $color-name in variables.$theme-colors-name { - &:not(.v-btn--disabled) { - &.text-#{$color-name} { - &, - &:hover, - &:active, - &:focus { - @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm"); - } - - .v-btn__underlay { - opacity: 1 !important; - } - - .v-btn__content { - color: #fff; - } - - &.v-btn--variant-outlined { - background-color: rgb(var(--v-theme-#{$color-name})); - } - } - } - } - } - } - } -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_progress.scss b/website/resources/styles/@core/template/libs/vuetify/components/_progress.scss deleted file mode 100644 index 2aa0c8f..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_progress.scss +++ /dev/null @@ -1,13 +0,0 @@ -// @use "@core-scss/template/mixins" as templateMixins; -@use "@configured-variables" as variables; - -// ๐Ÿ‘‰ Progress -// .v-progress-linear { -// .v-progress-linear__determinate { -// @each $color-name in variables.$theme-colors-name { -// &.bg-#{$color-name} { -// // @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm"); -// } -// } -// } -// } diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_radio.scss b/website/resources/styles/@core/template/libs/vuetify/components/_radio.scss deleted file mode 100644 index 0aac48c..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_radio.scss +++ /dev/null @@ -1,46 +0,0 @@ -@use "@core-scss/base/mixins"; -@use "@configured-variables" as variables; - -// ๐Ÿ‘‰ Radio -.v-radio, -.v-radio-btn { - // ๐Ÿ‘‰ radio icon opacity - .v-selection-control__input > .v-icon { - opacity: 1; - } - - &.v-selection-control--disabled { - --v-disabled-opacity: 0.45; - } - - &.v-selection-control--dirty { - @each $color-name in variables.$theme-colors-name { - .v-selection-control__wrapper.text-#{$color-name} { - .v-selection-control__input { - /* โ„น๏ธ Using filter: drop-shadow() instead of box-shadow because box-shadow creates white background for SVG; */ - .v-icon { - filter: drop-shadow(0 2px 6px rgba(var(--v-theme-#{$color-name}), 0.3)); - } - } - } - } - } - - &.v-selection-control { - .v-selection-control__input { - svg { - font-size: 1.5rem; - } - } - - .v-label { - color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity)); - } - } -} - -// ๐Ÿ‘‰ Radio, Checkbox - -.v-input.v-radio-group > .v-input__control > .v-label { - margin-inline-start: 0; -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_rating.scss b/website/resources/styles/@core/template/libs/vuetify/components/_rating.scss deleted file mode 100644 index 2014dc3..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_rating.scss +++ /dev/null @@ -1,20 +0,0 @@ -// ๐Ÿ‘‰ Rating -.v-rating { - .v-rating__wrapper { - .v-btn .v-icon { - --v-icon-size-multiplier: 1; - } - - .v-btn--density-default { - --v-btn-height: 26px; - } - - .v-btn--density-compact { - --v-btn-height: 30px; - } - - .v-btn--density-comfortable { - --v-btn-height: 32px; - } - } -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_slider.scss b/website/resources/styles/@core/template/libs/vuetify/components/_slider.scss deleted file mode 100644 index cb93267..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_slider.scss +++ /dev/null @@ -1,27 +0,0 @@ -// ๐Ÿ‘‰ Slider -.v-slider { - .v-slider-track__background--opacity { - opacity: 0.16; - } -} - -.v-slider-thumb { - .v-slider-thumb__surface::after { - border-radius: 50%; - background-color: #fff; - block-size: calc(var(--v-slider-thumb-size) - 10px); - inline-size: calc(var(--v-slider-thumb-size) - 10px); - } - - .v-slider-thumb__label { - background-color: rgb(var(--v-tooltip-background)); - color: rgb(var(--v-theme-surface)); - font-weight: 500; - letter-spacing: 0.15px; - line-height: 1.25rem; - - &::before { - content: none; - } - } -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_snackbar.scss b/website/resources/styles/@core/template/libs/vuetify/components/_snackbar.scss deleted file mode 100644 index 61a2b3b..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_snackbar.scss +++ /dev/null @@ -1,10 +0,0 @@ -// ๐Ÿ‘‰ snackbar -.v-snackbar { - .v-snackbar__actions { - .v-btn { - font-size: 13px; - line-height: 18px; - text-transform: capitalize; - } - } -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_switch.scss b/website/resources/styles/@core/template/libs/vuetify/components/_switch.scss deleted file mode 100644 index 057223e..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_switch.scss +++ /dev/null @@ -1,58 +0,0 @@ -@use "@configured-variables" as variables; -@use "@core-scss/template/mixins" as templateMixins; - -// ๐Ÿ‘‰ switch -.v-switch { - &.v-switch--inset { - .v-selection-control { - .v-switch__track { - transition: all 0.1s; - } - - &.v-selection-control--dirty { - @each $color-name in variables.$theme-colors-name { - .v-switch__track.bg-#{$color-name} { - @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm"); - } - } - } - - &:not(.v-selection-control--dirty) { - .v-switch__track { - box-shadow: 0 0 4px 0 rgba(0, 0, 0, 16%) inset; - } - } - } - - .v-selection-control__input { - transform: translateX(-6px) !important; - - --v-selection-control-size: 0.875rem; - - .v-switch__thumb { - box-shadow: 0 1px 6px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xs-opacity)); - transform: scale(1); - } - } - - .v-selection-control--dirty { - .v-selection-control__input { - transform: translateX(6px) !important; - } - } - } - - .v-label { - color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); - line-height: 1.375rem !important; - } -} - -.v-switch.v-input, -.v-checkbox-btn, -.v-radio-btn, -.v-radio { - --v-input-control-height: auto; - - flex: unset; -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_table.scss b/website/resources/styles/@core/template/libs/vuetify/components/_table.scss deleted file mode 100644 index 6a45086..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_table.scss +++ /dev/null @@ -1,48 +0,0 @@ -// ๐Ÿ‘‰ Table -.v-table { - th { - color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important; - font-size: 0.8125rem; - letter-spacing: 0.2px; - text-transform: uppercase; - - .v-data-table-header__content { - display: flex; - justify-content: space-between; - } - } -} - -// ๐Ÿ‘‰ Datatable -.v-data-table, -.v-table { - table { - thead, - tbody { - tr { - th, - td { - &:first-child:has(.v-checkbox-btn) { - padding-inline-start: 13px !important; - } - - &:first-child { - padding-inline-start: 24px !important; - } - - &:last-child { - padding-inline-end: 24px !important; - } - } - } - } - - tbody { - .v-data-table-group-header-row { - td { - background-color: rgb(var(--v-theme-surface)); - } - } - } - } -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_tabs.scss b/website/resources/styles/@core/template/libs/vuetify/components/_tabs.scss deleted file mode 100644 index 6e324ab..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_tabs.scss +++ /dev/null @@ -1,91 +0,0 @@ -@use "@configured-variables" as variables; -@use "@core-scss/template/mixins" as templateMixins; - -// ๐Ÿ‘‰ Tabs -.v-tabs { - &.v-tabs--vertical { - --v-tabs-height: 38px !important; - - &:not(.v-tabs-pill) { - block-size: 100%; - border-inline-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)); - } - } - - &.v-tabs--horizontal:not(.v-tabs-pill) { - border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)); - - .v-tab__slider { - block-size: 3px; - } - } - - /* stylelint-disable-next-line no-descending-specificity */ - .v-btn { - color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)); - transform: none !important; - - .v-icon { - block-size: 1.125rem !important; - font-size: 1.125rem !important; - inline-size: 1.125rem !important; - } - - &:hover:not(.v-tab--selected) { - color: rgb(var(--v-theme-primary)); - - .v-btn__content { - .v-tab__slider { - opacity: var(--v-activated-opacity); - } - } - } - - &.v-btn--stacked { - /* stylelint-disable-next-line no-descending-specificity */ - .v-icon { - block-size: 1.5rem !important; - font-size: 1.5rem !important; - inline-size: 1.5rem !important; - } - } - - /* stylelint-disable-next-line no-descending-specificity */ - .v-btn__overlay, - .v-ripple__container { - opacity: 0 !important; - } - - /* stylelint-disable-next-line no-descending-specificity */ - .v-tab__slider { - inset-inline-end: 0; - inset-inline-start: unset; - } - } -} - -// ๐Ÿ‘‰ Tab Pill -.v-tabs.v-tabs-pill { - .v-slide-group__content { - gap: 0.25rem; - } - - @each $color-name in variables.$theme-colors-name { - .v-tab--selected.text-#{$color-name} { - @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm"); - } - } - - &.v-slide-group, - .v-slide-group__container { - box-sizing: content-box; - padding: 1rem; - margin: -1rem; - } - - .v-tab.v-btn:not(.v-tab--selected) { - &:hover { - background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity)); - } - } -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_textarea.scss b/website/resources/styles/@core/template/libs/vuetify/components/_textarea.scss deleted file mode 100644 index acef60a..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_textarea.scss +++ /dev/null @@ -1,9 +0,0 @@ -.v-textarea { - textarea { - opacity: 0 !important; - } - - & .v-field--active textarea { - opacity: 1 !important; - } -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_timeline.scss b/website/resources/styles/@core/template/libs/vuetify/components/_timeline.scss deleted file mode 100644 index e10f031..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_timeline.scss +++ /dev/null @@ -1,99 +0,0 @@ -@use "@configured-variables" as variables; - -// ๐Ÿ‘‰ Timeline -.v-timeline { - // timeline items - .v-timeline-item { - &:not(:last-child) { - .v-timeline-item__body { - margin-block-end: 0.5rem; - } - } - - .app-timeline-title { - line-height: 1.375rem; - } - - .app-timeline-meta { - font-size: 0.8125rem; - font-weight: 400; - letter-spacing: 0.025rem; - line-height: 1.125rem; - } - - .app-timeline-text { - font-size: 0.9375rem; - font-weight: 400; - line-height: 1.375rem; - } - } - - // timeline icon only - &.v-timeline-icon-only { - .v-timeline-divider__dot { - .v-timeline-divider__inner-dot { - background: rgb(var(--v-theme-background)); - box-shadow: none; - } - } - } - - &:not(.v-timeline--variant-outlined) .v-timeline-divider__dot { - background: none !important; - - .v-timeline-divider__inner-dot { - box-shadow: 0 0 0 0.1875rem rgb(var(--v-theme-on-surface-variant)); - - @each $color-name in variables.$theme-colors-name { - - &.bg-#{$color-name} { - box-shadow: 0 0 0 0.1875rem rgba(var(--v-theme-#{$color-name}), 0.12); - } - } - } - } - - &.v-timeline--variant-outlined { - .v-timeline-item { - .v-timeline-divider { - .v-timeline-divider__dot { - background: none !important; - } - } - - .v-timeline-divider__after { - border: 1.5px dashed rgba(var(--v-border-color), var(--v-border-opacity)); - background: none; - } - - .v-timeline-divider__before { - background: none; - } - } - } - - // we have to override the default bg-color of the timeline dot in the card - .v-card:not(.v-card--variant-text, .v-card--variant-plain, .v-card--variant-outlined) & { - &.v-timeline-icon-only { - .v-timeline-divider__dot { - .v-timeline-divider__inner-dot { - /* stylelint-disable-next-line no-descending-specificity */ - background: rgb(var(--v-theme-surface)); - } - } - } - } - - .v-card.v-card--variant-tonal & { - &.v-timeline-icon-only { - .v-timeline-divider__dot { - .v-timeline-divider__inner-dot { - /* stylelint-disable-next-line no-descending-specificity */ - .v-icon { - background: none; - } - } - } - } - } -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/_tooltip.scss b/website/resources/styles/@core/template/libs/vuetify/components/_tooltip.scss deleted file mode 100644 index 4ec8e41..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/_tooltip.scss +++ /dev/null @@ -1,6 +0,0 @@ -// ๐Ÿ‘‰ Tooltip -.v-tooltip { - .v-overlay__content { - font-weight: 500; - } -} diff --git a/website/resources/styles/@core/template/libs/vuetify/components/index.scss b/website/resources/styles/@core/template/libs/vuetify/components/index.scss deleted file mode 100644 index 4e9c85c..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/components/index.scss +++ /dev/null @@ -1,25 +0,0 @@ -@use "alert"; -@use "avatar"; -@use "button"; -@use "badge"; -@use "cards"; -@use "chip"; -@use "dialog"; -@use "expansion-panels"; -@use "list"; -@use "menu"; -@use "pagination"; -@use "progress"; -@use "rating"; -@use "snackbar"; -@use "slider"; -@use "table"; -@use "tabs"; -@use "timeline"; -@use "tooltip"; -@use "otp-input"; -@use "field"; -@use "checkbox"; -@use "textarea"; -@use "radio"; -@use "switch"; diff --git a/website/resources/styles/@core/template/libs/vuetify/index.scss b/website/resources/styles/@core/template/libs/vuetify/index.scss deleted file mode 100644 index b36827d..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/index.scss +++ /dev/null @@ -1,3 +0,0 @@ -@use "@core-scss/base/libs/vuetify"; -@use "overrides"; -@use "components/index.scss"; diff --git a/website/resources/styles/@core/template/libs/vuetify/overrides.scss b/website/resources/styles/@core/template/libs/vuetify/overrides.scss deleted file mode 100644 index 076591c..0000000 --- a/website/resources/styles/@core/template/libs/vuetify/overrides.scss +++ /dev/null @@ -1,18 +0,0 @@ -@use "@core-scss/base/utils"; -@use "@configured-variables" as variables; - -// ๐Ÿ‘‰ Body - -// set body font size 15px -body { - font-size: 15px !important; - - // We reduced this margin to get 40px input height - .v-input--density-compact { - --v-input-chips-margin-bottom: 1px; - } -} - -.text-caption { - color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity)); -} diff --git a/website/resources/styles/@core/template/pages/page-auth.scss b/website/resources/styles/@core/template/pages/page-auth.scss deleted file mode 100644 index b4c9dce..0000000 --- a/website/resources/styles/@core/template/pages/page-auth.scss +++ /dev/null @@ -1,63 +0,0 @@ -.layout-blank { - .auth-wrapper { - min-block-size: 100dvh; - } - - .auth-v1-top-shape, - .auth-v1-bottom-shape { - position: absolute; - } - - .auth-footer-mask { - position: absolute; - inset-block-end: 0; - min-inline-size: 100%; - } - - .auth-card { - z-index: 1 !important; - } - - .auth-illustration { - z-index: 1; - } - - .auth-v1-top-shape { - inset-block-start: -77px; - inset-inline-start: -45px; - } - - .auth-v1-bottom-shape { - inset-block-end: -58px; - inset-inline-end: -58px; - } - - @media (min-width: 1264px), (max-width: 959px) and (min-width: 450px) { - .v-otp-input .v-otp-input__content { - gap: 1rem; - } - } -} - -@media (min-width: 960px) { - .skin--bordered { - .auth-card-v2 { - border-inline-start: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important; - } - } -} - -.auth-logo { - position: absolute; - z-index: 2; - inset-block-start: 2rem; - inset-inline-start: 2.3rem; -} - -.auth-title { - font-size: 1.375rem; - font-weight: 700; - letter-spacing: 0.25px; - line-height: 1.5rem; - text-transform: capitalize; -} diff --git a/website/resources/styles/_animations.scss b/website/resources/styles/_animations.scss new file mode 100644 index 0000000..095a41c --- /dev/null +++ b/website/resources/styles/_animations.scss @@ -0,0 +1,84 @@ +// Scroll reveal +@keyframes scroll-reveal { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +// Fade in up +@keyframes fade-in-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +// Gradient shine +@keyframes gradient-shine { + 0% { background-position: 0% center; } + 50% { background-position: 100% center; } + 100% { background-position: 0% center; } +} + +// Network pulse (for hero animations) +@keyframes network-pulse { + 0%, 100% { opacity: 0.4; } + 50% { opacity: 1; } +} + +// Skeleton shimmer +@keyframes skeleton-shimmer { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} + +// Slide in from right (toasts) +@keyframes slide-in-right { + from { + opacity: 0; + transform: translateX(100%); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +// Slide out to right +@keyframes slide-out-right { + from { + opacity: 1; + transform: translateX(0); + } + to { + opacity: 0; + transform: translateX(100%); + } +} + +// Stagger delays +@for $i from 1 through 12 { + .stagger-#{$i} { + animation-delay: #{$i * 0.08}s; + } +} + +// Utility classes +.animate-fade-in-up { + animation: fade-in-up 0.6s ease forwards; + opacity: 0; +} + +.animate-scroll-reveal { + animation: scroll-reveal 0.6s ease forwards; + opacity: 0; +} diff --git a/website/resources/styles/_component-overrides.scss b/website/resources/styles/_component-overrides.scss new file mode 100644 index 0000000..46c3820 --- /dev/null +++ b/website/resources/styles/_component-overrides.scss @@ -0,0 +1,128 @@ +@use 'variables' as *; + +// โ”โ”โ” Vuetify Component Overrides โ”โ”โ” +// Replaces all 38 @core SCSS files with clean, focused overrides + +// Buttons โ€” pill shape, smooth transitions +.v-btn { + text-transform: none; + letter-spacing: 0.01em; + font-weight: 600; + transition: all $transition-fast; + + &:active { + transform: scale(0.98); + } + + &--variant-flat, + &--variant-elevated { + &.v-btn--color-primary { + box-shadow: 0 4px 12px rgba($primary, 0.3); + + &:hover { + box-shadow: 0 6px 16px rgba($primary, 0.4); + } + } + } +} + +// Cards โ€” clean shadows, hover lift +.v-card { + transition: transform $transition-base, box-shadow $transition-base; + + &.card-hover:hover { + transform: translateY(-4px); + box-shadow: $shadow-lg; + } +} + +// Text fields โ€” floating labels +.v-field { + border-radius: $radius-md !important; +} + +// Chips โ€” tonal by default +.v-chip { + font-weight: 500; +} + +// Data tables โ€” striped rows +.v-data-table { + .v-data-table__tr:nth-child(even) { + background: rgba(var(--v-theme-on-surface), 0.02); + } + + .v-data-table-header th { + font-weight: 600 !important; + text-transform: uppercase; + font-size: 0.75rem !important; + letter-spacing: 0.05em; + } +} + +// Navigation drawer +.v-navigation-drawer { + border-right: none !important; +} + +// Dialogs โ€” larger radius +.v-dialog > .v-overlay__content > .v-card { + border-radius: $radius-lg !important; +} + +// Tabs โ€” clean underline +.v-tabs { + .v-tab { + text-transform: none; + letter-spacing: 0; + font-weight: 500; + } +} + +// Alerts โ€” rounded +.v-alert { + border-radius: $radius-md; +} + +// Lists +.v-list-item { + border-radius: $radius-sm; + margin-inline: 4px; +} + +// Tooltips +.v-tooltip > .v-overlay__content { + border-radius: $radius-sm !important; + font-size: 0.8125rem; + padding: 4px 10px; +} + +// Snackbars +.v-snackbar__wrapper { + border-radius: $radius-md !important; +} + +// Expansion panels +.v-expansion-panel { + border-radius: $radius-md !important; + + &::after { + display: none; + } +} + +// Progress bars +.v-progress-linear { + border-radius: $radius-pill; +} + +// Menus +.v-menu > .v-overlay__content { + border-radius: $radius-md !important; + box-shadow: $shadow-lg !important; +} + +// Pagination +.v-pagination__item .v-btn { + border-radius: $radius-sm; +} diff --git a/website/resources/styles/_layouts.scss b/website/resources/styles/_layouts.scss new file mode 100644 index 0000000..8d5cc08 --- /dev/null +++ b/website/resources/styles/_layouts.scss @@ -0,0 +1,246 @@ +@use 'variables' as *; +@use 'mixins' as *; + +// โ”โ”โ” Layout Styles โ”โ”โ” + +// App layout wrapper +.app-layout { + display: flex; + min-height: 100vh; +} + +// Sidebar +.app-sidebar { + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: $sidebar-width; + background: $dark-bg; + border-right: 1px solid rgba(255, 255, 255, 0.06); + z-index: $z-sidebar; + transition: width $transition-base; + display: flex; + flex-direction: column; + overflow: hidden; + + &--collapsed { + width: $sidebar-collapsed-width; + + .sidebar-logo-text, + .nav-item-title, + .nav-section-title { + opacity: 0; + visibility: hidden; + } + } + + // Logo area + .sidebar-header { + height: $navbar-height; + display: flex; + align-items: center; + padding-inline: 20px; + flex-shrink: 0; + } + + .sidebar-logo-text { + font-weight: 700; + font-size: 1.25rem; + margin-left: 12px; + transition: opacity $transition-fast; + white-space: nowrap; + } + + // Nav items + .sidebar-nav { + flex: 1; + overflow-y: auto; + overflow-x: hidden; + padding: 8px; + + &::-webkit-scrollbar { + width: 4px; + } + + &::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.1); + border-radius: 2px; + } + } + + // Section title + .nav-section-title { + padding: 16px 12px 8px; + font-size: 0.6875rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.1em; + color: rgba(255, 255, 255, 0.35); + transition: opacity $transition-fast; + white-space: nowrap; + } + + // Nav item + .nav-item { + display: flex; + align-items: center; + padding: 10px 12px; + margin-bottom: 2px; + border-radius: $radius-sm; + color: rgba(255, 255, 255, 0.6); + text-decoration: none; + transition: all $transition-fast; + cursor: pointer; + white-space: nowrap; + + &:hover { + background: rgba(255, 255, 255, 0.06); + color: rgba(255, 255, 255, 0.9); + } + + &--active { + background: rgba($primary, 0.15); + color: $primary-light; + + .nav-item-icon { + color: $primary-light; + } + } + + .nav-item-icon { + flex-shrink: 0; + width: 22px; + height: 22px; + } + + .nav-item-title { + margin-left: 12px; + font-size: 0.875rem; + font-weight: 500; + transition: opacity $transition-fast; + } + + .nav-item-badge { + margin-left: auto; + } + } + + // Sidebar footer (user menu) + .sidebar-footer { + padding: 12px; + border-top: 1px solid rgba(255, 255, 255, 0.06); + flex-shrink: 0; + } +} + +// Top navbar +.app-navbar { + position: fixed; + top: 0; + right: 0; + left: $sidebar-width; + height: $navbar-height; + background: rgba($dark-bg, 0.8); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid rgba(255, 255, 255, 0.06); + z-index: $z-navbar; + display: flex; + align-items: center; + padding-inline: 24px; + transition: left $transition-base; + + .app-sidebar--collapsed ~ .app-content-wrapper & { + left: $sidebar-collapsed-width; + } +} + +// Content wrapper +.app-content-wrapper { + flex: 1; + margin-left: $sidebar-width; + transition: margin-left $transition-base; + min-height: 100vh; + display: flex; + flex-direction: column; + + .app-sidebar--collapsed ~ & { + margin-left: $sidebar-collapsed-width; + } +} + +// Page content +.app-page-content { + flex: 1; + padding: 24px; + padding-top: calc($navbar-height + 24px); + max-width: $content-max-width; + width: 100%; + margin-inline: auto; +} + +// Footer +.app-footer { + padding: 16px 24px; + font-size: 0.8125rem; + color: rgba(255, 255, 255, 0.4); + flex-shrink: 0; +} + +// Mobile overlay +.app-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.5); + z-index: $z-overlay; + opacity: 0; + visibility: hidden; + transition: opacity $transition-base, visibility $transition-base; + + &--visible { + opacity: 1; + visibility: visible; + } +} + +// Mobile responsive +@include mobile { + .app-sidebar { + transform: translateX(-100%); + + &--mobile-open { + transform: translateX(0); + z-index: $z-overlay + 1; + } + } + + .app-navbar { + left: 0 !important; + } + + .app-content-wrapper { + margin-left: 0 !important; + } +} + +@include tablet { + .app-sidebar:not(.app-sidebar--mobile-open) { + width: $sidebar-collapsed-width; + + .sidebar-logo-text, + .nav-item-title, + .nav-section-title { + opacity: 0; + visibility: hidden; + } + } + + .app-navbar { + left: $sidebar-collapsed-width; + } + + .app-content-wrapper { + margin-left: $sidebar-collapsed-width; + } +} diff --git a/website/resources/styles/_marketing.scss b/website/resources/styles/_marketing.scss index 58d7447..a67d796 100644 --- a/website/resources/styles/_marketing.scss +++ b/website/resources/styles/_marketing.scss @@ -1,18 +1,60 @@ +@use 'variables' as *; +@use 'mixins' as *; + // โ”โ”โ” Marketing Page Styles โ”โ”โ” -// Standard section spacing (matches Vuexy convention) +// Standard section spacing .marketing-section { padding-block: 5.25rem; } -// Animated gradient text effect +// Dark grid hero background +.hero-dark-grid { + position: relative; + background: $dark-bg; + overflow: hidden; + + &::before { + content: ''; + position: absolute; + inset: 0; + background-image: + linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px); + background-size: 60px 60px; + mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 40%, transparent 100%); + -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 40%, transparent 100%); + } + + // Gradient orbs + &::after { + content: ''; + position: absolute; + top: -20%; + left: 50%; + transform: translateX(-50%); + width: 600px; + height: 600px; + background: radial-gradient(circle, rgba($primary, 0.15) 0%, transparent 70%); + pointer-events: none; + } +} + +// Glass morphism cards +.glass-card { + @include glass-morphism(0.08, 20px); + border-radius: $radius-lg; + transition: transform $transition-base, box-shadow $transition-base; + + &:hover { + transform: translateY(-4px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); + } +} + +// Animated gradient text .hero-gradient-text { - background: linear-gradient( - 135deg, - rgb(var(--v-theme-primary)) 0%, - #9f8fff 50%, - rgb(var(--v-theme-primary)) 100% - ); + background: linear-gradient(135deg, $primary-light 0%, $info 50%, $primary-light 100%); background-size: 200% auto; background-clip: text; -webkit-background-clip: text; @@ -20,19 +62,13 @@ animation: gradient-shine 3s ease infinite; } -@keyframes gradient-shine { - 0% { background-position: 0% center; } - 50% { background-position: 100% center; } - 100% { background-position: 0% center; } -} - -// Card hover effect - lift up with shadow +// Card hover effect .feature-card-hover { - transition: transform 0.3s ease, box-shadow 0.3s ease; + transition: transform $transition-base, box-shadow $transition-base; &:hover { transform: translateY(-4px); - box-shadow: 0 4px 25px 0 rgba(var(--v-shadow-key-umbra-color), 0.16) !important; + box-shadow: $shadow-lg; } } @@ -40,21 +76,7 @@ .fade-in-up { opacity: 0; transform: translateY(20px); - animation: fadeInUp 0.6s ease forwards; -} - -@keyframes fadeInUp { - to { - opacity: 1; - transform: translateY(0); - } -} - -// Staggered animation delays (for card grids) -@for $i from 1 through 8 { - .stagger-delay-#{$i} { - animation-delay: #{$i * 0.1}s; - } + animation: fade-in-up 0.6s ease forwards; } // Alternating section background @@ -62,7 +84,58 @@ background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity)); } -// Hero section with rounded bottom +// Hero section .hero-section { - border-radius: 0 0 50px 50px; + position: relative; + min-height: 80vh; + display: flex; + align-items: center; + padding-block: 120px 80px; +} + +// Mega footer +.mega-footer { + background: $dark-bg; + border-top: 1px solid rgba(255, 255, 255, 0.06); + padding-top: 64px; + + .footer-title { + color: rgba(255, 255, 255, 0.92); + font-weight: 600; + font-size: 0.875rem; + text-transform: uppercase; + letter-spacing: 0.05em; + margin-bottom: 24px; + } + + .footer-link { + color: rgba(255, 255, 255, 0.5); + text-decoration: none; + font-size: 0.875rem; + transition: color $transition-fast; + display: block; + padding-block: 4px; + + &:hover { + color: rgba(255, 255, 255, 0.9); + } + } + + .footer-bottom { + border-top: 1px solid rgba(255, 255, 255, 0.06); + padding-block: 24px; + margin-top: 48px; + } +} + +// Scroll reveal utility +.scroll-reveal { + opacity: 0; + transform: translateY(30px); + transition: opacity 0.6s ease, transform 0.6s ease; + + &.revealed { + opacity: 1; + transform: translateY(0); + } } diff --git a/website/resources/styles/_mixins.scss b/website/resources/styles/_mixins.scss new file mode 100644 index 0000000..f414e4a --- /dev/null +++ b/website/resources/styles/_mixins.scss @@ -0,0 +1,55 @@ +@use 'variables' as *; + +// Glass morphism effect +@mixin glass-morphism($opacity: 0.1, $blur: 16px) { + background: rgba(255, 255, 255, $opacity); + backdrop-filter: blur($blur); + -webkit-backdrop-filter: blur($blur); + border: 1px solid rgba(255, 255, 255, $opacity * 1.5); +} + +// Dark glass morphism +@mixin glass-morphism-dark($opacity: 0.15, $blur: 16px) { + background: rgba(15, 23, 42, $opacity); + backdrop-filter: blur($blur); + -webkit-backdrop-filter: blur($blur); + border: 1px solid rgba(255, 255, 255, 0.05); +} + +// Colored shadow for cards +@mixin colored-shadow($color: $primary, $intensity: 0.25) { + box-shadow: 0 10px 25px -5px rgba($color, $intensity); +} + +// Skeleton pulse animation +@mixin skeleton-pulse { + background: linear-gradient( + 90deg, + rgba(255, 255, 255, 0.05) 0%, + rgba(255, 255, 255, 0.1) 50%, + rgba(255, 255, 255, 0.05) 100% + ); + background-size: 200% 100%; + animation: skeleton-shimmer 1.5s ease infinite; + border-radius: $radius-md; +} + +// Striped table rows +@mixin striped-table { + tbody tr:nth-child(even) { + background: rgba(var(--v-theme-on-surface), 0.02); + } +} + +// Responsive breakpoints +@mixin mobile { + @media (max-width: 599px) { @content; } +} + +@mixin tablet { + @media (min-width: 600px) and (max-width: 1279px) { @content; } +} + +@mixin desktop { + @media (min-width: 1280px) { @content; } +} diff --git a/website/resources/styles/_typography.scss b/website/resources/styles/_typography.scss new file mode 100644 index 0000000..beb0be9 --- /dev/null +++ b/website/resources/styles/_typography.scss @@ -0,0 +1,38 @@ +@use 'variables' as *; + +// Base typography +body { + font-family: $font-body; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +// Code blocks +code, pre, .font-mono { + font-family: $font-code; +} + +pre { + padding: $spacing-md; + border-radius: $radius-md; + overflow-x: auto; + font-size: 0.875rem; + line-height: 1.7; +} + +code:not(pre code) { + padding: 2px 6px; + border-radius: $radius-sm; + font-size: 0.85em; + background: rgba(var(--v-theme-on-surface), 0.08); +} + +// Gradient text utility +.gradient-text { + background: linear-gradient(135deg, $primary 0%, $primary-light 50%, $info 100%); + background-size: 200% auto; + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: gradient-shine 4s ease infinite; +} diff --git a/website/resources/styles/_variables.scss b/website/resources/styles/_variables.scss new file mode 100644 index 0000000..5b357ed --- /dev/null +++ b/website/resources/styles/_variables.scss @@ -0,0 +1,67 @@ +// โ”โ”โ” Design Tokens โ”โ”โ” + +// Colors +$primary: #1d4ed8; +$primary-light: #3b82f6; +$primary-dark: #1e40af; +$success: #10b981; +$warning: #f59e0b; +$error: #ef4444; +$info: #06b6d4; + +// Dark theme surfaces +$dark-bg: #0f172a; +$dark-surface: #1e293b; +$dark-surface-light: #334155; + +// Light theme surfaces +$light-bg: #ffffff; +$light-surface: #ffffff; +$light-surface-alt: #f8fafc; + +// Typography +$font-body: 'Plus Jakarta Sans', sans-serif; +$font-code: 'JetBrains Mono', monospace; + +// Spacing scale (8px base) +$spacing-xs: 4px; +$spacing-sm: 8px; +$spacing-md: 16px; +$spacing-lg: 24px; +$spacing-xl: 32px; +$spacing-2xl: 48px; +$spacing-3xl: 64px; + +// Border radii +$radius-sm: 6px; +$radius-md: 10px; +$radius-lg: 14px; +$radius-xl: 20px; +$radius-pill: 999px; + +// Shadows +$shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); +$shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); +$shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); +$shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); +$shadow-colored: 0 10px 25px -5px rgba($primary, 0.25); + +// Z-index scale +$z-sidebar: 100; +$z-navbar: 110; +$z-overlay: 200; +$z-modal: 300; +$z-toast: 400; +$z-command-palette: 500; + +// Layout +$sidebar-width: 260px; +$sidebar-collapsed-width: 72px; +$navbar-height: 64px; +$footer-height: 56px; +$content-max-width: 1400px; + +// Transitions +$transition-fast: 150ms ease; +$transition-base: 250ms ease; +$transition-slow: 350ms ease; diff --git a/website/resources/styles/styles.scss b/website/resources/styles/styles.scss index 5dc7e7c..eaf3656 100644 --- a/website/resources/styles/styles.scss +++ b/website/resources/styles/styles.scss @@ -1,13 +1,12 @@ -// Import Vuexy's full Vuetify component override chain -@use "@core-scss/template/libs/vuetify"; - -// Vertical sidebar navigation layout -@use "@layouts/styles/vertical-nav"; - -// Marketing page shared styles +// EZSCALE Design System +@use "variables"; +@use "animations"; +@use "typography"; +@use "component-overrides"; +@use "layouts"; @use "marketing"; -// โ”โ”โ” Project-specific overrides โ”โ”โ” +// โ”โ”โ” Global Base Styles โ”โ”โ” html { scroll-behavior: smooth; @@ -19,23 +18,23 @@ body, min-height: 100vh; } -// Invert white logo for light backgrounds -.logo-light { - filter: brightness(0) saturate(100%); -} - // Links a { text-decoration: none; } -// Iconify icon size +// Iconify icon sizing svg.iconify { block-size: 1em; inline-size: 1em; } -// Vuetify 3 paragraph margin (Vuexy convention) +// Vuetify paragraph margin p { margin-block-end: 1rem; } + +// Logo inversion for light backgrounds +.logo-light { + filter: brightness(0) saturate(100%); +} diff --git a/website/resources/styles/variables/_template.scss b/website/resources/styles/variables/_template.scss index 0d284bf..40aa5e8 100644 --- a/website/resources/styles/variables/_template.scss +++ b/website/resources/styles/variables/_template.scss @@ -1 +1 @@ -@forward "@core-scss/template/variables"; +@forward "../variables"; diff --git a/website/resources/styles/variables/_vuetify.scss b/website/resources/styles/variables/_vuetify.scss index d5100c1..54c6d38 100644 --- a/website/resources/styles/variables/_vuetify.scss +++ b/website/resources/styles/variables/_vuetify.scss @@ -1,2 +1,13 @@ -// Forward Vuexy's Vuetify variable chain -@forward "../@core/template/libs/vuetify/variables"; +@use '../variables' as *; + +// Vuetify SASS variable overrides +$body-font-family: $font-body; +$border-radius-root: $radius-md; +$btn-border-radius: $radius-pill; +$card-border-radius: $radius-lg; +$chip-border-radius: $radius-pill; +$alert-border-radius: $radius-md; +$snackbar-border-radius: $radius-md; +$tooltip-border-radius: $radius-sm; +$expansion-panel-border-radius: $radius-md; +$text-field-border-radius: $radius-md; diff --git a/website/resources/ts/@core/components/AppStepper.vue b/website/resources/ts/@core/components/AppStepper.vue index 2d4a3f4..4f8d33c 100644 --- a/website/resources/ts/@core/components/AppStepper.vue +++ b/website/resources/ts/@core/components/AppStepper.vue @@ -218,8 +218,6 @@ watchEffect(() => {