init
This commit is contained in:
yagnikvamja
38
javascript-version/.editorconfig
Normal file
38
javascript-version/.editorconfig
Normal file
@@ -0,0 +1,38 @@
|
||||
# EditorConfig is awesome: https://EditorConfig.org
|
||||
|
||||
# top-most EditorConfig file
|
||||
root = true
|
||||
|
||||
# Unix-style newlines with a newline ending every file
|
||||
[*]
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
|
||||
# Matches multiple files with brace expansion notation
|
||||
# Set default charset
|
||||
[*.{js,py}]
|
||||
charset = utf-8
|
||||
|
||||
# 4 space indentation
|
||||
[*.py]
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
|
||||
# 2 space indentation
|
||||
[*.{vue,scss,ts}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
# Tab indentation (no size specified)
|
||||
[Makefile]
|
||||
indent_style = tab
|
||||
|
||||
# Indentation override for all JS under lib directory
|
||||
[lib/**.js]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
# Matches the exact files either package.json or .travis.yml
|
||||
[{package.json,.travis.yml}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
322
javascript-version/.eslintrc-auto-import.json
Normal file
322
javascript-version/.eslintrc-auto-import.json
Normal file
@@ -0,0 +1,322 @@
|
||||
{
|
||||
"globals": {
|
||||
"Component": true,
|
||||
"ComponentPublicInstance": true,
|
||||
"ComputedRef": true,
|
||||
"EffectScope": true,
|
||||
"ExtractDefaultPropTypes": true,
|
||||
"ExtractPropTypes": true,
|
||||
"ExtractPublicPropTypes": true,
|
||||
"InjectionKey": true,
|
||||
"PropType": true,
|
||||
"Ref": true,
|
||||
"VNode": true,
|
||||
"WritableComputedRef": true,
|
||||
"acceptHMRUpdate": true,
|
||||
"asyncComputed": true,
|
||||
"autoResetRef": true,
|
||||
"computed": true,
|
||||
"computedAsync": true,
|
||||
"computedEager": true,
|
||||
"computedInject": true,
|
||||
"computedWithControl": true,
|
||||
"controlledComputed": true,
|
||||
"controlledRef": true,
|
||||
"createApp": true,
|
||||
"createEventHook": true,
|
||||
"createGenericProjection": true,
|
||||
"createGlobalState": true,
|
||||
"createInjectionState": true,
|
||||
"createPinia": true,
|
||||
"createProjection": true,
|
||||
"createReactiveFn": true,
|
||||
"createReusableTemplate": true,
|
||||
"createSharedComposable": true,
|
||||
"createTemplatePromise": true,
|
||||
"createUnrefFn": true,
|
||||
"customRef": true,
|
||||
"debouncedRef": true,
|
||||
"debouncedWatch": true,
|
||||
"defineAsyncComponent": true,
|
||||
"defineComponent": true,
|
||||
"defineStore": true,
|
||||
"eagerComputed": true,
|
||||
"effectScope": true,
|
||||
"extendRef": true,
|
||||
"getActivePinia": true,
|
||||
"getCurrentInstance": true,
|
||||
"getCurrentScope": true,
|
||||
"h": true,
|
||||
"ignorableWatch": true,
|
||||
"inject": true,
|
||||
"injectLocal": true,
|
||||
"isDefined": true,
|
||||
"isProxy": true,
|
||||
"isReactive": true,
|
||||
"isReadonly": true,
|
||||
"isRef": true,
|
||||
"logicAnd": true,
|
||||
"logicNot": true,
|
||||
"logicOr": true,
|
||||
"makeDestructurable": true,
|
||||
"mapActions": true,
|
||||
"mapGetters": true,
|
||||
"mapState": true,
|
||||
"mapStores": true,
|
||||
"mapWritableState": true,
|
||||
"markRaw": true,
|
||||
"nextTick": true,
|
||||
"onActivated": true,
|
||||
"onBeforeMount": true,
|
||||
"onBeforeRouteLeave": true,
|
||||
"onBeforeRouteUpdate": true,
|
||||
"onBeforeUnmount": true,
|
||||
"onBeforeUpdate": true,
|
||||
"onClickOutside": true,
|
||||
"onDeactivated": true,
|
||||
"onErrorCaptured": true,
|
||||
"onKeyStroke": true,
|
||||
"onLongPress": true,
|
||||
"onMounted": true,
|
||||
"onRenderTracked": true,
|
||||
"onRenderTriggered": true,
|
||||
"onScopeDispose": true,
|
||||
"onServerPrefetch": true,
|
||||
"onStartTyping": true,
|
||||
"onUnmounted": true,
|
||||
"onUpdated": true,
|
||||
"pausableWatch": true,
|
||||
"provide": true,
|
||||
"provideLocal": true,
|
||||
"reactify": true,
|
||||
"reactifyObject": true,
|
||||
"reactive": true,
|
||||
"reactiveComputed": true,
|
||||
"reactiveOmit": true,
|
||||
"reactivePick": true,
|
||||
"readonly": true,
|
||||
"ref": true,
|
||||
"refAutoReset": true,
|
||||
"refDebounced": true,
|
||||
"refDefault": true,
|
||||
"refThrottled": true,
|
||||
"refWithControl": true,
|
||||
"resolveComponent": true,
|
||||
"resolveRef": true,
|
||||
"resolveUnref": true,
|
||||
"setActivePinia": true,
|
||||
"setMapStoreSuffix": true,
|
||||
"shallowReactive": true,
|
||||
"shallowReadonly": true,
|
||||
"shallowRef": true,
|
||||
"storeToRefs": true,
|
||||
"syncRef": true,
|
||||
"syncRefs": true,
|
||||
"templateRef": true,
|
||||
"throttledRef": true,
|
||||
"throttledWatch": true,
|
||||
"toRaw": true,
|
||||
"toReactive": true,
|
||||
"toRef": true,
|
||||
"toRefs": true,
|
||||
"toValue": true,
|
||||
"triggerRef": true,
|
||||
"tryOnBeforeMount": true,
|
||||
"tryOnBeforeUnmount": true,
|
||||
"tryOnMounted": true,
|
||||
"tryOnScopeDispose": true,
|
||||
"tryOnUnmounted": true,
|
||||
"unref": true,
|
||||
"unrefElement": true,
|
||||
"until": true,
|
||||
"useAbs": true,
|
||||
"useActiveElement": true,
|
||||
"useAnimate": true,
|
||||
"useArrayDifference": true,
|
||||
"useArrayEvery": true,
|
||||
"useArrayFilter": true,
|
||||
"useArrayFind": true,
|
||||
"useArrayFindIndex": true,
|
||||
"useArrayFindLast": true,
|
||||
"useArrayIncludes": true,
|
||||
"useArrayJoin": true,
|
||||
"useArrayMap": true,
|
||||
"useArrayReduce": true,
|
||||
"useArraySome": true,
|
||||
"useArrayUnique": true,
|
||||
"useAsyncQueue": true,
|
||||
"useAsyncState": true,
|
||||
"useAttrs": true,
|
||||
"useAverage": true,
|
||||
"useBase64": true,
|
||||
"useBattery": true,
|
||||
"useBluetooth": true,
|
||||
"useBreakpoints": true,
|
||||
"useBroadcastChannel": true,
|
||||
"useBrowserLocation": true,
|
||||
"useCached": true,
|
||||
"useCeil": true,
|
||||
"useClamp": true,
|
||||
"useClipboard": true,
|
||||
"useClipboardItems": true,
|
||||
"useCloned": true,
|
||||
"useColorMode": true,
|
||||
"useConfirmDialog": true,
|
||||
"useCounter": true,
|
||||
"useCssModule": true,
|
||||
"useCssVar": true,
|
||||
"useCssVars": true,
|
||||
"useCurrentElement": true,
|
||||
"useCycleList": true,
|
||||
"useDark": true,
|
||||
"useDateFormat": true,
|
||||
"useDebounce": true,
|
||||
"useDebounceFn": true,
|
||||
"useDebouncedRefHistory": true,
|
||||
"useDeviceMotion": true,
|
||||
"useDeviceOrientation": true,
|
||||
"useDevicePixelRatio": true,
|
||||
"useDevicesList": true,
|
||||
"useDisplayMedia": true,
|
||||
"useDocumentVisibility": true,
|
||||
"useDraggable": true,
|
||||
"useDropZone": true,
|
||||
"useElementBounding": true,
|
||||
"useElementByPoint": true,
|
||||
"useElementHover": true,
|
||||
"useElementSize": true,
|
||||
"useElementVisibility": true,
|
||||
"useEventBus": true,
|
||||
"useEventListener": true,
|
||||
"useEventSource": true,
|
||||
"useEyeDropper": true,
|
||||
"useFavicon": true,
|
||||
"useFetch": true,
|
||||
"useFileDialog": true,
|
||||
"useFileSystemAccess": true,
|
||||
"useFloor": true,
|
||||
"useFocus": true,
|
||||
"useFocusWithin": true,
|
||||
"useFps": true,
|
||||
"useFullscreen": true,
|
||||
"useGamepad": true,
|
||||
"useGeolocation": true,
|
||||
"useIdle": true,
|
||||
"useImage": true,
|
||||
"useInfiniteScroll": true,
|
||||
"useIntersectionObserver": true,
|
||||
"useInterval": true,
|
||||
"useIntervalFn": true,
|
||||
"useKeyModifier": true,
|
||||
"useLastChanged": true,
|
||||
"useLink": true,
|
||||
"useLocalStorage": true,
|
||||
"useMagicKeys": true,
|
||||
"useManualRefHistory": true,
|
||||
"useMath": true,
|
||||
"useMax": true,
|
||||
"useMediaControls": true,
|
||||
"useMediaQuery": true,
|
||||
"useMemoize": true,
|
||||
"useMemory": true,
|
||||
"useMin": true,
|
||||
"useMounted": true,
|
||||
"useMouse": true,
|
||||
"useMouseInElement": true,
|
||||
"useMousePressed": true,
|
||||
"useMutationObserver": true,
|
||||
"useNavigatorLanguage": true,
|
||||
"useNetwork": true,
|
||||
"useNow": true,
|
||||
"useObjectUrl": true,
|
||||
"useOffsetPagination": true,
|
||||
"useOnline": true,
|
||||
"usePageLeave": true,
|
||||
"useParallax": true,
|
||||
"useParentElement": true,
|
||||
"usePerformanceObserver": true,
|
||||
"usePermission": true,
|
||||
"usePointer": true,
|
||||
"usePointerLock": true,
|
||||
"usePointerSwipe": true,
|
||||
"usePrecision": true,
|
||||
"usePreferredColorScheme": true,
|
||||
"usePreferredContrast": true,
|
||||
"usePreferredDark": true,
|
||||
"usePreferredLanguages": true,
|
||||
"usePreferredReducedMotion": true,
|
||||
"usePrevious": true,
|
||||
"useProjection": true,
|
||||
"useRafFn": true,
|
||||
"useRefHistory": true,
|
||||
"useResizeObserver": true,
|
||||
"useRound": true,
|
||||
"useRoute": true,
|
||||
"useRouter": true,
|
||||
"useScreenOrientation": true,
|
||||
"useScreenSafeArea": true,
|
||||
"useScriptTag": true,
|
||||
"useScroll": true,
|
||||
"useScrollLock": true,
|
||||
"useSessionStorage": true,
|
||||
"useShare": true,
|
||||
"useSlots": true,
|
||||
"useSorted": true,
|
||||
"useSpeechRecognition": true,
|
||||
"useSpeechSynthesis": true,
|
||||
"useStepper": true,
|
||||
"useStorageAsync": true,
|
||||
"useStyleTag": true,
|
||||
"useSum": true,
|
||||
"useSupported": true,
|
||||
"useSwipe": true,
|
||||
"useTemplateRefsList": true,
|
||||
"useTextDirection": true,
|
||||
"useTextSelection": true,
|
||||
"useTextareaAutosize": true,
|
||||
"useThrottle": true,
|
||||
"useThrottleFn": true,
|
||||
"useThrottledRefHistory": true,
|
||||
"useTimeAgo": true,
|
||||
"useTimeout": true,
|
||||
"useTimeoutFn": true,
|
||||
"useTimeoutPoll": true,
|
||||
"useTimestamp": true,
|
||||
"useTitle": true,
|
||||
"useToNumber": true,
|
||||
"useToString": true,
|
||||
"useToggle": true,
|
||||
"useTransition": true,
|
||||
"useTrunc": true,
|
||||
"useUrlSearchParams": true,
|
||||
"useUserMedia": true,
|
||||
"useVModel": true,
|
||||
"useVModels": true,
|
||||
"useVibrate": true,
|
||||
"useVirtualList": true,
|
||||
"useWakeLock": true,
|
||||
"useWebNotification": true,
|
||||
"useWebSocket": true,
|
||||
"useWebWorker": true,
|
||||
"useWebWorkerFn": true,
|
||||
"useWindowFocus": true,
|
||||
"useWindowScroll": true,
|
||||
"useWindowSize": true,
|
||||
"watch": true,
|
||||
"watchArray": true,
|
||||
"watchAtMost": true,
|
||||
"watchDebounced": true,
|
||||
"watchDeep": true,
|
||||
"watchEffect": true,
|
||||
"watchIgnorable": true,
|
||||
"watchImmediate": true,
|
||||
"watchOnce": true,
|
||||
"watchPausable": true,
|
||||
"watchPostEffect": true,
|
||||
"watchSyncEffect": true,
|
||||
"watchThrottled": true,
|
||||
"watchTriggerable": true,
|
||||
"watchWithFilter": true,
|
||||
"whenever": true
|
||||
}
|
||||
}
|
||||
238
javascript-version/.eslintrc.cjs
Normal file
238
javascript-version/.eslintrc.cjs
Normal file
@@ -0,0 +1,238 @@
|
||||
module.exports = {
|
||||
env: {
|
||||
browser: true,
|
||||
es2021: true,
|
||||
},
|
||||
extends: [
|
||||
'.eslintrc-auto-import.json',
|
||||
'plugin:vue/vue3-recommended',
|
||||
'plugin:import/recommended',
|
||||
'plugin:promise/recommended',
|
||||
'plugin:sonarjs/recommended',
|
||||
'plugin:case-police/recommended',
|
||||
'plugin:regexp/recommended',
|
||||
|
||||
// 'plugin:unicorn/recommended',
|
||||
],
|
||||
parser: 'vue-eslint-parser',
|
||||
parserOptions: {
|
||||
ecmaVersion: 13,
|
||||
sourceType: 'module',
|
||||
},
|
||||
plugins: [
|
||||
'vue',
|
||||
'regex',
|
||||
'regexp',
|
||||
],
|
||||
ignorePatterns: ['plugins/iconify/*.js', 'node_modules', 'dist', '*.d.ts', 'vendor', '*.json'],
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
|
||||
// indentation (Already present in TypeScript)
|
||||
'comma-spacing': ['error', { before: false, after: true }],
|
||||
'key-spacing': ['error', { afterColon: true }],
|
||||
'n/prefer-global/process': ['off'],
|
||||
'sonarjs/cognitive-complexity': ['off'],
|
||||
|
||||
'vue/first-attribute-linebreak': ['error', {
|
||||
singleline: 'beside',
|
||||
multiline: 'below',
|
||||
}],
|
||||
|
||||
|
||||
// indentation (Already present in TypeScript)
|
||||
'indent': ['error', 2],
|
||||
|
||||
// Enforce trailing comma (Already present in TypeScript)
|
||||
'comma-dangle': ['error', 'always-multiline'],
|
||||
|
||||
// Enforce consistent spacing inside braces of object (Already present in TypeScript)
|
||||
'object-curly-spacing': ['error', 'always'],
|
||||
|
||||
// Enforce camelCase naming convention
|
||||
'camelcase': 'error',
|
||||
|
||||
// Disable max-len
|
||||
'max-len': 'off',
|
||||
|
||||
// we don't want it
|
||||
'semi': ['error', 'never'],
|
||||
|
||||
// add parens ony when required in arrow function
|
||||
'arrow-parens': ['error', 'as-needed'],
|
||||
|
||||
// add new line above comment
|
||||
'newline-before-return': 'error',
|
||||
|
||||
// add new line above comment
|
||||
'lines-around-comment': [
|
||||
'error',
|
||||
{
|
||||
beforeBlockComment: true,
|
||||
beforeLineComment: true,
|
||||
allowBlockStart: true,
|
||||
allowClassStart: true,
|
||||
allowObjectStart: true,
|
||||
allowArrayStart: true,
|
||||
|
||||
// We don't want to add extra space above closing SECTION
|
||||
ignorePattern: '!SECTION',
|
||||
},
|
||||
],
|
||||
|
||||
// Ignore _ as unused variable
|
||||
|
||||
'array-element-newline': ['error', 'consistent'],
|
||||
'array-bracket-newline': ['error', 'consistent'],
|
||||
|
||||
'vue/multi-word-component-names': 'off',
|
||||
|
||||
'padding-line-between-statements': [
|
||||
'error',
|
||||
{ blankLine: 'always', prev: 'expression', next: 'const' },
|
||||
{ blankLine: 'always', prev: 'const', next: 'expression' },
|
||||
{ blankLine: 'always', prev: 'multiline-const', next: '*' },
|
||||
{ blankLine: 'always', prev: '*', next: 'multiline-const' },
|
||||
],
|
||||
|
||||
// Plugin: eslint-plugin-import
|
||||
'import/prefer-default-export': 'off',
|
||||
'import/newline-after-import': ['error', { count: 1 }],
|
||||
'no-restricted-imports': ['error', 'vuetify/components', {
|
||||
name: 'vue3-apexcharts',
|
||||
message: 'apexcharts are auto imported',
|
||||
}],
|
||||
|
||||
// For omitting extension for ts files
|
||||
'import/extensions': [
|
||||
'error',
|
||||
'ignorePackages',
|
||||
{
|
||||
js: 'never',
|
||||
jsx: 'never',
|
||||
ts: 'never',
|
||||
tsx: 'never',
|
||||
},
|
||||
],
|
||||
|
||||
// ignore virtual files
|
||||
'import/no-unresolved': [2, {
|
||||
ignore: [
|
||||
'~pages$',
|
||||
'virtual:generated-layouts',
|
||||
'#auth$',
|
||||
'#components$',
|
||||
|
||||
// Ignore vite's ?raw imports
|
||||
'.*\?raw',
|
||||
],
|
||||
}],
|
||||
|
||||
// Thanks: https://stackoverflow.com/a/63961972/10796681
|
||||
'no-shadow': 'off',
|
||||
|
||||
|
||||
// Plugin: eslint-plugin-promise
|
||||
'promise/always-return': 'off',
|
||||
'promise/catch-or-return': 'off',
|
||||
|
||||
// ESLint plugin vue
|
||||
'vue/block-tag-newline': 'error',
|
||||
'vue/component-api-style': 'error',
|
||||
'vue/component-name-in-template-casing': ['error', 'PascalCase', { registeredComponentsOnly: false, ignores: ['/^swiper-/'] }],
|
||||
'vue/custom-event-name-casing': ['error', 'camelCase', {
|
||||
ignores: [
|
||||
'/^(click):[a-z]+((\d)|([A-Z0-9][a-z0-9]+))*([A-Z])?/',
|
||||
],
|
||||
}],
|
||||
'vue/define-macros-order': 'error',
|
||||
'vue/html-comment-content-newline': 'error',
|
||||
'vue/html-comment-content-spacing': 'error',
|
||||
'vue/html-comment-indent': 'error',
|
||||
'vue/match-component-file-name': 'error',
|
||||
'vue/no-child-content': 'error',
|
||||
'vue/require-default-prop': 'off',
|
||||
|
||||
'vue/no-duplicate-attr-inheritance': 'error',
|
||||
'vue/no-empty-component-block': 'error',
|
||||
'vue/no-multiple-objects-in-class': 'error',
|
||||
'vue/no-reserved-component-names': 'error',
|
||||
'vue/no-template-target-blank': 'error',
|
||||
'vue/no-useless-mustaches': 'error',
|
||||
'vue/no-useless-v-bind': 'error',
|
||||
'vue/padding-line-between-blocks': 'error',
|
||||
'vue/prefer-separate-static-class': 'error',
|
||||
'vue/prefer-true-attribute-shorthand': 'error',
|
||||
'vue/v-on-function-call': 'error',
|
||||
'vue/no-restricted-class': ['error', '/^(p|m)(l|r)-/'],
|
||||
'vue/valid-v-slot': ['error', {
|
||||
allowModifiers: true,
|
||||
}],
|
||||
|
||||
// -- Extension Rules
|
||||
'vue/no-irregular-whitespace': 'error',
|
||||
'vue/template-curly-spacing': 'error',
|
||||
|
||||
// -- Sonarlint
|
||||
'sonarjs/no-duplicate-string': 'off',
|
||||
'sonarjs/no-nested-template-literals': 'off',
|
||||
|
||||
// -- Unicorn
|
||||
// 'unicorn/filename-case': 'off',
|
||||
// 'unicorn/prevent-abbreviations': ['error', {
|
||||
// replacements: {
|
||||
// props: false,
|
||||
// },
|
||||
// }],
|
||||
|
||||
// Internal Rules
|
||||
|
||||
// https://github.com/gmullerb/eslint-plugin-regex
|
||||
'regex/invalid': [
|
||||
'error',
|
||||
[
|
||||
{
|
||||
regex: '@/assets/images',
|
||||
replacement: '@images',
|
||||
message: 'Use \'@images\' path alias for image imports',
|
||||
},
|
||||
{
|
||||
regex: '@/assets/styles',
|
||||
replacement: '@styles',
|
||||
message: 'Use \'@styles\' path alias for importing styles from \'assets/styles\'',
|
||||
},
|
||||
|
||||
{
|
||||
id: 'Disallow icon of icon library',
|
||||
regex: 'tabler-\\w',
|
||||
message: 'Only \'mdi\' icons are allowed',
|
||||
},
|
||||
|
||||
{
|
||||
regex: '@core/\\w',
|
||||
message: 'You can\'t use @core when you are in @layouts module',
|
||||
files: {
|
||||
inspect: '@layouts/.*',
|
||||
},
|
||||
},
|
||||
{
|
||||
regex: 'useLayouts\\(',
|
||||
message: '`useLayouts` composable is only allowed in @layouts & @core directory. Please use `useThemeConfig` composable instead.',
|
||||
files: {
|
||||
inspect: '^(?!.*(@core|@layouts)).*',
|
||||
},
|
||||
},
|
||||
],
|
||||
|
||||
// Ignore files
|
||||
'\.eslintrc\.cjs',
|
||||
],
|
||||
},
|
||||
settings: {
|
||||
'import/resolver': {
|
||||
node: true,
|
||||
typescript: { project: './jsconfig.json' },
|
||||
},
|
||||
},
|
||||
}
|
||||
207
javascript-version/.gitattributes
vendored
Normal file
207
javascript-version/.gitattributes
vendored
Normal file
@@ -0,0 +1,207 @@
|
||||
## GITATTRIBUTES FOR WEB PROJECTS
|
||||
#
|
||||
# These settings are for any web project.
|
||||
#
|
||||
# Details per file setting:
|
||||
# text These files should be normalized (i.e. convert CRLF to LF).
|
||||
# binary These files are binary and should be left untouched.
|
||||
#
|
||||
# Note that binary is a macro for -text -diff.
|
||||
######################################################################
|
||||
|
||||
# Auto detect
|
||||
## Handle line endings automatically for files detected as
|
||||
## text and leave all files detected as binary untouched.
|
||||
## This will handle all files NOT defined below.
|
||||
* text=auto
|
||||
|
||||
# Source code
|
||||
*.bash text eol=lf
|
||||
*.bat text eol=crlf
|
||||
*.cmd text eol=crlf
|
||||
*.coffee text
|
||||
*.css text diff=css
|
||||
*.htm text diff=html
|
||||
*.html text diff=html
|
||||
*.inc text
|
||||
*.ini text
|
||||
*.js text
|
||||
*.json text
|
||||
*.jsx text
|
||||
*.less text
|
||||
*.ls text
|
||||
*.map text -diff
|
||||
*.od text
|
||||
*.onlydata text
|
||||
*.php text diff=php
|
||||
*.pl text
|
||||
*.ps1 text eol=crlf
|
||||
*.py text diff=python
|
||||
*.rb text diff=ruby
|
||||
*.sass text
|
||||
*.scm text
|
||||
*.scss text diff=css
|
||||
*.sh text eol=lf
|
||||
.husky/* text eol=lf
|
||||
*.sql text
|
||||
*.styl text
|
||||
*.tag text
|
||||
*.ts text
|
||||
*.tsx text
|
||||
*.xml text
|
||||
*.xhtml text diff=html
|
||||
|
||||
# Docker
|
||||
Dockerfile text
|
||||
|
||||
# Documentation
|
||||
*.ipynb text eol=lf
|
||||
*.markdown text diff=markdown
|
||||
*.md text diff=markdown
|
||||
*.mdwn text diff=markdown
|
||||
*.mdown text diff=markdown
|
||||
*.mkd text diff=markdown
|
||||
*.mkdn text diff=markdown
|
||||
*.mdtxt text
|
||||
*.mdtext text
|
||||
*.txt text
|
||||
AUTHORS text
|
||||
CHANGELOG text
|
||||
CHANGES text
|
||||
CONTRIBUTING text
|
||||
COPYING text
|
||||
copyright text
|
||||
*COPYRIGHT* text
|
||||
INSTALL text
|
||||
license text
|
||||
LICENSE text
|
||||
NEWS text
|
||||
readme text
|
||||
*README* text
|
||||
TODO text
|
||||
|
||||
# Templates
|
||||
*.dot text
|
||||
*.ejs text
|
||||
*.erb text
|
||||
*.haml text
|
||||
*.handlebars text
|
||||
*.hbs text
|
||||
*.hbt text
|
||||
*.jade text
|
||||
*.latte text
|
||||
*.mustache text
|
||||
*.njk text
|
||||
*.phtml text
|
||||
*.svelte text
|
||||
*.tmpl text
|
||||
*.tpl text
|
||||
*.twig text
|
||||
*.vue text
|
||||
|
||||
# Configs
|
||||
*.cnf text
|
||||
*.conf text
|
||||
*.config text
|
||||
.editorconfig text
|
||||
.env text
|
||||
.gitattributes text
|
||||
.gitconfig text
|
||||
.htaccess text
|
||||
*.lock text -diff
|
||||
package.json text eol=lf
|
||||
package-lock.json text eol=lf -diff
|
||||
pnpm-lock.yaml text eol=lf -diff
|
||||
.prettierrc text
|
||||
yarn.lock text -diff
|
||||
*.toml text
|
||||
*.yaml text
|
||||
*.yml text
|
||||
browserslist text
|
||||
Makefile text
|
||||
makefile text
|
||||
|
||||
# Heroku
|
||||
Procfile text
|
||||
|
||||
# Graphics
|
||||
*.ai binary
|
||||
*.bmp binary
|
||||
*.eps binary
|
||||
*.gif binary
|
||||
*.gifv binary
|
||||
*.ico binary
|
||||
*.jng binary
|
||||
*.jp2 binary
|
||||
*.jpg binary
|
||||
*.jpeg binary
|
||||
*.jpx binary
|
||||
*.jxr binary
|
||||
*.pdf binary
|
||||
*.png binary
|
||||
*.psb binary
|
||||
*.psd binary
|
||||
# SVG treated as an asset (binary) by default.
|
||||
*.svg text
|
||||
# If you want to treat it as binary,
|
||||
# use the following line instead.
|
||||
# *.svg binary
|
||||
*.svgz binary
|
||||
*.tif binary
|
||||
*.tiff binary
|
||||
*.wbmp binary
|
||||
*.webp binary
|
||||
|
||||
# Audio
|
||||
*.kar binary
|
||||
*.m4a binary
|
||||
*.mid binary
|
||||
*.midi binary
|
||||
*.mp3 binary
|
||||
*.ogg binary
|
||||
*.ra binary
|
||||
|
||||
# Video
|
||||
*.3gpp binary
|
||||
*.3gp binary
|
||||
*.as binary
|
||||
*.asf binary
|
||||
*.asx binary
|
||||
*.avi binary
|
||||
*.fla binary
|
||||
*.flv binary
|
||||
*.m4v binary
|
||||
*.mng binary
|
||||
*.mov binary
|
||||
*.mp4 binary
|
||||
*.mpeg binary
|
||||
*.mpg binary
|
||||
*.ogv binary
|
||||
*.swc binary
|
||||
*.swf binary
|
||||
*.webm binary
|
||||
|
||||
# Archives
|
||||
*.7z binary
|
||||
*.gz binary
|
||||
*.jar binary
|
||||
*.rar binary
|
||||
*.tar binary
|
||||
*.zip binary
|
||||
|
||||
# Fonts
|
||||
*.ttf binary
|
||||
*.eot binary
|
||||
*.otf binary
|
||||
*.woff binary
|
||||
*.woff2 binary
|
||||
|
||||
# Executables
|
||||
*.exe binary
|
||||
*.pyc binary
|
||||
|
||||
# RC files (like .babelrc or .eslintrc)
|
||||
*.*rc text
|
||||
|
||||
# Ignore files (like .npmignore or .gitignore)
|
||||
*.*ignore text
|
||||
50
javascript-version/.gitignore
vendored
Normal file
50
javascript-version/.gitignore
vendored
Normal file
@@ -0,0 +1,50 @@
|
||||
# Nuxt dev/build outputs
|
||||
.output
|
||||
.data
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
dist
|
||||
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.fleet
|
||||
.idea
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# 👉 Custom Git ignores
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
!.vscode/settings.json
|
||||
!.vscode/*.code-snippets
|
||||
!.vscode/tours
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
.yarn
|
||||
|
||||
# iconify dist files
|
||||
plugins/iconify/icons.css
|
||||
|
||||
# Ignore MSW script
|
||||
public/mockServiceWorker.js
|
||||
|
||||
# Env files
|
||||
.env*
|
||||
!.env.example
|
||||
2
javascript-version/.npmrc
Normal file
2
javascript-version/.npmrc
Normal file
@@ -0,0 +1,2 @@
|
||||
auto-install-peers=true
|
||||
shamefully-hoist=true
|
||||
1
javascript-version/.nvmrc
Normal file
1
javascript-version/.nvmrc
Normal file
@@ -0,0 +1 @@
|
||||
lts/*
|
||||
46
javascript-version/.stylelintrc.json
Normal file
46
javascript-version/.stylelintrc.json
Normal file
@@ -0,0 +1,46 @@
|
||||
{
|
||||
"extends": [
|
||||
"stylelint-config-standard-scss",
|
||||
"stylelint-config-idiomatic-order",
|
||||
"@stylistic/stylelint-config"
|
||||
],
|
||||
"plugins": [
|
||||
"stylelint-use-logical-spec",
|
||||
"@stylistic/stylelint-plugin"
|
||||
],
|
||||
"overrides": [
|
||||
{
|
||||
"files": [
|
||||
"**/*.scss"
|
||||
],
|
||||
"customSyntax": "postcss-scss"
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"**/*.vue"
|
||||
],
|
||||
"customSyntax": "postcss-html"
|
||||
}
|
||||
],
|
||||
"rules": {
|
||||
"@stylistic/max-line-length": [
|
||||
220,
|
||||
{
|
||||
"ignore": "comments"
|
||||
}
|
||||
],
|
||||
"@stylistic/indentation": 2,
|
||||
"liberty/use-logical-spec": true,
|
||||
"selector-class-pattern": null,
|
||||
"color-function-notation": null,
|
||||
"annotation-no-unknown": [
|
||||
true,
|
||||
{
|
||||
"ignoreAnnotations": [
|
||||
"default"
|
||||
]
|
||||
}
|
||||
],
|
||||
"media-feature-range-notation": null
|
||||
}
|
||||
}
|
||||
23
javascript-version/.vscode/anchor-comments.code-snippets
vendored
Normal file
23
javascript-version/.vscode/anchor-comments.code-snippets
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"Add hand emoji": {
|
||||
"prefix": "cm-hand-emoji",
|
||||
"body": [
|
||||
"👉"
|
||||
],
|
||||
"description": "Add hand emoji"
|
||||
},
|
||||
"Add info emoji": {
|
||||
"prefix": "cm-info-emoji",
|
||||
"body": [
|
||||
"ℹ️"
|
||||
],
|
||||
"description": "Add info emoji"
|
||||
},
|
||||
"Add warning emoji": {
|
||||
"prefix": "cm-warning-emoji",
|
||||
"body": [
|
||||
"❗"
|
||||
],
|
||||
"description": "Add warning emoji"
|
||||
}
|
||||
}
|
||||
15
javascript-version/.vscode/extensions.json
vendored
Normal file
15
javascript-version/.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"dbaeumer.vscode-eslint",
|
||||
"editorconfig.editorconfig",
|
||||
"xabikos.javascriptsnippets",
|
||||
"stylelint.vscode-stylelint",
|
||||
"fabiospampinato.vscode-highlight",
|
||||
"github.vscode-pull-request-github",
|
||||
"vue.volar",
|
||||
"antfu.iconify",
|
||||
"cipchk.cssrem",
|
||||
"matijao.vue-nuxt-snippets",
|
||||
"dongido.sync-env"
|
||||
]
|
||||
}
|
||||
109
javascript-version/.vscode/settings.json
vendored
Normal file
109
javascript-version/.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,109 @@
|
||||
{
|
||||
"editor.formatOnSave": true,
|
||||
"files.insertFinalNewline": true,
|
||||
"javascript.updateImportsOnFileMove.enabled": "always",
|
||||
"[javascript]": {
|
||||
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
|
||||
},
|
||||
"[typescript]": {
|
||||
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
|
||||
"editor.autoClosingBrackets": "always"
|
||||
},
|
||||
"[markdown]": {
|
||||
"editor.defaultFormatter": "DavidAnson.vscode-markdownlint"
|
||||
},
|
||||
// SCSS
|
||||
"[scss]": {
|
||||
"editor.defaultFormatter": "stylelint.vscode-stylelint"
|
||||
},
|
||||
// JSON
|
||||
"[json]": {
|
||||
"editor.defaultFormatter": "vscode.json-language-features"
|
||||
},
|
||||
"[jsonc]": {
|
||||
"editor.defaultFormatter": "vscode.json-language-features"
|
||||
},
|
||||
// Vue
|
||||
"[vue]": {
|
||||
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
|
||||
},
|
||||
// Extension: Volar
|
||||
"volar.preview.port": 3000,
|
||||
"volar.completion.preferredTagNameCase": "pascal",
|
||||
// Extension: ESLint
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": "explicit",
|
||||
"source.fixAll.stylelint": "explicit",
|
||||
"source.organizeImports": "explicit"
|
||||
},
|
||||
"eslint.alwaysShowStatus": true,
|
||||
"eslint.format.enable": true,
|
||||
"eslint.packageManager": "pnpm",
|
||||
// Extension: Stylelint
|
||||
"stylelint.packageManager": "pnpm",
|
||||
"stylelint.validate": [
|
||||
"css",
|
||||
"scss",
|
||||
"vue"
|
||||
],
|
||||
// Extension: Spell Checker
|
||||
"cSpell.words": [
|
||||
"Composables",
|
||||
"Customizer",
|
||||
"destr",
|
||||
"flagpack",
|
||||
"Iconify",
|
||||
"ofetch",
|
||||
"psudo",
|
||||
"stylelint",
|
||||
"touchless",
|
||||
"triggerer",
|
||||
"vuetify",
|
||||
"nuxt"
|
||||
],
|
||||
// Extension: Comment Anchors
|
||||
"commentAnchors.tags.anchors": {
|
||||
"ℹ️": {
|
||||
"scope": "hidden",
|
||||
// This color is taken from "Better Comments" Extension (?)
|
||||
"highlightColor": "#3498DB",
|
||||
"styleComment": true,
|
||||
"isItalic": false,
|
||||
},
|
||||
"👉": {
|
||||
"scope": "file",
|
||||
// This color is taken from "Better Comments" Extension (*)
|
||||
"highlightColor": "#98C379",
|
||||
"styleComment": true,
|
||||
"isItalic": false
|
||||
},
|
||||
"❗": {
|
||||
"scope": "hidden",
|
||||
// This color is taken from "Better Comments" Extension (*)
|
||||
"highlightColor": "#FF2D00",
|
||||
"styleComment": true,
|
||||
"isItalic": false,
|
||||
},
|
||||
},
|
||||
// Extension: fabiospampinato.vscode-highlight
|
||||
"highlight.regexFlags": "gi",
|
||||
"highlight.regexes": {
|
||||
// We flaged this for enforcing logical CSS properties
|
||||
"(100vh|translate|margin:|padding:|margin-left|margin-right|rotate|text-align|border-top|border-right|border-bottom|border-left|float|background-position|transform|width|height|top|left|bottom|right|float|clear|(p|m)(l|r)-|border-(start|end)-(start|end)-radius)": [
|
||||
{
|
||||
// "rangeBehavior": 1,
|
||||
"borderWidth": "1px",
|
||||
"borderColor": "tomato",
|
||||
"borderStyle": "solid"
|
||||
}
|
||||
],
|
||||
"(overflow-x:|overflow-y:)": [
|
||||
{
|
||||
// "rangeBehavior": 1,
|
||||
"borderWidth": "1px",
|
||||
"borderColor": "green",
|
||||
"borderStyle": "solid"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
18
javascript-version/.vscode/vue-ts.code-snippets
vendored
Normal file
18
javascript-version/.vscode/vue-ts.code-snippets
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"Vue TS - DefineProps": {
|
||||
"prefix": "dprops",
|
||||
"body": [
|
||||
"defineProps<${1:Props}>()"
|
||||
],
|
||||
"description": "DefineProps in script setup"
|
||||
},
|
||||
"Vue TS - Props interface": {
|
||||
"prefix": "iprops",
|
||||
"body": [
|
||||
"interface Props {",
|
||||
" ${1}",
|
||||
"}"
|
||||
],
|
||||
"description": "Create props interface in script setup"
|
||||
}
|
||||
}
|
||||
63
javascript-version/.vscode/vue.code-snippets
vendored
Normal file
63
javascript-version/.vscode/vue.code-snippets
vendored
Normal file
@@ -0,0 +1,63 @@
|
||||
{
|
||||
"script": {
|
||||
"prefix": "vue-sfc-ts",
|
||||
"body": [
|
||||
"<script lang=\"ts\" setup>",
|
||||
"",
|
||||
"</script>",
|
||||
"",
|
||||
"<template>",
|
||||
" ",
|
||||
"</template>",
|
||||
"",
|
||||
"<style lang=\"scss\">",
|
||||
"",
|
||||
"</style>",
|
||||
""
|
||||
],
|
||||
"description": "Vue SFC Typescript"
|
||||
},
|
||||
"template": {
|
||||
"scope": "vue",
|
||||
"prefix": "template",
|
||||
"body": [
|
||||
"<template>",
|
||||
" $1",
|
||||
"</template>"
|
||||
],
|
||||
"description": "Create <template> block"
|
||||
},
|
||||
"Script setup + TS": {
|
||||
"prefix": "script-setup-ts",
|
||||
"body": [
|
||||
"<script setup lang=\"ts\">",
|
||||
"${1}",
|
||||
"</script>"
|
||||
],
|
||||
"description": "Script setup + TS"
|
||||
},
|
||||
"style": {
|
||||
"scope": "vue",
|
||||
"prefix": "style",
|
||||
"body": [
|
||||
"<style lang=\"scss\">",
|
||||
"$1",
|
||||
"</style>"
|
||||
],
|
||||
"description": "Create <style> block"
|
||||
},
|
||||
"use composable": {
|
||||
"prefix": "use-composable",
|
||||
"body": [
|
||||
"const { $2 } = ${1:useComposable}()"
|
||||
],
|
||||
"description": "We frequently uses composable in our components and writing const {} = useModule() is tedious. This snippet helps you to write it quickly."
|
||||
},
|
||||
"template interpolation": {
|
||||
"prefix": "cc",
|
||||
"body": [
|
||||
"{{ ${1} }}"
|
||||
],
|
||||
"description": "We are just making writing template interpolation easier."
|
||||
}
|
||||
}
|
||||
52
javascript-version/.vscode/vuetify.code-snippets
vendored
Normal file
52
javascript-version/.vscode/vuetify.code-snippets
vendored
Normal file
@@ -0,0 +1,52 @@
|
||||
{
|
||||
"Vuetify Menu -- Parent Activator": {
|
||||
"prefix": "v-menu",
|
||||
"body": [
|
||||
"<v-btn color=\"primary\">",
|
||||
" Activator",
|
||||
" <v-menu activator=\"parent\">",
|
||||
" <v-list>",
|
||||
" <v-list-item",
|
||||
" v-for=\"(item, index) in ['apple', 'banana', 'cherry']\"",
|
||||
" :key=\"index\"",
|
||||
" :value=\"index\"",
|
||||
" >",
|
||||
" <v-list-item-title>{{ item }}</v-list-item-title>",
|
||||
" </v-list-item>",
|
||||
" </v-list>",
|
||||
" </v-menu>",
|
||||
"</v-btn>"
|
||||
],
|
||||
"description": "We use menu component with parent activator mostly because it is compact and easy to understand."
|
||||
},
|
||||
"Vuetify CSS variable": {
|
||||
"prefix": "v-css-var",
|
||||
"body": [
|
||||
"rgb(var(--v-${1:theme}))"
|
||||
],
|
||||
"description": "Vuetify CSS variable"
|
||||
},
|
||||
"Icon only button": {
|
||||
"prefix": "IconBtn",
|
||||
"body": [
|
||||
"<IconBtn>",
|
||||
" <VIcon icon=\"bx-${1}\" />",
|
||||
"</IconBtn>"
|
||||
],
|
||||
"description": "Icon only button"
|
||||
},
|
||||
"Radio Group": {
|
||||
"prefix": "v-radio-grp",
|
||||
"body": [
|
||||
"<v-radio-group v-model=\"${1:modelValue}\">",
|
||||
" <v-radio",
|
||||
" v-for=\"item in ['apple', 'banana', 'cherry']\"",
|
||||
" :key=\"item\"",
|
||||
" :label=\"item\"",
|
||||
" :value=\"item\"",
|
||||
" />",
|
||||
"</v-radio-group>"
|
||||
],
|
||||
"description": "Radio Group"
|
||||
}
|
||||
}
|
||||
35
javascript-version/@core/components/MoreBtn.vue
Normal file
35
javascript-version/@core/components/MoreBtn.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
menuList: {
|
||||
type: Array,
|
||||
required: false,
|
||||
},
|
||||
itemProps: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
},
|
||||
iconSize: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IconBtn>
|
||||
<VIcon
|
||||
:size="props.iconSize"
|
||||
icon="bx-dots-vertical-rounded"
|
||||
/>
|
||||
|
||||
<VMenu
|
||||
v-if="props.menuList"
|
||||
activator="parent"
|
||||
>
|
||||
<VList
|
||||
:items="props.menuList"
|
||||
:item-props="props.itemProps"
|
||||
/>
|
||||
</VMenu>
|
||||
</IconBtn>
|
||||
</template>
|
||||
43
javascript-version/@core/components/ThemeSwitcher.vue
Normal file
43
javascript-version/@core/components/ThemeSwitcher.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<script setup>
|
||||
import { useTheme } from 'vuetify'
|
||||
|
||||
const props = defineProps({
|
||||
themes: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const {
|
||||
name: themeName,
|
||||
global: globalTheme,
|
||||
} = useTheme()
|
||||
|
||||
const {
|
||||
state: currentThemeName,
|
||||
next: getNextThemeName,
|
||||
index: currentThemeIndex,
|
||||
} = useCycleList(props.themes.map(t => t.name), { initialValue: themeName })
|
||||
|
||||
const changeTheme = () => {
|
||||
globalTheme.name.value = getNextThemeName()
|
||||
}
|
||||
|
||||
// Update icon if theme is changed from other sources
|
||||
watch(() => globalTheme.name.value, val => {
|
||||
currentThemeName.value = val
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IconBtn @click="changeTheme">
|
||||
<VIcon :icon="props.themes[currentThemeIndex].icon" />
|
||||
<VTooltip
|
||||
activator="parent"
|
||||
open-delay="1000"
|
||||
scroll-strategy="close"
|
||||
>
|
||||
<span class="text-capitalize">{{ currentThemeName }}</span>
|
||||
</VTooltip>
|
||||
</IconBtn>
|
||||
</template>
|
||||
@@ -0,0 +1,60 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'primary',
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
stats: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
change: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="d-flex align-center">
|
||||
<VAvatar
|
||||
size="44"
|
||||
rounded
|
||||
:color="props.color"
|
||||
variant="tonal"
|
||||
class="me-4"
|
||||
>
|
||||
<VIcon
|
||||
:icon="props.icon"
|
||||
size="30"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<div>
|
||||
<span class="text-caption">{{ props.title }}</span>
|
||||
<div class="d-flex align-center flex-wrap">
|
||||
<span class="text-h6 font-weight-semibold">{{ kFormatter(props.stats) }}</span>
|
||||
<div
|
||||
v-if="props.change"
|
||||
:class="`${isPositive ? 'text-success' : 'text-error'} mt-1`"
|
||||
>
|
||||
<VIcon :icon="isPositive ? 'bx-chevron-up' : 'bx-chevron-down'" />
|
||||
<span class="text-caption font-weight-semibold">{{ Math.abs(props.change) }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,75 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
stats: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
change: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
|
||||
|
||||
const moreList = [
|
||||
{
|
||||
title: 'Yesterday',
|
||||
value: 'Yesterday',
|
||||
},
|
||||
{
|
||||
title: 'Last Week',
|
||||
value: 'Last Week',
|
||||
},
|
||||
{
|
||||
title: 'Last Month',
|
||||
value: 'Last Month',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="d-flex align-center pb-4">
|
||||
<img
|
||||
width="42"
|
||||
:src="props.image"
|
||||
alt="image"
|
||||
>
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<MoreBtn
|
||||
class="me-n3 mt-n4"
|
||||
:menu-list="moreList"
|
||||
/>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="mb-1">
|
||||
{{ props.title }}
|
||||
</p>
|
||||
<h5 class="text-h5 text-no-wrap mb-3">
|
||||
{{ props.stats }}
|
||||
</h5>
|
||||
<span
|
||||
:class="isPositive ? 'text-success' : 'text-error'"
|
||||
class="d-flex align-center gap-1 text-sm"
|
||||
>
|
||||
<VIcon
|
||||
size="18"
|
||||
:icon="isPositive ? 'bx-up-arrow-alt' : 'bx-down-arrow-alt'"
|
||||
/>
|
||||
{{ isPositive ? Math.abs(props.change) : props.change }}%
|
||||
</span>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
@@ -0,0 +1,80 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
stats: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
change: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
image: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: 'primary',
|
||||
},
|
||||
})
|
||||
|
||||
const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard class="overflow-visible">
|
||||
<div class="d-flex position-relative">
|
||||
<VCardText>
|
||||
<h6 class="text-base font-weight-semibold mb-4">
|
||||
{{ props.title }}
|
||||
</h6>
|
||||
<div class="d-flex align-center flex-wrap mb-4">
|
||||
<h5 class="text-h5 font-weight-semibold me-2">
|
||||
{{ props.stats }}
|
||||
</h5>
|
||||
<span
|
||||
class="text-caption"
|
||||
:class="isPositive ? 'text-success' : 'text-error'"
|
||||
>
|
||||
{{ isPositive ? `+${props.change}` : props.change }}%
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<VChip
|
||||
v-if="props.subtitle"
|
||||
size="small"
|
||||
:color="props.color"
|
||||
>
|
||||
{{ props.subtitle }}
|
||||
</VChip>
|
||||
</VCardText>
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<div class="illustrator-img">
|
||||
<VImg
|
||||
v-if="props.image"
|
||||
:src="props.image"
|
||||
:width="110"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</VCard>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.illustrator-img {
|
||||
position: absolute;
|
||||
inset-block-end: 0;
|
||||
inset-inline-end: 5%;
|
||||
}
|
||||
</style>
|
||||
188
javascript-version/@core/scss/base/_components.scss
Normal file
188
javascript-version/@core/scss/base/_components.scss
Normal file
@@ -0,0 +1,188 @@
|
||||
@use "mixins";
|
||||
@use "@layouts/styles/placeholders";
|
||||
@use "@layouts/styles/mixins" as layoutMixins;
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@styles/variables/_vuetify.scss" as vuetify;
|
||||
|
||||
// 👉 Avatar group
|
||||
.v-avatar-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
&:not(:first-child) {
|
||||
margin-inline-start: -0.8rem;
|
||||
}
|
||||
|
||||
transition: transform 0.25s ease, box-shadow 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
z-index: 2;
|
||||
transform: translateY(-5px) scale(1.05);
|
||||
|
||||
@include mixins.elevation(3);
|
||||
}
|
||||
}
|
||||
|
||||
> .v-avatar {
|
||||
border: 2px solid rgb(var(--v-theme-surface));
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Button outline with default color border color
|
||||
.v-alert--variant-outlined,
|
||||
.v-avatar--variant-outlined,
|
||||
.v-btn.v-btn--variant-outlined,
|
||||
.v-card--variant-outlined,
|
||||
.v-chip--variant-outlined,
|
||||
.v-list-item--variant-outlined {
|
||||
&:not([class*="text-"]) {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
|
||||
&.text-default {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Custom Input
|
||||
.v-label.custom-input {
|
||||
padding: 1rem;
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
opacity: 1;
|
||||
white-space: normal;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(var(--v-border-color), 0.25);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: rgb(var(--v-theme-primary));
|
||||
|
||||
.v-icon {
|
||||
color: rgb(var(--v-theme-primary)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.custom-checkbox,
|
||||
&.custom-radio {
|
||||
.v-input__control {
|
||||
grid-area: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Datatable
|
||||
.v-data-table-footer__pagination {
|
||||
@include layoutMixins.rtl {
|
||||
.v-btn {
|
||||
.v-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dialog responsive width
|
||||
.v-dialog {
|
||||
// dialog custom close btn
|
||||
.v-dialog-close-btn {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
|
||||
inset-block-start: 0.5rem;
|
||||
inset-inline-end: 0.5rem;
|
||||
|
||||
.v-btn__overlay {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.v-card {
|
||||
@extend %style-scroll-bar;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.v-dialog {
|
||||
&.v-dialog-sm,
|
||||
&.v-dialog-lg,
|
||||
&.v-dialog-xl {
|
||||
.v-overlay__content {
|
||||
inline-size: 565px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.v-dialog {
|
||||
&.v-dialog-lg,
|
||||
&.v-dialog-xl {
|
||||
.v-overlay__content {
|
||||
inline-size: 865px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1264px) {
|
||||
.v-dialog.v-dialog-xl {
|
||||
.v-overlay__content {
|
||||
inline-size: 1165px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Expansion panel
|
||||
.v-expansion-panels.customized-panels {
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-radius: vuetify.$border-radius-root;
|
||||
|
||||
.v-expansion-panel-title {
|
||||
background-color: rgb(var(--v-theme-expansion-panel-text-custom-bg));
|
||||
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
margin-block-end: -1px;
|
||||
}
|
||||
|
||||
.v-expansion-panel-text__wrapper {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// v-tab with pill support
|
||||
.v-tabs.v-tabs-pill {
|
||||
.v-tab.v-btn {
|
||||
border-radius: 0.25rem !important;
|
||||
transition: none;
|
||||
|
||||
.v-tab__slider {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// loop for all colors bg
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
body .v-tabs.v-tabs-pill {
|
||||
.v-slide-group-item--active.v-tab--selected.text-#{$color-name} {
|
||||
background-color: rgb(var(--v-theme-#{$color-name}));
|
||||
color: rgb(var(--v-theme-on-#{$color-name})) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ℹ️ We are make even width of all v-timeline body
|
||||
.v-timeline--vertical.v-timeline {
|
||||
.v-timeline-item {
|
||||
.v-timeline-item__body {
|
||||
justify-self: stretch !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Switch
|
||||
.v-switch .v-selection-control:not(.v-selection-control--dirty) .v-switch__thumb {
|
||||
color: #fff !important;
|
||||
}
|
||||
16
javascript-version/@core/scss/base/_dark.scss
Normal file
16
javascript-version/@core/scss/base/_dark.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
// ————————————————————————————————————
|
||||
// * ——— Perfect Scrollbar
|
||||
// ————————————————————————————————————
|
||||
|
||||
body.v-theme--dark {
|
||||
.ps__rail-y,
|
||||
.ps__rail-x {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
background-color: variables.$plugin-ps-thumb-y-dark;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@core/scss/base/placeholders" as *;
|
||||
@use "@core/scss/template/placeholders" as *;
|
||||
@use "misc";
|
||||
@use "@core/scss/base/mixins";
|
||||
|
||||
$header: ".layout-navbar";
|
||||
|
||||
@if variables.$layout-vertical-nav-navbar-is-contained {
|
||||
$header: ".layout-navbar .navbar-content-container";
|
||||
}
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical {
|
||||
// SECTION Layout Navbar
|
||||
// 👉 Elevated navbar
|
||||
@if variables.$vertical-nav-navbar-style == "elevated" {
|
||||
// Add transition
|
||||
#{$header} {
|
||||
transition: padding 0.2s ease, background-color 0.18s ease;
|
||||
}
|
||||
|
||||
// If navbar is contained => Add border radius to header
|
||||
@if variables.$layout-vertical-nav-navbar-is-contained {
|
||||
#{$header} {
|
||||
border-radius: 0 0 variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
|
||||
}
|
||||
}
|
||||
|
||||
// Scrolled styles for sticky navbar
|
||||
@at-root {
|
||||
/* ℹ️ This html selector with not selector is required when:
|
||||
dialog is opened and window don't have any scroll. This removes window-scrolled class from layout and our style broke
|
||||
*/
|
||||
html.v-overlay-scroll-blocked:not([style*="--v-body-scroll-y: 0px;"]) .layout-navbar-sticky,
|
||||
&.window-scrolled.layout-navbar-sticky {
|
||||
|
||||
#{$header} {
|
||||
@extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
|
||||
@extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
|
||||
}
|
||||
|
||||
.navbar-blur#{$header} {
|
||||
@extend %blurry-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Floating navbar
|
||||
@else if variables.$vertical-nav-navbar-style == "floating" {
|
||||
// ℹ️ Regardless of navbar is contained or not => Apply overlay to .layout-navbar
|
||||
.layout-navbar {
|
||||
&.navbar-blur {
|
||||
@extend %default-layout-vertical-nav-floating-navbar-overlay;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.layout-navbar-sticky) {
|
||||
#{$header} {
|
||||
margin-block-start: variables.$vertical-nav-floating-navbar-top;
|
||||
}
|
||||
}
|
||||
|
||||
#{$header} {
|
||||
@if variables.$layout-vertical-nav-navbar-is-contained {
|
||||
border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
|
||||
}
|
||||
|
||||
background-color: rgb(var(--v-theme-surface));
|
||||
|
||||
@extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
|
||||
}
|
||||
|
||||
.navbar-blur#{$header} {
|
||||
@extend %blurry-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// !SECTION
|
||||
|
||||
// 👉 Layout footer
|
||||
.layout-footer {
|
||||
$ele-layout-footer: &;
|
||||
|
||||
.footer-content-container {
|
||||
border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness variables.$default-layout-with-vertical-nav-navbar-footer-roundness 0 0;
|
||||
|
||||
// Sticky footer
|
||||
@at-root {
|
||||
// ℹ️ .layout-footer-sticky#{$ele-layout-footer} => .layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer
|
||||
.layout-footer-sticky#{$ele-layout-footer} {
|
||||
.footer-content-container {
|
||||
background-color: rgb(var(--v-theme-surface));
|
||||
padding-block: 0;
|
||||
padding-inline: 1.2rem;
|
||||
|
||||
@include mixins.elevation(3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
16
javascript-version/@core/scss/base/_default-layout.scss
Normal file
16
javascript-version/@core/scss/base/_default-layout.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
@use "@core/scss/base/placeholders";
|
||||
@use "@core/scss/base/variables";
|
||||
|
||||
.layout-vertical-nav,
|
||||
.layout-horizontal-nav {
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-navbar {
|
||||
@if variables.$navbar-high-emphasis-text {
|
||||
@extend %layout-navbar;
|
||||
}
|
||||
}
|
||||
40
javascript-version/@core/scss/base/_index.scss
Normal file
40
javascript-version/@core/scss/base/_index.scss
Normal file
@@ -0,0 +1,40 @@
|
||||
@use "sass:map";
|
||||
|
||||
// Layout
|
||||
@use "vertical-nav";
|
||||
@use "default-layout";
|
||||
@use "default-layout-w-vertical-nav";
|
||||
|
||||
// Layouts package
|
||||
@use "layouts";
|
||||
|
||||
// Components
|
||||
@use "components";
|
||||
|
||||
// Utilities
|
||||
@use "utilities";
|
||||
|
||||
// Misc
|
||||
@use "misc";
|
||||
|
||||
// Dark
|
||||
@use "dark";
|
||||
|
||||
// libs
|
||||
@use "libs/perfect-scrollbar";
|
||||
|
||||
a {
|
||||
color: rgb(var(--v-theme-primary));
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Vuetify 3 don't provide margin bottom style like vuetify 2
|
||||
p {
|
||||
margin-block-end: 1rem;
|
||||
}
|
||||
|
||||
// Iconify icon size
|
||||
svg.iconify {
|
||||
block-size: 1em;
|
||||
inline-size: 1em;
|
||||
}
|
||||
63
javascript-version/@core/scss/base/_layouts.scss
Normal file
63
javascript-version/@core/scss/base/_layouts.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
/* ℹ️ This styles extends the existing layout package's styles for handling cases that aren't related to layouts package */
|
||||
|
||||
/*
|
||||
ℹ️ When we use v-layout as immediate first child of `.page-content-container`, it adds display:flex and page doesn't get contained height
|
||||
*/
|
||||
// .layout-wrapper.layout-nav-type-vertical {
|
||||
// &.layout-content-height-fixed {
|
||||
// .page-content-container {
|
||||
// > .v-layout:first-child > :not(.v-navigation-drawer):first-child {
|
||||
// flex-grow: 1;
|
||||
// block-size: 100%;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
.layout-wrapper.layout-nav-type-vertical {
|
||||
&.layout-content-height-fixed {
|
||||
.page-content-container {
|
||||
> .v-layout:first-child {
|
||||
overflow: hidden;
|
||||
min-block-size: 100%;
|
||||
|
||||
> .v-main {
|
||||
// overflow-y: auto;
|
||||
|
||||
.v-main__wrap > :first-child {
|
||||
block-size: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ℹ️ Let div/v-layout take full height. E.g. Email App
|
||||
.layout-wrapper.layout-nav-type-horizontal {
|
||||
&.layout-content-height-fixed {
|
||||
> .layout-page-content {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Floating navbar styles
|
||||
@if variables.$vertical-nav-navbar-style == "floating" {
|
||||
// ℹ️ Add spacing above navbar if navbar is floating (was in %layout-navbar-sticky placeholder)
|
||||
body .layout-wrapper.layout-nav-type-vertical.layout-navbar-sticky {
|
||||
.layout-navbar {
|
||||
inset-block-start: variables.$vertical-nav-floating-navbar-top;
|
||||
}
|
||||
|
||||
/*
|
||||
ℹ️ If it's floating navbar
|
||||
Add `vertical-nav-floating-navbar-top` as margin top to .layout-page-content
|
||||
*/
|
||||
.layout-page-content {
|
||||
margin-block-start: variables.$vertical-nav-floating-navbar-top;
|
||||
}
|
||||
}
|
||||
}
|
||||
20
javascript-version/@core/scss/base/_misc.scss
Normal file
20
javascript-version/@core/scss/base/_misc.scss
Normal file
@@ -0,0 +1,20 @@
|
||||
// ℹ️ scrollable-content allows creating fixed header and scrollable content for VNavigationDrawer (Used when perfect scrollbar is used)
|
||||
.scrollable-content {
|
||||
&.v-navigation-drawer {
|
||||
.v-navigation-drawer__content {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ℹ️ adding styling for code tag
|
||||
code {
|
||||
border-radius: 3px;
|
||||
color: rgb(var(--v-code-color));
|
||||
font-size: 90%;
|
||||
font-weight: 400;
|
||||
padding-block: 0.2em;
|
||||
padding-inline: 0.4em;
|
||||
}
|
||||
63
javascript-version/@core/scss/base/_mixins.scss
Normal file
63
javascript-version/@core/scss/base/_mixins.scss
Normal file
@@ -0,0 +1,63 @@
|
||||
@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
|
||||
184
javascript-version/@core/scss/base/_utilities.scss
Normal file
184
javascript-version/@core/scss/base/_utilities.scss
Normal file
@@ -0,0 +1,184 @@
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@layouts/styles/mixins" as layoutsMixins;
|
||||
|
||||
/* 👉 Demo spacers */
|
||||
|
||||
/* TODO: Use vuetify SCSS variable here; */
|
||||
$card-spacer-content: 16px;
|
||||
|
||||
.demo-space-x {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-block-start: -$card-spacer-content;
|
||||
|
||||
& > * {
|
||||
margin-block-start: $card-spacer-content;
|
||||
margin-inline-end: $card-spacer-content;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-space-y {
|
||||
& > * {
|
||||
margin-block-end: $card-spacer-content;
|
||||
|
||||
&:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Card match height
|
||||
.match-height.v-row {
|
||||
.v-card {
|
||||
block-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Whitespace
|
||||
.whitespace-no-wrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 👉 Colors
|
||||
|
||||
/*
|
||||
ℹ️ Vuetify is applying `.text-white` class to badge icon but don't provide its styles
|
||||
Moreover, we also use this class in some places
|
||||
|
||||
ℹ️ In vuetify 2 with `$color-pack: false` SCSS var config this class was getting generated but this is not the case in v3
|
||||
|
||||
ℹ️ We also need !important to get correct color in badge icon
|
||||
*/
|
||||
.text-white {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.text-white-variant {
|
||||
color: rgba(255, 255, 255, var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
.text-link {
|
||||
&:not(:hover) {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
.bg-var-theme-background {
|
||||
background-color: rgba(var(--v-theme-on-background), var(--v-hover-opacity)) !important;
|
||||
}
|
||||
|
||||
.bg-global-primary {
|
||||
background-color: rgb(var(--v-global-theme-primary)) !important;
|
||||
color: rgb(var(--v-theme-on-primary)) !important;
|
||||
}
|
||||
|
||||
// [/^bg-light-(\w+)$/, ([, w]) => ({ backgroundColor: `rgba(var(--v-theme-${w}), var(--v-activated-opacity))` })],
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
.bg-light-#{$color-name} {
|
||||
background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 clamp text
|
||||
.clamp-text {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.custom-badge {
|
||||
.v-badge__badge {
|
||||
border-radius: 6px !important;
|
||||
block-size: 12px !important;
|
||||
inline-size: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.leading-normal {
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
// 👉 for rtl only
|
||||
.flip-in-rtl {
|
||||
@include layoutsMixins.rtl {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Carousel
|
||||
.carousel-delimiter-top-end {
|
||||
.v-carousel__controls {
|
||||
justify-content: end;
|
||||
block-size: 40px;
|
||||
inset-block-start: 0;
|
||||
padding-inline: 1rem;
|
||||
|
||||
.v-btn--icon.v-btn--density-default {
|
||||
block-size: calc(var(--v-btn-height) + -10px);
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||
inline-size: calc(var(--v-btn-height) + -8px);
|
||||
|
||||
&.v-btn--active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.v-btn__overlay {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.v-ripple__container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.v-btn__content {
|
||||
.v-icon {
|
||||
block-size: 8px !important;
|
||||
font-size: 8px !important;
|
||||
inline-size: 8px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
|
||||
&.dots-active-#{$color-name} {
|
||||
.v-carousel__controls {
|
||||
.v-btn--active {
|
||||
color: rgb(var(--v-theme-#{$color-name})) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-timeline-item {
|
||||
.app-timeline-title {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1.3125rem;
|
||||
}
|
||||
|
||||
.app-timeline-meta {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||
font-size: 12px;
|
||||
line-height: 0.875rem;
|
||||
}
|
||||
|
||||
.app-timeline-text {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||
font-size: 14px;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.timeline-chip {
|
||||
border-radius: 6px;
|
||||
background: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
|
||||
padding-block: 5px;
|
||||
padding-inline: 10px;
|
||||
}
|
||||
}
|
||||
90
javascript-version/@core/scss/base/_utils.scss
Normal file
90
javascript-version/@core/scss/base/_utils.scss
Normal file
@@ -0,0 +1,90 @@
|
||||
@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;
|
||||
}
|
||||
198
javascript-version/@core/scss/base/_variables.scss
Normal file
198
javascript-version/@core/scss/base/_variables.scss
Normal file
@@ -0,0 +1,198 @@
|
||||
@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
|
||||
);
|
||||
259
javascript-version/@core/scss/base/_vertical-nav.scss
Normal file
259
javascript-version/@core/scss/base/_vertical-nav.scss
Normal file
@@ -0,0 +1,259 @@
|
||||
@use "@core/scss/base/placeholders" as *;
|
||||
@use "@core/scss/template/placeholders" as *;
|
||||
@use "@layouts/styles/mixins" as layoutsMixins;
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@core/scss/base/mixins" as mixins;
|
||||
@use "vuetify/lib/styles/tools/states" as vuetifyStates;
|
||||
|
||||
.layout-nav-type-vertical {
|
||||
// 👉 Layout Vertical nav
|
||||
.layout-vertical-nav {
|
||||
$sl-layout-nav-type-vertical: &;
|
||||
|
||||
@extend %nav;
|
||||
|
||||
@at-root {
|
||||
// ℹ️ Add styles for collapsed vertical nav
|
||||
.layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}.hovered {
|
||||
@include mixins.elevation(6);
|
||||
}
|
||||
}
|
||||
|
||||
background-color: variables.$vertical-nav-background-color;
|
||||
|
||||
// 👉 Nav header
|
||||
.nav-header {
|
||||
overflow: hidden;
|
||||
padding: variables.$vertical-nav-header-padding;
|
||||
margin-inline: variables.$vertical-nav-header-inline-spacing;
|
||||
min-block-size: variables.$vertical-nav-header-height;
|
||||
|
||||
// TEMPLATE: Check if we need to move this to master
|
||||
.app-logo {
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.25s ease-in-out;
|
||||
|
||||
@at-root {
|
||||
// Move logo a bit to align center with the icons in vertical nav mini variant
|
||||
.layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}:not(.hovered) .nav-header .app-logo {
|
||||
transform: translateX(variables.$vertical-nav-header-logo-translate-x-when-vertical-nav-mini);
|
||||
|
||||
@include layoutsMixins.rtl {
|
||||
transform: translateX(-(variables.$vertical-nav-header-logo-translate-x-when-vertical-nav-mini));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-title {
|
||||
margin-inline-start: variables.$vertical-nav-header-logo-title-spacing;
|
||||
}
|
||||
|
||||
.header-action {
|
||||
@extend %nav-header-action;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Nav items shadow
|
||||
.vertical-nav-items-shadow {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
background:
|
||||
linear-gradient(
|
||||
rgb(#{variables.$vertical-nav-background-color-rgb}) 5%,
|
||||
rgba(#{variables.$vertical-nav-background-color-rgb}, 75%) 45%,
|
||||
rgba(#{variables.$vertical-nav-background-color-rgb}, 20%) 80%,
|
||||
transparent
|
||||
);
|
||||
block-size: 55px;
|
||||
inline-size: 100%;
|
||||
inset-block-start: calc(#{variables.$vertical-nav-header-height} - 2px);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
will-change: opacity;
|
||||
|
||||
@include layoutsMixins.rtl {
|
||||
transform: translateX(8px);
|
||||
}
|
||||
}
|
||||
|
||||
&.scrolled {
|
||||
.vertical-nav-items-shadow {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// ℹ️ Setting z-index 1 will make perfect scrollbar thumb appear on top of vertical nav items shadow;
|
||||
.ps__rail-y {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// 👉 Nav section title
|
||||
.nav-section-title {
|
||||
@extend %vertical-nav-item;
|
||||
@extend %vertical-nav-section-title;
|
||||
|
||||
margin-block-end: variables.$vertical-nav-section-title-mb;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-block-start: variables.$vertical-nav-section-title-mt;
|
||||
}
|
||||
|
||||
.placeholder-icon {
|
||||
margin-inline: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Nav item badge
|
||||
.nav-item-badge {
|
||||
@extend %vertical-nav-item-badge;
|
||||
}
|
||||
|
||||
// 👉 Nav group & Link
|
||||
.nav-link,
|
||||
.nav-group {
|
||||
overflow: hidden;
|
||||
|
||||
> :first-child {
|
||||
@extend %vertical-nav-item;
|
||||
@extend %vertical-nav-item-interactive;
|
||||
}
|
||||
|
||||
.nav-item-icon {
|
||||
@extend %vertical-nav-items-icon;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: var(--v-disabled-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
a {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Vertical nav link
|
||||
.nav-link {
|
||||
@extend %nav-link;
|
||||
|
||||
> .router-link-exact-active {
|
||||
@extend %nav-link-active;
|
||||
}
|
||||
|
||||
> a {
|
||||
// Adds before psudo element to style hover state
|
||||
@include mixins.before-pseudo;
|
||||
|
||||
// Adds vuetify states
|
||||
|
||||
&:not(.router-link-active, .router-link-exact-active) {
|
||||
@include vuetifyStates.states($active: false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Vertical nav group
|
||||
.nav-group {
|
||||
// Reduce the size of icon if link/group is inside group
|
||||
.nav-group,
|
||||
.nav-link {
|
||||
.nav-item-icon {
|
||||
@extend %vertical-nav-items-nested-icon;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide icons after 2nd level
|
||||
& .nav-group {
|
||||
.nav-link,
|
||||
.nav-group {
|
||||
.nav-item-icon {
|
||||
@extend %vertical-nav-items-icon-after-2nd-level;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-group-arrow {
|
||||
flex-shrink: 0;
|
||||
transform-origin: center;
|
||||
transition: transform variables.$vertical-nav-nav-group-arrow-transition-duration variables.$vertical-nav-nav-group-arrow-transition-timing-function;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
// Rotate arrow icon if group is opened
|
||||
&.open {
|
||||
> .nav-group-label .nav-group-arrow {
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Nav group label
|
||||
> :first-child {
|
||||
// Adds before psudo element to style hover state
|
||||
@include mixins.before-pseudo;
|
||||
}
|
||||
|
||||
&:not(.active,.open) > :first-child {
|
||||
// Adds vuetify states
|
||||
@include vuetifyStates.states($active: false);
|
||||
}
|
||||
|
||||
// Active & open states for nav group label
|
||||
&.active,
|
||||
&.open {
|
||||
> :first-child {
|
||||
@extend %vertical-nav-group-open-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// SECTION: Transitions
|
||||
.vertical-nav-section-title-enter-active,
|
||||
.vertical-nav-section-title-leave-active {
|
||||
transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.vertical-nav-section-title-enter-from,
|
||||
.vertical-nav-section-title-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(15px);
|
||||
|
||||
@include layoutsMixins.rtl {
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.transition-slide-x-enter-active,
|
||||
.transition-slide-x-leave-active {
|
||||
transition: opacity 0.1s ease-in-out, transform 0.12s ease-in-out;
|
||||
}
|
||||
|
||||
.transition-slide-x-enter-from,
|
||||
.transition-slide-x-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-15px);
|
||||
|
||||
@include layoutsMixins.rtl {
|
||||
transform: translateX(15px);
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-nav-app-title-enter-active,
|
||||
.vertical-nav-app-title-leave-active {
|
||||
transition: opacity 0.1s ease-in-out, transform 0.12s ease-in-out;
|
||||
}
|
||||
|
||||
.vertical-nav-app-title-enter-from,
|
||||
.vertical-nav-app-title-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-15px);
|
||||
|
||||
@include layoutsMixins.rtl {
|
||||
transform: translateX(15px);
|
||||
}
|
||||
}
|
||||
|
||||
// !SECTION
|
||||
@@ -0,0 +1,35 @@
|
||||
$ps-size: 0.25rem;
|
||||
$ps-hover-size: 0.375rem;
|
||||
$ps-track-size: 0.5rem;
|
||||
|
||||
.ps__thumb-y {
|
||||
inline-size: $ps-size !important;
|
||||
inset-inline-end: 0.0625rem;
|
||||
}
|
||||
|
||||
.ps__thumb-y,
|
||||
.ps__thumb-x {
|
||||
background-color: rgb(var(--v-theme-perfect-scrollbar-thumb)) !important;
|
||||
}
|
||||
|
||||
.ps__thumb-x {
|
||||
block-size: $ps-size !important;
|
||||
}
|
||||
|
||||
.ps__rail-x {
|
||||
background: transparent !important;
|
||||
block-size: $ps-track-size;
|
||||
}
|
||||
|
||||
.ps__rail-y {
|
||||
background: transparent !important;
|
||||
inline-size: $ps-track-size !important;
|
||||
inset-inline-end: 0.125rem !important;
|
||||
inset-inline-start: unset !important;
|
||||
}
|
||||
|
||||
.ps__rail-y.ps--clicking .ps__thumb-y,
|
||||
.ps__rail-y:focus > .ps__thumb-y,
|
||||
.ps__rail-y:hover > .ps__thumb-y {
|
||||
inline-size: $ps-hover-size !important;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@use "overrides";
|
||||
257
javascript-version/@core/scss/base/libs/vuetify/_overrides.scss
Normal file
257
javascript-version/@core/scss/base/libs/vuetify/_overrides.scss
Normal file
@@ -0,0 +1,257 @@
|
||||
@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
|
||||
@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: var(--v-high-emphasis-opacity);
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Card list
|
||||
|
||||
/*
|
||||
ℹ️ Custom class
|
||||
|
||||
Remove list spacing inside card
|
||||
|
||||
This is because card title gets padding of 20px and list item have padding of 16px. Moreover, list container have padding-bottom as well.
|
||||
*/
|
||||
.card-list {
|
||||
--v-card-list-gap: 20px;
|
||||
|
||||
&.v-list {
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
.v-list-item {
|
||||
min-block-size: unset;
|
||||
min-block-size: auto !important;
|
||||
padding-block: 0 !important;
|
||||
padding-inline: 0 !important;
|
||||
|
||||
> .v-ripple__container {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-block-end: var(--v-card-list-gap) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.v-list-item:hover,
|
||||
.v-list-item:focus,
|
||||
.v-list-item:active,
|
||||
.v-list-item.active {
|
||||
> .v-list-item__overlay {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Divider
|
||||
.v-divider {
|
||||
color: rgb(var(--v-border-color));
|
||||
}
|
||||
|
||||
.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-card-subtitle,
|
||||
.v-list-item-subtitle {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
|
||||
}
|
||||
|
||||
// 👉 placeholders
|
||||
.v-field__input {
|
||||
@at-root {
|
||||
& input::placeholder,
|
||||
input#{&}::placeholder,
|
||||
textarea#{&}::placeholder {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
@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,
|
||||
|
||||
$button-icon-density: ("default": 2, "comfortable": 0, "compact": -1 ) !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,
|
||||
|
||||
);
|
||||
@@ -0,0 +1,45 @@
|
||||
@use "@configured-variables" as variables;
|
||||
@use "misc";
|
||||
@use "@core/scss/base/mixins";
|
||||
|
||||
%default-layout-vertical-nav-scrolled-sticky-elevated-nav {
|
||||
background-color: rgb(var(--v-theme-surface));
|
||||
}
|
||||
|
||||
%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
|
||||
@include mixins.elevation(variables.$vertical-nav-navbar-elevation);
|
||||
|
||||
// If navbar is contained => Squeeze navbar content on scroll
|
||||
@if variables.$layout-vertical-nav-navbar-is-contained {
|
||||
padding-inline: 1.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
%default-layout-vertical-nav-floating-navbar-overlay {
|
||||
isolation: isolate;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
/* stylelint-disable property-no-vendor-prefix */
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
/* stylelint-enable */
|
||||
background:
|
||||
linear-gradient(
|
||||
180deg,
|
||||
rgba(var(--v-theme-background), 70%) 44%,
|
||||
rgba(var(--v-theme-background), 43%) 73%,
|
||||
rgba(var(--v-theme-background), 0%)
|
||||
);
|
||||
background-repeat: repeat;
|
||||
block-size: calc(variables.$layout-vertical-nav-navbar-height + variables.$vertical-nav-floating-navbar-top + 0.5rem);
|
||||
content: "";
|
||||
inset-block-start: -(variables.$vertical-nav-floating-navbar-top);
|
||||
inset-inline: 0 0;
|
||||
/* stylelint-disable property-no-vendor-prefix */
|
||||
-webkit-mask: linear-gradient(black, black 18%, transparent 100%);
|
||||
mask: linear-gradient(black, black 18%, transparent 100%);
|
||||
/* stylelint-enable */
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
%layout-navbar {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@forward "vertical-nav";
|
||||
@forward "nav";
|
||||
@forward "default-layout";
|
||||
@forward "default-layout-vertical-nav";
|
||||
@forward "misc";
|
||||
@@ -0,0 +1,7 @@
|
||||
%blurry-bg {
|
||||
/* stylelint-disable property-no-vendor-prefix */
|
||||
-webkit-backdrop-filter: blur(6px);
|
||||
backdrop-filter: blur(6px);
|
||||
/* stylelint-enable */
|
||||
background-color: rgb(var(--v-theme-surface), 0.9);
|
||||
}
|
||||
33
javascript-version/@core/scss/base/placeholders/_nav.scss
Normal file
33
javascript-version/@core/scss/base/placeholders/_nav.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
@use "@core/scss/base/mixins";
|
||||
|
||||
// ℹ️ This is common style that needs to be applied to both navs
|
||||
%nav {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
|
||||
.nav-item-title {
|
||||
letter-spacing: 0.15px;
|
||||
}
|
||||
|
||||
.nav-section-title {
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Active nav link styles for horizontal & vertical nav
|
||||
|
||||
For horizontal nav it will be only applied to top level nav items
|
||||
For vertical nav it will be only applied to nav links (not nav groups)
|
||||
*/
|
||||
%nav-link-active {
|
||||
background-color: rgb(var(--v-theme-primary));
|
||||
color: rgb(var(--v-theme-on-primary));
|
||||
|
||||
@include mixins.elevation(3);
|
||||
}
|
||||
|
||||
%nav-link {
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
@use "@core/scss/base/mixins";
|
||||
@use "@configured-variables" as variables;
|
||||
@use "vuetify/lib/styles/tools/states" as vuetifyStates;
|
||||
|
||||
%nav-header-action {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
// Nav items styles (including section title)
|
||||
%vertical-nav-item {
|
||||
margin-block: 0;
|
||||
margin-inline: variables.$vertical-nav-horizontal-spacing;
|
||||
padding-block: 0;
|
||||
padding-inline: variables.$vertical-nav-horizontal-padding;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// This is same as `%vertical-nav-item` except section title is excluded
|
||||
%vertical-nav-item-interactive {
|
||||
border-radius: 0.4rem;
|
||||
block-size: 2.75rem;
|
||||
|
||||
/*
|
||||
ℹ️ We will use `margin-block-end` instead of `margin-block` to give more space for shadow to appear.
|
||||
With `margin-block`, due to small space (space gets divided between top & bottom) shadow cuts
|
||||
*/
|
||||
margin-block-end: 0.375rem;
|
||||
}
|
||||
|
||||
// Common styles for nav item icon styles
|
||||
// ℹ️ Nav group's children icon styles are not here (Adjusts height, width & margin)
|
||||
%vertical-nav-items-icon {
|
||||
flex-shrink: 0;
|
||||
font-size: variables.$vertical-nav-items-icon-size;
|
||||
margin-inline-end: variables.$vertical-nav-items-icon-margin-inline-end;
|
||||
}
|
||||
|
||||
// ℹ️ Icon styling for icon nested inside another nav item (2nd level)
|
||||
%vertical-nav-items-nested-icon {
|
||||
/*
|
||||
ℹ️ `margin-inline` will be (normal icon font-size - small icon font-size) / 2
|
||||
(1.5rem - 0.9rem) / 2 => 0.6rem / 2 => 0.3rem
|
||||
*/
|
||||
$vertical-nav-items-nested-icon-margin-inline: calc((variables.$vertical-nav-items-icon-size - variables.$vertical-nav-items-nested-icon-size) / 2);
|
||||
|
||||
font-size: variables.$vertical-nav-items-nested-icon-size;
|
||||
margin-inline: $vertical-nav-items-nested-icon-margin-inline $vertical-nav-items-nested-icon-margin-inline + variables.$vertical-nav-items-icon-margin-inline-end;
|
||||
}
|
||||
|
||||
%vertical-nav-items-icon-after-2nd-level {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// Open & Active nav group styles
|
||||
%vertical-nav-group-open-active {
|
||||
@include mixins.selected-states("&::before");
|
||||
}
|
||||
|
||||
// Section title
|
||||
// ℹ️ Setting height will prevent jerking when text & icon is toggled
|
||||
%vertical-nav-section-title {
|
||||
block-size: 1.5rem;
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Vertical nav item badge styles
|
||||
%vertical-nav-item-badge {
|
||||
display: inline-block;
|
||||
border-radius: 1.5rem;
|
||||
font-size: 0.8em;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
padding-block: 0.25em;
|
||||
padding-inline: 0.55em;
|
||||
text-align: center;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
}
|
||||
69
javascript-version/@core/scss/template/_components.scss
Normal file
69
javascript-version/@core/scss/template/_components.scss
Normal file
@@ -0,0 +1,69 @@
|
||||
@use "@configured-variables" as variables;
|
||||
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
||||
|
||||
// 👉 VExpansionPanel
|
||||
.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
|
||||
.v-expansion-panels {
|
||||
.v-expansion-panel {
|
||||
.v-expansion-panel__shadow {
|
||||
@include mixins_elevation.elevation(3);
|
||||
}
|
||||
}
|
||||
|
||||
.v-expansion-panel-text__wrapper {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Timeline outlined variant
|
||||
.v-timeline-item {
|
||||
.v-timeline-divider__dot {
|
||||
.v-timeline-divider__inner-dot {
|
||||
box-shadow: 0 0 0 0.1875rem rgb(var(--v-theme-on-surface-variant));
|
||||
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
|
||||
&.bg-#{$color-name} {
|
||||
box-shadow: 0 0 0 0.1875rem rgba(var(--v-theme-#{$color-name}), 0.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Timeline Outlined style
|
||||
.v-timeline-variant-outlined.v-timeline {
|
||||
.v-timeline-divider__dot {
|
||||
.v-timeline-divider__inner-dot {
|
||||
box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-on-surface-variant));
|
||||
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
background-color: rgb(var(--v-theme-surface)) !important;
|
||||
|
||||
&.bg-#{$color-name} {
|
||||
box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-#{$color-name}));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 v-tab with pill support
|
||||
.v-tabs.v-tabs-pill {
|
||||
.v-tab.v-btn {
|
||||
border-radius: 0.375rem !important;
|
||||
}
|
||||
}
|
||||
61
javascript-version/@core/scss/template/_dark.scss
Normal file
61
javascript-version/@core/scss/template/_dark.scss
Normal file
@@ -0,0 +1,61 @@
|
||||
.v-application {
|
||||
// vertical nav
|
||||
&.v-theme--dark .layout-nav-type-vertical,
|
||||
.v-theme-provider.v-theme--dark {
|
||||
.layout-vertical-nav {
|
||||
// nav-link and nav-group style for dark
|
||||
.nav-link .router-link-exact-active,
|
||||
.nav-group.active:not(.nav-group .nav-group) > :first-child {
|
||||
color: rgb(var(--v-theme-on-primary)) !important;
|
||||
|
||||
&::before {
|
||||
z-index: -1;
|
||||
color: rgb(var(--v-theme-primary));
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-group {
|
||||
.nav-link {
|
||||
.router-link-exact-active {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
|
||||
|
||||
&::before {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
color: inherit;
|
||||
opacity: var(--v-hover-opacity) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// horizontal nav
|
||||
&.v-theme--dark {
|
||||
.layout-wrapper.layout-nav-type-horizontal {
|
||||
.layout-horizontal-nav {
|
||||
.nav-items {
|
||||
.nav-group.active:not(.sub-item) {
|
||||
> :first-child {
|
||||
.nav-group-label {
|
||||
&::before {
|
||||
z-index: -1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.v-icon,
|
||||
.nav-item-title {
|
||||
color: rgb(var(--v-theme-on-primary));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
@use "vuetify/lib/styles/tools/elevation" as elevation;
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical {
|
||||
// 👉 Layout footer
|
||||
.layout-footer {
|
||||
$ele-layout-footer: &;
|
||||
|
||||
.footer-content-container {
|
||||
// Sticky footer
|
||||
@at-root {
|
||||
// ℹ️ .layout-footer-sticky#{$ele-layout-footer} => .layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer
|
||||
.layout-footer-sticky#{$ele-layout-footer} {
|
||||
.footer-content-container {
|
||||
@include elevation.elevation(8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
6
javascript-version/@core/scss/template/_mixins.scss
Normal file
6
javascript-version/@core/scss/template/_mixins.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
@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)));
|
||||
}
|
||||
49
javascript-version/@core/scss/template/_utilities.scss
Normal file
49
javascript-version/@core/scss/template/_utilities.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
.v-timeline-item {
|
||||
.app-timeline-title {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
line-height: 1.3125rem;
|
||||
}
|
||||
|
||||
.app-timeline-meta {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||
font-size: 11px;
|
||||
line-height: 0.875rem;
|
||||
}
|
||||
|
||||
.app-timeline-text {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||
font-size: 13px;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
// ℹ️ Temporary solution as v-spacer style is not getting applied in build version. will remove this after release.
|
||||
// VSpacer
|
||||
.v-spacer {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
// app-logo & app-logo-title
|
||||
.app-logo {
|
||||
display: flex;
|
||||
align-items: center !important;
|
||||
column-gap: 0.5rem !important;
|
||||
|
||||
.app-logo-title {
|
||||
font-size: 1.75rem !important;
|
||||
font-weight: 700 !important;
|
||||
letter-spacing: 0.15px !important;
|
||||
line-height: 1.75rem !important;
|
||||
text-transform: lowercase !important;
|
||||
}
|
||||
}
|
||||
|
||||
.text-white-variant {
|
||||
color: rgba(255, 255, 255, 78%) !important;
|
||||
}
|
||||
|
||||
.bg-custom-background {
|
||||
background-color: rgb(var(--v-table-header-color));
|
||||
}
|
||||
43
javascript-version/@core/scss/template/_utils.scss
Normal file
43
javascript-version/@core/scss/template/_utils.scss
Normal file
@@ -0,0 +1,43 @@
|
||||
@use "sass:string";
|
||||
|
||||
/*
|
||||
ℹ️ This function is helpful when we have multi dimensional value
|
||||
|
||||
Assume we have padding variable `$nav-padding-horizontal: 10px;`
|
||||
With above variable let's say we use it in some style:
|
||||
```scss
|
||||
.selector {
|
||||
margin-left: $nav-padding-horizontal;
|
||||
}
|
||||
```
|
||||
|
||||
Now, problem is we can also have value as `$nav-padding-horizontal: 10px 15px;`
|
||||
In this case above style will be invalid.
|
||||
|
||||
This function will extract the left most value from the variable value.
|
||||
|
||||
$nav-padding-horizontal: 10px; => 10px;
|
||||
$nav-padding-horizontal: 10px 15px; => 10px;
|
||||
|
||||
This is safe:
|
||||
```scss
|
||||
.selector {
|
||||
margin-left: get-first-value($nav-padding-horizontal);
|
||||
}
|
||||
```
|
||||
*/
|
||||
@function get-first-value($var) {
|
||||
$start-at: string.index(#{$var}, " ");
|
||||
|
||||
@if $start-at {
|
||||
@return string.slice(
|
||||
#{$var},
|
||||
0,
|
||||
$start-at
|
||||
);
|
||||
}
|
||||
/* stylelint-disable-next-line @stylistic/indentation */
|
||||
@else {
|
||||
@return $var;
|
||||
}
|
||||
}
|
||||
109
javascript-version/@core/scss/template/_variables.scss
Normal file
109
javascript-version/@core/scss/template/_variables.scss
Normal file
@@ -0,0 +1,109 @@
|
||||
@use "sass:map";
|
||||
@use "utils";
|
||||
|
||||
$vertical-nav-horizontal-padding-margin-custom: 1.91rem;
|
||||
|
||||
/* ℹ️ We created this SCSS var to extract the start padding */
|
||||
// Docs: https://sass-lang.com/documentation/modules/string
|
||||
// $vertical-nav-horizontal-padding => 0 8px;
|
||||
// string.index(#{$vertical-nav-horizontal-padding}, " ") + 1 => 2
|
||||
// string.index(#{$vertical-nav-horizontal-padding}, " ") => 1
|
||||
// string.slice(0 8px, 2, -1) => 8px => $card-actions-padding-x
|
||||
|
||||
$vertical-nav-horizontal-padding-start: utils.get-first-value($vertical-nav-horizontal-padding-margin-custom) !default;
|
||||
|
||||
@forward "@core/scss/base/variables" with (
|
||||
// 👉 Default layout with vertical nav
|
||||
$default-layout-with-vertical-nav-navbar-footer-roundness: 6px !default,
|
||||
|
||||
// 👉 Vertical nav
|
||||
$layout-vertical-nav-collapsed-width: 84px !default,
|
||||
$layout-vertical-nav-navbar-height: 64px !default,
|
||||
$layout-vertical-nav-footer-height: 56px !default,
|
||||
$vertical-nav-background-color-rgb: var(--v-theme-surface) !default,
|
||||
$vertical-nav-items-nested-icon-size: 0.375rem !default,
|
||||
$vertical-nav-horizontal-padding: 0.9375rem 0.9375rem !default,
|
||||
$vertical-nav-header-inline-spacing: 0 !default,
|
||||
$vertical-nav-header-padding: 1.0625rem 2rem !default,
|
||||
|
||||
// Section title margin top (when its not first child)
|
||||
$vertical-nav-section-title-mt: 1.625rem !default,
|
||||
|
||||
// Section title margin bottom
|
||||
$vertical-nav-section-title-mb: 1.125rem !default,
|
||||
|
||||
// Vertical nav icons
|
||||
$vertical-nav-items-icon-size: 1.375rem !default,
|
||||
$vertical-nav-navbar-style: "floating" !default, // options: elevated, floating
|
||||
|
||||
// 👉 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.625rem !default,
|
||||
$horizontal-nav-top-level-items-gap: 6px !default,
|
||||
$horizontal-nav-popper-content-top: 0.25rem !default,
|
||||
$layout-horizontal-nav-navbar-height: 64px !default,
|
||||
|
||||
// Horizontal nav icons
|
||||
$horizontal-nav-items-icon-size: 1.375rem !default,
|
||||
$horizontal-nav-third-level-icon-size: 0.375rem !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,
|
||||
$horizontal-nav-items-icon-margin-inline-end: 0.5rem !default,
|
||||
);
|
||||
|
||||
$slider-thumb-label-color: rgb(117, 117, 117) !default;
|
||||
|
||||
/* vertical nav header */
|
||||
$vertical-nav-header-margin-top: 0.75rem !default;
|
||||
|
||||
/* Custom shadow opacity */
|
||||
$shadow-opacity: (
|
||||
"xs": 0.06,
|
||||
"sm": 0.4,
|
||||
"md": 0.45,
|
||||
"lg": 0.4,
|
||||
) !default;
|
||||
|
||||
/* Custom shadow params */
|
||||
$shadow-params: (
|
||||
"xs": 0 1px 5px 0,
|
||||
"sm": 0 2px 4px 0,
|
||||
"md": 0 4px 16px 0,
|
||||
"lg": 0 10px 20px 0,
|
||||
) !default;
|
||||
110
javascript-version/@core/scss/template/_vertical-nav.scss
Normal file
110
javascript-version/@core/scss/template/_vertical-nav.scss
Normal file
@@ -0,0 +1,110 @@
|
||||
@use "@core/scss/template/placeholders" as *;
|
||||
@use "vuetify/lib/styles/tools/elevation" as elevation;
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
$divider-gap: 0.75rem;
|
||||
|
||||
// vertical nav app title
|
||||
.layout-nav-type-vertical {
|
||||
.layout-vertical-nav {
|
||||
@include elevation.elevation(4);
|
||||
|
||||
// 👉 Nav header
|
||||
.nav-header {
|
||||
margin-block-start: variables.$vertical-nav-header-margin-top;
|
||||
|
||||
.app-title-wrapper {
|
||||
h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small screen nav header actions button removed
|
||||
@media (max-width: 1279px) {
|
||||
&:not(.visible) {
|
||||
.header-action {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-items {
|
||||
padding-block-start: 0.25rem;
|
||||
|
||||
// ℹ️ Reduce with width of the thumb in vertical nav menu so we can clearly see active indicator
|
||||
.ps__thumb-y {
|
||||
inline-size: 0.125rem;
|
||||
}
|
||||
|
||||
.ps__rail-y.ps--clicking .ps__thumb-y,
|
||||
.ps__rail-y:focus > .ps__thumb-y,
|
||||
.ps__rail-y:hover > .ps__thumb-y {
|
||||
inline-size: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
// nav-section-title's line
|
||||
.title-text {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
column-gap: $divider-gap;
|
||||
|
||||
&::before {
|
||||
flex: 0 1 calc(variables.$vertical-nav-horizontal-padding-start - $divider-gap);
|
||||
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
content: "";
|
||||
margin-inline-start: -#{variables.$vertical-nav-horizontal-padding-start};
|
||||
}
|
||||
}
|
||||
|
||||
// Active status indicator
|
||||
.nav-link .router-link-exact-active,
|
||||
.nav-group.open .nav-group-label:has(+ .nav-group-children-wrapper > .nav-group-children > .nav-link > .router-link-exact-active) {
|
||||
&::after {
|
||||
position: absolute;
|
||||
background-color: rgb(var(--v-theme-primary));
|
||||
block-size: 2.625rem;
|
||||
border-end-start-radius: 0.375rem;
|
||||
border-start-start-radius: 0.375rem;
|
||||
content: "";
|
||||
inline-size: 0.25rem;
|
||||
inset-inline-end: - variables.$vertical-nav-horizontal-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Vertical nav link
|
||||
.nav-group {
|
||||
.nav-group-children-wrapper .nav-group-children .nav-link {
|
||||
.nav-item-icon {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||
}
|
||||
|
||||
.router-link-exact-active {
|
||||
@extend %nav-link-nested-active;
|
||||
|
||||
&:hover::before {
|
||||
opacity: calc(var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
|
||||
// active status indicator removed
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Active & open states for nav group label
|
||||
&.open {
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
.nav-group-label {
|
||||
&:has(+ .nav-group-children-wrapper > .nav-group-children > .nav-link > .router-link-exact-active) {
|
||||
@extend %vertical-nav-group-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
18
javascript-version/@core/scss/template/index.scss
Normal file
18
javascript-version/@core/scss/template/index.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
@use "sass:map";
|
||||
@use "@core/scss/base";
|
||||
|
||||
// Layout
|
||||
@use "vertical-nav";
|
||||
@use "default-layout-w-vertical-nav";
|
||||
|
||||
// Utilities
|
||||
@use "utilities";
|
||||
|
||||
// Components
|
||||
@use "components";
|
||||
|
||||
// Mixins
|
||||
@use "mixins";
|
||||
|
||||
// Dark
|
||||
@use "dark";
|
||||
108
javascript-version/@core/scss/template/libs/apex-chart.scss
Normal file
108
javascript-version/@core/scss/template/libs/apex-chart.scss
Normal file
@@ -0,0 +1,108 @@
|
||||
@use "@styles/variables/_vuetify.scss" as vuetify;
|
||||
@use "@layouts/styles/mixins" as layoutsMixins;
|
||||
@use "@core/scss/base/mixins";
|
||||
|
||||
body .apexcharts-canvas {
|
||||
&line[stroke="transparent"] {
|
||||
display: "none";
|
||||
}
|
||||
|
||||
.apexcharts-tooltip {
|
||||
@include mixins.elevation(3);
|
||||
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
background: rgb(var(--v-theme-surface));
|
||||
|
||||
.apexcharts-tooltip-title {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
background: rgb(var(--v-theme-surface));
|
||||
font-weight: 500;
|
||||
padding-inline: 10px;
|
||||
}
|
||||
|
||||
&.apexcharts-theme-light {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
&.apexcharts-theme-dark {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-series-group:first-of-type {
|
||||
padding-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
background: rgb(var(--v-theme-grey-50));
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
|
||||
&::after {
|
||||
border-block-end-color: rgb(var(--v-theme-grey-50));
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-yaxistooltip {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
background: rgb(var(--v-theme-grey-50));
|
||||
|
||||
&::after {
|
||||
border-inline-start-color: rgb(var(--v-theme-grey-50));
|
||||
}
|
||||
|
||||
&::before {
|
||||
border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-xaxistooltip-text,
|
||||
.apexcharts-yaxistooltip-text {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
.apexcharts-yaxis .apexcharts-yaxis-texts-g .apexcharts-yaxis-label {
|
||||
@include layoutsMixins.rtl {
|
||||
text-anchor: start;
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-text,
|
||||
.apexcharts-tooltip-text,
|
||||
.apexcharts-datalabel-label,
|
||||
.apexcharts-datalabel,
|
||||
.apexcharts-xaxistooltip-text,
|
||||
.apexcharts-yaxistooltip-text,
|
||||
.apexcharts-legend-text {
|
||||
font-family: vuetify.$body-font-family !important;
|
||||
}
|
||||
|
||||
.apexcharts-pie-label {
|
||||
fill: white;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.apexcharts-marker {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.apexcharts-tooltip-marker {
|
||||
margin-inline-end: 0.625rem;
|
||||
|
||||
@include layoutsMixins.rtl {
|
||||
margin-inline: 0 0.625rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.apexcharts-legend-marker {
|
||||
margin-inline-end: 0.3875rem !important;
|
||||
|
||||
@include layoutsMixins.rtl {
|
||||
margin-inline-end: 0.75rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,369 @@
|
||||
@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 5px 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 6px 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 8px 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 12px 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 22px 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,
|
||||
"weight": 500,
|
||||
"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,
|
||||
"text-transform": uppercase
|
||||
),
|
||||
) !default,
|
||||
|
||||
// 👉 Alert
|
||||
$alert-title-font-size: 1.125rem !default,
|
||||
$alert-title-line-height: 1.5rem !default,
|
||||
$alert-border-opacity: 0.38 !default,
|
||||
$alert-prepend-margin-inline-end: 12px !default,
|
||||
|
||||
// 👉 Avatar
|
||||
$avatar-height: 38px !default,
|
||||
$avatar-width: 38px !default,
|
||||
$avatar-elevation: 2 !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: 28px !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-elevation: ("default": 2, "hover": 2, "active": 2) !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-border-radius: 8px !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-item-padding: 8px 20px !default,
|
||||
$list-item-min-height: 38px !default,
|
||||
$list-subheader-font-size: 13px !default,
|
||||
$list-subheader-line-height: 1.25rem !default,
|
||||
$list-subheader-padding-start: 20px !default,
|
||||
$list-subheader-padding-end: 20px !default,
|
||||
$list-subheader-min-height: 40px !default,
|
||||
$list-disabled-opacity: 0.4 !default,
|
||||
$list-item-icon-margin-start: 12px !default,
|
||||
$list-item-icon-margin-end: 12px !default,
|
||||
$list-item-avatar-margin-start: 12px !default,
|
||||
$list-item-avatar-margin-end: 12px !default,
|
||||
$list-item-nav-title-font-size: 0.9375rem !default,
|
||||
$list-item-nav-title-font-weight: 400 !default,
|
||||
$list-item-nav-subtitle-font-size: 0.8125rem !default,
|
||||
$list-item-subtitle-line-height: 1.25rem !default,
|
||||
|
||||
// 👉 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,
|
||||
$navigation-drawer-transition-duration: 0.5s !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,
|
||||
$slider-thumb-label-height: 1.5rem !default,
|
||||
$slider-thumb-label-border-radius: 0.375rem !default,
|
||||
$slider-thumb-label-transition: none !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-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,
|
||||
$table-header-height: 56px !default,
|
||||
$table-header-font-weight: 500 !default,
|
||||
$table-column-padding: 0 16px 0 20px !default,
|
||||
$data-table-footer-padding: 12px 24px !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,
|
||||
$tooltip-line-height: 1.25rem !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,
|
||||
);
|
||||
@@ -0,0 +1,70 @@
|
||||
@use "@core/scss/base/mixins";
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@core/scss/template/mixins" as templateMixins;
|
||||
|
||||
/* 👉 Alert
|
||||
/ ℹ️ custom icon styling */
|
||||
|
||||
$alert-prepend-icon-font-size: 1.125rem !important;
|
||||
|
||||
.v-alert:not(.v-alert--prominent) {
|
||||
.v-alert__prepend {
|
||||
padding: 0.125rem;
|
||||
border-radius: 1rem;
|
||||
background-color: #fff;
|
||||
|
||||
.v-icon {
|
||||
block-size: $alert-prepend-icon-font-size;
|
||||
font-size: $alert-prepend-icon-font-size;
|
||||
inline-size: $alert-prepend-icon-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
.v-alert {
|
||||
|
||||
&:not(.v-alert--prominent).text-#{$color-name},
|
||||
&:not(.v-alert--prominent).bg-#{$color-name} {
|
||||
.v-alert__prepend {
|
||||
border: 2px solid rgb(var(--v-theme-#{$color-name}-light));
|
||||
color: rgba(var(--v-theme-#{$color-name})) !important;
|
||||
|
||||
@include mixins.elevation(2);
|
||||
}
|
||||
}
|
||||
|
||||
&--variant-outlined:not(.v-alert--prominent),
|
||||
&--variant-tonal:not(.v-alert--prominent),
|
||||
&--variant-plain:not(.v-alert--prominent) {
|
||||
&.bg-#{$color-name},
|
||||
&.text-#{$color-name} {
|
||||
.v-alert__prepend {
|
||||
border: none;
|
||||
background-color: rgb(var(--v-theme-#{$color-name}));
|
||||
box-shadow: 0 0 0 2px rgba(var(--v-theme-#{$color-name}), 0.16);
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,278 @@
|
||||
/* stylelint-disable no-descending-specificity */
|
||||
@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 */
|
||||
|
||||
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 */
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-1px); /* Add transition */
|
||||
}
|
||||
|
||||
// box-shadow
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
&:not(.v-btn--disabled) {
|
||||
&.bg-#{$color-name}.v-btn--variant-elevated {
|
||||
&,
|
||||
&:hover {
|
||||
@include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--variant-outlined,
|
||||
&--variant-tonal {
|
||||
// We want a darken color on hover
|
||||
&:not(.v-btn--loading, .v-btn--disabled) {
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
&.text-#{$color-name} {
|
||||
&:hover {
|
||||
@include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
border-color: rgba(var(--v-theme-#{$color-name}-darken-1));
|
||||
background-color: rgba(var(--v-theme-#{$color-name}-darken-1));
|
||||
color: #fff !important;
|
||||
|
||||
.v-btn__underlay {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--variant-text {
|
||||
.v-btn__overlay {
|
||||
--v-hover-opacity: 0.08;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
.v-btn__overlay {
|
||||
opacity: var(--v-selected-opacity);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Text button
|
||||
&:not(.v-btn--icon, .v-tab) {
|
||||
&.v-btn--variant-text,
|
||||
&.v-btn--variant-plain {
|
||||
&.v-btn--size-default {
|
||||
padding-inline: 0.75rem;
|
||||
}
|
||||
|
||||
&.v-btn--size-small {
|
||||
padding-inline: 0.5rem;
|
||||
}
|
||||
|
||||
&.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.75rem;
|
||||
|
||||
.v-icon {
|
||||
--v-icon-size-multiplier: 0.821;
|
||||
}
|
||||
|
||||
.v-btn__prepend,
|
||||
.v-btn__content > .v-icon--start {
|
||||
margin-inline: 0 0.375rem;
|
||||
}
|
||||
|
||||
.v-btn__append,
|
||||
.v-btn__content > .v-icon--end {
|
||||
margin-inline: 0.375rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
&: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: 1.125rem;
|
||||
font-size: 1.125rem;
|
||||
inline-size: 1.125rem;
|
||||
}
|
||||
|
||||
.v-icon--start {
|
||||
margin-inline: 0 8px;
|
||||
}
|
||||
|
||||
.v-icon--end {
|
||||
margin-inline: 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&: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.5rem;
|
||||
|
||||
.v-icon {
|
||||
--v-icon-size-multiplier: 0.7848;
|
||||
}
|
||||
|
||||
.v-btn__prepend,
|
||||
.v-btn__content > .v-icon--start {
|
||||
margin-inline: 0 0.625rem;
|
||||
}
|
||||
|
||||
.v-btn__append,
|
||||
.v-btn__content > .v-icon--end {
|
||||
margin-inline: 0.625rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
&: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.5rem;
|
||||
font-size: 1.5rem;
|
||||
inline-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button group
|
||||
&-group.v-btn-toggle {
|
||||
.v-btn {
|
||||
block-size: 54px !important;
|
||||
inline-size: 54px !important;
|
||||
|
||||
&.v-btn--density-comfortable {
|
||||
block-size: 46px !important;
|
||||
inline-size: 46px !important;
|
||||
}
|
||||
|
||||
&.v-btn--density-compact {
|
||||
block-size: 38px !important;
|
||||
inline-size: 38px !important;
|
||||
}
|
||||
|
||||
&.v-btn--icon .v-icon {
|
||||
block-size: 1.375rem;
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||
font-size: 1.375rem;
|
||||
inline-size: 1.375rem;
|
||||
}
|
||||
|
||||
&.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;
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-radius: 0.5rem;
|
||||
block-size: 54px;
|
||||
|
||||
.v-btn.v-btn--active {
|
||||
.v-btn__overlay {
|
||||
--v-activated-opacity: 0.08;
|
||||
}
|
||||
}
|
||||
|
||||
&.v-btn-group--density-compact {
|
||||
border-radius: 0.25rem;
|
||||
block-size: 38px;
|
||||
}
|
||||
|
||||
&.v-btn-group--density-comfortable {
|
||||
border-radius: 0.375rem;
|
||||
block-size: 46px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.v-card-subtitle {
|
||||
color: rgba(var(--v-theme-on-background), 0.55);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
> .custom-checkbox-indeterminate {
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
}
|
||||
|
||||
&.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 4px rgba(var(--v-theme-#{$color-name}), 0.4));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,122 @@
|
||||
// 👉 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 {
|
||||
margin-inline: -6px 4px !important;
|
||||
}
|
||||
|
||||
.v-icon--end {
|
||||
margin-inline: 4px -6px !important;
|
||||
}
|
||||
|
||||
.v-avatar--start {
|
||||
margin-inline-end: 4px !important;
|
||||
}
|
||||
|
||||
.v-avatar--end {
|
||||
margin-inline-start: 4px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// small size
|
||||
&:not(.v-chip--pill).v-chip--size-small {
|
||||
--v-chip-height: 24px;
|
||||
|
||||
font-size: 13px;
|
||||
padding-inline: 0.625rem;
|
||||
|
||||
&.v-chip--label {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.v-avatar {
|
||||
--v-avatar-height: 16px;
|
||||
}
|
||||
|
||||
.v-chip__close {
|
||||
font-size: 16px;
|
||||
max-block-size: 16px;
|
||||
max-inline-size: 16px;
|
||||
}
|
||||
|
||||
.v-chip__content {
|
||||
.v-icon {
|
||||
block-size: 16px;
|
||||
font-size: 16px;
|
||||
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 {
|
||||
padding-inline: 0.75rem;
|
||||
|
||||
.v-avatar {
|
||||
--v-avatar-height: 20px;
|
||||
}
|
||||
|
||||
.v-avatar--start {
|
||||
margin-inline: -6px 4px;
|
||||
}
|
||||
|
||||
.v-avatar--end {
|
||||
margin-inline: 4px -6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
@use "@layouts/styles/mixins" as layoutsMixins;
|
||||
|
||||
// 👉 Dialog
|
||||
body .v-dialog {
|
||||
// dialog custom close btn
|
||||
.v-dialog-close-btn {
|
||||
border-radius: 0.25rem;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
@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(.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,316 @@
|
||||
@use "sass:map";
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@core/scss/template/mixins" as templateMixins;
|
||||
|
||||
$v-input-density: (
|
||||
comfortable: (
|
||||
icon-size: 1.125rem,
|
||||
font-size: 0.9375rem,
|
||||
line-height: 1.5rem,
|
||||
),
|
||||
default: (
|
||||
icon-size: 1.25rem,
|
||||
font-size: 1.0625rem,
|
||||
line-height: 1.5rem,
|
||||
),
|
||||
compact: (
|
||||
icon-size: 1rem,
|
||||
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 {
|
||||
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-file-input,
|
||||
.app-picker-field {
|
||||
color: rgba(var(--v-theme-on-surface));
|
||||
|
||||
// making padding 0 for help text
|
||||
.v-text-field,
|
||||
.v-file-input {
|
||||
.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 {
|
||||
border-radius: 8px;
|
||||
|
||||
.v-field__input {
|
||||
--v-field-padding-start: 20px;
|
||||
--v-field-padding-end: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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 {
|
||||
border-radius: 4px;
|
||||
|
||||
.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.4);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
// 👉 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.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.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));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
// 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: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Menu
|
||||
// Menu custom style
|
||||
.v-menu.v-overlay {
|
||||
.v-overlay__content {
|
||||
.v-list {
|
||||
.v-list-item {
|
||||
margin-block-end: 0.125rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
/* stylelint-disable no-descending-specificity */
|
||||
@use "@core/scss/template/mixins" as templateMixins;
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
// 👉 Pagination
|
||||
.v-pagination {
|
||||
// button size
|
||||
.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.375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// common style for all components
|
||||
.v-pagination__item,
|
||||
.v-pagination__next,
|
||||
.v-pagination__last,
|
||||
.v-pagination__first,
|
||||
.v-pagination__prev {
|
||||
.v-btn {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
transform: none;
|
||||
|
||||
&--size-default {
|
||||
--v-btn-size: 13px;
|
||||
}
|
||||
|
||||
&--size-large {
|
||||
--v-btn-size: 15px;
|
||||
}
|
||||
|
||||
&.v-btn--disabled {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
&--variant-tonal {
|
||||
.v-btn__underlay {
|
||||
--v-activated-opacity: 0.06;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.v-btn__overlay {
|
||||
--v-hover-opacity: 0.1;
|
||||
}
|
||||
|
||||
.v-btn__underlay {
|
||||
--v-activated-opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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})) !important;
|
||||
|
||||
.v-btn__overlay {
|
||||
--v-hover-opacity: 0.16;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.v-btn__overlay {
|
||||
--v-border-opacity: 0.16;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.v-btn__overlay {
|
||||
--v-hover-opacity: 0.16;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.v-btn--variant-outlined {
|
||||
border-color: rgb(var(--v-theme-primary));
|
||||
|
||||
.v-btn__overlay {
|
||||
--v-border-opacity: 0.16;
|
||||
--v-hover-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");
|
||||
|
||||
color: rgb(var(--v-theme-#{$color-name})) !important;
|
||||
}
|
||||
|
||||
.v-btn__underlay {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.v-btn__content {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.v-btn--variant-outlined {
|
||||
background-color: rgb(var(--v-theme-#{$color-name}));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
// @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");
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@@ -0,0 +1,54 @@
|
||||
@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 4px rgba(var(--v-theme-#{$color-name}), 0.4));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.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;
|
||||
}
|
||||
|
||||
.v-radio-group {
|
||||
.v-selection-control-group {
|
||||
.v-radio:not(:last-child) {
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
// 👉 Rating
|
||||
.v-rating {
|
||||
.v-rating__wrapper {
|
||||
.v-btn {
|
||||
&:hover {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.v-icon {
|
||||
--v-icon-size-multiplier: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
// 👉 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) - 9px);
|
||||
inline-size: calc(var(--v-slider-thumb-size) - 9px);
|
||||
}
|
||||
|
||||
.v-slider-thumb__label {
|
||||
background-color: rgb(var(--v-tooltip-background));
|
||||
color: rgb(var(--v-theme-surface));
|
||||
font-weight: 500;
|
||||
line-height: 1.25rem;
|
||||
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
// 👉 snackbar
|
||||
.v-snackbar {
|
||||
.v-snackbar__actions {
|
||||
.v-btn {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@core/scss/template/mixins" as templateMixins;
|
||||
@use "@core/scss/base/mixins";
|
||||
|
||||
// 👉 switch
|
||||
.v-switch {
|
||||
&.v-switch--inset {
|
||||
.v-selection-control {
|
||||
.v-switch__track {
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
&.v-selection-control--disabled {
|
||||
--v-disabled-opacity: 0.45;
|
||||
}
|
||||
|
||||
&.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__wrapper {
|
||||
block-size: 36px;
|
||||
}
|
||||
|
||||
.v-selection-control__input {
|
||||
transform: translateX(-6px) !important;
|
||||
|
||||
--v-selection-control-size: 0.875rem;
|
||||
|
||||
.v-switch__thumb {
|
||||
@include mixins.elevation(2);
|
||||
|
||||
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;
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
@use "@layouts/styles/mixins" as layoutMixins;
|
||||
|
||||
// 👉 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;
|
||||
line-height: 24px;
|
||||
text-transform: uppercase;
|
||||
|
||||
.v-data-table-header__content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.v-data-table-footer {
|
||||
row-gap: 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Datatable
|
||||
.v-data-table,
|
||||
.v-table {
|
||||
table {
|
||||
thead,
|
||||
tbody {
|
||||
tr {
|
||||
th,
|
||||
td {
|
||||
&:first-child:has(.v-checkbox-btn) {
|
||||
padding-inline: 15px 0 !important;
|
||||
}
|
||||
|
||||
@include layoutMixins.rtl {
|
||||
padding-inline: 20px 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
@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-item--selected.v-tab--selected.text-#{$color-name} {
|
||||
@include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
|
||||
|
||||
background-color: rgba(var(--v-theme-#{$color-name}));
|
||||
color: rgb(var(--v-theme-on-primary)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.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));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.v-textarea {
|
||||
textarea {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
& .v-field--active textarea {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
// 👉 Tooltip
|
||||
.v-tooltip {
|
||||
.v-overlay__content {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@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";
|
||||
@@ -0,0 +1,3 @@
|
||||
@use "@core/scss/base/libs/vuetify";
|
||||
@use "./overrides.scss";
|
||||
@use "components/index.scss";
|
||||
@@ -0,0 +1,34 @@
|
||||
@use "@core/scss/base/utils";
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
// 👉 Body
|
||||
|
||||
// set body font size 15px
|
||||
body {
|
||||
font-size: 15px !important;
|
||||
|
||||
// 👉 Button outline with default color border color
|
||||
.v-alert--variant-outlined,
|
||||
.v-avatar--variant-outlined,
|
||||
.v-btn.v-btn--variant-outlined,
|
||||
.v-card--variant-outlined,
|
||||
.v-chip--variant-outlined,
|
||||
.v-list-item--variant-outlined {
|
||||
&:not([class*="text-"]) {
|
||||
border-color: rgba(var(--v-border-color), 0.22);
|
||||
}
|
||||
|
||||
&.text-default {
|
||||
border-color: rgba(var(--v-border-color), 0.22);
|
||||
}
|
||||
}
|
||||
|
||||
// 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));
|
||||
}
|
||||
14
javascript-version/@core/scss/template/pages/misc.scss
Normal file
14
javascript-version/@core/scss/template/pages/misc.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
.layout-blank {
|
||||
.misc-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1.25rem;
|
||||
min-block-size: calc(var(--vh, 1vh) * 100);
|
||||
}
|
||||
|
||||
.misc-avatar {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
54
javascript-version/@core/scss/template/pages/page-auth.scss
Normal file
54
javascript-version/@core/scss/template/pages/page-auth.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
.layout-blank {
|
||||
.auth-wrapper {
|
||||
min-block-size: 100dvh;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-v1-top-shape,
|
||||
.auth-v1-bottom-shape {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.auth-v1-top-shape {
|
||||
block-size: 148px;
|
||||
inline-size: 148px;
|
||||
inset-block-start: -3.5rem;
|
||||
inset-inline-end: -2.5rem;
|
||||
}
|
||||
|
||||
.auth-v1-bottom-shape {
|
||||
block-size: 240px;
|
||||
inline-size: 240px;
|
||||
inset-block-end: -4.5rem;
|
||||
inset-inline-start: -3rem;
|
||||
}
|
||||
|
||||
.auth-illustration {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@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: 2.5rem;
|
||||
inset-inline-start: 2.5rem;
|
||||
}
|
||||
|
||||
.auth-title {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.15px;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
@use "vuetify/lib/styles/tools/elevation" as elevation;
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
%default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled {
|
||||
// If navbar is contained => Squeeze navbar content on scroll
|
||||
@if variables.$layout-vertical-nav-navbar-is-contained {
|
||||
padding-inline: 1.5rem;
|
||||
|
||||
@include elevation.elevation(4);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
@forward "vertical-nav";
|
||||
@forward "nav";
|
||||
@forward "default-layout-vertical-nav";
|
||||
@forward "misc";
|
||||
@@ -0,0 +1,7 @@
|
||||
%blurry-bg {
|
||||
/* stylelint-disable property-no-vendor-prefix */
|
||||
-webkit-backdrop-filter: blur(3px);
|
||||
backdrop-filter: blur(3px);
|
||||
/* stylelint-enable */
|
||||
background-color: rgb(var(--v-theme-surface), 0.88);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
// ℹ️ This is common style that needs to be applied to both navs
|
||||
%nav {
|
||||
.nav-item-title {
|
||||
letter-spacing: normal;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Active nav link styles for horizontal & vertical nav
|
||||
|
||||
For horizontal nav it will be only applied to top level nav items
|
||||
For vertical nav it will be only applied to nav links (not nav groups)
|
||||
*/
|
||||
%nav-link-active {
|
||||
--v-activated-opacity: 0.16;
|
||||
|
||||
background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity));
|
||||
box-shadow: none;
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
|
||||
// style for vertical nav nested icon
|
||||
%nav-link-nested-active {
|
||||
background-color: transparent !important;
|
||||
box-shadow: none;
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
|
||||
|
||||
// style for nested dot icon
|
||||
.nav-item-icon {
|
||||
color: rgb(var(--v-theme-primary), var(--v-activated-opacity)) !important;
|
||||
transform: scale(2.6662);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
background-color: rgb(var(--v-theme-primary));
|
||||
block-size: 100%;
|
||||
content: "";
|
||||
inline-size: 100%;
|
||||
inset: 0;
|
||||
transform: scale(-0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
// Open & Active nav group styles
|
||||
%vertical-nav-group-active {
|
||||
--v-theme-overlay-multiplier: 2;
|
||||
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
|
||||
%nav-header-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgb(var(--v-theme-primary));
|
||||
block-size: 1.375rem;
|
||||
inline-size: 1.375rem;
|
||||
}
|
||||
|
||||
// nav-group and nav-link border radius
|
||||
%vertical-nav-item-interactive {
|
||||
border-radius: 0.375rem;
|
||||
block-size: 2.625rem;
|
||||
margin-block-end: 0.25rem;
|
||||
}
|
||||
|
||||
// ℹ️ Icon styling for icon nested inside another nav item (2nd level)
|
||||
%vertical-nav-items-nested-icon {
|
||||
margin-inline: 6px 20px;
|
||||
transition: transform 0.25s ease-in-out 0s;
|
||||
}
|
||||
|
||||
%vertical-nav-items-icon-after-2nd-level {
|
||||
margin-inline-start: 14px;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
%vertical-nav-section-title {
|
||||
block-size: 1.125rem;
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.125rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Vertical nav item badge styles
|
||||
%vertical-nav-item-badge {
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 500px;
|
||||
block-size: 1.5rem;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.25rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
padding-block: 0;
|
||||
padding-inline: 0.625rem;
|
||||
}
|
||||
31
javascript-version/@core/utils/colorConverter.js
Normal file
31
javascript-version/@core/utils/colorConverter.js
Normal file
@@ -0,0 +1,31 @@
|
||||
/**
|
||||
* Convert Hex color to rgb
|
||||
* @param hex
|
||||
*/
|
||||
export const hexToRgb = hex => {
|
||||
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
|
||||
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
|
||||
|
||||
hex = hex.replace(shorthandRegex, (m, r, g, b) => {
|
||||
return r + r + g + g + b + b
|
||||
})
|
||||
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
|
||||
|
||||
return result ? `${Number.parseInt(result[1], 16)},${Number.parseInt(result[2], 16)},${Number.parseInt(result[3], 16)}` : null
|
||||
}
|
||||
|
||||
/**
|
||||
*RGBA color to Hex color with / without opacity
|
||||
*/
|
||||
export const rgbaToHex = (rgba, forceRemoveAlpha = false) => {
|
||||
return (`#${rgba
|
||||
.replace(/^rgba?\(|\s+|\)$/g, '') // Get's rgba / rgb string values
|
||||
.split(',') // splits them at ","
|
||||
.filter((string, index) => !forceRemoveAlpha || index !== 3)
|
||||
.map(string => Number.parseFloat(string)) // Converts them to numbers
|
||||
.map((number, index) => (index === 3 ? Math.round(number * 255) : number)) // Converts alpha to 255 number
|
||||
.map(number => number.toString(16)) // Converts numbers to hex
|
||||
.map(string => (string.length === 1 ? `0${string}` : string)) // Adds 0 when length of one number is 1
|
||||
.join('')}`)
|
||||
}
|
||||
6
javascript-version/@core/utils/formatters.js
Normal file
6
javascript-version/@core/utils/formatters.js
Normal file
@@ -0,0 +1,6 @@
|
||||
// TODO: Try to implement this: https://twitter.com/fireship_dev/status/1565424801216311297
|
||||
export const kFormatter = num => {
|
||||
const regex = /\B(?=(\d{3})+(?!\d))/g
|
||||
|
||||
return Math.abs(num) > 9999 ? `${Math.sign(num) * +((Math.abs(num) / 1000).toFixed(1))}k` : Math.abs(num).toFixed(0).replace(regex, ',')
|
||||
}
|
||||
29
javascript-version/@core/utils/helpers.js
Normal file
29
javascript-version/@core/utils/helpers.js
Normal file
@@ -0,0 +1,29 @@
|
||||
// 👉 IsEmpty
|
||||
export const isEmpty = value => {
|
||||
if (value === null || value === undefined || value === '')
|
||||
return true
|
||||
|
||||
return !!(Array.isArray(value) && value.length === 0)
|
||||
}
|
||||
|
||||
// 👉 IsNullOrUndefined
|
||||
export const isNullOrUndefined = value => {
|
||||
return value === null || value === undefined
|
||||
}
|
||||
|
||||
// 👉 IsEmptyArray
|
||||
export const isEmptyArray = arr => {
|
||||
return Array.isArray(arr) && arr.length === 0
|
||||
}
|
||||
|
||||
// 👉 IsObject
|
||||
export const isObject = obj => obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)
|
||||
|
||||
// 👉 IsToday
|
||||
export const isToday = date => {
|
||||
const today = new Date()
|
||||
|
||||
return (date.getDate() === today.getDate()
|
||||
&& date.getMonth() === today.getMonth()
|
||||
&& date.getFullYear() === today.getFullYear())
|
||||
}
|
||||
50
javascript-version/@core/utils/plugins.js
Normal file
50
javascript-version/@core/utils/plugins.js
Normal file
@@ -0,0 +1,50 @@
|
||||
/**
|
||||
* This is helper function to register plugins like a nuxt
|
||||
* To register a plugin just export a const function `defineVuePlugin` that takes `app` as argument and call `app.use`
|
||||
* For Scanning plugins it will include all files in `src/plugins` and `src/plugins/**\/index.ts`
|
||||
*
|
||||
*
|
||||
* @param {App} app Vue app instance
|
||||
* @returns void
|
||||
*
|
||||
* @example
|
||||
* ```ts
|
||||
* // File: src/plugins/vuetify/index.ts
|
||||
*
|
||||
* import type { App } from 'vue'
|
||||
* import { createVuetify } from 'vuetify'
|
||||
*
|
||||
* const vuetify = createVuetify({ ... })
|
||||
*
|
||||
* export default function (app: App) {
|
||||
* app.use(vuetify)
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* All you have to do is use this helper function in `main.ts` file like below:
|
||||
* ```ts
|
||||
* // File: src/main.ts
|
||||
* import { registerPlugins } from '@core/utils/plugins'
|
||||
* import { createApp } from 'vue'
|
||||
* import App from '@/App.vue'
|
||||
*
|
||||
* // Create vue app
|
||||
* const app = createApp(App)
|
||||
*
|
||||
* // Register plugins
|
||||
* registerPlugins(app) // [!code focus]
|
||||
*
|
||||
* // Mount vue app
|
||||
* app.mount('#app')
|
||||
* ```
|
||||
*/
|
||||
export const registerPlugins = app => {
|
||||
const imports = import.meta.glob(['../../plugins/*.{ts,js}', '../../plugins/*/index.{ts,js}'], { eager: true })
|
||||
const importPaths = Object.keys(imports).sort()
|
||||
|
||||
importPaths.forEach(path => {
|
||||
const pluginImportModule = imports[path]
|
||||
|
||||
pluginImportModule.default?.(app)
|
||||
})
|
||||
}
|
||||
87
javascript-version/@layouts/components/TransitionExpand.vue
Normal file
87
javascript-version/@layouts/components/TransitionExpand.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<!-- Thanks: https://markus.oberlehner.net/blog/transition-to-height-auto-with-vue/ -->
|
||||
|
||||
<script>
|
||||
import { Transition } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'TransitionExpand',
|
||||
setup(_, { slots }) {
|
||||
const onEnter = element => {
|
||||
const width = getComputedStyle(element).width
|
||||
|
||||
element.style.width = width
|
||||
element.style.position = 'absolute'
|
||||
element.style.visibility = 'hidden'
|
||||
element.style.height = 'auto'
|
||||
|
||||
const height = getComputedStyle(element).height
|
||||
|
||||
element.style.width = ''
|
||||
element.style.position = ''
|
||||
element.style.visibility = ''
|
||||
element.style.height = '0px'
|
||||
|
||||
// Force repaint to make sure the
|
||||
// animation is triggered correctly.
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
getComputedStyle(element).height
|
||||
|
||||
// Trigger the animation.
|
||||
// We use `requestAnimationFrame` because we need
|
||||
// to make sure the browser has finished
|
||||
// painting after setting the `height`
|
||||
// to `0` in the line above.
|
||||
requestAnimationFrame(() => {
|
||||
element.style.height = height
|
||||
})
|
||||
}
|
||||
|
||||
const onAfterEnter = element => {
|
||||
element.style.height = 'auto'
|
||||
}
|
||||
|
||||
const onLeave = element => {
|
||||
const height = getComputedStyle(element).height
|
||||
|
||||
element.style.height = height
|
||||
|
||||
// Force repaint to make sure the
|
||||
// animation is triggered correctly.
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
getComputedStyle(element).height
|
||||
requestAnimationFrame(() => {
|
||||
element.style.height = '0px'
|
||||
})
|
||||
}
|
||||
|
||||
return () => h(h(Transition), {
|
||||
name: 'expand',
|
||||
onEnter,
|
||||
onAfterEnter,
|
||||
onLeave,
|
||||
}, () => slots.default?.())
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.expand-enter-active,
|
||||
.expand-leave-active {
|
||||
overflow: hidden;
|
||||
transition: block-size var(--expand-transition-duration, 0.25s) ease;
|
||||
}
|
||||
|
||||
.expand-enter-from,
|
||||
.expand-leave-to {
|
||||
block-size: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
* {
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
transform: translateZ(0);
|
||||
will-change: block-size;
|
||||
}
|
||||
</style>
|
||||
186
javascript-version/@layouts/components/VerticalNav.vue
Normal file
186
javascript-version/@layouts/components/VerticalNav.vue
Normal file
@@ -0,0 +1,186 @@
|
||||
<script setup>
|
||||
import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
|
||||
import { useDisplay } from 'vuetify'
|
||||
import logo from '@images/logo.svg?raw'
|
||||
|
||||
const props = defineProps({
|
||||
tag: {
|
||||
type: null,
|
||||
required: false,
|
||||
default: 'aside',
|
||||
},
|
||||
isOverlayNavActive: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
toggleIsOverlayNavActive: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const { mdAndDown } = useDisplay()
|
||||
const refNav = ref()
|
||||
|
||||
/*ℹ️ Close overlay side when route is changed
|
||||
Close overlay vertical nav when link is clicked
|
||||
*/
|
||||
const route = useRoute()
|
||||
|
||||
watch(() => route.path, () => {
|
||||
props.toggleIsOverlayNavActive(false)
|
||||
})
|
||||
|
||||
const isVerticalNavScrolled = ref(false)
|
||||
const updateIsVerticalNavScrolled = val => isVerticalNavScrolled.value = val
|
||||
|
||||
const handleNavScroll = evt => {
|
||||
isVerticalNavScrolled.value = evt.target.scrollTop > 0
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Component
|
||||
:is="props.tag"
|
||||
ref="refNav"
|
||||
class="layout-vertical-nav"
|
||||
:class="[
|
||||
{
|
||||
'visible': isOverlayNavActive,
|
||||
'scrolled': isVerticalNavScrolled,
|
||||
'overlay-nav': mdAndDown,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<!-- 👉 Header -->
|
||||
<div class="nav-header">
|
||||
<slot name="nav-header">
|
||||
<NuxtLink
|
||||
to="/"
|
||||
class="app-logo app-title-wrapper"
|
||||
>
|
||||
<div
|
||||
class="d-flex"
|
||||
v-html="logo"
|
||||
/>
|
||||
|
||||
<h1 class="leading-normal">
|
||||
sneat
|
||||
</h1>
|
||||
</NuxtLink>
|
||||
</slot>
|
||||
</div>
|
||||
<slot name="before-nav-items">
|
||||
<div class="vertical-nav-items-shadow" />
|
||||
</slot>
|
||||
<slot
|
||||
name="nav-items"
|
||||
:update-is-vertical-nav-scrolled="updateIsVerticalNavScrolled"
|
||||
>
|
||||
<PerfectScrollbar
|
||||
tag="ul"
|
||||
class="nav-items"
|
||||
:options="{ wheelPropagation: false }"
|
||||
@ps-scroll-y="handleNavScroll"
|
||||
>
|
||||
<slot />
|
||||
</PerfectScrollbar>
|
||||
</slot>
|
||||
<slot name="after-nav-items" />
|
||||
</Component>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 0.75rem;
|
||||
|
||||
.app-logo-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@layouts/styles/mixins";
|
||||
|
||||
// 👉 Vertical Nav
|
||||
.layout-vertical-nav {
|
||||
position: fixed;
|
||||
z-index: variables.$layout-vertical-nav-z-index;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
block-size: 100%;
|
||||
inline-size: variables.$layout-vertical-nav-width;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
transition: inline-size 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
|
||||
will-change: transform, inline-size;
|
||||
|
||||
.nav-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.header-action {
|
||||
cursor: pointer;
|
||||
|
||||
@at-root {
|
||||
#{variables.$selector-vertical-nav-mini} .nav-header .header-action {
|
||||
&.nav-pin,
|
||||
&.nav-unpin {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-title-wrapper {
|
||||
margin-inline-end: auto;
|
||||
}
|
||||
|
||||
.nav-items {
|
||||
block-size: 100%;
|
||||
|
||||
// ℹ️ We no loner needs this overflow styles as perfect scrollbar applies it
|
||||
// overflow-x: hidden;
|
||||
|
||||
// // ℹ️ We used `overflow-y` instead of `overflow` to mitigate overflow x. Revert back if any issue found.
|
||||
// overflow-y: auto;
|
||||
}
|
||||
|
||||
.nav-item-title {
|
||||
overflow: hidden;
|
||||
margin-inline-end: auto;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 👉 Collapsed
|
||||
.layout-vertical-nav-collapsed & {
|
||||
&:not(.hovered) {
|
||||
inline-size: variables.$layout-vertical-nav-collapsed-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Small screen vertical nav transition
|
||||
@media (max-width: 1279px) {
|
||||
.layout-vertical-nav {
|
||||
&:not(.visible) {
|
||||
transform: translateX(-#{variables.$layout-vertical-nav-width});
|
||||
|
||||
@include mixins.rtl {
|
||||
transform: translateX(variables.$layout-vertical-nav-width);
|
||||
}
|
||||
}
|
||||
|
||||
transition: transform 0.25s ease-in-out;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
71
javascript-version/@layouts/components/VerticalNavGroup.vue
Normal file
71
javascript-version/@layouts/components/VerticalNavGroup.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const isOpen = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li
|
||||
class="nav-group"
|
||||
:class="isOpen && 'open'"
|
||||
>
|
||||
<div
|
||||
class="nav-group-label"
|
||||
@click="isOpen = !isOpen"
|
||||
>
|
||||
<VIcon
|
||||
:icon="item.icon || 'bxs-circle'"
|
||||
class="nav-item-icon"
|
||||
/>
|
||||
<span class="nav-item-title">{{ item.title }}</span>
|
||||
<span
|
||||
class="nav-item-badge"
|
||||
:class="item.badgeClass"
|
||||
>
|
||||
{{ item.badgeContent }}
|
||||
</span>
|
||||
<VIcon
|
||||
icon="bx-chevron-right"
|
||||
class="nav-group-arrow"
|
||||
/>
|
||||
</div>
|
||||
<div class="nav-group-children-wrapper">
|
||||
<ul class="nav-group-children">
|
||||
<slot />
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.layout-vertical-nav {
|
||||
.nav-group {
|
||||
&-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav-group-children-wrapper {
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows 0.3s ease-in-out;
|
||||
|
||||
.nav-group-children {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&.open {
|
||||
.nav-group-children-wrapper {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
176
javascript-version/@layouts/components/VerticalNavLayout.vue
Normal file
176
javascript-version/@layouts/components/VerticalNavLayout.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<script>
|
||||
import { useDisplay } from 'vuetify'
|
||||
import VerticalNav from '@layouts/components/VerticalNav.vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup(props, { slots }) {
|
||||
const isOverlayNavActive = ref(false)
|
||||
const isLayoutOverlayVisible = ref(false)
|
||||
const toggleIsOverlayNavActive = useToggle(isOverlayNavActive)
|
||||
const route = useRoute()
|
||||
const { mdAndDown } = useDisplay()
|
||||
|
||||
|
||||
// ℹ️ This is alternative to below two commented watcher
|
||||
// We want to show overlay if overlay nav is visible and want to hide overlay if overlay is hidden and vice versa.
|
||||
syncRef(isOverlayNavActive, isLayoutOverlayVisible)
|
||||
|
||||
return () => {
|
||||
// 👉 Vertical nav
|
||||
const verticalNav = h(VerticalNav, { isOverlayNavActive: isOverlayNavActive.value, toggleIsOverlayNavActive }, {
|
||||
'nav-header': () => slots['vertical-nav-header']?.({ toggleIsOverlayNavActive }),
|
||||
'before-nav-items': () => slots['before-vertical-nav-items']?.(),
|
||||
'default': () => slots['vertical-nav-content']?.(),
|
||||
'after-nav-items': () => slots['after-vertical-nav-items']?.(),
|
||||
})
|
||||
|
||||
|
||||
// 👉 Navbar
|
||||
const navbar = h('header', { class: ['layout-navbar navbar-blur'] }, [
|
||||
h('div', { class: 'navbar-content-container' }, slots.navbar?.({
|
||||
toggleVerticalOverlayNavActive: toggleIsOverlayNavActive,
|
||||
})),
|
||||
])
|
||||
|
||||
const main = h('main', { class: 'layout-page-content' }, h('div', { class: 'page-content-container' }, slots.default?.()))
|
||||
|
||||
|
||||
// 👉 Footer
|
||||
const footer = h('footer', { class: 'layout-footer' }, [
|
||||
h('div', { class: 'footer-content-container' }, slots.footer?.()),
|
||||
])
|
||||
|
||||
|
||||
// 👉 Overlay
|
||||
const layoutOverlay = h('div', {
|
||||
class: ['layout-overlay', { visible: isLayoutOverlayVisible.value }],
|
||||
onClick: () => { isLayoutOverlayVisible.value = !isLayoutOverlayVisible.value },
|
||||
})
|
||||
|
||||
return h('div', {
|
||||
class: [
|
||||
'layout-wrapper layout-nav-type-vertical layout-navbar-static layout-footer-static layout-content-width-fluid',
|
||||
mdAndDown.value && 'layout-overlay-nav',
|
||||
route.meta.layoutWrapperClasses,
|
||||
],
|
||||
}, [
|
||||
verticalNav,
|
||||
h('div', { class: 'layout-content-wrapper' }, [
|
||||
navbar,
|
||||
main,
|
||||
footer,
|
||||
]),
|
||||
layoutOverlay,
|
||||
])
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@layouts/styles/placeholders";
|
||||
@use "@layouts/styles/mixins";
|
||||
|
||||
.layout-wrapper.layout-nav-type-vertical {
|
||||
// TODO(v2): Check why we need height in vertical nav & min-height in horizontal nav
|
||||
block-size: 100%;
|
||||
|
||||
.layout-content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
min-block-size: 100dvh;
|
||||
transition: padding-inline-start 0.2s ease-in-out;
|
||||
will-change: padding-inline-start;
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
padding-inline-start: variables.$layout-vertical-nav-width;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-navbar {
|
||||
z-index: variables.$layout-vertical-nav-layout-navbar-z-index;
|
||||
|
||||
.navbar-content-container {
|
||||
block-size: variables.$layout-vertical-nav-navbar-height;
|
||||
}
|
||||
|
||||
@at-root {
|
||||
.layout-wrapper.layout-nav-type-vertical {
|
||||
.layout-navbar {
|
||||
@if variables.$layout-vertical-nav-navbar-is-contained {
|
||||
@include mixins.boxed-content;
|
||||
}
|
||||
|
||||
// else
|
||||
@else {
|
||||
.navbar-content-container {
|
||||
@include mixins.boxed-content;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.layout-navbar-sticky .layout-navbar {
|
||||
@extend %layout-navbar-sticky;
|
||||
}
|
||||
|
||||
&.layout-navbar-hidden .layout-navbar {
|
||||
@extend %layout-navbar-hidden;
|
||||
}
|
||||
|
||||
// 👉 Footer
|
||||
.layout-footer {
|
||||
@include mixins.boxed-content;
|
||||
}
|
||||
|
||||
// 👉 Layout overlay
|
||||
.layout-overlay {
|
||||
position: fixed;
|
||||
z-index: variables.$layout-overlay-z-index;
|
||||
background-color: rgb(0 0 0 / 60%);
|
||||
cursor: pointer;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s ease-in-out;
|
||||
will-change: opacity;
|
||||
|
||||
&.visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust right column pl when vertical nav is collapsed
|
||||
&.layout-vertical-nav-collapsed .layout-content-wrapper {
|
||||
@media screen and (min-width: 1280px) {
|
||||
padding-inline-start: variables.$layout-vertical-nav-collapsed-width;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Content height fixed
|
||||
&.layout-content-height-fixed {
|
||||
.layout-content-wrapper {
|
||||
max-block-size: 100dvh;
|
||||
}
|
||||
|
||||
.layout-page-content {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
||||
.page-content-container {
|
||||
inline-size: 100%;
|
||||
|
||||
> :first-child {
|
||||
max-block-size: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
50
javascript-version/@layouts/components/VerticalNavLink.vue
Normal file
50
javascript-version/@layouts/components/VerticalNavLink.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<script setup>
|
||||
import { NuxtLink } from '#components'
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li
|
||||
class="nav-link"
|
||||
:class="{ disabled: item.disable }"
|
||||
>
|
||||
<Component
|
||||
:is="item.to ? NuxtLink : 'a'"
|
||||
:to="item.to"
|
||||
:href="item.href"
|
||||
:target="item.target"
|
||||
>
|
||||
<VIcon
|
||||
:icon="item.icon || 'bxs-circle'"
|
||||
class="nav-item-icon"
|
||||
/>
|
||||
<!-- 👉 Title -->
|
||||
<span class="nav-item-title">
|
||||
{{ item.title }}
|
||||
</span>
|
||||
<span
|
||||
class="nav-item-badge"
|
||||
:class="item.badgeClass"
|
||||
>
|
||||
{{ item.badgeContent }}
|
||||
</span>
|
||||
</Component>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.layout-vertical-nav {
|
||||
.nav-link a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,21 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<li class="nav-section-title">
|
||||
<div class="title-wrapper">
|
||||
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
|
||||
<span
|
||||
class="title-text"
|
||||
v-text="item.heading"
|
||||
/>
|
||||
<!-- eslint-enable vue/no-v-text-v-html-on-component -->
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
3
javascript-version/@layouts/styles/_classes.scss
Normal file
3
javascript-version/@layouts/styles/_classes.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
35
javascript-version/@layouts/styles/_default-layout.scss
Normal file
35
javascript-version/@layouts/styles/_default-layout.scss
Normal file
@@ -0,0 +1,35 @@
|
||||
// These are styles which are both common in layout w/ vertical nav & horizontal nav
|
||||
@use "@layouts/styles/rtl";
|
||||
@use "@layouts/styles/placeholders";
|
||||
@use "@layouts/styles/mixins";
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
html,
|
||||
body {
|
||||
min-block-size: 100%;
|
||||
}
|
||||
|
||||
.layout-page-content {
|
||||
@include mixins.boxed-content(true);
|
||||
|
||||
flex-grow: 1;
|
||||
|
||||
// TODO: Use grid gutter variable here
|
||||
padding-block: 1.5rem;
|
||||
}
|
||||
|
||||
.layout-footer {
|
||||
.footer-content-container {
|
||||
block-size: variables.$layout-vertical-nav-footer-height;
|
||||
}
|
||||
|
||||
.layout-footer-sticky & {
|
||||
position: sticky;
|
||||
inset-block-end: 0;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.layout-footer-hidden & {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
10
javascript-version/@layouts/styles/_global.scss
Normal file
10
javascript-version/@layouts/styles/_global.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: inherit;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user