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) <noreply@anthropic.com>
This commit is contained in:
Claude Dev
95
website/package-lock.json
generated
95
website/package-lock.json
generated
@@ -7,14 +7,16 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@iconify/vue": "^5.0.0",
|
"@iconify/vue": "^5.0.0",
|
||||||
"@inertiajs/vue3": "^2.3.13",
|
"@inertiajs/vue3": "^2.3.13",
|
||||||
"@mdi/font": "^7.4.47",
|
|
||||||
"@noble/ed25519": "^3.0.0",
|
"@noble/ed25519": "^3.0.0",
|
||||||
"@stripe/stripe-js": "^8.7.0",
|
"@stripe/stripe-js": "^8.7.0",
|
||||||
"@vitejs/plugin-vue": "^6.0.4",
|
"@vitejs/plugin-vue": "^6.0.4",
|
||||||
|
"@vueuse/core": "^14.2.1",
|
||||||
|
"echarts": "^6.0.0",
|
||||||
"pinia": "^3.0.4",
|
"pinia": "^3.0.4",
|
||||||
"sass": "^1.97.3",
|
"sass": "^1.97.3",
|
||||||
"vite-plugin-vuetify": "^2.1.3",
|
"vite-plugin-vuetify": "^2.1.3",
|
||||||
"vue": "^3.5.27",
|
"vue": "^3.5.27",
|
||||||
|
"vue-echarts": "^8.0.1",
|
||||||
"vuetify": "^3.11.8"
|
"vuetify": "^3.11.8"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@@ -555,12 +557,6 @@
|
|||||||
"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
|
"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
|
||||||
"license": "MIT"
|
"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": {
|
"node_modules/@noble/ed25519": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/@noble/ed25519/-/ed25519-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/@noble/ed25519/-/ed25519-3.0.0.tgz",
|
||||||
@@ -1238,6 +1234,12 @@
|
|||||||
"undici-types": "~7.16.0"
|
"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": {
|
"node_modules/@vitejs/plugin-vue": {
|
||||||
"version": "6.0.4",
|
"version": "6.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.4.tgz",
|
||||||
@@ -1445,6 +1447,44 @@
|
|||||||
"vuetify": ">=3"
|
"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": {
|
"node_modules/alien-signals": {
|
||||||
"version": "3.1.2",
|
"version": "3.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.1.2.tgz",
|
||||||
@@ -1721,6 +1761,22 @@
|
|||||||
"node": ">= 0.4"
|
"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": {
|
"node_modules/emoji-regex": {
|
||||||
"version": "8.0.0",
|
"version": "8.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
|
"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": {
|
"node_modules/vue-tsc": {
|
||||||
"version": "3.2.4",
|
"version": "3.2.4",
|
||||||
"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.2.4.tgz",
|
"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.2.4.tgz",
|
||||||
@@ -2892,6 +2958,21 @@
|
|||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=12"
|
"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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -19,14 +19,16 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@iconify/vue": "^5.0.0",
|
"@iconify/vue": "^5.0.0",
|
||||||
"@inertiajs/vue3": "^2.3.13",
|
"@inertiajs/vue3": "^2.3.13",
|
||||||
"@mdi/font": "^7.4.47",
|
|
||||||
"@noble/ed25519": "^3.0.0",
|
"@noble/ed25519": "^3.0.0",
|
||||||
"@stripe/stripe-js": "^8.7.0",
|
"@stripe/stripe-js": "^8.7.0",
|
||||||
"@vitejs/plugin-vue": "^6.0.4",
|
"@vitejs/plugin-vue": "^6.0.4",
|
||||||
|
"@vueuse/core": "^14.2.1",
|
||||||
|
"echarts": "^6.0.0",
|
||||||
"pinia": "^3.0.4",
|
"pinia": "^3.0.4",
|
||||||
"sass": "^1.97.3",
|
"sass": "^1.97.3",
|
||||||
"vite-plugin-vuetify": "^2.1.3",
|
"vite-plugin-vuetify": "^2.1.3",
|
||||||
"vue": "^3.5.27",
|
"vue": "^3.5.27",
|
||||||
|
"vue-echarts": "^8.0.1",
|
||||||
"vuetify": "^3.11.8"
|
"vuetify": "^3.11.8"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
@@ -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
|
|
||||||
);
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
@use "overrides";
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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,
|
|
||||||
|
|
||||||
);
|
|
||||||
@@ -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)));
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
@@ -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,
|
|
||||||
);
|
|
||||||
@@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
.v-card-subtitle {
|
|
||||||
color: rgba(var(--v-theme-on-background), 0.55);
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
@@ -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));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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}));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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");
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
// 👉 snackbar
|
|
||||||
.v-snackbar {
|
|
||||||
.v-snackbar__actions {
|
|
||||||
.v-btn {
|
|
||||||
font-size: 13px;
|
|
||||||
line-height: 18px;
|
|
||||||
text-transform: capitalize;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
@@ -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));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,9 +0,0 @@
|
|||||||
.v-textarea {
|
|
||||||
textarea {
|
|
||||||
opacity: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
& .v-field--active textarea {
|
|
||||||
opacity: 1 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,6 +0,0 @@
|
|||||||
// 👉 Tooltip
|
|
||||||
.v-tooltip {
|
|
||||||
.v-overlay__content {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -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";
|
|
||||||
@@ -1,3 +0,0 @@
|
|||||||
@use "@core-scss/base/libs/vuetify";
|
|
||||||
@use "overrides";
|
|
||||||
@use "components/index.scss";
|
|
||||||
@@ -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));
|
|
||||||
}
|
|
||||||
@@ -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;
|
|
||||||
}
|
|
||||||
84
website/resources/styles/_animations.scss
Normal file
84
website/resources/styles/_animations.scss
Normal file
@@ -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;
|
||||||
|
}
|
||||||
128
website/resources/styles/_component-overrides.scss
Normal file
128
website/resources/styles/_component-overrides.scss
Normal file
@@ -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;
|
||||||
|
}
|
||||||
246
website/resources/styles/_layouts.scss
Normal file
246
website/resources/styles/_layouts.scss
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,18 +1,60 @@
|
|||||||
|
@use 'variables' as *;
|
||||||
|
@use 'mixins' as *;
|
||||||
|
|
||||||
// ━━━ Marketing Page Styles ━━━
|
// ━━━ Marketing Page Styles ━━━
|
||||||
|
|
||||||
// Standard section spacing (matches Vuexy convention)
|
// Standard section spacing
|
||||||
.marketing-section {
|
.marketing-section {
|
||||||
padding-block: 5.25rem;
|
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 {
|
.hero-gradient-text {
|
||||||
background: linear-gradient(
|
background: linear-gradient(135deg, $primary-light 0%, $info 50%, $primary-light 100%);
|
||||||
135deg,
|
|
||||||
rgb(var(--v-theme-primary)) 0%,
|
|
||||||
#9f8fff 50%,
|
|
||||||
rgb(var(--v-theme-primary)) 100%
|
|
||||||
);
|
|
||||||
background-size: 200% auto;
|
background-size: 200% auto;
|
||||||
background-clip: text;
|
background-clip: text;
|
||||||
-webkit-background-clip: text;
|
-webkit-background-clip: text;
|
||||||
@@ -20,19 +62,13 @@
|
|||||||
animation: gradient-shine 3s ease infinite;
|
animation: gradient-shine 3s ease infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes gradient-shine {
|
// Card hover effect
|
||||||
0% { background-position: 0% center; }
|
|
||||||
50% { background-position: 100% center; }
|
|
||||||
100% { background-position: 0% center; }
|
|
||||||
}
|
|
||||||
|
|
||||||
// Card hover effect - lift up with shadow
|
|
||||||
.feature-card-hover {
|
.feature-card-hover {
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
transition: transform $transition-base, box-shadow $transition-base;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: translateY(-4px);
|
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 {
|
.fade-in-up {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(20px);
|
transform: translateY(20px);
|
||||||
animation: fadeInUp 0.6s ease forwards;
|
animation: fade-in-up 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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Alternating section background
|
// Alternating section background
|
||||||
@@ -62,7 +84,58 @@
|
|||||||
background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
|
background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
|
||||||
}
|
}
|
||||||
|
|
||||||
// Hero section with rounded bottom
|
// Hero section
|
||||||
.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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
55
website/resources/styles/_mixins.scss
Normal file
55
website/resources/styles/_mixins.scss
Normal file
@@ -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; }
|
||||||
|
}
|
||||||
38
website/resources/styles/_typography.scss
Normal file
38
website/resources/styles/_typography.scss
Normal file
@@ -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;
|
||||||
|
}
|
||||||
67
website/resources/styles/_variables.scss
Normal file
67
website/resources/styles/_variables.scss
Normal file
@@ -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;
|
||||||
@@ -1,13 +1,12 @@
|
|||||||
// Import Vuexy's full Vuetify component override chain
|
// EZSCALE Design System
|
||||||
@use "@core-scss/template/libs/vuetify";
|
@use "variables";
|
||||||
|
@use "animations";
|
||||||
// Vertical sidebar navigation layout
|
@use "typography";
|
||||||
@use "@layouts/styles/vertical-nav";
|
@use "component-overrides";
|
||||||
|
@use "layouts";
|
||||||
// Marketing page shared styles
|
|
||||||
@use "marketing";
|
@use "marketing";
|
||||||
|
|
||||||
// ━━━ Project-specific overrides ━━━
|
// ━━━ Global Base Styles ━━━
|
||||||
|
|
||||||
html {
|
html {
|
||||||
scroll-behavior: smooth;
|
scroll-behavior: smooth;
|
||||||
@@ -19,23 +18,23 @@ body,
|
|||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Invert white logo for light backgrounds
|
|
||||||
.logo-light {
|
|
||||||
filter: brightness(0) saturate(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Links
|
// Links
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Iconify icon size
|
// Iconify icon sizing
|
||||||
svg.iconify {
|
svg.iconify {
|
||||||
block-size: 1em;
|
block-size: 1em;
|
||||||
inline-size: 1em;
|
inline-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Vuetify 3 paragraph margin (Vuexy convention)
|
// Vuetify paragraph margin
|
||||||
p {
|
p {
|
||||||
margin-block-end: 1rem;
|
margin-block-end: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Logo inversion for light backgrounds
|
||||||
|
.logo-light {
|
||||||
|
filter: brightness(0) saturate(100%);
|
||||||
|
}
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
@forward "@core-scss/template/variables";
|
@forward "../variables";
|
||||||
|
|||||||
@@ -1,2 +1,13 @@
|
|||||||
// Forward Vuexy's Vuetify variable chain
|
@use '../variables' as *;
|
||||||
@forward "../@core/template/libs/vuetify/variables";
|
|
||||||
|
// 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;
|
||||||
|
|||||||
@@ -218,8 +218,6 @@ watchEffect(() => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@use "@core-scss/template/mixins" as templateMixins;
|
|
||||||
|
|
||||||
.app-stepper {
|
.app-stepper {
|
||||||
// 👉 stepper step with bg color
|
// 👉 stepper step with bg color
|
||||||
&.stepper-icon-step-bg {
|
&.stepper-icon-step-bg {
|
||||||
@@ -243,7 +241,7 @@ watchEffect(() => {
|
|||||||
.stepper-steps-active {
|
.stepper-steps-active {
|
||||||
.stepper-icon-step {
|
.stepper-icon-step {
|
||||||
.stepper-icon {
|
.stepper-icon {
|
||||||
@include templateMixins.custom-elevation(var(--v-theme-primary), "sm");
|
box-shadow: 0 2px 4px rgba(var(--v-theme-primary), 0.4);
|
||||||
|
|
||||||
background-color: rgb(var(--v-theme-primary));
|
background-color: rgb(var(--v-theme-primary));
|
||||||
color: rgba(var(--v-theme-on-primary));
|
color: rgba(var(--v-theme-on-primary));
|
||||||
@@ -327,11 +325,11 @@ watchEffect(() => {
|
|||||||
/* stylelint-disable-next-line no-descending-specificity */
|
/* stylelint-disable-next-line no-descending-specificity */
|
||||||
.stepper-steps-active {
|
.stepper-steps-active {
|
||||||
.v-avatar.bg-primary {
|
.v-avatar.bg-primary {
|
||||||
@include templateMixins.custom-elevation(var(--v-theme-primary), "sm");
|
box-shadow: 0 2px 4px rgba(var(--v-theme-primary), 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.v-avatar.bg-error {
|
.v-avatar.bg-error {
|
||||||
@include templateMixins.custom-elevation(var(--v-theme-error), "sm");
|
box-shadow: 0 2px 4px rgba(var(--v-theme-error), 0.4);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -92,8 +92,6 @@ const isDark = computed(() => theme.global.current.value.dark)
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@use "@styles/@core/template/pages/page-auth";
|
|
||||||
|
|
||||||
.logo-light {
|
.logo-light {
|
||||||
filter: brightness(0) saturate(100%);
|
filter: brightness(0) saturate(100%);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,9 +11,11 @@ export default {
|
|||||||
},
|
},
|
||||||
VBtn: {
|
VBtn: {
|
||||||
color: 'primary',
|
color: 'primary',
|
||||||
|
rounded: 'pill',
|
||||||
},
|
},
|
||||||
VChip: {
|
VChip: {
|
||||||
label: true,
|
rounded: 'pill',
|
||||||
|
variant: 'tonal',
|
||||||
},
|
},
|
||||||
VDataTable: {
|
VDataTable: {
|
||||||
VPagination: {
|
VPagination: {
|
||||||
@@ -125,4 +127,7 @@ export default {
|
|||||||
VTooltip: {
|
VTooltip: {
|
||||||
location: 'top',
|
location: 'top',
|
||||||
},
|
},
|
||||||
|
VCard: {
|
||||||
|
rounded: 'lg',
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,11 +7,16 @@ import { themes } from './theme'
|
|||||||
import 'vuetify/styles'
|
import 'vuetify/styles'
|
||||||
|
|
||||||
export default function installVuetify(app: App): void {
|
export default function installVuetify(app: App): void {
|
||||||
|
// Determine default theme based on subdomain
|
||||||
|
const hostname = typeof window !== 'undefined' ? window.location.hostname : ''
|
||||||
|
const isMarketing = !hostname.startsWith('account.') && !hostname.startsWith('admin.')
|
||||||
|
const defaultTheme = isMarketing ? 'light' : 'dark'
|
||||||
|
|
||||||
const vuetify = createVuetify({
|
const vuetify = createVuetify({
|
||||||
defaults,
|
defaults,
|
||||||
icons,
|
icons,
|
||||||
theme: {
|
theme: {
|
||||||
defaultTheme: 'dark',
|
defaultTheme,
|
||||||
themes,
|
themes,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,68 +1,68 @@
|
|||||||
import type { ThemeDefinition } from 'vuetify'
|
import type { ThemeDefinition } from 'vuetify'
|
||||||
|
|
||||||
export const staticPrimaryColor = '#7367F0'
|
export const staticPrimaryColor = '#1d4ed8'
|
||||||
|
|
||||||
export const themes: Record<string, ThemeDefinition> = {
|
export const themes: Record<string, ThemeDefinition> = {
|
||||||
light: {
|
light: {
|
||||||
dark: false,
|
dark: false,
|
||||||
colors: {
|
colors: {
|
||||||
'primary': staticPrimaryColor,
|
'primary': '#1d4ed8',
|
||||||
'on-primary': '#fff',
|
'on-primary': '#fff',
|
||||||
'primary-darken-1': '#675DD8',
|
'primary-darken-1': '#1e40af',
|
||||||
'secondary': '#808390',
|
'secondary': '#64748b',
|
||||||
'on-secondary': '#fff',
|
'on-secondary': '#fff',
|
||||||
'success': '#28C76F',
|
'success': '#10b981',
|
||||||
'on-success': '#fff',
|
'on-success': '#fff',
|
||||||
'info': '#00BAD1',
|
'info': '#06b6d4',
|
||||||
'on-info': '#fff',
|
'on-info': '#fff',
|
||||||
'warning': '#FF9F43',
|
'warning': '#f59e0b',
|
||||||
'on-warning': '#fff',
|
'on-warning': '#fff',
|
||||||
'error': '#FF4C51',
|
'error': '#ef4444',
|
||||||
'on-error': '#fff',
|
'on-error': '#fff',
|
||||||
'background': '#F8F7FA',
|
'background': '#ffffff',
|
||||||
'on-background': '#2F2B3D',
|
'on-background': '#0f172a',
|
||||||
'surface': '#fff',
|
'surface': '#ffffff',
|
||||||
'on-surface': '#2F2B3D',
|
'on-surface': '#0f172a',
|
||||||
},
|
},
|
||||||
variables: {
|
variables: {
|
||||||
'overlay-scrim-background': '#2F2B3D',
|
'overlay-scrim-background': '#0f172a',
|
||||||
'overlay-scrim-opacity': 0.5,
|
'overlay-scrim-opacity': 0.5,
|
||||||
'hover-opacity': 0.06,
|
'hover-opacity': 0.04,
|
||||||
'focus-opacity': 0.1,
|
'focus-opacity': 0.08,
|
||||||
'selected-opacity': 0.08,
|
'selected-opacity': 0.06,
|
||||||
'activated-opacity': 0.16,
|
'activated-opacity': 0.12,
|
||||||
'pressed-opacity': 0.14,
|
'pressed-opacity': 0.1,
|
||||||
'disabled-opacity': 0.4,
|
'disabled-opacity': 0.4,
|
||||||
'border-color': '#2F2B3D',
|
'border-color': '#0f172a',
|
||||||
'border-opacity': 0.12,
|
'border-opacity': 0.08,
|
||||||
'high-emphasis-opacity': 0.9,
|
'high-emphasis-opacity': 0.9,
|
||||||
'medium-emphasis-opacity': 0.7,
|
'medium-emphasis-opacity': 0.6,
|
||||||
'shadow-key-umbra-color': '#2F2B3D',
|
'shadow-key-umbra-color': '#0f172a',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
dark: {
|
dark: {
|
||||||
dark: true,
|
dark: true,
|
||||||
colors: {
|
colors: {
|
||||||
'primary': staticPrimaryColor,
|
'primary': '#3b82f6',
|
||||||
'on-primary': '#fff',
|
'on-primary': '#fff',
|
||||||
'primary-darken-1': '#675DD8',
|
'primary-darken-1': '#1d4ed8',
|
||||||
'secondary': '#808390',
|
'secondary': '#94a3b8',
|
||||||
'on-secondary': '#fff',
|
'on-secondary': '#fff',
|
||||||
'success': '#28C76F',
|
'success': '#10b981',
|
||||||
'on-success': '#fff',
|
'on-success': '#fff',
|
||||||
'info': '#00BAD1',
|
'info': '#06b6d4',
|
||||||
'on-info': '#fff',
|
'on-info': '#fff',
|
||||||
'warning': '#FF9F43',
|
'warning': '#f59e0b',
|
||||||
'on-warning': '#fff',
|
'on-warning': '#fff',
|
||||||
'error': '#FF4C51',
|
'error': '#ef4444',
|
||||||
'on-error': '#fff',
|
'on-error': '#fff',
|
||||||
'background': '#25293C',
|
'background': '#0f172a',
|
||||||
'on-background': '#E1DEF5',
|
'on-background': '#e2e8f0',
|
||||||
'surface': '#2F3349',
|
'surface': '#1e293b',
|
||||||
'on-surface': '#E1DEF5',
|
'on-surface': '#e2e8f0',
|
||||||
},
|
},
|
||||||
variables: {
|
variables: {
|
||||||
'overlay-scrim-background': '#171925',
|
'overlay-scrim-background': '#020617',
|
||||||
'overlay-scrim-opacity': 0.6,
|
'overlay-scrim-opacity': 0.6,
|
||||||
'hover-opacity': 0.06,
|
'hover-opacity': 0.06,
|
||||||
'focus-opacity': 0.1,
|
'focus-opacity': 0.1,
|
||||||
@@ -70,11 +70,11 @@ export const themes: Record<string, ThemeDefinition> = {
|
|||||||
'activated-opacity': 0.16,
|
'activated-opacity': 0.16,
|
||||||
'pressed-opacity': 0.14,
|
'pressed-opacity': 0.14,
|
||||||
'disabled-opacity': 0.4,
|
'disabled-opacity': 0.4,
|
||||||
'border-color': '#E1DEF5',
|
'border-color': '#e2e8f0',
|
||||||
'border-opacity': 0.12,
|
'border-opacity': 0.08,
|
||||||
'high-emphasis-opacity': 0.9,
|
'high-emphasis-opacity': 0.9,
|
||||||
'medium-emphasis-opacity': 0.7,
|
'medium-emphasis-opacity': 0.6,
|
||||||
'shadow-key-umbra-color': '#131120',
|
'shadow-key-umbra-color': '#020617',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
<title inertia>{{ config('app.name', 'EZSCALE') }}</title>
|
<title inertia>{{ config('app.name', 'EZSCALE') }}</title>
|
||||||
|
|
||||||
<link rel="preconnect" href="https://fonts.bunny.net">
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||||
<link href="https://fonts.bunny.net/css?family=inter:400,500,600,700&family=public-sans:300,400,500,600,700" rel="stylesheet" />
|
<link href="https://fonts.bunny.net/css?family=plus-jakarta-sans:400,500,600,700&family=jetbrains-mono:400,500" rel="stylesheet" />
|
||||||
|
|
||||||
@vite(['resources/ts/app.ts'])
|
@vite(['resources/ts/app.ts'])
|
||||||
@inertiaHead
|
@inertiaHead
|
||||||
|
|||||||
@@ -29,8 +29,6 @@ export default defineConfig({
|
|||||||
'@': fileURLToPath(new URL('./resources/ts', import.meta.url)),
|
'@': fileURLToPath(new URL('./resources/ts', import.meta.url)),
|
||||||
'@images': fileURLToPath(new URL('./resources/images/', import.meta.url)),
|
'@images': fileURLToPath(new URL('./resources/images/', import.meta.url)),
|
||||||
'@styles': fileURLToPath(new URL('./resources/styles/', import.meta.url)),
|
'@styles': fileURLToPath(new URL('./resources/styles/', import.meta.url)),
|
||||||
'@core-scss': fileURLToPath(new URL('./resources/styles/@core', import.meta.url)),
|
|
||||||
'@configured-variables': fileURLToPath(new URL('./resources/styles/variables/_template.scss', import.meta.url)),
|
|
||||||
'@layouts': fileURLToPath(new URL('./resources/ts/@layouts', import.meta.url)),
|
'@layouts': fileURLToPath(new URL('./resources/ts/@layouts', import.meta.url)),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user