initial commit
This commit is contained in:
Inshal
195
resources/styles/@core/template/libs/vuetify/_overrides.scss
Normal file
195
resources/styles/@core/template/libs/vuetify/_overrides.scss
Normal file
@@ -0,0 +1,195 @@
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@styles/variables/vuetify";
|
||||
@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
|
||||
|
||||
// 👉 Typography
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
.text-h1,
|
||||
.text-h2,
|
||||
.text-h3,
|
||||
.text-h4,
|
||||
.text-h5,
|
||||
.text-h6,
|
||||
.text-body-1,
|
||||
.text-subtitle-1,
|
||||
.text-button,
|
||||
.v-card-title {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
.v-application,
|
||||
.text-body-2,
|
||||
.text-subtitle-2,
|
||||
.text-overline {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
|
||||
}
|
||||
|
||||
// 👉 Button
|
||||
.v-btn {
|
||||
.v-icon {
|
||||
--v-icon-size-multiplier: 0.953;
|
||||
}
|
||||
|
||||
&--icon .v-icon {
|
||||
--v-icon-size-multiplier: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Alert
|
||||
// custom icon style
|
||||
$alert-prepend-icon-font-size: 1.125rem !important;
|
||||
|
||||
.v-alert:not(.v-alert--prominent) {
|
||||
.v-alert__prepend {
|
||||
padding: 0.25rem;
|
||||
border-radius: 1rem;
|
||||
background-color: #fff;
|
||||
|
||||
.v-icon {
|
||||
block-size: $alert-prepend-icon-font-size;
|
||||
font-size: $alert-prepend-icon-font-size;
|
||||
inline-size: $alert-prepend-icon-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
.v-alert {
|
||||
|
||||
&:not(.v-alert--prominent).text-#{$color-name},
|
||||
&:not(.v-alert--prominent).bg-#{$color-name} {
|
||||
.v-alert__prepend {
|
||||
border: 3px solid rgb(var(--v-theme-#{$color-name}), 0.4);
|
||||
color: rgba(var(--v-theme-#{$color-name})) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&--variant-outlined:not(.v-alert--prominent),
|
||||
&--variant-tonal:not(.v-alert--prominent),
|
||||
&--variant-plain:not(.v-alert--prominent) {
|
||||
&.bg-#{$color-name},
|
||||
&.text-#{$color-name} {
|
||||
.v-alert__prepend {
|
||||
background-color: rgb(var(--v-theme-#{$color-name}));
|
||||
box-shadow: 0 0 0 3px rgba(var(--v-theme-#{$color-name}), 0.4);
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 VAvatar
|
||||
.v-avatar {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
// 👉 VChip
|
||||
.v-chip {
|
||||
line-height: normal;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.v-chip.v-chip--size-default .v-avatar {
|
||||
font-size: 0.8125rem;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
// 👉 VTooltip
|
||||
.v-tooltip {
|
||||
.v-overlay__content {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 VMenu
|
||||
.v-menu.v-overlay {
|
||||
.v-overlay__content {
|
||||
.v-list {
|
||||
.v-list-item--density-default {
|
||||
min-block-size: 2.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 VTabs
|
||||
.v-tabs--vertical:not(.v-tabs-pill) {
|
||||
border-inline-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
|
||||
.v-tab__slider {
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.v-tabs.v-tabs-pill:not(.v-tabs--stacked) {
|
||||
&.v-tabs--density-default {
|
||||
--v-tabs-height: 38px;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 VSliderThumb
|
||||
.v-slider-thumb__surface {
|
||||
border: 3px solid rgb(var(--v-theme-surface));
|
||||
|
||||
&::before {
|
||||
inset: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.v-slider-thumb__label {
|
||||
background: variables.$slider-thumb-label-color;
|
||||
color: rgb(var(--v-theme-on-primary));
|
||||
}
|
||||
|
||||
.v-slider-thumb__label::before {
|
||||
color: variables.$slider-thumb-label-color;
|
||||
}
|
||||
|
||||
// 👉 VTimeline
|
||||
.v-timeline {
|
||||
.v-timeline-item:not(:last-child) {
|
||||
.v-timeline-item__body {
|
||||
margin-block-end: 0.95rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 VDatatable
|
||||
.v-data-table {
|
||||
th {
|
||||
background: rgb(var(--v-table-header-background)) !important;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500 !important;
|
||||
letter-spacing: 0.17px !important;
|
||||
text-transform: uppercase !important;
|
||||
|
||||
.v-data-table-header__content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 VTable
|
||||
.v-table {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
|
||||
|
||||
th {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
|
||||
font-size: 0.75rem;
|
||||
text-align: center !important;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:first-child {
|
||||
text-align: start !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
237
resources/styles/@core/template/libs/vuetify/_variables.scss
Normal file
237
resources/styles/@core/template/libs/vuetify/_variables.scss
Normal file
@@ -0,0 +1,237 @@
|
||||
$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 max-line-length */
|
||||
$font-family-custom: "Public Sans", sans-serif, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
|
||||
/* stylelint-enable max-line-length */
|
||||
|
||||
@forward "../../../base/libs/vuetify/variables" with (
|
||||
// 👉 font-family
|
||||
$body-font-family: $font-family-custom !default,
|
||||
|
||||
// 👉 border-radius
|
||||
$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)),
|
||||
3: (0 1px 6px -2px var(--v-shadow-key-umbra-opacity)),
|
||||
4: (0 1px 7px -2px var(--v-shadow-key-umbra-opacity)),
|
||||
5: (0 3px 5px -1px var(--v-shadow-key-umbra-opacity)),
|
||||
6: (0 2px 9px -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),
|
||||
3: (0 2px 6px 1px $shadow-key-penumbra-opacity-custom),
|
||||
4: (0 3px 7px 1px $shadow-key-penumbra-opacity-custom),
|
||||
5: (0 5px 8px 0 $shadow-key-penumbra-opacity-custom),
|
||||
6: (0 4px 9px 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),
|
||||
3: (0 1px 4px 2px $shadow-key-ambient-opacity-custom),
|
||||
4: (0 1px 4px 2px $shadow-key-ambient-opacity-custom),
|
||||
5: (0 1px 14px 0 $shadow-key-ambient-opacity-custom),
|
||||
6: (0 2px 6px 4px $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,
|
||||
"letter-spacing": 0.0156rem,
|
||||
),
|
||||
"h5": (
|
||||
"weight": 500,
|
||||
),
|
||||
"h6": (
|
||||
"letter-spacing": 0.0094rem,
|
||||
),
|
||||
"subtitle-1": (
|
||||
"letter-spacing": 0.0094rem,
|
||||
),
|
||||
"subtitle-2": (
|
||||
"line-height": 1.3125rem,
|
||||
"letter-spacing": 0.0063rem,
|
||||
),
|
||||
"body-1": (
|
||||
"letter-spacing": 0.0094rem,
|
||||
),
|
||||
"body-2": (
|
||||
"line-height": 1.3125rem,
|
||||
"letter-spacing": 0.0094rem,
|
||||
),
|
||||
"caption": (
|
||||
"line-height": 0.875rem,
|
||||
"letter-spacing": 0.025rem,
|
||||
),
|
||||
"button": (
|
||||
"line-height": 1.5rem,
|
||||
"letter-spacing": 0.025rem,
|
||||
),
|
||||
"overline": (
|
||||
"weight": 400,
|
||||
"line-height": 0.875rem,
|
||||
"letter-spacing": 0.0625rem,
|
||||
),
|
||||
) !default,
|
||||
|
||||
// 👉 Alert
|
||||
$alert-density: ("default": 0, "comfortable": -0.625, "compact": -2) !default,
|
||||
$alert-title-font-size: 1rem !default,
|
||||
$alert-title-line-height: 1.5rem !default,
|
||||
$alert-prepend-margin-inline-end: 0.75rem !default,
|
||||
|
||||
// 👉 Badges
|
||||
$badge-dot-height: 0.5rem !default,
|
||||
$badge-dot-width: 0.5rem !default,
|
||||
|
||||
// 👉 Button
|
||||
$button-height: 38px !default,
|
||||
$button-icon-density: ("default": 2.5, "comfortable": 0, "compact": -1.5) !default,
|
||||
$button-card-actions-padding: 0 12px !default,
|
||||
|
||||
// 👉 Chip
|
||||
$chip-font-size: 13px !default,
|
||||
$chip-close-size: 22px !default,
|
||||
$chip-label-border-radius: 4px !default,
|
||||
$chip-density: ("default": 0, "comfortable": -1, "compact": -2) !default,
|
||||
|
||||
// 👉 Dialog
|
||||
$dialog-card-header-padding: 20px 20px 0 !default,
|
||||
$dialog-card-text-padding: 20px !default,
|
||||
$dialog-elevation: 16 !default,
|
||||
|
||||
// 👉 Expansion Panel
|
||||
$expansion-panel-title-padding: 14px 20px !default,
|
||||
$expansion-panel-title-font-size: 1rem !default,
|
||||
$expansion-panel-active-title-min-height: 51px !default,
|
||||
$expansion-panel-title-min-height: 51px !default,
|
||||
$expansion-panel-text-padding: 6px 20px 20px !default,
|
||||
|
||||
// 👉 List
|
||||
$list-item-icon-margin-end: 12px !default,
|
||||
|
||||
// 👉 Pagination
|
||||
$pagination-item-margin: 0.2rem !default,
|
||||
|
||||
// 👉 Snackbar
|
||||
$snackbar-border-radius: 8px !default,
|
||||
$snackbar-btn-padding: 0 12px !default,
|
||||
$snackbar-background: rgb(var(--v-snackbar-background)) !default,
|
||||
$snackbar-color: rgb(var(--v-snackbar-color)) !default,
|
||||
|
||||
// 👉 Tooltip
|
||||
$tooltip-background-color: rgba(var(--v-tooltip-background),var(--v-tooltip-opacity)) !default,
|
||||
$tooltip-padding: 4px 8px !default,
|
||||
$tooltip-line-height: 16px !default,
|
||||
$tooltip-font-size: 11px !default,
|
||||
|
||||
// 👉 Timeline
|
||||
$timeline-dot-divider-background: transparent !default,
|
||||
$timeline-divider-line-thickness: 1px !default,
|
||||
$timeline-item-padding: 16px !default,
|
||||
|
||||
// 👉 input
|
||||
$input-details-padding-above: 3px !default,
|
||||
$text-field-details-padding-inline: 14px !default,
|
||||
|
||||
// 👉 combobox
|
||||
$combobox-content-elevation: 6 !default,
|
||||
|
||||
// 👉 Range slider
|
||||
$slider-track-active-size: 4px !default,
|
||||
$slider-thumb-label-height: 29px !default,
|
||||
$slider-thumb-label-padding: 4px 12px !default,
|
||||
$slider-thumb-label-font-size: 12px !default,
|
||||
$slider-track-border-radius: 12px !default,
|
||||
|
||||
// 👉 Card
|
||||
$card-item-padding: 1.5rem !default,
|
||||
$card-border-radius: 0.5rem !default,
|
||||
$card-text-padding: 1.5rem !default,
|
||||
$card-text-font-size: 1rem !default,
|
||||
$card-title-padding: 0.5rem 1.5rem !default,
|
||||
$card-subtitle-padding: 0 1.5rem !default,
|
||||
$card-prepend-padding-inline-end: 0.625rem !default,
|
||||
$card-append-padding-inline-start: 0.625rem !default,
|
||||
|
||||
// 👉 Button Group
|
||||
$btn-group-height: 38px !default,
|
||||
);
|
||||
2
resources/styles/@core/template/libs/vuetify/index.scss
Normal file
2
resources/styles/@core/template/libs/vuetify/index.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@use "@core-scss/base/libs/vuetify";
|
||||
@use "overrides";
|
||||
Reference in New Issue
Block a user