mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-07-06 23:11:43 +08:00
first commit
This commit is contained in:
jxxghp
24
src/@core/components/ErrorHeader.vue
Normal file
24
src/@core/components/ErrorHeader.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
errorCode: string
|
||||
errorTitle: string
|
||||
errorDescription: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="text-center mb-4">
|
||||
<!-- 👉 Title and subtitle -->
|
||||
<h1 class="text-h1">
|
||||
{{ props.errorCode }}
|
||||
</h1>
|
||||
<h5 class="text-h5 mb-1">
|
||||
{{ props.errorTitle }}
|
||||
</h5>
|
||||
<p class="text-sm">
|
||||
{{ props.errorDescription }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
24
src/@core/components/MoreBtn.vue
Normal file
24
src/@core/components/MoreBtn.vue
Normal file
@@ -0,0 +1,24 @@
|
||||
<script lang="ts" setup>
|
||||
interface Props {
|
||||
menuList?: unknown[]
|
||||
itemProps?: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<IconBtn>
|
||||
<VIcon icon="mdi-dots-vertical" />
|
||||
|
||||
<VMenu
|
||||
v-if="props.menuList"
|
||||
activator="parent"
|
||||
>
|
||||
<VList
|
||||
:items="props.menuList"
|
||||
:item-props="props.itemProps"
|
||||
/>
|
||||
</VMenu>
|
||||
</IconBtn>
|
||||
</template>
|
||||
33
src/@core/components/ThemeSwitcher.vue
Normal file
33
src/@core/components/ThemeSwitcher.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<script setup lang="ts">
|
||||
import { useTheme } from 'vuetify'
|
||||
import type { ThemeSwitcherTheme } from '@layouts/types'
|
||||
|
||||
const props = defineProps<{
|
||||
themes: ThemeSwitcherTheme[]
|
||||
}>()
|
||||
|
||||
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>
|
||||
50
src/@core/components/cards/CardStatisticsHorizontal.vue
Normal file
50
src/@core/components/cards/CardStatisticsHorizontal.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<script setup lang="ts">
|
||||
import { kFormatter } from '@core/utils/formatters'
|
||||
|
||||
interface Props {
|
||||
title: string
|
||||
color?: string
|
||||
icon: string
|
||||
stats: number
|
||||
change: number
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
color: 'primary',
|
||||
})
|
||||
|
||||
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 ? 'mdi-chevron-up' : 'mdi-chevron-down'" />
|
||||
<span class="text-caption font-weight-semibold">{{ Math.abs(props.change) }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
56
src/@core/components/cards/CardStatisticsVertical.vue
Normal file
56
src/@core/components/cards/CardStatisticsVertical.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
title: string
|
||||
color?: string
|
||||
icon: string
|
||||
stats: string
|
||||
change: number
|
||||
subtitle: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
color: 'primary',
|
||||
})
|
||||
|
||||
const isPositive = controlledComputed(() => props.change, () => Math.sign(props.change) === 1)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="d-flex align-center">
|
||||
<VAvatar
|
||||
v-if="props.icon"
|
||||
size="38"
|
||||
:color="props.color"
|
||||
>
|
||||
<VIcon
|
||||
:icon="props.icon"
|
||||
size="24"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<MoreBtn class="me-n3 mt-n1" />
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<h6 class="text-sm font-weight-semibold mb-2">
|
||||
{{ props.title }}
|
||||
</h6>
|
||||
<div
|
||||
v-if="props.change"
|
||||
class="d-flex align-center mb-2"
|
||||
>
|
||||
<span class="font-weight-semibold text-h5 me-2">{{ props.stats }}</span>
|
||||
<span
|
||||
:class="isPositive ? 'text-success' : 'text-error'"
|
||||
class="text-caption"
|
||||
>
|
||||
{{ isPositive ? `+${props.change}` : props.change }}%
|
||||
</span>
|
||||
</div>
|
||||
<span class="text-caption">{{ props.subtitle }}</span>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
65
src/@core/components/cards/CardStatisticsWithImages.vue
Normal file
65
src/@core/components/cards/CardStatisticsWithImages.vue
Normal file
@@ -0,0 +1,65 @@
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
title: string
|
||||
subtitle: string
|
||||
stats: string
|
||||
change: number
|
||||
image: string
|
||||
color?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
color: '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>
|
||||
703
src/@core/libs/apex-chart/apexCharConfig.ts
Normal file
703
src/@core/libs/apex-chart/apexCharConfig.ts
Normal file
@@ -0,0 +1,703 @@
|
||||
import type { ThemeInstance } from 'vuetify'
|
||||
import { hexToRgb } from '@layouts/utils'
|
||||
|
||||
// 👉 Colors variables
|
||||
const colorVariables = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||
const themeSecondaryTextColor = `rgba(${hexToRgb(themeColors.colors['on-surface'])},${themeColors.variables['medium-emphasis-opacity']})`
|
||||
const themeDisabledTextColor = `rgba(${hexToRgb(themeColors.colors['on-surface'])},${themeColors.variables['disabled-opacity']})`
|
||||
const themeBorderColor = `rgba(${hexToRgb(String(themeColors.variables['border-color']))},${themeColors.variables['border-opacity']})`
|
||||
const themePrimaryTextColor = `rgba(${hexToRgb(themeColors.colors['on-surface'])},${themeColors.variables['high-emphasis-opacity']})`
|
||||
|
||||
return { themeSecondaryTextColor, themeDisabledTextColor, themeBorderColor, themePrimaryTextColor }
|
||||
}
|
||||
|
||||
export const getScatterChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||
const scatterColors = {
|
||||
series1: '#ff9f43',
|
||||
series2: '#7367f0',
|
||||
series3: '#28c76f',
|
||||
}
|
||||
|
||||
const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
zoom: {
|
||||
type: 'xy',
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'left',
|
||||
markers: { offsetX: -3 },
|
||||
|
||||
labels: { colors: themeSecondaryTextColor },
|
||||
itemMargin: {
|
||||
vertical: 3,
|
||||
horizontal: 10,
|
||||
},
|
||||
},
|
||||
colors: [scatterColors.series1, scatterColors.series2, scatterColors.series3],
|
||||
grid: {
|
||||
borderColor: themeBorderColor,
|
||||
xaxis: {
|
||||
lines: { show: true },
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: { colors: themeDisabledTextColor },
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
tickAmount: 10,
|
||||
axisBorder: { show: false },
|
||||
|
||||
axisTicks: { color: themeBorderColor },
|
||||
crosshairs: {
|
||||
stroke: { color: themeBorderColor },
|
||||
},
|
||||
labels: {
|
||||
style: { colors: themeDisabledTextColor },
|
||||
formatter: (val: string) => parseFloat(val).toFixed(1),
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
export const getLineChartSimpleConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||
const { themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
zoom: { enabled: false },
|
||||
toolbar: { show: false },
|
||||
},
|
||||
colors: ['#ff9f43'],
|
||||
stroke: { curve: 'straight' },
|
||||
dataLabels: { enabled: false },
|
||||
markers: {
|
||||
strokeWidth: 7,
|
||||
strokeOpacity: 1,
|
||||
colors: ['#ff9f43'],
|
||||
strokeColors: ['#fff'],
|
||||
},
|
||||
grid: {
|
||||
padding: { top: -10 },
|
||||
|
||||
borderColor: themeBorderColor,
|
||||
xaxis: {
|
||||
lines: { show: true },
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
custom(data: any) {
|
||||
return `<div class='bar-chart pa-2'>
|
||||
<span>${data.series[data.seriesIndex][data.dataPointIndex]}%</span>
|
||||
</div>`
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: { colors: themeDisabledTextColor },
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: { show: false },
|
||||
|
||||
axisTicks: { color: themeBorderColor },
|
||||
crosshairs: {
|
||||
stroke: { color: themeBorderColor },
|
||||
},
|
||||
labels: {
|
||||
style: { colors: themeDisabledTextColor },
|
||||
},
|
||||
categories: [
|
||||
'7/12',
|
||||
'8/12',
|
||||
'9/12',
|
||||
'10/12',
|
||||
'11/12',
|
||||
'12/12',
|
||||
'13/12',
|
||||
'14/12',
|
||||
'15/12',
|
||||
'16/12',
|
||||
'17/12',
|
||||
'18/12',
|
||||
'19/12',
|
||||
'20/12',
|
||||
'21/12',
|
||||
],
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export const getBarChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||
const { themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
colors: ['#00cfe8'],
|
||||
dataLabels: { enabled: false },
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 8,
|
||||
barHeight: '30%',
|
||||
horizontal: true,
|
||||
startingShape: 'rounded',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
borderColor: themeBorderColor,
|
||||
xaxis: {
|
||||
lines: { show: false },
|
||||
},
|
||||
padding: {
|
||||
top: -10,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: { colors: themeDisabledTextColor },
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { color: themeBorderColor },
|
||||
categories: ['MON, 11', 'THU, 14', 'FRI, 15', 'MON, 18', 'WED, 20', 'FRI, 21', 'MON, 23'],
|
||||
labels: {
|
||||
style: { colors: themeDisabledTextColor },
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export const getCandlestickChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||
const candlestickColors = {
|
||||
series1: '#28c76f',
|
||||
series2: '#ea5455',
|
||||
}
|
||||
|
||||
const { themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
plotOptions: {
|
||||
bar: { columnWidth: '40%' },
|
||||
candlestick: {
|
||||
colors: {
|
||||
upward: candlestickColors.series1,
|
||||
downward: candlestickColors.series2,
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
padding: { top: -10 },
|
||||
borderColor: themeBorderColor,
|
||||
xaxis: {
|
||||
lines: { show: true },
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
tooltip: { enabled: true },
|
||||
crosshairs: {
|
||||
stroke: { color: themeBorderColor },
|
||||
},
|
||||
labels: {
|
||||
style: { colors: themeDisabledTextColor },
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
type: 'datetime',
|
||||
axisBorder: { show: false },
|
||||
axisTicks: { color: themeBorderColor },
|
||||
crosshairs: {
|
||||
stroke: { color: themeBorderColor },
|
||||
},
|
||||
labels: {
|
||||
style: { colors: themeDisabledTextColor },
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
export const getRadialBarChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||
const radialBarColors = {
|
||||
series1: '#fdd835',
|
||||
series2: '#32baff',
|
||||
series3: '#00d4bd',
|
||||
series4: '#7367f0',
|
||||
series5: '#FFA1A1',
|
||||
}
|
||||
|
||||
const { themeSecondaryTextColor, themePrimaryTextColor } = colorVariables(themeColors)
|
||||
|
||||
return {
|
||||
stroke: { lineCap: 'round' },
|
||||
labels: ['Comments', 'Replies', 'Shares'],
|
||||
legend: {
|
||||
show: true,
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
colors: themeSecondaryTextColor,
|
||||
},
|
||||
markers: {
|
||||
offsetX: -3,
|
||||
},
|
||||
itemMargin: {
|
||||
vertical: 3,
|
||||
horizontal: 10,
|
||||
},
|
||||
},
|
||||
colors: [radialBarColors.series1, radialBarColors.series2, radialBarColors.series4],
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: { size: '30%' },
|
||||
track: {
|
||||
margin: 15,
|
||||
background: themeColors.colors['grey-100'],
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '2rem',
|
||||
},
|
||||
value: {
|
||||
fontSize: '1rem',
|
||||
color: themeSecondaryTextColor,
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
fontWeight: 400,
|
||||
label: 'Comments',
|
||||
fontSize: '1.125rem',
|
||||
|
||||
color: themePrimaryTextColor,
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
formatter(w: { globals: { seriesTotals: any[]; series: string | any[] } }) {
|
||||
const totalValue
|
||||
= w.globals.seriesTotals.reduce((a: number, b: number) => {
|
||||
return a + b
|
||||
}, 0) / w.globals.series.length
|
||||
|
||||
if (totalValue % 1 === 0)
|
||||
return `${totalValue}%`
|
||||
else
|
||||
return `${totalValue.toFixed(2)}%`
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: -30,
|
||||
bottom: -25,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export const getDonutChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||
const donutColors = {
|
||||
series1: '#fdd835',
|
||||
series2: '#00d4bd',
|
||||
series3: '#826bf8',
|
||||
series4: '#32baff',
|
||||
series5: '#ffa1a1',
|
||||
}
|
||||
|
||||
const { themeSecondaryTextColor, themePrimaryTextColor } = colorVariables(themeColors)
|
||||
|
||||
return {
|
||||
stroke: { width: 0 },
|
||||
labels: ['Operational', 'Networking', 'Hiring', 'R&D'],
|
||||
colors: [donutColors.series1, donutColors.series5, donutColors.series3, donutColors.series2],
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: (val: string) => `${parseInt(val, 10)}%`,
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
markers: { offsetX: -3 },
|
||||
labels: { colors: themeSecondaryTextColor },
|
||||
itemMargin: {
|
||||
vertical: 3,
|
||||
horizontal: 10,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
fontSize: '1.5rem',
|
||||
},
|
||||
value: {
|
||||
fontSize: '1.5rem',
|
||||
color: themeSecondaryTextColor,
|
||||
formatter: (val: string) => `${parseInt(val, 10)}`,
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
fontSize: '1.5rem',
|
||||
label: 'Operational',
|
||||
formatter: () => '31%',
|
||||
color: themePrimaryTextColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 992,
|
||||
options: {
|
||||
chart: {
|
||||
height: 380,
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
breakpoint: 576,
|
||||
options: {
|
||||
chart: {
|
||||
height: 320,
|
||||
},
|
||||
plotOptions: {
|
||||
pie: {
|
||||
donut: {
|
||||
labels: {
|
||||
show: true,
|
||||
name: {
|
||||
fontSize: '1rem',
|
||||
},
|
||||
value: {
|
||||
fontSize: '1rem',
|
||||
},
|
||||
total: {
|
||||
fontSize: '1rem',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
export const getAreaChartSplineConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||
const areaColors = {
|
||||
series3: '#e0cffe',
|
||||
series2: '#b992fe',
|
||||
series1: '#ab7efd',
|
||||
}
|
||||
|
||||
const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
tooltip: { shared: false },
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
show: false,
|
||||
curve: 'straight',
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'left',
|
||||
|
||||
labels: { colors: themeSecondaryTextColor },
|
||||
markers: {
|
||||
offsetY: 1,
|
||||
offsetX: -3,
|
||||
},
|
||||
itemMargin: {
|
||||
vertical: 3,
|
||||
horizontal: 10,
|
||||
},
|
||||
},
|
||||
|
||||
colors: [areaColors.series3, areaColors.series2, areaColors.series1],
|
||||
fill: {
|
||||
opacity: 1,
|
||||
type: 'solid',
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: themeBorderColor,
|
||||
xaxis: {
|
||||
lines: { show: true },
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: { colors: themeDisabledTextColor },
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: { show: false },
|
||||
|
||||
axisTicks: { color: themeBorderColor },
|
||||
crosshairs: {
|
||||
stroke: { color: themeBorderColor },
|
||||
},
|
||||
labels: {
|
||||
style: { colors: themeDisabledTextColor },
|
||||
},
|
||||
categories: [
|
||||
'7/12',
|
||||
'8/12',
|
||||
'9/12',
|
||||
'10/12',
|
||||
'11/12',
|
||||
'12/12',
|
||||
'13/12',
|
||||
'14/12',
|
||||
'15/12',
|
||||
'16/12',
|
||||
'17/12',
|
||||
'18/12',
|
||||
'19/12',
|
||||
],
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export const getColumnChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||
const columnColors = {
|
||||
series1: '#826af9',
|
||||
series2: '#d2b0ff',
|
||||
bg: '#f8d3ff',
|
||||
}
|
||||
|
||||
const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
|
||||
|
||||
return {
|
||||
chart: {
|
||||
offsetX: -10,
|
||||
stacked: true,
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
fill: { opacity: 1 },
|
||||
dataLabels: { enabled: false },
|
||||
|
||||
colors: [columnColors.series1, columnColors.series2],
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'left',
|
||||
|
||||
labels: { colors: themeSecondaryTextColor },
|
||||
markers: {
|
||||
offsetY: 1,
|
||||
offsetX: -3,
|
||||
},
|
||||
itemMargin: {
|
||||
vertical: 3,
|
||||
horizontal: 10,
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
colors: ['transparent'],
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '15%',
|
||||
colors: {
|
||||
backgroundBarRadius: 10,
|
||||
|
||||
backgroundBarColors: [columnColors.bg, columnColors.bg, columnColors.bg, columnColors.bg, columnColors.bg],
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
borderColor: themeBorderColor,
|
||||
xaxis: {
|
||||
lines: { show: true },
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: { colors: themeDisabledTextColor },
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: { show: false },
|
||||
|
||||
axisTicks: { color: themeBorderColor },
|
||||
categories: ['7/12', '8/12', '9/12', '10/12', '11/12', '12/12', '13/12', '14/12', '15/12'],
|
||||
crosshairs: {
|
||||
stroke: { color: themeBorderColor },
|
||||
},
|
||||
labels: {
|
||||
style: { colors: themeDisabledTextColor },
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 600,
|
||||
options: {
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: '35%',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
|
||||
export const getHeatMapChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||
const { themeSecondaryTextColor, themeDisabledTextColor } = colorVariables(themeColors)
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
},
|
||||
dataLabels: { enabled: false },
|
||||
stroke: {
|
||||
colors: [themeColors.colors.surface],
|
||||
},
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
colors: themeSecondaryTextColor,
|
||||
},
|
||||
markers: {
|
||||
offsetY: 0,
|
||||
offsetX: -3,
|
||||
},
|
||||
itemMargin: {
|
||||
vertical: 3,
|
||||
horizontal: 10,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
heatmap: {
|
||||
enableShades: false,
|
||||
colorScale: {
|
||||
ranges: [
|
||||
{ to: 10, from: 0, name: '0-10', color: '#b9b3f8' },
|
||||
{ to: 20, from: 11, name: '10-20', color: '#aba4f6' },
|
||||
{ to: 30, from: 21, name: '20-30', color: '#9d95f5' },
|
||||
{ to: 40, from: 31, name: '30-40', color: '#8f85f3' },
|
||||
{ to: 50, from: 41, name: '40-50', color: '#8176f2' },
|
||||
{ to: 60, from: 51, name: '50-60', color: '#7367f0' },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
padding: { top: -20 },
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: themeDisabledTextColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
labels: { show: false },
|
||||
axisTicks: { show: false },
|
||||
axisBorder: { show: false },
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export const getRadarChartConfig = (themeColors: ThemeInstance['themes']['value']['colors']) => {
|
||||
const radarColors = {
|
||||
series1: '#9b88fa',
|
||||
series2: '#ffa1a1',
|
||||
}
|
||||
|
||||
const { themeSecondaryTextColor, themeBorderColor, themeDisabledTextColor } = colorVariables(themeColors)
|
||||
|
||||
return {
|
||||
chart: {
|
||||
parentHeightOffset: 0,
|
||||
toolbar: { show: false },
|
||||
dropShadow: {
|
||||
top: 1,
|
||||
blur: 8,
|
||||
left: 1,
|
||||
opacity: 0.2,
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
markers: { size: 0 },
|
||||
fill: { opacity: [1, 0.8] },
|
||||
colors: [radarColors.series1, radarColors.series2],
|
||||
stroke: {
|
||||
width: 0,
|
||||
show: false,
|
||||
},
|
||||
legend: {
|
||||
labels: {
|
||||
colors: themeSecondaryTextColor,
|
||||
},
|
||||
markers: {
|
||||
offsetX: -3,
|
||||
},
|
||||
itemMargin: {
|
||||
vertical: 3,
|
||||
horizontal: 10,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
radar: {
|
||||
polygons: {
|
||||
strokeColors: themeBorderColor,
|
||||
connectorColors: themeBorderColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
padding: {
|
||||
top: -20,
|
||||
bottom: -20,
|
||||
},
|
||||
},
|
||||
yaxis: { show: false },
|
||||
xaxis: {
|
||||
categories: ['Battery', 'Brand', 'Camera', 'Memory', 'Storage', 'Display', 'OS', 'Price'],
|
||||
labels: {
|
||||
style: {
|
||||
colors: [
|
||||
themeDisabledTextColor,
|
||||
themeDisabledTextColor,
|
||||
themeDisabledTextColor,
|
||||
themeDisabledTextColor,
|
||||
themeDisabledTextColor,
|
||||
themeDisabledTextColor,
|
||||
themeDisabledTextColor,
|
||||
themeDisabledTextColor,
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
183
src/@core/scss/_components.scss
Normal file
183
src/@core/scss/_components.scss
Normal file
@@ -0,0 +1,183 @@
|
||||
@use "mixins";
|
||||
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
||||
@use "@layouts/styles/_placeholders";
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
// 👉 Avatar font-size
|
||||
.v-avatar {
|
||||
@include mixins.avatar-font-sizes($map: variables.$avatar-font-sizes);
|
||||
}
|
||||
|
||||
// 👉 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.elevation(3);
|
||||
}
|
||||
}
|
||||
|
||||
> .v-avatar {
|
||||
border: 2px solid rgb(var(--v-theme-surface));
|
||||
}
|
||||
}
|
||||
|
||||
// Dialog responsive width
|
||||
.v-dialog {
|
||||
.v-card {
|
||||
@extend %style-scroll-bar;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.v-dialog {
|
||||
&.v-dialog-sm,
|
||||
&.v-dialog-lg,
|
||||
&.v-dialog-xl {
|
||||
inline-size: 565px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.v-dialog {
|
||||
&.v-dialog-lg,
|
||||
&.v-dialog-xl {
|
||||
inline-size: 865px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.v-dialog.v-dialog-xl,
|
||||
.v-dialog.v-dialog-xl .v-overlay__content > .v-card {
|
||||
inline-size: 1165px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// v-tab with pill support
|
||||
|
||||
.v-tabs.v-tabs-pill {
|
||||
.v-tab.v-btn {
|
||||
border-radius: 0.375rem !important;
|
||||
min-inline-size: 8.125rem;
|
||||
transition: none;
|
||||
|
||||
.v-tab__slider {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.v-slide-group__content {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
// loop for all colors bg
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
.v-tabs.v-tabs-pill {
|
||||
.v-slide-group-item--active.v-tab--selected.text-#{$color-name} {
|
||||
background-color: rgb(var(--v-theme-#{$color-name}));
|
||||
color: rgb(var(--v-theme-on-#{$color-name})) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 added box shadow
|
||||
.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}));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ℹ️ 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Expansion panels
|
||||
.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
|
||||
|
||||
.v-expansion-panels:not(.v-expansion-panels--variant-accordion) {
|
||||
.v-expansion-panel.v-expansion-panel--active {
|
||||
.v-expansion-panel__shadow {
|
||||
@include mixins_elevation.elevation(3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Slider
|
||||
|
||||
.v-slider.v-input--horizontal .v-slider-track__fill {
|
||||
block-size: var(--v-slider-track-size);
|
||||
}
|
||||
|
||||
.v-slider.v-input--vertical .v-slider-track__fill {
|
||||
inline-size: var(--v-slider-track-size);
|
||||
}
|
||||
|
||||
.v-slider-thumb {
|
||||
.v-slider-thumb__label {
|
||||
color: rgb(var(--v-theme-on-primary));
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Table
|
||||
.v-table--density-default > .v-table__wrapper > table > tbody > tr > td,
|
||||
.v-table--density-default > .v-table__wrapper > table > thead > tr > td,
|
||||
.v-table--density-default > .v-table__wrapper > table > tfoot > tr > td {
|
||||
block-size: 50px;
|
||||
}
|
||||
16
src/@core/scss/_dark.scss
Normal file
16
src/@core/scss/_dark.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
// ————————————————————————————————————
|
||||
//* ——— Perfect Scrollbar
|
||||
// ————————————————————————————————————
|
||||
|
||||
.v-application.v-theme--dark {
|
||||
.ps__rail-y,
|
||||
.ps__rail-x {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
background-color: variables.$plugin-ps-thumb-y-dark;
|
||||
}
|
||||
}
|
||||
8
src/@core/scss/_default-layout.scss
Normal file
8
src/@core/scss/_default-layout.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
@use "@core/scss/placeholders";
|
||||
@use "@core/scss/variables";
|
||||
|
||||
.layout-navbar {
|
||||
@if variables.$navbar-high-emphasis-text {
|
||||
@extend %layout-navbar;
|
||||
}
|
||||
}
|
||||
21
src/@core/scss/_misc.scss
Normal file
21
src/@core/scss/_misc.scss
Normal file
@@ -0,0 +1,21 @@
|
||||
// ℹ️ 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 {
|
||||
background: rgba(var(--v-code-background-color), var(--v-focus-opacity));
|
||||
border-radius: 3px;
|
||||
color: currentcolor;
|
||||
font-size: 85%;
|
||||
font-weight: 400;
|
||||
padding-block: 0.2em;
|
||||
padding-inline: 0.4em;
|
||||
}
|
||||
66
src/@core/scss/_mixins.scss
Normal file
66
src/@core/scss/_mixins.scss
Normal file
@@ -0,0 +1,66 @@
|
||||
@use "vuetify/lib/styles/settings" as vuetify_settings;
|
||||
|
||||
@mixin themed($property, $light-value, $dark-value) {
|
||||
@at-root {
|
||||
.v-theme {
|
||||
&--light {
|
||||
#{$property}: $light-value;
|
||||
}
|
||||
|
||||
&--dark {
|
||||
#{$property}: $dark-value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ℹ️ This mixin is inspired from vuetify for adding hover styles via before pseudo element
|
||||
@mixin before-pseudo() {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
background: currentcolor;
|
||||
block-size: 100%;
|
||||
border-radius: inherit;
|
||||
content: "";
|
||||
inline-size: 100%;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// ——— Light background generator ——————— //
|
||||
// ℹ️ With this you have to give text color to the component you want light bg
|
||||
// e.g. class="avatar-initial text-primary" for primary light bg
|
||||
@mixin light-bg-provider($component, $inner-selector: "", $opacity: 0.12) {
|
||||
.#{$component}.#{$component}-light-bg #{$inner-selector} {
|
||||
background-color: transparent !important;
|
||||
|
||||
&.bg-static-white {
|
||||
background-color: white !important;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
background-color: currentcolor;
|
||||
border-radius: inherit;
|
||||
content: "";
|
||||
inset: 0;
|
||||
opacity: $opacity;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin avatar-font-sizes($map: $avatar-sizes) {
|
||||
@each $sizeName, $multiplier in vuetify_settings.$size-scales {
|
||||
/* stylelint-disable-next-line scss/no-global-function-names */
|
||||
$size: map-get($map, $sizeName);
|
||||
|
||||
&.v-avatar--size-#{$sizeName} {
|
||||
font-size: #{$size}px;
|
||||
}
|
||||
}
|
||||
}
|
||||
73
src/@core/scss/_utilities.scss
Normal file
73
src/@core/scss/_utilities.scss
Normal file
@@ -0,0 +1,73 @@
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
// 👉 Demo spacers
|
||||
// TODO: Use vuetify SCSS variable here
|
||||
$card-spacer-content: 16px;
|
||||
|
||||
.demo-space-x {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-block-start: -$card-spacer-content;
|
||||
|
||||
& > * {
|
||||
margin-block-start: $card-spacer-content;
|
||||
margin-inline-end: $card-spacer-content;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-space-y {
|
||||
& > * {
|
||||
margin-block-end: $card-spacer-content;
|
||||
|
||||
&:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Card match height
|
||||
.match-height.v-row {
|
||||
.v-card {
|
||||
block-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Whitespace
|
||||
.whitespace-no-wrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 👉 Colors
|
||||
|
||||
/*
|
||||
ℹ️ Vuetify is applying `.text-white` class to badge icon but don't provide its styles
|
||||
Moreover, we also use this class in some places
|
||||
|
||||
ℹ️ In vuetify 2 with `$color-pack: false` SCSS var config this class was getting generated but this is not the case in v3
|
||||
|
||||
ℹ️ We also need !important to get correct color in badge icon
|
||||
*/
|
||||
.text-white {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.bg-var-theme-background {
|
||||
background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity)) !important;
|
||||
}
|
||||
|
||||
// [/^bg-light-(\w+)$/, ([, w]) => ({ backgroundColor: `rgba(var(--v-theme-${w}), var(--v-activated-opacity))` })],
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
.bg-light-#{$color-name} {
|
||||
background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Typography
|
||||
.font-weight-semibold {
|
||||
font-weight: 600 !important;
|
||||
}
|
||||
|
||||
.leading-normal {
|
||||
line-height: normal !important;
|
||||
}
|
||||
193
src/@core/scss/_utils.scss
Normal file
193
src/@core/scss/_utils.scss
Normal file
@@ -0,0 +1,193 @@
|
||||
@use "sass:map";
|
||||
@use "sass:list";
|
||||
@use "sass:string";
|
||||
|
||||
// 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
|
||||
// font size
|
||||
$font-sizes: (
|
||||
"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 line-height
|
||||
$font-line-height: (
|
||||
"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
|
||||
);
|
||||
|
||||
@each $name, $size in $font-sizes {
|
||||
.text-#{$name} {
|
||||
font-size: $size;
|
||||
line-height: map.get($font-line-height, $name);
|
||||
}
|
||||
}
|
||||
|
||||
// truncate utility class
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// gap utility class
|
||||
$gap: (
|
||||
"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
|
||||
);
|
||||
|
||||
@each $name, $size in $gap {
|
||||
.gap-#{$name} {
|
||||
gap: $size;
|
||||
}
|
||||
|
||||
.gap-x-#{$name} {
|
||||
column-gap: $size;
|
||||
}
|
||||
|
||||
.gap-y-#{$name} {
|
||||
row-gap: $size;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
ℹ️ 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
|
||||
);
|
||||
} @else {
|
||||
@return $var;
|
||||
}
|
||||
}
|
||||
96
src/@core/scss/_variables.scss
Normal file
96
src/@core/scss/_variables.scss
Normal file
@@ -0,0 +1,96 @@
|
||||
/*
|
||||
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)
|
||||
*/
|
||||
@use "sass:map";
|
||||
|
||||
// @forward "@layouts/styles/variables";
|
||||
@use "utils";
|
||||
|
||||
// 👉 Default layout
|
||||
|
||||
$navbar-high-emphasis-text: true !default;
|
||||
|
||||
@forward "@layouts/styles/variables" with (
|
||||
$layout-vertical-nav-collapsed-width: 68px !default,
|
||||
);
|
||||
@use "@layouts/styles/variables" as *;
|
||||
|
||||
$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: 0 1.125rem !default;
|
||||
$vertical-nav-horizontal-padding: 1.375rem 1rem !default;
|
||||
|
||||
/*
|
||||
ℹ️ 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);
|
||||
|
||||
// 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-shadow: 0 4px 8px -4px rgb(94 86 105 / 42%);
|
||||
|
||||
// Vertical nav header padding
|
||||
$vertical-nav-header-padding: 1rem 0.25rem 1rem $vertical-nav-horizontal-padding-start !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;
|
||||
|
||||
// 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;
|
||||
$vertical-nav-items-icon-margin-inline-end: 0.625rem;
|
||||
|
||||
// 👉 Plugins
|
||||
|
||||
$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35);
|
||||
|
||||
// 👉 Custom Variables
|
||||
$avatar-font-sizes: () !default;
|
||||
$avatar-font-sizes: map.deep-merge(
|
||||
(
|
||||
"x-small":12,
|
||||
"small":14,
|
||||
"default":18,
|
||||
"large":20,
|
||||
"x-large":24
|
||||
),
|
||||
$avatar-font-sizes
|
||||
);
|
||||
140
src/@core/scss/_vertical-nav.scss
Normal file
140
src/@core/scss/_vertical-nav.scss
Normal file
@@ -0,0 +1,140 @@
|
||||
@use "./placeholders";
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@core/scss/mixins" as mixins;
|
||||
@use "vuetify/lib/styles/tools/states" as vuetifyStates;
|
||||
@use "vuetify/lib/styles/tools/elevation" as elevation;
|
||||
|
||||
.layout-nav-type-vertical {
|
||||
// 👉 Layout Vertical nav
|
||||
.layout-vertical-nav {
|
||||
$sl-layout-nav-type-vertical: &;
|
||||
|
||||
@extend %nav;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-title {
|
||||
margin-inline-start: variables.$vertical-nav-header-logo-title-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 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}, 85%) 30%,
|
||||
rgba(#{variables.$vertical-nav-background-color-rgb}, 50%) 65%,
|
||||
rgba(#{variables.$vertical-nav-background-color-rgb}, 30%) 75%,
|
||||
transparent
|
||||
);
|
||||
block-size: 64px;
|
||||
inline-size: 100%;
|
||||
inset-block-start: calc(#{variables.$vertical-nav-header-height} - 2px);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateX(-8px);
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
&.scrolled {
|
||||
.vertical-nav-items-shadow {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Nav section title
|
||||
.nav-section-title {
|
||||
@extend %vertical-nav-item;
|
||||
@extend %vertical-nav-section-title;
|
||||
|
||||
// ℹ️ Update the margin-inline-end when vertical nav is in mini state. We done same for link & group.
|
||||
@at-root {
|
||||
.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-section-title {
|
||||
margin-inline: 4px 0;
|
||||
}
|
||||
}
|
||||
|
||||
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 Link
|
||||
.nav-link {
|
||||
overflow: hidden;
|
||||
|
||||
> :first-child {
|
||||
@extend %vertical-nav-item;
|
||||
@extend %vertical-nav-item-interactive;
|
||||
|
||||
// ℹ️ Update the margin-inline-end when vertical nav is in mini state. We done same for section title.
|
||||
@at-root {
|
||||
.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-link > :first-child, .layout-nav-type-vertical .layout-vertical-nav .nav-group > :first-child {
|
||||
margin-inline: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item-icon {
|
||||
@extend %vertical-nav-items-icon;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: var(--v-disabled-opacity);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Vertical nav link
|
||||
.nav-link {
|
||||
@extend %nav-link;
|
||||
|
||||
> .router-link-exact-active {
|
||||
@extend %nav-link-active;
|
||||
}
|
||||
|
||||
> a {
|
||||
// Adds before psudo element to style hover state
|
||||
@include mixins.before-pseudo;
|
||||
|
||||
// Adds vuetify states
|
||||
@include vuetifyStates.states($active: false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
157
src/@core/scss/base/_components.scss
Normal file
157
src/@core/scss/base/_components.scss
Normal file
@@ -0,0 +1,157 @@
|
||||
@use "mixins";
|
||||
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
||||
@use "@layouts/styles/placeholders";
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
// 👉 Avatar group
|
||||
.v-avatar-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> * {
|
||||
&:not(:first-child) {
|
||||
margin-inline-start: -0.8rem;
|
||||
}
|
||||
|
||||
transition: transform 0.25s ease, box-shadow 0.15s ease;
|
||||
|
||||
&:hover {
|
||||
z-index: 2;
|
||||
transform: translateY(-5px) scale(1.05);
|
||||
|
||||
@include mixins.elevation(3);
|
||||
}
|
||||
}
|
||||
|
||||
> .v-avatar {
|
||||
border: 2px solid rgb(var(--v-theme-surface));
|
||||
transition: transform 0.15s ease;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Button outline with default color border color
|
||||
.v-alert--variant-outlined,
|
||||
.v-avatar--variant-outlined,
|
||||
.v-btn.v-btn--variant-outlined,
|
||||
.v-card--variant-outlined,
|
||||
.v-chip--variant-outlined,
|
||||
.v-list-item--variant-outlined {
|
||||
&:not([class*="text-"]) {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
|
||||
&.text-default {
|
||||
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Custom Input
|
||||
.v-label.custom-input {
|
||||
padding: 1rem;
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
opacity: 1;
|
||||
white-space: normal;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(var(--v-border-color), 0.25);
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: rgb(var(--v-theme-primary));
|
||||
|
||||
.v-icon {
|
||||
color: rgb(var(--v-theme-primary)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dialog responsive width
|
||||
.v-dialog {
|
||||
// dialog custom close btn
|
||||
.v-dialog-close-btn {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
|
||||
inset-block-start: 0.9375rem;
|
||||
inset-inline-end: 0.9375rem;
|
||||
|
||||
.v-btn__overlay {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.v-card {
|
||||
@extend %style-scroll-bar;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.v-dialog {
|
||||
&.v-dialog-sm,
|
||||
&.v-dialog-lg,
|
||||
&.v-dialog-xl {
|
||||
.v-overlay__content {
|
||||
inline-size: 565px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) {
|
||||
.v-dialog {
|
||||
&.v-dialog-lg,
|
||||
&.v-dialog-xl {
|
||||
.v-overlay__content {
|
||||
inline-size: 865px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1264px) {
|
||||
.v-dialog.v-dialog-xl {
|
||||
.v-overlay__content {
|
||||
inline-size: 1165px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// v-tab with pill support
|
||||
|
||||
.v-tabs.v-tabs-pill {
|
||||
.v-tab.v-btn {
|
||||
border-radius: 0.25rem !important;
|
||||
transition: none;
|
||||
|
||||
.v-tab__slider {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// loop for all colors bg
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
.v-tabs.v-tabs-pill {
|
||||
.v-slide-group-item--active.v-tab--selected.text-#{$color-name} {
|
||||
background-color: rgb(var(--v-theme-#{$color-name}));
|
||||
color: rgb(var(--v-theme-on-#{$color-name})) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ℹ️ We are make even width of all v-timeline body
|
||||
.v-timeline--vertical.v-timeline {
|
||||
.v-timeline-item {
|
||||
.v-timeline-item__body {
|
||||
justify-self: stretch !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Textarea
|
||||
|
||||
.v-textarea .v-field__input {
|
||||
/* stylelint-disable-next-line property-no-vendor-prefix */
|
||||
-webkit-mask-image: none !important;
|
||||
mask-image: none !important;
|
||||
}
|
||||
16
src/@core/scss/base/_dark.scss
Normal file
16
src/@core/scss/base/_dark.scss
Normal file
@@ -0,0 +1,16 @@
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
// ————————————————————————————————————
|
||||
// * ——— Perfect Scrollbar
|
||||
// ————————————————————————————————————
|
||||
|
||||
.v-application.v-theme--dark {
|
||||
.ps__rail-y,
|
||||
.ps__rail-x {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
background-color: variables.$plugin-ps-thumb-y-dark;
|
||||
}
|
||||
}
|
||||
104
src/@core/scss/base/_default-layout-w-vertical-nav.scss
Normal file
104
src/@core/scss/base/_default-layout-w-vertical-nav.scss
Normal file
@@ -0,0 +1,104 @@
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@core/scss/base/placeholders" as *;
|
||||
@use "@core/scss/template/placeholders" as *;
|
||||
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
||||
@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 out 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
src/@core/scss/base/_default-layout.scss
Normal file
16
src/@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
src/@core/scss/base/_index.scss
Normal file
40
src/@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
src/@core/scss/base/_layouts.scss
Normal file
63
src/@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)
|
||||
.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
src/@core/scss/base/_misc.scss
Normal file
20
src/@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;
|
||||
}
|
||||
78
src/@core/scss/base/_mixins.scss
Normal file
78
src/@core/scss/base/_mixins.scss
Normal file
@@ -0,0 +1,78 @@
|
||||
@use "sass:map";
|
||||
@use "@styles/variables/_vuetify.scss";
|
||||
|
||||
@mixin elevation($z, $important: false) {
|
||||
box-shadow: map.get(vuetify.$shadow-key-umbra, $z), map.get(vuetify.$shadow-key-penumbra, $z), map.get(vuetify.$shadow-key-ambient, $z) if($important, !important, null);
|
||||
}
|
||||
|
||||
// ℹ️ This mixin is inspired from vuetify for adding hover styles via before pseudo element
|
||||
@mixin before-pseudo() {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
border-radius: inherit;
|
||||
background: currentcolor;
|
||||
block-size: 100%;
|
||||
content: "";
|
||||
inline-size: 100%;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bordered-skin($component, $border-property: "border", $important: false) {
|
||||
#{$component} {
|
||||
// background-color: rgb(var(--v-theme-background));
|
||||
box-shadow: none !important;
|
||||
#{$border-property}: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) if($important, !important, null);
|
||||
}
|
||||
}
|
||||
|
||||
// ℹ️ Inspired from vuetify's active-states mixin
|
||||
// focus => 0.12 & selected => 0.08
|
||||
@mixin selected-states($selector) {
|
||||
// #{$selector} {
|
||||
// opacity: calc(#{map.get(vuetify.$states, "selected")} * var(--v-theme-overlay-multiplier));
|
||||
// }
|
||||
|
||||
// &:hover
|
||||
// #{$selector} {
|
||||
// opacity: calc(#{map.get(vuetify.$states, "selected") + map.get(vuetify.$states, "hover")} * var(--v-theme-overlay-multiplier));
|
||||
// }
|
||||
|
||||
// &:focus-visible
|
||||
// #{$selector} {
|
||||
// opacity: calc(#{map.get(vuetify.$states, "selected") + map.get(vuetify.$states, "focus")} * var(--v-theme-overlay-multiplier));
|
||||
// }
|
||||
|
||||
// @supports not selector(:focus-visible) {
|
||||
// &:focus {
|
||||
// #{$selector} {
|
||||
// opacity: calc(#{map.get(vuetify.$states, "selected") + map.get(vuetify.$states, "focus")} * var(--v-theme-overlay-multiplier));
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
#{$selector} {
|
||||
opacity: calc(var(--v-selected-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
|
||||
&:hover
|
||||
#{$selector} {
|
||||
opacity: calc(var(--v-selected-opacity) + var(--v-hover-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
|
||||
&:focus-visible
|
||||
#{$selector} {
|
||||
opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
|
||||
@supports not selector(:focus-visible) {
|
||||
&:focus {
|
||||
#{$selector} {
|
||||
opacity: calc(var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
141
src/@core/scss/base/_utilities.scss
Normal file
141
src/@core/scss/base/_utilities.scss
Normal file
@@ -0,0 +1,141 @@
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@layouts/styles/mixins" as layoutsMixins;
|
||||
|
||||
// 👉 Demo spacers
|
||||
// TODO: Use vuetify SCSS variable here
|
||||
$card-spacer-content: 16px;
|
||||
|
||||
.demo-space-x {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin-block-start: -$card-spacer-content;
|
||||
|
||||
& > * {
|
||||
margin-block-start: $card-spacer-content;
|
||||
margin-inline-end: $card-spacer-content;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-space-y {
|
||||
& > * {
|
||||
margin-block-end: $card-spacer-content;
|
||||
|
||||
&:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Card match height
|
||||
.match-height.v-row {
|
||||
.v-card {
|
||||
block-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Whitespace
|
||||
.whitespace-no-wrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// 👉 Colors
|
||||
|
||||
/*
|
||||
ℹ️ Vuetify is applying `.text-white` class to badge icon but don't provide its styles
|
||||
Moreover, we also use this class in some places
|
||||
|
||||
ℹ️ In vuetify 2 with `$color-pack: false` SCSS var config this class was getting generated but this is not the case in v3
|
||||
|
||||
ℹ️ We also need !important to get correct color in badge icon
|
||||
*/
|
||||
.text-white {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.bg-var-theme-background {
|
||||
background-color: rgba(var(--v-theme-on-background), var(--v-hover-opacity)) !important;
|
||||
}
|
||||
|
||||
// [/^bg-light-(\w+)$/, ([, w]) => ({ backgroundColor: `rgba(var(--v-theme-${w}), var(--v-activated-opacity))` })],
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
.bg-light-#{$color-name} {
|
||||
background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 clamp text
|
||||
.clamp-text {
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.leading-normal {
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
// 👉 for rtl only
|
||||
.flip-in-rtl {
|
||||
@include layoutsMixins.rtl {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Carousel
|
||||
.carousel-delimiter-top-end {
|
||||
.v-carousel__controls {
|
||||
justify-content: end;
|
||||
block-size: 40px;
|
||||
inset-block-start: 0;
|
||||
padding-inline: 1rem;
|
||||
|
||||
.v-btn--icon.v-btn--density-default {
|
||||
block-size: calc(var(--v-btn-height) + -10px);
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||
inline-size: calc(var(--v-btn-height) + -10px);
|
||||
|
||||
&.v-btn--active {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.v-btn__overlay {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
|
||||
&.dots-active-#{$color-name} {
|
||||
.v-carousel__controls {
|
||||
.v-btn--active {
|
||||
color: rgb(var(--v-theme-#{$color-name})) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-timeline-item {
|
||||
.app-timeline-title {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1.3125rem;
|
||||
}
|
||||
|
||||
.app-timeline-meta {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||
font-size: 12px;
|
||||
line-height: 0.875rem;
|
||||
}
|
||||
|
||||
.app-timeline-text {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||
font-size: 14px;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
}
|
||||
90
src/@core/scss/base/_utils.scss
Normal file
90
src/@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;
|
||||
}
|
||||
197
src/@core/scss/base/_variables.scss
Normal file
197
src/@core/scss/base/_variables.scss
Normal file
@@ -0,0 +1,197 @@
|
||||
@use "vuetify/lib/styles/tools/functions" as *;
|
||||
|
||||
/*
|
||||
TODO: Add docs on when to use placeholder vs when to use SASS variable
|
||||
|
||||
Placeholder
|
||||
- When we want to keep customization to our self between templates use it
|
||||
|
||||
Variables
|
||||
- When we want to allow customization from both user and our side
|
||||
- You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
|
||||
*/
|
||||
|
||||
@forward "@layouts/styles/variables" with (
|
||||
// Adjust z-index so vertical nav & overlay stays on top of v-layout in v-main. E.g. Email app
|
||||
$layout-vertical-nav-z-index: 1004,
|
||||
$layout-overlay-z-index: 1003,
|
||||
);
|
||||
@use "@layouts/styles/variables" as *;
|
||||
|
||||
// 👉 Default layout
|
||||
|
||||
$navbar-high-emphasis-text: true !default;
|
||||
|
||||
// @forward "@layouts/styles/variables" with (
|
||||
// $layout-vertical-nav-width: 350px !default,
|
||||
// );
|
||||
|
||||
$theme-colors-name: (
|
||||
"primary",
|
||||
"secondary",
|
||||
"error",
|
||||
"info",
|
||||
"success",
|
||||
"warning"
|
||||
) !default;
|
||||
|
||||
// 👉 Default layout with vertical nav
|
||||
|
||||
$default-layout-with-vertical-nav-navbar-footer-roundness: 10px !default;
|
||||
|
||||
// 👉 Vertical nav
|
||||
$vertical-nav-background-color-rgb: var(--v-theme-background) !default;
|
||||
$vertical-nav-background-color: rgb(#{$vertical-nav-background-color-rgb}) !default;
|
||||
|
||||
// ℹ️ This is used to keep consistency between nav items and nav header left & right margin
|
||||
// This is used by nav items & nav header
|
||||
$vertical-nav-horizontal-spacing: 1rem !default;
|
||||
$vertical-nav-horizontal-padding: 0.75rem !default;
|
||||
|
||||
// Vertical nav header height. Mostly we will align it with navbar height;
|
||||
$vertical-nav-header-height: $layout-vertical-nav-navbar-height !default;
|
||||
$vertical-nav-navbar-elevation: 3 !default;
|
||||
$vertical-nav-navbar-style: "elevated" !default; // options: elevated, floating
|
||||
$vertical-nav-floating-navbar-top: 1rem !default;
|
||||
|
||||
// Vertical nav header padding
|
||||
$vertical-nav-header-padding: 1rem $vertical-nav-horizontal-padding !default;
|
||||
$vertical-nav-header-inline-spacing: $vertical-nav-horizontal-spacing !default;
|
||||
|
||||
// Move logo when vertical nav is mini (collapsed but not hovered)
|
||||
$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px !default;
|
||||
|
||||
// Space between logo and title
|
||||
$vertical-nav-header-logo-title-spacing: 0.9rem !default;
|
||||
|
||||
// Section title margin top (when its not first child)
|
||||
$vertical-nav-section-title-mt: 1.5rem !default;
|
||||
|
||||
// Section title margin bottom
|
||||
$vertical-nav-section-title-mb: 0.5rem !default;
|
||||
|
||||
// Vertical nav icons
|
||||
$vertical-nav-items-icon-size: 1.5rem !default;
|
||||
$vertical-nav-items-nested-icon-size: 0.9rem !default;
|
||||
$vertical-nav-items-icon-margin-inline-end: 0.5rem !default;
|
||||
|
||||
// Transition duration for nav group arrow
|
||||
$vertical-nav-nav-group-arrow-transition-duration: 0.15s !default;
|
||||
|
||||
// Timing function for nav group arrow
|
||||
$vertical-nav-nav-group-arrow-transition-timing-function: ease-in-out !default;
|
||||
|
||||
// 👉 Horizontal nav
|
||||
|
||||
/*
|
||||
❗ Heads up
|
||||
==================
|
||||
Here we assume we will always use shorthand property which will apply same padding on four side
|
||||
This is because this have been used as value of top property by `.popper-content`
|
||||
*/
|
||||
$horizontal-nav-padding: 0.6875rem !default;
|
||||
|
||||
// Gap between top level horizontal nav items
|
||||
$horizontal-nav-top-level-items-gap: 4px !default;
|
||||
|
||||
// Horizontal nav icons
|
||||
$horizontal-nav-items-icon-size: 1.5rem !default;
|
||||
$horizontal-nav-third-level-icon-size: 0.9rem !default;
|
||||
$horizontal-nav-items-icon-margin-inline-end: 0.625rem !default;
|
||||
|
||||
// ℹ️ We used SCSS variable because we want to allow users to update max height of popper content
|
||||
// 120px is combined height of navbar & horizontal nav
|
||||
$horizontal-nav-popper-content-max-height: calc((var(--vh, 1vh) * 100) - 120px - 4rem) !default;
|
||||
|
||||
// ℹ️ This variable is used for horizontal nav popper content's `margin-top` and "The bridge"'s height. We need to sync both values.
|
||||
$horizontal-nav-popper-content-top: calc($horizontal-nav-padding + 0.375rem) !default;
|
||||
|
||||
// 👉 Plugins
|
||||
|
||||
$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35) !default;
|
||||
|
||||
// 👉 Vuetify
|
||||
|
||||
// Used in src/@core/scss/base/libs/vuetify/_overrides.scss
|
||||
$vuetify-reduce-default-compact-button-icon-size: true !default;
|
||||
|
||||
// 👉 Custom variables
|
||||
// for utility classes
|
||||
$font-sizes: () !default;
|
||||
$font-sizes: map-deep-merge(
|
||||
(
|
||||
"xs": 0.75rem,
|
||||
"sm": 0.875rem,
|
||||
"base": 1rem,
|
||||
"lg": 1.125rem,
|
||||
"xl": 1.25rem,
|
||||
"2xl": 1.5rem,
|
||||
"3xl": 1.875rem,
|
||||
"4xl": 2.25rem,
|
||||
"5xl": 3rem,
|
||||
"6xl": 3.75rem,
|
||||
"7xl": 4.5rem,
|
||||
"8xl": 6rem,
|
||||
"9xl": 8rem
|
||||
),
|
||||
$font-sizes
|
||||
);
|
||||
|
||||
// line height
|
||||
$font-line-height: () !default;
|
||||
$font-line-height: map-deep-merge(
|
||||
(
|
||||
"xs": 1rem,
|
||||
"sm": 1.25rem,
|
||||
"base": 1.5rem,
|
||||
"lg": 1.75rem,
|
||||
"xl": 1.75rem,
|
||||
"2xl": 2rem,
|
||||
"3xl": 2.25rem,
|
||||
"4xl": 2.5rem,
|
||||
"5xl": 1,
|
||||
"6xl": 1,
|
||||
"7xl": 1,
|
||||
"8xl": 1,
|
||||
"9xl": 1
|
||||
),
|
||||
$font-line-height
|
||||
);
|
||||
|
||||
// gap utility class
|
||||
$gap: () !default;
|
||||
$gap: map-deep-merge(
|
||||
(
|
||||
"0": 0,
|
||||
"1": 0.25rem,
|
||||
"2": 0.5rem,
|
||||
"3": 0.75rem,
|
||||
"4": 1rem,
|
||||
"5": 1.25rem,
|
||||
"6":1.5rem,
|
||||
"7": 1.75rem,
|
||||
"8": 2rem,
|
||||
"9": 2.25rem,
|
||||
"10": 2.5rem,
|
||||
"11": 2.75rem,
|
||||
"12": 3rem,
|
||||
"14": 3.5rem,
|
||||
"16": 4rem,
|
||||
"20": 5rem,
|
||||
"24": 6rem,
|
||||
"28": 7rem,
|
||||
"32": 8rem,
|
||||
"36": 9rem,
|
||||
"40": 10rem,
|
||||
"44": 11rem,
|
||||
"48": 12rem,
|
||||
"52": 13rem,
|
||||
"56": 14rem,
|
||||
"60": 15rem,
|
||||
"64": 16rem,
|
||||
"72": 18rem,
|
||||
"80": 20rem,
|
||||
"96": 24rem
|
||||
),
|
||||
$gap
|
||||
);
|
||||
250
src/@core/scss/base/_vertical-nav.scss
Normal file
250
src/@core/scss/base/_vertical-nav.scss
Normal file
@@ -0,0 +1,250 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
.ps__rail-y {
|
||||
// ℹ️ Setting z-index: 1 will make perfect scrollbar thumb appear on top of vertical nav items shadow
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Vertical nav link
|
||||
.nav-link {
|
||||
@extend %nav-link;
|
||||
|
||||
> .router-link-exact-active {
|
||||
@extend %nav-link-active;
|
||||
}
|
||||
|
||||
> a {
|
||||
// Adds before psudo element to style hover state
|
||||
@include mixins.before-pseudo;
|
||||
|
||||
// Adds vuetify states
|
||||
@include vuetifyStates.states($active: false);
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Vertical nav group
|
||||
.nav-group {
|
||||
// Reduce the size of icon if link/group is inside group
|
||||
.nav-group,
|
||||
.nav-link {
|
||||
.nav-item-icon {
|
||||
@extend %vertical-nav-items-nested-icon;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide icons after 2nd level
|
||||
& .nav-group {
|
||||
.nav-link,
|
||||
.nav-group {
|
||||
.nav-item-icon {
|
||||
@extend %vertical-nav-items-icon-after-2nd-level;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-group-arrow {
|
||||
flex-shrink: 0;
|
||||
transform-origin: center;
|
||||
transition: transform variables.$vertical-nav-nav-group-arrow-transition-duration variables.$vertical-nav-nav-group-arrow-transition-timing-function;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
// Rotate arrow icon if group is opened
|
||||
&.open {
|
||||
> .nav-group-label .nav-group-arrow {
|
||||
transform: rotateZ(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Nav group label
|
||||
> :first-child {
|
||||
// Adds before psudo element to style hover state
|
||||
@include mixins.before-pseudo;
|
||||
|
||||
// Adds vuetify states
|
||||
@include vuetifyStates.states($active: false);
|
||||
}
|
||||
|
||||
// Active & open states for nav group label
|
||||
&.active,
|
||||
&.open {
|
||||
> :first-child {
|
||||
@extend %vertical-nav-group-open-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// SECTION: Transitions
|
||||
.vertical-nav-section-title-enter-active,
|
||||
.vertical-nav-section-title-leave-active {
|
||||
transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.vertical-nav-section-title-enter-from,
|
||||
.vertical-nav-section-title-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(15px);
|
||||
|
||||
@include layoutsMixins.rtl {
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
}
|
||||
|
||||
.transition-slide-x-enter-active,
|
||||
.transition-slide-x-leave-active {
|
||||
transition: opacity 0.1s ease-in-out, transform 0.12s ease-in-out;
|
||||
}
|
||||
|
||||
.transition-slide-x-enter-from,
|
||||
.transition-slide-x-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-15px);
|
||||
|
||||
@include layoutsMixins.rtl {
|
||||
transform: translateX(15px);
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-nav-app-title-enter-active,
|
||||
.vertical-nav-app-title-leave-active {
|
||||
transition: opacity 0.1s ease-in-out, transform 0.12s ease-in-out;
|
||||
}
|
||||
|
||||
.vertical-nav-app-title-enter-from,
|
||||
.vertical-nav-app-title-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-15px);
|
||||
|
||||
@include layoutsMixins.rtl {
|
||||
transform: translateX(15px);
|
||||
}
|
||||
}
|
||||
|
||||
// !SECTION
|
||||
35
src/@core/scss/base/libs/_perfect-scrollbar.scss
Normal file
35
src/@core/scss/base/libs/_perfect-scrollbar.scss
Normal file
@@ -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;
|
||||
inset-inline-end: 0.0625rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.ps__thumb-x,
|
||||
.ps__thumb-y {
|
||||
background-color: rgb(var(--v-theme-perfect-scrollbar-thumb)) !important;
|
||||
}
|
||||
1
src/@core/scss/base/libs/vuetify/_index.scss
Normal file
1
src/@core/scss/base/libs/vuetify/_index.scss
Normal file
@@ -0,0 +1 @@
|
||||
@use "overrides";
|
||||
288
src/@core/scss/base/libs/vuetify/_overrides.scss
Normal file
288
src/@core/scss/base/libs/vuetify/_overrides.scss
Normal file
@@ -0,0 +1,288 @@
|
||||
@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: calc(var(--vh, 1vh) * 100);
|
||||
}
|
||||
|
||||
// 👉 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));
|
||||
}
|
||||
|
||||
.v-application,
|
||||
.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-selection-control--density-comfortable {
|
||||
&.v-checkbox-btn,
|
||||
&.v-radio,
|
||||
&.v-radio-btn {
|
||||
.v-selection-control__wrapper {
|
||||
margin-inline-start: -0.5625rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-selection-control--density-compact {
|
||||
&.v-radio,
|
||||
&.v-radio-btn,
|
||||
&.v-checkbox-btn {
|
||||
.v-selection-control__wrapper {
|
||||
margin-inline-start: -0.3125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-selection-control--density-default {
|
||||
&.v-checkbox-btn,
|
||||
&.v-radio,
|
||||
&.v-radio-btn {
|
||||
.v-selection-control__wrapper {
|
||||
margin-inline-start: -0.6875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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));
|
||||
}
|
||||
|
||||
// 👉 DataTable
|
||||
// 👉 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-data-table-footer {
|
||||
margin-block-start: 1rem;
|
||||
}
|
||||
|
||||
// 👉 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;
|
||||
}
|
||||
|
||||
// 👉 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
49
src/@core/scss/base/libs/vuetify/_variables.scss
Normal file
49
src/@core/scss/base/libs/vuetify/_variables.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
// 👉 Shadow opacities
|
||||
$shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
|
||||
$shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
|
||||
$shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
|
||||
|
||||
// 👉 Card transition properties
|
||||
$card-transition-property-custom: box-shadow, opacity;
|
||||
|
||||
@forward "vuetify/settings" with (
|
||||
// 👉 General settings
|
||||
$color-pack: false !default,
|
||||
|
||||
// 👉 Shadow opacity
|
||||
$shadow-key-umbra-opacity: $shadow-key-umbra-opacity-custom !default,
|
||||
$shadow-key-penumbra-opacity: $shadow-key-penumbra-opacity-custom !default,
|
||||
$shadow-key-ambient-opacity: $shadow-key-ambient-opacity-custom !default,
|
||||
|
||||
// 👉 Card
|
||||
$card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
|
||||
$card-elevation: 6 !default,
|
||||
$card-title-line-height: 1.6 !default,
|
||||
$card-actions-min-height: unset !default,
|
||||
$card-text-padding: 1.25rem !default,
|
||||
$card-item-padding: 1.25rem !default,
|
||||
$card-actions-padding: 0 12px 12px !default,
|
||||
$card-transition-property: $card-transition-property-custom !default,
|
||||
$card-subtitle-opacity: 1 !default,
|
||||
|
||||
// 👉 Expansion Panel
|
||||
$expansion-panel-active-title-min-height: 48px !default,
|
||||
|
||||
// 👉 List
|
||||
$list-item-icon-margin-end: 16px !default,
|
||||
$list-item-icon-margin-start: 16px !default,
|
||||
$list-item-subtitle-opacity: 1 !default,
|
||||
|
||||
// 👉 Tooltip
|
||||
$tooltip-background-color: rgba(59, 55, 68, 0.9) !default,
|
||||
$tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
|
||||
$tooltip-font-size: 0.75rem !default,
|
||||
|
||||
$button-icon-density: ("default": 2, "comfortable": 0, "compact": -1 ) !default,
|
||||
|
||||
// 👉 VTimeline
|
||||
$timeline-dot-size: 34px !default,
|
||||
|
||||
// 👉 VOverlay
|
||||
$overlay-opacity: 1 !default,
|
||||
);
|
||||
@@ -0,0 +1,46 @@
|
||||
@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-end: 0;
|
||||
inset-inline-start: 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 */
|
||||
}
|
||||
}
|
||||
3
src/@core/scss/base/placeholders/_default-layout.scss
Normal file
3
src/@core/scss/base/placeholders/_default-layout.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
%layout-navbar {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
5
src/@core/scss/base/placeholders/_index.scss
Normal file
5
src/@core/scss/base/placeholders/_index.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
@forward "vertical-nav";
|
||||
@forward "nav";
|
||||
@forward "default-layout";
|
||||
@forward "default-layout-vertical-nav";
|
||||
@forward "misc";
|
||||
7
src/@core/scss/base/placeholders/_misc.scss
Normal file
7
src/@core/scss/base/placeholders/_misc.scss
Normal file
@@ -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);
|
||||
}
|
||||
34
src/@core/scss/base/placeholders/_nav.scss
Normal file
34
src/@core/scss/base/placeholders/_nav.scss
Normal file
@@ -0,0 +1,34 @@
|
||||
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
||||
@use "@core/scss/base/mixins";
|
||||
|
||||
// ℹ️ This is common style that needs to be applied to both navs
|
||||
%nav {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
|
||||
.nav-item-title {
|
||||
letter-spacing: 0.15px;
|
||||
}
|
||||
|
||||
.nav-section-title {
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Active nav link styles for horizontal & vertical nav
|
||||
|
||||
For horizontal nav it will be only applied to top level nav items
|
||||
For vertical nav it will be only applied to nav links (not nav groups)
|
||||
*/
|
||||
%nav-link-active {
|
||||
background-color: rgb(var(--v-theme-primary));
|
||||
color: rgb(var(--v-theme-on-primary));
|
||||
|
||||
@include mixins.elevation(3);
|
||||
}
|
||||
|
||||
%nav-link {
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
81
src/@core/scss/base/placeholders/_vertical-nav.scss
Normal file
81
src/@core/scss/base/placeholders/_vertical-nav.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
@use "@core/scss/base/mixins";
|
||||
@use "@configured-variables" as variables;
|
||||
@use "vuetify/lib/styles/tools/states" as vuetifyStates;
|
||||
|
||||
%nav-header-action {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
// Nav items styles (including section title)
|
||||
%vertical-nav-item {
|
||||
margin-block: 0;
|
||||
margin-inline: variables.$vertical-nav-horizontal-spacing;
|
||||
padding-block: 0;
|
||||
padding-inline: variables.$vertical-nav-horizontal-padding;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// This is same as `%vertical-nav-item` except section title is excluded
|
||||
%vertical-nav-item-interactive {
|
||||
border-radius: 0.4rem;
|
||||
block-size: 2.75rem;
|
||||
|
||||
/*
|
||||
ℹ️ We will use `margin-block-end` instead of `margin-block` to give more space for shadow to appear.
|
||||
With `margin-block`, due to small space (space gets divided between top & bottom) shadow cuts
|
||||
*/
|
||||
margin-block-end: 0.375rem;
|
||||
}
|
||||
|
||||
// Common styles for nav item icon styles
|
||||
// ℹ️ Nav group's children icon styles are not here (Adjusts height, width & margin)
|
||||
%vertical-nav-items-icon {
|
||||
flex-shrink: 0;
|
||||
font-size: variables.$vertical-nav-items-icon-size;
|
||||
margin-inline-end: variables.$vertical-nav-items-icon-margin-inline-end;
|
||||
}
|
||||
|
||||
// ℹ️ Icon styling for icon nested inside another nav item (2nd level)
|
||||
%vertical-nav-items-nested-icon {
|
||||
/*
|
||||
ℹ️ `margin-inline` will be (normal icon font-size - small icon font-size) / 2
|
||||
(1.5rem - 0.9rem) / 2 => 0.6rem / 2 => 0.3rem
|
||||
*/
|
||||
$vertical-nav-items-nested-icon-margin-inline: calc((variables.$vertical-nav-items-icon-size - variables.$vertical-nav-items-nested-icon-size) / 2);
|
||||
|
||||
font-size: variables.$vertical-nav-items-nested-icon-size;
|
||||
margin-inline-end: $vertical-nav-items-nested-icon-margin-inline + variables.$vertical-nav-items-icon-margin-inline-end;
|
||||
margin-inline-start: $vertical-nav-items-nested-icon-margin-inline;
|
||||
}
|
||||
|
||||
%vertical-nav-items-icon-after-2nd-level {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// Open & Active nav group styles
|
||||
%vertical-nav-group-open-active {
|
||||
@include mixins.selected-states("&::before");
|
||||
}
|
||||
|
||||
// Section title
|
||||
%vertical-nav-section-title {
|
||||
// ℹ️ Setting height will prevent jerking when text & icon is toggled
|
||||
block-size: 1.5rem;
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Vertical nav item badge styles
|
||||
%vertical-nav-item-badge {
|
||||
display: inline-block;
|
||||
border-radius: 1.5rem;
|
||||
font-size: 0.8em;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
padding-block: 0.25em;
|
||||
padding-inline: 0.55em;
|
||||
text-align: center;
|
||||
vertical-align: baseline;
|
||||
white-space: nowrap;
|
||||
}
|
||||
33
src/@core/scss/index.scss
Normal file
33
src/@core/scss/index.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
@use "sass:map";
|
||||
|
||||
// Layout
|
||||
@use "vertical-nav";
|
||||
@use "default-layout";
|
||||
|
||||
// Components
|
||||
@use "components";
|
||||
|
||||
// Utilities
|
||||
@use "utilities";
|
||||
|
||||
// Misc
|
||||
@use "misc";
|
||||
|
||||
// Dark
|
||||
@use "dark";
|
||||
|
||||
a {
|
||||
color: rgb(var(--v-theme-primary));
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Vuetify 3 don't provide margin bottom style like vuetify 2
|
||||
p {
|
||||
margin-block-end: 1rem;
|
||||
}
|
||||
|
||||
// Iconify icon size
|
||||
svg.iconify {
|
||||
block-size: 1em;
|
||||
inline-size: 1em;
|
||||
}
|
||||
87
src/@core/scss/libs/apex-chart.scss
Normal file
87
src/@core/scss/libs/apex-chart.scss
Normal file
@@ -0,0 +1,87 @@
|
||||
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
||||
|
||||
.apexcharts-canvas {
|
||||
&line[stroke="transparent"] {
|
||||
display: "none";
|
||||
}
|
||||
|
||||
.apexcharts-tooltip {
|
||||
@include mixins_elevation.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: 600;
|
||||
}
|
||||
|
||||
&.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-text,
|
||||
.apexcharts-tooltip-text,
|
||||
.apexcharts-datalabel-label,
|
||||
.apexcharts-datalabel,
|
||||
.apexcharts-xaxistooltip-text,
|
||||
.apexcharts-yaxistooltip-text,
|
||||
.apexcharts-legend-text {
|
||||
font-family: inherit !important;
|
||||
}
|
||||
|
||||
.apexcharts-pie-label {
|
||||
fill: white;
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.apexcharts-marker {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.apexcharts-legend-marker {
|
||||
margin-inline-end: 0.3875rem;
|
||||
}
|
||||
}
|
||||
167
src/@core/scss/libs/vuetify/_overrides.scss
Normal file
167
src/@core/scss/libs/vuetify/_overrides.scss
Normal file
@@ -0,0 +1,167 @@
|
||||
@use "@core/scss/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: calc(var(--vh, 1vh) * 100);
|
||||
}
|
||||
|
||||
// 👉 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));
|
||||
}
|
||||
|
||||
.v-application,
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 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-selection-control--density-comfortable {
|
||||
&.v-checkbox-btn,
|
||||
&.v-radio,
|
||||
&.v-radio-btn {
|
||||
margin-inline-start: -0.5625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.v-selection-control--density-compact {
|
||||
&.v-radio,
|
||||
&.v-radio-btn,
|
||||
&.v-checkbox-btn {
|
||||
margin-inline-start: -0.3125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.v-selection-control--density-default {
|
||||
&.v-checkbox-btn,
|
||||
&.v-radio,
|
||||
&.v-radio-btn {
|
||||
margin-inline-start: -0.6875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
&:not(:last-child) {
|
||||
padding-block-end: var(--v-card-list-gap) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Table
|
||||
.v-table {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
255
src/@core/scss/libs/vuetify/_variables.scss
Normal file
255
src/@core/scss/libs/vuetify/_variables.scss
Normal file
@@ -0,0 +1,255 @@
|
||||
$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);
|
||||
$font-family-custom: inter, sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
|
||||
// 👉 Card transition properties
|
||||
$card-transition-property-custom: box-shadow, opacity;
|
||||
|
||||
@forward "vuetify/settings" with (
|
||||
// 👉 General settings
|
||||
$color-pack: false !default,
|
||||
$body-font-family: $font-family-custom !default,
|
||||
$border-radius-root: 6px !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,
|
||||
|
||||
$shadow-key-umbra: (
|
||||
0: (0 0 0 0 var(--v-shadow-key-umbra-opacity)),
|
||||
1: (0 2px 1px -1px var(--v-shadow-key-umbra-opacity)),
|
||||
2: (0 3px 1px -2px var(--v-shadow-key-umbra-opacity)),
|
||||
|
||||
// ℹ️ Modified
|
||||
3: (0 4px 14px -4px var(--v-shadow-key-umbra-opacity)),
|
||||
|
||||
4: (0 2px 4px -1px var(--v-shadow-key-umbra-opacity)),
|
||||
5: (0 3px 5px -1px var(--v-shadow-key-umbra-opacity)),
|
||||
|
||||
// ℹ️ Modified
|
||||
6: (0 4px 5px -2px var(--v-shadow-key-umbra-opacity)),
|
||||
|
||||
7: (0 4px 5px -2px var(--v-shadow-key-umbra-opacity)),
|
||||
8: (0 5px 5px -3px var(--v-shadow-key-umbra-opacity)),
|
||||
9: (0 5px 6px -3px var(--v-shadow-key-umbra-opacity)),
|
||||
10: (0 6px 6px -3px var(--v-shadow-key-umbra-opacity)),
|
||||
11: (0 6px 7px -4px var(--v-shadow-key-umbra-opacity)),
|
||||
12: (0 7px 8px -4px var(--v-shadow-key-umbra-opacity)),
|
||||
13: (0 7px 8px -4px var(--v-shadow-key-umbra-opacity)),
|
||||
14: (0 7px 9px -4px var(--v-shadow-key-umbra-opacity)),
|
||||
15: (0 8px 9px -5px var(--v-shadow-key-umbra-opacity)),
|
||||
16: (0 8px 10px -5px var(--v-shadow-key-umbra-opacity)),
|
||||
17: (0 8px 11px -5px var(--v-shadow-key-umbra-opacity)),
|
||||
18: (0 9px 11px -5px var(--v-shadow-key-umbra-opacity)),
|
||||
19: (0 9px 12px -6px var(--v-shadow-key-umbra-opacity)),
|
||||
20: (0 10px 13px -6px var(--v-shadow-key-umbra-opacity)),
|
||||
21: (0 10px 13px -6px var(--v-shadow-key-umbra-opacity)),
|
||||
22: (0 10px 14px -6px var(--v-shadow-key-umbra-opacity)),
|
||||
23: (0 11px 14px -7px var(--v-shadow-key-umbra-opacity)),
|
||||
24: (0 11px 15px -7px var(--v-shadow-key-umbra-opacity))
|
||||
) !default,
|
||||
|
||||
$shadow-key-penumbra: (
|
||||
0: (0 0 0 0 $shadow-key-penumbra-opacity-custom),
|
||||
1: (0 1px 1px 0 $shadow-key-penumbra-opacity-custom),
|
||||
2: (0 2px 2px 0 $shadow-key-penumbra-opacity-custom),
|
||||
|
||||
// ℹ️ Modified
|
||||
3: (0 4px 8px -4px $shadow-key-penumbra-opacity-custom),
|
||||
|
||||
4: (0 4px 5px 0 $shadow-key-penumbra-opacity-custom),
|
||||
5: (0 5px 8px 0 $shadow-key-penumbra-opacity-custom),
|
||||
|
||||
// ℹ️ Modified
|
||||
6: (0 2px 10px 1px $shadow-key-penumbra-opacity-custom),
|
||||
|
||||
7: (0 7px 10px 1px $shadow-key-penumbra-opacity-custom),
|
||||
8: (0 8px 10px 1px $shadow-key-penumbra-opacity-custom),
|
||||
9: (0 9px 12px 1px $shadow-key-penumbra-opacity-custom),
|
||||
10: (0 10px 14px 1px $shadow-key-penumbra-opacity-custom),
|
||||
11: (0 11px 15px 1px $shadow-key-penumbra-opacity-custom),
|
||||
12: (0 12px 17px 2px $shadow-key-penumbra-opacity-custom),
|
||||
13: (0 13px 19px 2px $shadow-key-penumbra-opacity-custom),
|
||||
14: (0 14px 21px 2px $shadow-key-penumbra-opacity-custom),
|
||||
15: (0 15px 22px 2px $shadow-key-penumbra-opacity-custom),
|
||||
16: (0 16px 24px 2px $shadow-key-penumbra-opacity-custom),
|
||||
17: (0 17px 26px 2px $shadow-key-penumbra-opacity-custom),
|
||||
18: (0 18px 28px 2px $shadow-key-penumbra-opacity-custom),
|
||||
19: (0 19px 29px 2px $shadow-key-penumbra-opacity-custom),
|
||||
20: (0 20px 31px 3px $shadow-key-penumbra-opacity-custom),
|
||||
21: (0 21px 33px 3px $shadow-key-penumbra-opacity-custom),
|
||||
22: (0 22px 35px 3px $shadow-key-penumbra-opacity-custom),
|
||||
23: (0 23px 36px 3px $shadow-key-penumbra-opacity-custom),
|
||||
24: (0 24px 38px 3px $shadow-key-penumbra-opacity-custom)
|
||||
) !default,
|
||||
|
||||
$shadow-key-ambient: (
|
||||
0: (0 0 0 0 $shadow-key-ambient-opacity-custom),
|
||||
1: (0 1px 3px 0 $shadow-key-ambient-opacity-custom),
|
||||
2: (0 1px 5px 0 $shadow-key-ambient-opacity-custom),
|
||||
|
||||
// ℹ️ Modified
|
||||
3: (0 4px 8px -4px $shadow-key-ambient-opacity-custom),
|
||||
|
||||
4: (0 1px 10px 0 $shadow-key-ambient-opacity-custom),
|
||||
5: (0 1px 14px 0 $shadow-key-ambient-opacity-custom),
|
||||
|
||||
// ℹ️ Modified
|
||||
6: (0 2px 16px 1px $shadow-key-ambient-opacity-custom),
|
||||
|
||||
7: (0 2px 16px 1px $shadow-key-ambient-opacity-custom),
|
||||
8: (0 3px 14px 2px $shadow-key-ambient-opacity-custom),
|
||||
9: (0 3px 16px 2px $shadow-key-ambient-opacity-custom),
|
||||
10: (0 4px 18px 3px $shadow-key-ambient-opacity-custom),
|
||||
11: (0 4px 20px 3px $shadow-key-ambient-opacity-custom),
|
||||
12: (0 5px 22px 4px $shadow-key-ambient-opacity-custom),
|
||||
13: (0 5px 24px 4px $shadow-key-ambient-opacity-custom),
|
||||
14: (0 5px 26px 4px $shadow-key-ambient-opacity-custom),
|
||||
15: (0 6px 28px 5px $shadow-key-ambient-opacity-custom),
|
||||
16: (0 6px 30px 5px $shadow-key-ambient-opacity-custom),
|
||||
17: (0 6px 32px 5px $shadow-key-ambient-opacity-custom),
|
||||
18: (0 7px 34px 6px $shadow-key-ambient-opacity-custom),
|
||||
19: (0 7px 36px 6px $shadow-key-ambient-opacity-custom),
|
||||
20: (0 8px 38px 7px $shadow-key-ambient-opacity-custom),
|
||||
21: (0 8px 40px 7px $shadow-key-ambient-opacity-custom),
|
||||
22: (0 8px 42px 7px $shadow-key-ambient-opacity-custom),
|
||||
23: (0 9px 44px 8px $shadow-key-ambient-opacity-custom),
|
||||
24: (0 9px 46px 8px $shadow-key-ambient-opacity-custom)
|
||||
) !default,
|
||||
|
||||
// 👉 Typography
|
||||
$typography: (
|
||||
"h1": (
|
||||
"weight": 500,
|
||||
"line-height": 7rem,
|
||||
"letter-spacing": -0.0938rem
|
||||
),
|
||||
"h2": (
|
||||
"weight": 500,
|
||||
"line-height": 4.5rem,
|
||||
"letter-spacing": -0.0313rem
|
||||
),
|
||||
"h3": (
|
||||
"weight": 500,
|
||||
"line-height": 3.5rem
|
||||
),
|
||||
"h4": (
|
||||
"weight": 500,
|
||||
"line-height": 2.625rem,
|
||||
"letter-spacing": 0.0156rem
|
||||
),
|
||||
"h5": (
|
||||
"weight": 500,
|
||||
"line-height": 2rem
|
||||
),
|
||||
"h6": (
|
||||
"letter-spacing": 0.0094rem
|
||||
),
|
||||
"subtitle-1": (
|
||||
"letter-spacing": 0.0094rem
|
||||
),
|
||||
"subtitle-2": (
|
||||
"line-height": 1.375rem,
|
||||
"letter-spacing": 0.0063rem,
|
||||
),
|
||||
"body-1": (
|
||||
"letter-spacing": 0.0094rem,
|
||||
),
|
||||
"body-2": (
|
||||
"letter-spacing": 0.0094rem,
|
||||
),
|
||||
"caption": (
|
||||
"letter-spacing": 0.025rem,
|
||||
),
|
||||
"overline": (
|
||||
"weight": 400,
|
||||
"line-height": 1.125rem,
|
||||
"letter-spacing": 0.0625rem,
|
||||
)
|
||||
) !default,
|
||||
|
||||
// 👉 States
|
||||
$states: ("activated": 0.08) !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: 20px !default,
|
||||
$card-item-padding: 15px 20px !default,
|
||||
$card-actions-padding: 0 12px 12px !default,
|
||||
$card-title-letter-spacing: 0.0094rem !default,
|
||||
$card-subtitle-opacity: 1 !default,
|
||||
$card-transition-property: $card-transition-property-custom !default,
|
||||
|
||||
// 👉 Navigation Drawer
|
||||
$navigation-drawer-color: rgba(var(--v-theme-on-surface), var(--v-high-medium-opacity)) !default,
|
||||
|
||||
// 👉 Table
|
||||
$table-color: rgba(var(--v-theme-on-surface), var(--v-high-medium-opacity)) !default,
|
||||
|
||||
// 👉 Tooltip
|
||||
$tooltip-background-color:#212121 !default,
|
||||
$tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
|
||||
$tooltip-font-size: 0.75rem !default,
|
||||
$tooltip-border-radius: 4px !default,
|
||||
$tooltip-padding: 4px 8px !default,
|
||||
|
||||
// 👉 Alert
|
||||
$alert-title-font-size: 1rem !default,
|
||||
$alert-border-radius: 5px !default,
|
||||
$alert-title-letter-spacing: 0.15px !default,
|
||||
|
||||
// 👉 Badge
|
||||
$badge-border-color:rgb(var(--v-theme-surface)) !default,
|
||||
|
||||
// 👉 Button
|
||||
$button-height: 38px !default,
|
||||
$button-elevation: ("default": 3, "hover": 4, "active": 8) !default,
|
||||
$button-border-radius: 5px !default,
|
||||
$button-padding-ratio: 1.7 !default,
|
||||
$button-text-letter-spacing: 0.025rem !default,
|
||||
|
||||
// 👉 Dialog
|
||||
$dialog-card-header-padding: 20px !default,
|
||||
$dialog-card-header-text-padding-top: 0 !default,
|
||||
$dialog-card-text-padding: 20px !default,
|
||||
|
||||
// 👉 Chip
|
||||
$chip-label-border-radius: 4px !default,
|
||||
|
||||
// 👉 Expansion panel
|
||||
$expansion-panel-title-padding: 16px 20px !default,
|
||||
$expansion-panel-title-font-size: 1rem !default,
|
||||
$expansion-panel-disabled-overlay: 0 !default,
|
||||
$expansion-panel-active-title-min-height: 51px !default,
|
||||
$expansion-panel-title-min-height: 51px !default,
|
||||
$expansion-panel-text-padding: 0 20px 20px !default,
|
||||
|
||||
// 👉 Menu
|
||||
$menu-content-border-radius: 5px !default,
|
||||
|
||||
// 👉 List
|
||||
$list-subheader-text-opacity: 1 !default,
|
||||
|
||||
// 👉 Snackbar
|
||||
$snackbar-background:#212121 !default,
|
||||
$snackbar-border-radius: 4px !default,
|
||||
$snackbar-color: rgb(var(--v-theme-on-primary)) !default,
|
||||
|
||||
// 👉 Tabs
|
||||
$tabs-height: 40px !default,
|
||||
|
||||
// 👉 Timeline
|
||||
$timeline-dot-size: 34px !default,
|
||||
$timeline-dot-divider-background: transparent !default,
|
||||
|
||||
// 👉 Overlay
|
||||
$overlay-opacity: 0.5 !default,
|
||||
|
||||
// 👉 Navigation Drawer
|
||||
$navigation-drawer-scrim-opacity:0.5 !default,
|
||||
);
|
||||
1
src/@core/scss/libs/vuetify/index.scss
Normal file
1
src/@core/scss/libs/vuetify/index.scss
Normal file
@@ -0,0 +1 @@
|
||||
@use "overrides";
|
||||
23
src/@core/scss/pages/misc.scss
Normal file
23
src/@core/scss/pages/misc.scss
Normal file
@@ -0,0 +1,23 @@
|
||||
.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-footer-img {
|
||||
position: absolute;
|
||||
inline-size: 100%;
|
||||
inset-block-end: 0;
|
||||
}
|
||||
|
||||
.misc-avatar {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.misc-footer-tree {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
44
src/@core/scss/pages/page-auth.scss
Normal file
44
src/@core/scss/pages/page-auth.scss
Normal file
@@ -0,0 +1,44 @@
|
||||
.auth-wrapper {
|
||||
min-block-size: calc(var(--vh, 1vh) * 100);
|
||||
}
|
||||
|
||||
.auth-footer-mask {
|
||||
position: absolute;
|
||||
inset-block-end: 0;
|
||||
min-inline-size: 100%;
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
.auth-footer-start-tree,
|
||||
.auth-footer-end-tree {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.auth-footer-start-tree {
|
||||
inset-block-end: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
.auth-footer-end-tree {
|
||||
inset-block-end: 0;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
.auth-illustration {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.auth-logo {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
inset-block-start: 2rem;
|
||||
inset-inline-start: 2.3rem;
|
||||
}
|
||||
|
||||
.auth-bg {
|
||||
background-color: rgb(var(--v-theme-surface));
|
||||
}
|
||||
3
src/@core/scss/placeholders/_default-layout.scss
Normal file
3
src/@core/scss/placeholders/_default-layout.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
%layout-navbar {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
3
src/@core/scss/placeholders/_index.scss
Normal file
3
src/@core/scss/placeholders/_index.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@forward "vertical-nav";
|
||||
@forward "nav";
|
||||
@forward "default-layout";
|
||||
33
src/@core/scss/placeholders/_nav.scss
Normal file
33
src/@core/scss/placeholders/_nav.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
||||
|
||||
// ℹ️ 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: linear-gradient(270deg, rgb(var(--v-theme-primary)) 0%, white 300%);
|
||||
color: rgb(var(--v-theme-on-primary));
|
||||
|
||||
@include mixins_elevation.elevation(3);
|
||||
}
|
||||
|
||||
%nav-link {
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
88
src/@core/scss/placeholders/_vertical-nav.scss
Normal file
88
src/@core/scss/placeholders/_vertical-nav.scss
Normal file
@@ -0,0 +1,88 @@
|
||||
@use "@core/scss/mixins";
|
||||
@use "@configured-variables" as variables;
|
||||
@use "vuetify/lib/styles/tools/states" as vuetifyStates;
|
||||
@use "@core/scss/utils";
|
||||
|
||||
// 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 {
|
||||
block-size: 2.625rem;
|
||||
border-end-end-radius: 3.125rem;
|
||||
border-start-end-radius: 3.125rem;
|
||||
|
||||
/*
|
||||
ℹ️ 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;
|
||||
}
|
||||
|
||||
// Section title
|
||||
%vertical-nav-section-title {
|
||||
// ℹ️ Setting height will prevent jerking when text & icon is toggled
|
||||
block-size: 1.5rem;
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||
font-size: 0.75rem;
|
||||
padding-inline: variables.$vertical-nav-horizontal-padding;
|
||||
text-transform: uppercase;
|
||||
|
||||
/*
|
||||
ℹ️ We will use this to add gap between divider and text.
|
||||
Moreover, we will use this to adjust the `flex-basis` property of left divider
|
||||
*/
|
||||
$divider-gap: 0.625rem;
|
||||
|
||||
// Thanks: https://stackoverflow.com/a/62359101/10796681
|
||||
.title-text {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
column-gap: $divider-gap;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::after {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&::before {
|
||||
flex: 0 1 calc(variables.$vertical-nav-horizontal-padding-start - $divider-gap);
|
||||
margin-inline-start: -#{variables.$vertical-nav-horizontal-padding-start};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
198
src/@core/scss/template/_components.scss
Normal file
198
src/@core/scss/template/_components.scss
Normal file
@@ -0,0 +1,198 @@
|
||||
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
||||
@use "@configured-variables" as variables;
|
||||
@use "mixins";
|
||||
@use "@core/scss/base/mixins" as mixins_base;
|
||||
|
||||
// 👉 Alert
|
||||
.v-alert {
|
||||
.v-alert__close {
|
||||
.v-icon {
|
||||
block-size: 20px !important;
|
||||
font-size: 20px !important;
|
||||
inline-size: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.v-alert--prominent) .v-alert__prepend {
|
||||
.v-icon {
|
||||
block-size: 1.375rem !important;
|
||||
font-size: 1.375rem !important;
|
||||
inline-size: 1.375rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.v-alert-title {
|
||||
line-height: 1.5rem;
|
||||
margin-block-end: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Avatar font-size
|
||||
.v-avatar {
|
||||
@include mixins.avatar-font-sizes($map: variables.$avatar-font-sizes);
|
||||
}
|
||||
|
||||
// 👉 Button
|
||||
.v-btn {
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
&:not(.v-btn--icon) .v-icon {
|
||||
--v-icon-size-multiplier: 0.9525 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Chip
|
||||
.v-chip.v-chip--size-default .v-avatar {
|
||||
--v-avatar-height: 24px;
|
||||
}
|
||||
|
||||
.v-chip.v-chip--density-comfortable {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// 👉 Expansion Panel
|
||||
.v-expansion-panel {
|
||||
.v-expansion-panel-text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Tooltip
|
||||
.v-tooltip > .v-overlay__content {
|
||||
font-weight: 500;
|
||||
line-height: 0.875rem;
|
||||
}
|
||||
|
||||
// 👉 List
|
||||
|
||||
// 👉 Tab with pill support
|
||||
.v-tabs.v-tabs-pill {
|
||||
.v-tab.v-btn {
|
||||
border-radius: 6px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Timeline added box shadow
|
||||
.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}));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Expansion panels
|
||||
.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
|
||||
|
||||
.v-expansion-panels:not(.v-expansion-panels--variant-accordion) {
|
||||
.v-expansion-panel.v-expansion-panel--active {
|
||||
.v-expansion-panel__shadow {
|
||||
@include mixins_elevation.elevation(3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Slider
|
||||
.v-slider-thumb {
|
||||
.v-slider-thumb__label {
|
||||
background: rgb(117, 117, 117);
|
||||
color: rgb(var(--v-theme-on-primary));
|
||||
|
||||
&::before {
|
||||
color: rgb(117, 117, 117);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Switch
|
||||
.v-switch {
|
||||
.v-selection-control:not(.v-selection-control--dirty) .v-switch__thumb {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Table
|
||||
.v-table--density-default > .v-table__wrapper > table > tbody > tr > td,
|
||||
.v-table--density-default > .v-table__wrapper > table > thead > tr > td,
|
||||
.v-table--density-default > .v-table__wrapper > table > tfoot > tr > td {
|
||||
block-size: 50px !important;
|
||||
}
|
||||
|
||||
.v-table {
|
||||
--v-table-header-height: 54px !important;
|
||||
|
||||
th {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
|
||||
font-size: 0.75rem;
|
||||
|
||||
.v-data-table-header__content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.v-selection-control {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.v-data-table {
|
||||
th {
|
||||
background: rgb(var(--v-table-header-background)) !important;
|
||||
}
|
||||
|
||||
.v-data-table-footer {
|
||||
margin-block-start: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Pagination
|
||||
.v-pagination {
|
||||
.v-btn {
|
||||
border-radius: 4px;
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 SnackBar
|
||||
.v-snackbar--variant-elevated {
|
||||
@include mixins_base.elevation(6);
|
||||
}
|
||||
12
src/@core/scss/template/_mixins.scss
Normal file
12
src/@core/scss/template/_mixins.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
@use "vuetify/lib/styles/settings" as vuetify_settings;
|
||||
|
||||
@mixin avatar-font-sizes($map: $avatar-sizes) {
|
||||
@each $sizeName, $multiplier in vuetify_settings.$size-scales {
|
||||
/* stylelint-disable-next-line scss/no-global-function-names */
|
||||
$size: map-get($map, $sizeName);
|
||||
|
||||
&.v-avatar--size-#{$sizeName} {
|
||||
font-size: #{$size}px;
|
||||
}
|
||||
}
|
||||
}
|
||||
25
src/@core/scss/template/_utilities.scss
Normal file
25
src/@core/scss/template/_utilities.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
.bg-var-theme-background {
|
||||
background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity)) !important;
|
||||
}
|
||||
|
||||
// 👉 Pagination small-select dropdown for table
|
||||
// TODO: remove this class after vuetify datatable implememtation
|
||||
|
||||
.per-page-select {
|
||||
margin-block: auto;
|
||||
|
||||
.v-field__input {
|
||||
align-items: center;
|
||||
padding: 2px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.v-field__append-inner {
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
|
||||
.v-icon {
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
41
src/@core/scss/template/_utils.scss
Normal file
41
src/@core/scss/template/_utils.scss
Normal file
@@ -0,0 +1,41 @@
|
||||
@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
|
||||
);
|
||||
} @else {
|
||||
@return $var;
|
||||
}
|
||||
}
|
||||
33
src/@core/scss/template/_variables.scss
Normal file
33
src/@core/scss/template/_variables.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
@use "sass:map";
|
||||
@use "utils";
|
||||
|
||||
$vertical-nav-horizontal-padding-custom: 1.375rem 1rem;
|
||||
|
||||
// ℹ️ 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-custom) !default;
|
||||
$vertical-nav-items-icon-margin-inline-end: 0.625rem !default;
|
||||
|
||||
@forward "@core/scss/base/variables" with (
|
||||
$layout-vertical-nav-collapsed-width: 68px !default,
|
||||
// ℹ️ This is used to keep consistency between nav items and nav header left & right margin
|
||||
// This is used by nav items & nav header
|
||||
$vertical-nav-horizontal-spacing: 0 1.125rem !default,
|
||||
$vertical-nav-horizontal-padding: $vertical-nav-horizontal-padding-custom !default,
|
||||
// Vertical nav header padding
|
||||
$vertical-nav-header-padding: 1rem 0.25rem 1rem $vertical-nav-horizontal-padding-start !default,
|
||||
);
|
||||
|
||||
// 👉 Custom Variables
|
||||
$avatar-font-sizes: (
|
||||
"x-small":12,
|
||||
"small":14,
|
||||
"default":18,
|
||||
"large":20,
|
||||
"x-large":24
|
||||
) !default;
|
||||
8
src/@core/scss/template/index.scss
Normal file
8
src/@core/scss/template/index.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
@use "sass:map";
|
||||
@use "@core/scss/base";
|
||||
|
||||
// Components
|
||||
@use "components";
|
||||
|
||||
// Utilities
|
||||
@use "utilities";
|
||||
100
src/@core/scss/template/libs/apex-chart.scss
Normal file
100
src/@core/scss/template/libs/apex-chart.scss
Normal file
@@ -0,0 +1,100 @@
|
||||
@use "@styles/variables/_vuetify.scss" as vuetify;
|
||||
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
||||
@use "@layouts/styles/mixins" as layoutsMixins;
|
||||
@use "@core/scss/base/mixins";
|
||||
|
||||
.v-application .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;
|
||||
}
|
||||
|
||||
&.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-legend-marker {
|
||||
margin-inline-end: 0.3875rem !important;
|
||||
|
||||
@include layoutsMixins.rtl {
|
||||
margin-inline-end: 0.75rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
260
src/@core/scss/template/libs/full-calendar.scss
Normal file
260
src/@core/scss/template/libs/full-calendar.scss
Normal file
@@ -0,0 +1,260 @@
|
||||
@use "@core/scss/base/mixins";
|
||||
|
||||
.v-application .fc {
|
||||
--fc-today-bg-color: rgba(var(--v-theme-on-surface), 0.04);
|
||||
--fc-border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
--fc-neutral-bg-color: rgb(var(--v-theme-background));
|
||||
--fc-list-event-hover-bg-color: rgba(var(--v-theme-on-surface), 0.02);
|
||||
--fc-page-bg-color: rgb(var(--v-theme-surface));
|
||||
--fc-event-border-color: currentcolor;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.fc-timegrid-divider {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.fc-col-header-cell-cushion {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.fc-toolbar .fc-toolbar-title {
|
||||
margin-inline-start: 0.25rem;
|
||||
}
|
||||
|
||||
.fc-event-time {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.fc-timegrid-event {
|
||||
.fc-event-title {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-prev-button {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
.fc-prev-button,
|
||||
.fc-next-button {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.fc-col-header .fc-col-header-cell .fc-col-header-cell-cushion {
|
||||
padding: 0.5rem;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
.fc-timegrid .fc-timegrid-slots .fc-timegrid-slot {
|
||||
block-size: 3rem;
|
||||
}
|
||||
|
||||
// Removed double border on left in list view
|
||||
.fc-list {
|
||||
border-inline-start: none;
|
||||
font-size: 0.875rem;
|
||||
|
||||
.fc-list-day-cushion.fc-cell-shaded {
|
||||
background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.fc-list-event-time,
|
||||
.fc-list-event-title {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||
}
|
||||
|
||||
.fc-list-day .fc-list-day-text,
|
||||
.fc-list-day .fc-list-day-side-text {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-timegrid-axis {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||
font-size: 0.75rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.fc-timegrid-slot-label-frame {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.fc-header-toolbar {
|
||||
flex-wrap: wrap;
|
||||
margin: 1.25rem;
|
||||
column-gap: 0.5rem;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.fc-toolbar-chunk {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.fc-button-group {
|
||||
.fc-button-primary {
|
||||
&,
|
||||
&:hover,
|
||||
&:not(.disabled):active {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.fc-button-group {
|
||||
border: 0.0625rem solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-radius: 0.375rem;
|
||||
|
||||
.fc-button {
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.0187rem;
|
||||
padding-inline: 1rem;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-inline-end: 0.0625rem solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
|
||||
&.fc-button-active {
|
||||
background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity));
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fc-toolbar-title {
|
||||
display: inline-block;
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.fc-scrollgrid-section {
|
||||
th {
|
||||
border-inline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Calendar content container
|
||||
.fc-view-harness {
|
||||
min-block-size: 40.625rem;
|
||||
}
|
||||
|
||||
.fc-event {
|
||||
border-color: transparent;
|
||||
margin-block-end: 0.3rem;
|
||||
padding-block: 0.1875rem;
|
||||
padding-inline: 0.3125rem;
|
||||
}
|
||||
|
||||
.fc-event-main {
|
||||
color: inherit;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
padding-inline: 0.25rem;
|
||||
}
|
||||
|
||||
tbody[role="rowgroup"] {
|
||||
> tr > td[role="presentation"] {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fc-scrollgrid {
|
||||
border-inline-start: none;
|
||||
}
|
||||
|
||||
.fc-daygrid-day {
|
||||
padding: 0.3125rem;
|
||||
}
|
||||
|
||||
.fc-daygrid-day-number {
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 0.75rem;
|
||||
}
|
||||
|
||||
.fc-list-event-dot {
|
||||
color: inherit;
|
||||
|
||||
--fc-event-border-color: currentcolor;
|
||||
}
|
||||
|
||||
.fc-list-event {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.fc-popover {
|
||||
@include mixins.elevation(3);
|
||||
|
||||
border-radius: 6px;
|
||||
|
||||
.fc-popover-header,
|
||||
.fc-popover-body {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.fc-popover-title {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 sidebar toggler
|
||||
.fc-toolbar-chunk {
|
||||
.fc-button-group {
|
||||
align-items: center;
|
||||
|
||||
.fc-button .fc-icon {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
// ℹ️ Below two `background-image` styles contains static color due to browser limitation of not parsing the css var inside CSS url()
|
||||
.fc-drawerToggler-button {
|
||||
display: none;
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(94,86,105,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");
|
||||
background-position: 50%;
|
||||
background-repeat: no-repeat;
|
||||
block-size: 1.5625rem;
|
||||
font-size: 0;
|
||||
inline-size: 1.5625rem;
|
||||
margin-inline-end: 0.25rem;
|
||||
|
||||
@media (max-width: 1264px) {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.v-theme--dark & {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' stroke='rgba(232,232,241,0.68)' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ℹ️ Workaround of https://github.com/fullcalendar/fullcalendar/issues/6407
|
||||
.fc-col-header,
|
||||
.fc-daygrid-body,
|
||||
.fc-scrollgrid-sync-table,
|
||||
.fc-timegrid-body,
|
||||
.fc-timegrid-body table {
|
||||
inline-size: 100% !important;
|
||||
}
|
||||
}
|
||||
240
src/@core/scss/template/libs/vuetify/_variables.scss
Normal file
240
src/@core/scss/template/libs/vuetify/_variables.scss
Normal file
@@ -0,0 +1,240 @@
|
||||
$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);
|
||||
/* stylelint-disable-next-line max-line-length */
|
||||
$font-family-custom: inter, sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
|
||||
@forward "../../../base/libs/vuetify/variables" with (
|
||||
$body-font-family: $font-family-custom !default,
|
||||
$border-radius-root: 6px !default,
|
||||
|
||||
$shadow-key-umbra: (
|
||||
0: (0 0 0 0 var(--v-shadow-key-umbra-opacity)),
|
||||
1: (0 2px 1px -1px var(--v-shadow-key-umbra-opacity)),
|
||||
2: (0 3px 1px -2px var(--v-shadow-key-umbra-opacity)),
|
||||
|
||||
// ℹ️ Modified
|
||||
3: (0 4px 14px -4px var(--v-shadow-key-umbra-opacity)),
|
||||
|
||||
4: (0 2px 4px -1px var(--v-shadow-key-umbra-opacity)),
|
||||
5: (0 3px 5px -1px var(--v-shadow-key-umbra-opacity)),
|
||||
|
||||
// ℹ️ Modified
|
||||
6: (0 4px 5px -2px var(--v-shadow-key-umbra-opacity)),
|
||||
|
||||
7: (0 4px 5px -2px var(--v-shadow-key-umbra-opacity)),
|
||||
8: (0 5px 5px -3px var(--v-shadow-key-umbra-opacity)),
|
||||
9: (0 5px 6px -3px var(--v-shadow-key-umbra-opacity)),
|
||||
10: (0 6px 6px -3px var(--v-shadow-key-umbra-opacity)),
|
||||
11: (0 6px 7px -4px var(--v-shadow-key-umbra-opacity)),
|
||||
12: (0 7px 8px -4px var(--v-shadow-key-umbra-opacity)),
|
||||
13: (0 7px 8px -4px var(--v-shadow-key-umbra-opacity)),
|
||||
14: (0 7px 9px -4px var(--v-shadow-key-umbra-opacity)),
|
||||
15: (0 8px 9px -5px var(--v-shadow-key-umbra-opacity)),
|
||||
16: (0 8px 10px -5px var(--v-shadow-key-umbra-opacity)),
|
||||
17: (0 8px 11px -5px var(--v-shadow-key-umbra-opacity)),
|
||||
18: (0 9px 11px -5px var(--v-shadow-key-umbra-opacity)),
|
||||
19: (0 9px 12px -6px var(--v-shadow-key-umbra-opacity)),
|
||||
20: (0 10px 13px -6px var(--v-shadow-key-umbra-opacity)),
|
||||
21: (0 10px 13px -6px var(--v-shadow-key-umbra-opacity)),
|
||||
22: (0 10px 14px -6px var(--v-shadow-key-umbra-opacity)),
|
||||
23: (0 11px 14px -7px var(--v-shadow-key-umbra-opacity)),
|
||||
24: (0 11px 15px -7px var(--v-shadow-key-umbra-opacity))
|
||||
) !default,
|
||||
|
||||
$shadow-key-penumbra: (
|
||||
0: (0 0 0 0 $shadow-key-penumbra-opacity-custom),
|
||||
1: (0 1px 1px 0 $shadow-key-penumbra-opacity-custom),
|
||||
2: (0 2px 2px 0 $shadow-key-penumbra-opacity-custom),
|
||||
|
||||
// ℹ️ Modified
|
||||
3: (0 4px 8px -4px $shadow-key-penumbra-opacity-custom),
|
||||
|
||||
4: (0 4px 5px 0 $shadow-key-penumbra-opacity-custom),
|
||||
5: (0 5px 8px 0 $shadow-key-penumbra-opacity-custom),
|
||||
|
||||
// ℹ️ Modified
|
||||
6: (0 2px 10px 1px $shadow-key-penumbra-opacity-custom),
|
||||
|
||||
7: (0 7px 10px 1px $shadow-key-penumbra-opacity-custom),
|
||||
8: (0 8px 10px 1px $shadow-key-penumbra-opacity-custom),
|
||||
9: (0 9px 12px 1px $shadow-key-penumbra-opacity-custom),
|
||||
10: (0 10px 14px 1px $shadow-key-penumbra-opacity-custom),
|
||||
11: (0 11px 15px 1px $shadow-key-penumbra-opacity-custom),
|
||||
12: (0 12px 17px 2px $shadow-key-penumbra-opacity-custom),
|
||||
13: (0 13px 19px 2px $shadow-key-penumbra-opacity-custom),
|
||||
14: (0 14px 21px 2px $shadow-key-penumbra-opacity-custom),
|
||||
15: (0 15px 22px 2px $shadow-key-penumbra-opacity-custom),
|
||||
16: (0 16px 24px 2px $shadow-key-penumbra-opacity-custom),
|
||||
17: (0 17px 26px 2px $shadow-key-penumbra-opacity-custom),
|
||||
18: (0 18px 28px 2px $shadow-key-penumbra-opacity-custom),
|
||||
19: (0 19px 29px 2px $shadow-key-penumbra-opacity-custom),
|
||||
20: (0 20px 31px 3px $shadow-key-penumbra-opacity-custom),
|
||||
21: (0 21px 33px 3px $shadow-key-penumbra-opacity-custom),
|
||||
22: (0 22px 35px 3px $shadow-key-penumbra-opacity-custom),
|
||||
23: (0 23px 36px 3px $shadow-key-penumbra-opacity-custom),
|
||||
24: (0 24px 38px 3px $shadow-key-penumbra-opacity-custom)
|
||||
) !default,
|
||||
|
||||
$shadow-key-ambient: (
|
||||
0: (0 0 0 0 $shadow-key-ambient-opacity-custom),
|
||||
1: (0 1px 3px 0 $shadow-key-ambient-opacity-custom),
|
||||
2: (0 1px 5px 0 $shadow-key-ambient-opacity-custom),
|
||||
|
||||
// ℹ️ Modified
|
||||
3: (0 4px 8px -4px $shadow-key-ambient-opacity-custom),
|
||||
|
||||
4: (0 1px 10px 0 $shadow-key-ambient-opacity-custom),
|
||||
5: (0 1px 14px 0 $shadow-key-ambient-opacity-custom),
|
||||
|
||||
// ℹ️ Modified
|
||||
6: (0 2px 16px 1px $shadow-key-ambient-opacity-custom),
|
||||
|
||||
7: (0 2px 16px 1px $shadow-key-ambient-opacity-custom),
|
||||
8: (0 3px 14px 2px $shadow-key-ambient-opacity-custom),
|
||||
9: (0 3px 16px 2px $shadow-key-ambient-opacity-custom),
|
||||
10: (0 4px 18px 3px $shadow-key-ambient-opacity-custom),
|
||||
11: (0 4px 20px 3px $shadow-key-ambient-opacity-custom),
|
||||
12: (0 5px 22px 4px $shadow-key-ambient-opacity-custom),
|
||||
13: (0 5px 24px 4px $shadow-key-ambient-opacity-custom),
|
||||
14: (0 5px 26px 4px $shadow-key-ambient-opacity-custom),
|
||||
15: (0 6px 28px 5px $shadow-key-ambient-opacity-custom),
|
||||
16: (0 6px 30px 5px $shadow-key-ambient-opacity-custom),
|
||||
17: (0 6px 32px 5px $shadow-key-ambient-opacity-custom),
|
||||
18: (0 7px 34px 6px $shadow-key-ambient-opacity-custom),
|
||||
19: (0 7px 36px 6px $shadow-key-ambient-opacity-custom),
|
||||
20: (0 8px 38px 7px $shadow-key-ambient-opacity-custom),
|
||||
21: (0 8px 40px 7px $shadow-key-ambient-opacity-custom),
|
||||
22: (0 8px 42px 7px $shadow-key-ambient-opacity-custom),
|
||||
23: (0 9px 44px 8px $shadow-key-ambient-opacity-custom),
|
||||
24: (0 9px 46px 8px $shadow-key-ambient-opacity-custom)
|
||||
) !default,
|
||||
|
||||
// 👉 Typography
|
||||
$typography: (
|
||||
"h1": (
|
||||
"weight": 500,
|
||||
"line-height": 7rem,
|
||||
"letter-spacing": -0.0938rem
|
||||
),
|
||||
"h2": (
|
||||
"weight": 500,
|
||||
"line-height": 4.5rem,
|
||||
"letter-spacing": -0.0313rem
|
||||
),
|
||||
"h3": (
|
||||
"weight": 500,
|
||||
"line-height": 3.5rem
|
||||
),
|
||||
"h4": (
|
||||
"weight": 500,
|
||||
"line-height": 2.625rem,
|
||||
"letter-spacing": 0.0156rem
|
||||
),
|
||||
"h5": (
|
||||
"weight": 500,
|
||||
"line-height": 2rem
|
||||
),
|
||||
"h6": (
|
||||
"letter-spacing": 0.0094rem
|
||||
),
|
||||
"subtitle-1": (
|
||||
"letter-spacing": 0.0094rem
|
||||
),
|
||||
"subtitle-2": (
|
||||
"line-height": 1.375rem,
|
||||
"letter-spacing": 0.0063rem,
|
||||
),
|
||||
"body-1": (
|
||||
"letter-spacing": 0.0094rem,
|
||||
),
|
||||
"body-2": (
|
||||
"letter-spacing": 0.0094rem,
|
||||
),
|
||||
"caption": (
|
||||
"letter-spacing": 0.025rem,
|
||||
),
|
||||
"overline": (
|
||||
"weight": 400,
|
||||
"line-height": 1.125rem,
|
||||
"letter-spacing": 0.0625rem,
|
||||
)
|
||||
) !default,
|
||||
|
||||
// 👉 Card
|
||||
$card-title-letter-spacing: 0.0094rem !default,
|
||||
$card-title-line-height: 2rem !default,
|
||||
$card-subtitle-opacity: 1 !default,
|
||||
|
||||
// 👉 Tooltip
|
||||
$tooltip-background-color:#212121 !default,
|
||||
$tooltip-border-radius: 4px !default,
|
||||
$tooltip-padding: 4px 8px !default,
|
||||
|
||||
// 👉 Alert
|
||||
$alert-title-font-size: 1rem !default,
|
||||
$alert-border-radius: 5px !default,
|
||||
$alert-title-letter-spacing: 0.15px !default,
|
||||
|
||||
// 👉 Badge
|
||||
$badge-border-color:rgb(var(--v-theme-surface)) !default,
|
||||
$badge-dot-height: 0.5rem !default,
|
||||
$badge-dot-width: 0.5rem !default,
|
||||
|
||||
// 👉 Button
|
||||
$button-height: 38px !default,
|
||||
$button-elevation: ("default": 3, "hover": 4, "active": 8) !default,
|
||||
$button-border-radius: 5px !default,
|
||||
$button-padding-ratio: 1.7 !default,
|
||||
$button-text-letter-spacing: 0.025rem !default,
|
||||
$button-icon-density: ("default": 0.5, "comfortable": -2, "compact": -3) !default,
|
||||
|
||||
// 👉 Dialog
|
||||
$dialog-card-header-padding: 20px !default,
|
||||
$dialog-card-header-text-padding-top: 0 !default,
|
||||
$dialog-card-text-padding: 20px !default,
|
||||
|
||||
// 👉 Chip
|
||||
$chip-label-border-radius: 4px !default,
|
||||
$chip-close-size: 20px !default,
|
||||
|
||||
// 👉 Expansion panel
|
||||
$expansion-panel-title-padding: 16px 20px !default,
|
||||
$expansion-panel-title-font-size: 1rem !default,
|
||||
$expansion-panel-disabled-overlay: 0 !default,
|
||||
$expansion-panel-active-title-min-height: 51px !default,
|
||||
$expansion-panel-title-min-height: 51px !default,
|
||||
$expansion-panel-text-padding: 0 20px 20px !default,
|
||||
|
||||
// 👉 Menu
|
||||
$menu-content-border-radius: 5px !default,
|
||||
|
||||
// 👉 List
|
||||
$list-subheader-text-opacity: 1 !default,
|
||||
|
||||
// 👉 Snackbar
|
||||
$snackbar-background:#212121 !default,
|
||||
$snackbar-border-radius: 4px !default,
|
||||
$snackbar-color: rgb(var(--v-theme-on-primary)) !default,
|
||||
|
||||
// 👉 Tabs
|
||||
$tabs-height: 40px !default,
|
||||
|
||||
// 👉 Slider
|
||||
$slider-track-active-size: 4px !default,
|
||||
$slider-thumb-label-padding: 4px 12px !default,
|
||||
$slider-thumb-label-font-size: 0.875rem !default,
|
||||
|
||||
// 👉 Timeline
|
||||
$timeline-dot-size: 34px !default,
|
||||
$timeline-dot-divider-background: transparent !default,
|
||||
|
||||
// 👉 Overlay
|
||||
$overlay-opacity: 0.5 !default,
|
||||
|
||||
// 👉 Navigation Drawer
|
||||
$navigation-drawer-scrim-opacity:0.5 !default,
|
||||
|
||||
// 👉 Table
|
||||
$table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)),
|
||||
);
|
||||
1
src/@core/scss/template/libs/vuetify/index.scss
Normal file
1
src/@core/scss/template/libs/vuetify/index.scss
Normal file
@@ -0,0 +1 @@
|
||||
@use "@core/scss/base/libs/vuetify";
|
||||
25
src/@core/scss/template/pages/misc.scss
Normal file
25
src/@core/scss/template/pages/misc.scss
Normal file
@@ -0,0 +1,25 @@
|
||||
.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-footer-img {
|
||||
position: absolute;
|
||||
inline-size: 100%;
|
||||
inset-block-end: 0;
|
||||
}
|
||||
|
||||
.misc-footer-tree {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.misc-avatar {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
54
src/@core/scss/template/pages/page-auth.scss
Normal file
54
src/@core/scss/template/pages/page-auth.scss
Normal file
@@ -0,0 +1,54 @@
|
||||
.layout-blank {
|
||||
.auth-wrapper {
|
||||
min-block-size: calc(var(--vh, 1vh) * 100);
|
||||
|
||||
.auth-footer-mask {
|
||||
position: absolute;
|
||||
inset-block-end: 0;
|
||||
min-inline-size: 100%;
|
||||
}
|
||||
|
||||
.auth-footer-start-tree,
|
||||
.auth-footer-end-tree {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.auth-footer-start-tree {
|
||||
inset-block-end: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
.auth-footer-end-tree {
|
||||
inset-block-end: 0;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
.auth-illustration {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-card {
|
||||
z-index: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@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: 1;
|
||||
inset-block-start: 2rem;
|
||||
inset-inline-start: 2.3rem;
|
||||
}
|
||||
|
||||
.auth-card-v2 {
|
||||
background-color: rgb(var(--v-theme-surface));
|
||||
}
|
||||
2
src/@core/scss/template/placeholders/_index.scss
Normal file
2
src/@core/scss/template/placeholders/_index.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@forward "nav";
|
||||
@forward "vertical-nav";
|
||||
8
src/@core/scss/template/placeholders/_nav.scss
Normal file
8
src/@core/scss/template/placeholders/_nav.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
%nav-link-active {
|
||||
background:
|
||||
linear-gradient(
|
||||
-72.47deg,
|
||||
rgb(var(--v-theme-primary)) 22.16%,
|
||||
rgba(var(--v-theme-primary), 0.7) 76.47%
|
||||
) !important;
|
||||
}
|
||||
64
src/@core/scss/template/placeholders/_vertical-nav.scss
Normal file
64
src/@core/scss/template/placeholders/_vertical-nav.scss
Normal file
@@ -0,0 +1,64 @@
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
// ℹ️ Add divider around section title
|
||||
%vertical-nav-section-title {
|
||||
/*
|
||||
ℹ️ We will use this to add gap between divider and text.
|
||||
Moreover, we will use this to adjust the `flex-basis` property of left divider
|
||||
*/
|
||||
$divider-gap: 0.625rem;
|
||||
|
||||
// Thanks: https://stackoverflow.com/a/62359101/10796681
|
||||
.title-text {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
column-gap: $divider-gap;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
content: "";
|
||||
}
|
||||
|
||||
&::after {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&::before {
|
||||
flex: 0 1 calc(variables.$vertical-nav-horizontal-padding-start - $divider-gap);
|
||||
margin-inline-start: -#{variables.$vertical-nav-horizontal-padding-start};
|
||||
}
|
||||
}
|
||||
|
||||
// ℹ️ Update the margin-inline-end when vertical nav is in mini state. We done same for link & group.
|
||||
@at-root {
|
||||
.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) .nav-section-title {
|
||||
margin-inline: 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%vertical-nav-item-interactive {
|
||||
// Add pill shape styles
|
||||
block-size: 2.625rem !important;
|
||||
border-end-end-radius: 3.125rem !important;
|
||||
border-end-start-radius: 0 !important;
|
||||
border-start-end-radius: 3.125rem !important;
|
||||
border-start-start-radius: 0 !important;
|
||||
}
|
||||
|
||||
%vertical-nav-item-interactive {
|
||||
// ℹ️ Wobble effect
|
||||
// transition: margin-inline 0.4s ease-in-out;
|
||||
// will-change: margin-inline;
|
||||
|
||||
transition: margin-inline 0.15s ease-in-out;
|
||||
will-change: margin-inline;
|
||||
|
||||
// Reduce margin inline end when vertical nav is in collapsed mode and not hovered
|
||||
.layout-nav-type-vertical.layout-vertical-nav-collapsed .layout-vertical-nav:not(.hovered) & {
|
||||
margin-inline: 0 5px;
|
||||
}
|
||||
}
|
||||
48
src/@core/utils/formatters.ts
Normal file
48
src/@core/utils/formatters.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
import { isToday } from './index'
|
||||
|
||||
export const avatarText = (value: string) => {
|
||||
if (!value)
|
||||
return ''
|
||||
const nameArray = value.split(' ')
|
||||
|
||||
return nameArray.map(word => word.charAt(0).toUpperCase()).join('')
|
||||
}
|
||||
|
||||
// TODO: Try to implement this: https://twitter.com/fireship_dev/status/1565424801216311297
|
||||
export const kFormatter = (num: number) => {
|
||||
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, ',')
|
||||
}
|
||||
|
||||
/**
|
||||
* Format and return date in Humanize format
|
||||
* Intl docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format
|
||||
* Intl Constructor: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat
|
||||
* @param {String} value date to format
|
||||
* @param {Intl.DateTimeFormatOptions} formatting Intl object to format with
|
||||
*/
|
||||
export const formatDate = (value: string, formatting: Intl.DateTimeFormatOptions = { month: 'short', day: 'numeric', year: 'numeric' }) => {
|
||||
if (!value)
|
||||
return value
|
||||
|
||||
return new Intl.DateTimeFormat('en-US', formatting).format(new Date(value))
|
||||
}
|
||||
|
||||
/**
|
||||
* Return short human friendly month representation of date
|
||||
* Can also convert date to only time if date is of today (Better UX)
|
||||
* @param {String} value date to format
|
||||
* @param {Boolean} toTimeForCurrentDay Shall convert to time if day is today/current
|
||||
*/
|
||||
export const formatDateToMonthShort = (value: string, toTimeForCurrentDay = true) => {
|
||||
const date = new Date(value)
|
||||
let formatting: Record<string, string> = { month: 'short', day: 'numeric' }
|
||||
|
||||
if (toTimeForCurrentDay && isToday(date))
|
||||
formatting = { hour: 'numeric', minute: 'numeric' }
|
||||
|
||||
return new Intl.DateTimeFormat('en-US', formatting).format(new Date(value))
|
||||
}
|
||||
|
||||
export const prefixWithPlus = (value: number) => value > 0 ? `+${value}` : value
|
||||
33
src/@core/utils/index.ts
Normal file
33
src/@core/utils/index.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
// 👉 IsEmpty
|
||||
export const isEmpty = (value: unknown): boolean => {
|
||||
if (value === null || value === undefined || value === '')
|
||||
return true
|
||||
|
||||
return !!(Array.isArray(value) && value.length === 0)
|
||||
}
|
||||
|
||||
// 👉 IsNullOrUndefined
|
||||
export const isNullOrUndefined = (value: unknown): value is undefined | null => {
|
||||
return value === null || value === undefined
|
||||
}
|
||||
|
||||
// 👉 IsEmptyArray
|
||||
export const isEmptyArray = (arr: unknown): boolean => {
|
||||
return Array.isArray(arr) && arr.length === 0
|
||||
}
|
||||
|
||||
// 👉 IsObject
|
||||
export const isObject = (obj: unknown): obj is Record<string, unknown> =>
|
||||
obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)
|
||||
|
||||
export const isToday = (date: Date) => {
|
||||
const today = new Date()
|
||||
|
||||
return (
|
||||
/* eslint-disable operator-linebreak */
|
||||
date.getDate() === today.getDate() &&
|
||||
date.getMonth() === today.getMonth() &&
|
||||
date.getFullYear() === today.getFullYear()
|
||||
/* eslint-enable */
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user