Skip to content

Commit 6dc0d71

Browse files
yagnikvamjayagnikvamja
committed
refactor(multi): Update styles
1 parent 3ce24b8 commit 6dc0d71

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

65 files changed

+2800
-715
lines changed

‎typescript-version/auto-imports.d.ts

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* eslint-disable */
22
/* prettier-ignore */
33
// @ts-nocheck
4+
// noinspection JSUnusedGlobalSymbols
45
// Generated by unplugin-auto-import
56
export {}
67
declare global {
@@ -42,6 +43,7 @@ declare global {
4243
const h: typeof import('vue')['h']
4344
const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
4445
const inject: typeof import('vue')['inject']
46+
const injectLocal: typeof import('@vueuse/core')['injectLocal']
4547
const isDefined: typeof import('@vueuse/core')['isDefined']
4648
const isProxy: typeof import('vue')['isProxy']
4749
const isReactive: typeof import('vue')['isReactive']
@@ -79,6 +81,7 @@ declare global {
7981
const onUpdated: typeof import('vue')['onUpdated']
8082
const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
8183
const provide: typeof import('vue')['provide']
84+
const provideLocal: typeof import('@vueuse/core')['provideLocal']
8285
const reactify: typeof import('@vueuse/core')['reactify']
8386
const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
8487
const reactive: typeof import('vue')['reactive']
@@ -149,6 +152,7 @@ declare global {
149152
const useCeil: typeof import('@vueuse/math')['useCeil']
150153
const useClamp: typeof import('@vueuse/math')['useClamp']
151154
const useClipboard: typeof import('@vueuse/core')['useClipboard']
155+
const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
152156
const useCloned: typeof import('@vueuse/core')['useCloned']
153157
const useColorMode: typeof import('@vueuse/core')['useColorMode']
154158
const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
@@ -313,11 +317,13 @@ declare global {
313317
// for type re-export
314318
declare global {
315319
// @ts-ignore
316-
export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
320+
export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
321+
import('vue')
317322
}
318323
// for vue template auto import
319324
import { UnwrapRef } from 'vue'
320325
declare module 'vue' {
326+
interface GlobalComponents {}
321327
interface ComponentCustomProperties {
322328
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
323329
readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
@@ -357,6 +363,7 @@ declare module 'vue' {
357363
readonly h: UnwrapRef<typeof import('vue')['h']>
358364
readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
359365
readonly inject: UnwrapRef<typeof import('vue')['inject']>
366+
readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
360367
readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
361368
readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
362369
readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
@@ -394,6 +401,7 @@ declare module 'vue' {
394401
readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
395402
readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
396403
readonly provide: UnwrapRef<typeof import('vue')['provide']>
404+
readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
397405
readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
398406
readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
399407
readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@@ -464,6 +472,7 @@ declare module 'vue' {
464472
readonly useCeil: UnwrapRef<typeof import('@vueuse/math')['useCeil']>
465473
readonly useClamp: UnwrapRef<typeof import('@vueuse/math')['useClamp']>
466474
readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
475+
readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
467476
readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
468477
readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
469478
readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
@@ -570,7 +579,6 @@ declare module 'vue' {
570579
readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
571580
readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
572581
readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
573-
readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
574582
readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
575583
readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
576584
readonly useSum: UnwrapRef<typeof import('@vueuse/math')['useSum']>
@@ -627,6 +635,7 @@ declare module 'vue' {
627635
}
628636
}
629637
declare module '@vue/runtime-core' {
638+
interface GlobalComponents {}
630639
interface ComponentCustomProperties {
631640
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
632641
readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
@@ -666,6 +675,7 @@ declare module '@vue/runtime-core' {
666675
readonly h: UnwrapRef<typeof import('vue')['h']>
667676
readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
668677
readonly inject: UnwrapRef<typeof import('vue')['inject']>
678+
readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
669679
readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
670680
readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
671681
readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
@@ -703,6 +713,7 @@ declare module '@vue/runtime-core' {
703713
readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
704714
readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
705715
readonly provide: UnwrapRef<typeof import('vue')['provide']>
716+
readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
706717
readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
707718
readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
708719
readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
@@ -773,6 +784,7 @@ declare module '@vue/runtime-core' {
773784
readonly useCeil: UnwrapRef<typeof import('@vueuse/math')['useCeil']>
774785
readonly useClamp: UnwrapRef<typeof import('@vueuse/math')['useClamp']>
775786
readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
787+
readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
776788
readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
777789
readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
778790
readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
@@ -879,7 +891,6 @@ declare module '@vue/runtime-core' {
879891
readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
880892
readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
881893
readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
882-
readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
883894
readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
884895
readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
885896
readonly useSum: UnwrapRef<typeof import('@vueuse/math')['useSum']>

‎typescript-version/components.d.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,9 @@
33
// @ts-nocheck
44
// Generated by unplugin-vue-components
55
// Read more: https://github.com/vuejs/core/pull/3399
6-
import '@vue/runtime-core'
7-
86
export {}
97

10-
declare module '@vue/runtime-core' {
8+
declare module 'vue' {
119
export interface GlobalComponents {
1210
AddAuthenticatorAppDialog: typeof import('./src/components/dialogs/AddAuthenticatorAppDialog.vue')['default']
1311
AddEditAddressDialog: typeof import('./src/components/dialogs/AddEditAddressDialog.vue')['default']
@@ -354,5 +352,6 @@ declare module '@vue/runtime-core' {
354352
UpgradeToPro: typeof import('./src/components/UpgradeToPro.vue')['default']
355353
UserInfoEditDialog: typeof import('./src/components/dialogs/UserInfoEditDialog.vue')['default']
356354
UserUpgradePlanDialog: typeof import('./src/components/dialogs/UserUpgradePlanDialog.vue')['default']
355+
VueApexCharts: typeof import('vue3-apexcharts')['default']
357356
}
358357
}

‎typescript-version/src/@core/components/cards/CardStatisticsVertical.vue

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ interface Props {
99
const props = defineProps<Props>()
1010
1111
const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
12+
13+
const moreList = [
14+
{ title: 'Yesterday', value: 'Yesterday' },
15+
{ title: 'Last Week', value: 'Last Week' },
16+
{ title: 'Last Month', value: 'Last Month' },
17+
]
1218
</script>
1319

1420
<template>
@@ -23,8 +29,8 @@ const isPositive = controlledComputed(() => props.change, () => Math.sign(props.
2329
<VSpacer />
2430

2531
<MoreBtn
26-
size="x-small"
2732
class="me-n3 mt-n4"
33+
:menu-list="moreList"
2834
/>
2935
</VCardText>
3036

‎typescript-version/src/@core/scss/template/_dark.scss

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,11 @@
66
// nav-link and nav-group style for dark
77
.nav-link .router-link-exact-active,
88
.nav-group.active:not(.nav-group .nav-group) > :first-child {
9-
background-color: rgb(var(--v-theme-primary)) !important;
109
color: rgb(var(--v-theme-on-primary)) !important;
1110

1211
&::before {
1312
z-index: -1;
14-
color: rgb(var(--v-global-theme-primary));
13+
color: rgb(var(--v-theme-primary));
1514
opacity: 1 !important;
1615
}
1716
}
@@ -34,4 +33,29 @@
3433
}
3534
}
3635
}
36+
37+
// horizontal nav
38+
&.v-theme--dark {
39+
.layout-wrapper.layout-nav-type-horizontal {
40+
.layout-horizontal-nav {
41+
.nav-items {
42+
.nav-group.active:not(.sub-item) {
43+
> :first-child {
44+
.nav-group-label {
45+
&::before {
46+
z-index: -1;
47+
opacity: 1;
48+
}
49+
50+
.v-icon,
51+
.nav-item-title {
52+
color: rgb(var(--v-theme-on-primary));
53+
}
54+
}
55+
}
56+
}
57+
}
58+
}
59+
}
60+
}
3761
}

‎typescript-version/src/@core/scss/template/_default-layout-w-vertical-nav.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
// ℹ️ .layout-footer-sticky#{$ele-layout-footer} => .layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer
1212
.layout-footer-sticky#{$ele-layout-footer} {
1313
.footer-content-container {
14-
@include elevation.elevation(4);
14+
@include elevation.elevation(8);
1515
}
1616
}
1717
}

‎typescript-version/src/@core/scss/template/_mixins.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@use "sass:map";
2+
@use "@configured-variables" as variables;
3+
4+
@mixin custom-elevation($color, $size) {
5+
box-shadow: (map.get(variables.$shadow-params, $size) rgba($color, map.get(variables.$shadow-opacity, $size)));
6+
}

‎typescript-version/src/@core/scss/template/_utilities.scss

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
.v-timeline-item {
2+
.app-timeline-title {
3+
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
4+
font-size: 15px;
5+
font-weight: 500;
6+
line-height: 1.3125rem;
7+
}
8+
9+
.app-timeline-meta {
10+
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
11+
font-size: 11px;
12+
line-height: 0.875rem;
13+
}
14+
15+
.app-timeline-text {
16+
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
17+
font-size: 13px;
18+
line-height: 1.25rem;
19+
}
20+
}
21+
22+
// ℹ️ Temporary solution as v-spacer style is not getting applied in build version. will remove this after release.
23+
// VSpacer
24+
.v-spacer {
25+
flex-grow: 1;
26+
}
27+
28+
// app-logo & app-logo-title
29+
.app-logo {
30+
display: flex;
31+
align-items: center !important;
32+
column-gap: 0.5rem !important;
33+
34+
.app-logo-title {
35+
font-size: 1.75rem !important;
36+
font-weight: 700 !important;
37+
letter-spacing: 0.15px !important;
38+
line-height: 1.75rem !important;
39+
text-transform: lowercase !important;
40+
}
41+
}
42+
43+
.text-white-variant {
44+
color: rgba(255, 255, 255, 78%) !important;
45+
}
46+
47+
.bg-custom-background {
48+
background-color: rgb(var(--v-table-header-color));
49+
}

‎typescript-version/src/@core/scss/template/_utils.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,9 @@
3535
0,
3636
$start-at
3737
);
38-
} @else {
38+
}
39+
/* stylelint-disable-next-line @stylistic/indentation */
40+
@else {
3941
@return $var;
4042
}
4143
}

‎typescript-version/src/@core/scss/template/_variables.scss

Lines changed: 63 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
$vertical-nav-horizontal-padding-margin-custom: 1.91rem;
55

6-
// ℹ️ We created this SCSS var to extract the start padding
6+
/* ℹ️ We created this SCSS var to extract the start padding */
77
// Docs: https://sass-lang.com/documentation/modules/string
88
// $vertical-nav-horizontal-padding => 0 8px;
99
// string.index(#{$vertical-nav-horizontal-padding}, " ") + 1 => 2
@@ -14,27 +14,27 @@ $vertical-nav-horizontal-padding-start: utils.get-first-value($vertical-nav-hori
1414

1515
@forward "@core/scss/base/variables" with (
1616
// 👉 Default layout with vertical nav
17-
$default-layout-with-vertical-nav-navbar-footer-roundness: 8px !default,
17+
$default-layout-with-vertical-nav-navbar-footer-roundness: 6px !default,
1818

1919
// 👉 Vertical nav
2020
$layout-vertical-nav-collapsed-width: 84px !default,
21+
$layout-vertical-nav-navbar-height: 64px !default,
22+
$layout-vertical-nav-footer-height: 56px !default,
2123
$vertical-nav-background-color-rgb: var(--v-theme-surface) !default,
22-
$vertical-nav-items-nested-icon-size: 0.5rem !default,
23-
$vertical-nav-horizontal-padding: 0.9375rem 0.625rem !default,
24+
$vertical-nav-items-nested-icon-size: 0.375rem !default,
25+
$vertical-nav-horizontal-padding: 0.9375rem 0.9375rem !default,
2426
$vertical-nav-header-inline-spacing: 0 !default,
25-
$vertical-nav-header-padding: 1rem 2.2rem !default,
27+
$vertical-nav-header-padding: 1.0625rem 2rem !default,
2628

2729
// Section title margin top (when its not first child)
28-
$vertical-nav-section-title-mt: 1.4rem !default,
30+
$vertical-nav-section-title-mt: 1.625rem !default,
2931

3032
// Section title margin bottom
31-
$vertical-nav-section-title-mb: 0.65rem !default,
33+
$vertical-nav-section-title-mb: 1.125rem !default,
3234

3335
// Vertical nav icons
3436
$vertical-nav-items-icon-size: 1.375rem !default,
3537
$vertical-nav-navbar-style: "floating" !default, // options: elevated, floating
36-
$vertical-nav-floating-navbar-top: 0.75rem !default,
37-
$vertical-nav-items-icon-margin-inline-end: 0.625rem !default,
3838

3939
// 👉 Horizontal nav
4040
/*
@@ -44,14 +44,66 @@ $vertical-nav-horizontal-padding-start: utils.get-first-value($vertical-nav-hori
4444
This is because this have been used as value of top property by `.popper-content`
4545
*/
4646
$horizontal-nav-padding: 0.625rem !default,
47+
$horizontal-nav-top-level-items-gap: 6px !default,
48+
$horizontal-nav-popper-content-top: 0.25rem !default,
49+
$layout-horizontal-nav-navbar-height: 64px !default,
4750

4851
// Horizontal nav icons
4952
$horizontal-nav-items-icon-size: 1.375rem !default,
50-
$horizontal-nav-third-level-icon-size: 0.5rem !default,
53+
$horizontal-nav-third-level-icon-size: 0.375rem !default,
54+
// Font sizes
55+
$font-sizes: (
56+
"xs": 0.6875rem,
57+
"sm": 0.8125rem,
58+
"base": 0.9375rem,
59+
"lg": 1.125rem,
60+
"xl": 1.5rem,
61+
"2xl": 1.75rem,
62+
"3xl": 2rem,
63+
"4xl": 2.375rem,
64+
"5xl": 3rem,
65+
"6xl": 3.5rem,
66+
"7xl": 4rem,
67+
"8xl": 4.5rem,
68+
"9xl": 5.25rem,
69+
) !default,
70+
71+
// Line heights
72+
$font-line-height: (
73+
"xs": 0.9375rem,
74+
"sm": 1.25rem,
75+
"base": 1.375rem,
76+
"lg": 1.75rem,
77+
"xl": 2.375rem,
78+
"2xl": 2.625rem,
79+
"3xl": 2.75rem,
80+
"4xl": 3.25rem,
81+
"5xl": 1,
82+
"6xl": 1,
83+
"7xl": 1,
84+
"8xl": 1,
85+
"9xl": 1
86+
) !default,
5187
$horizontal-nav-items-icon-margin-inline-end: 0.5rem !default,
5288
);
5389

5490
$slider-thumb-label-color: rgb(117, 117, 117) !default;
5591

56-
// vertical nav header
92+
/* vertical nav header */
5793
$vertical-nav-header-margin-top: 0.75rem !default;
94+
95+
/* Custom shadow opacity */
96+
$shadow-opacity: (
97+
"xs": 0.06,
98+
"sm": 0.4,
99+
"md": 0.45,
100+
"lg": 0.4,
101+
) !default;
102+
103+
/* Custom shadow params */
104+
$shadow-params: (
105+
"xs": 0 1px 5px 0,
106+
"sm": 0 2px 4px 0,
107+
"md": 0 4px 16px 0,
108+
"lg": 0 10px 20px 0,
109+
) !default;

0 commit comments

Comments
 (0)