Initial commit
This commit is contained in:
348
resources/styles/@core/template/libs/vuetify/_variables.scss
Normal file
348
resources/styles/@core/template/libs/vuetify/_variables.scss
Normal file
@@ -0,0 +1,348 @@
|
||||
@use "sass:math";
|
||||
|
||||
$font-family-custom: "Public Sans",sans-serif,-apple-system,blinkmacsystemfont,
|
||||
"Segoe UI",roboto,"Helvetica Neue",arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
|
||||
|
||||
/* 👉 Typography custom variables */
|
||||
$typography-h5-font-size: 1.125rem;
|
||||
$typography-body-1-font-size: 0.9375rem;
|
||||
$typography-body-1-line-height: 1.375rem;
|
||||
|
||||
@forward "../../../base/libs/vuetify/variables" with (
|
||||
$body-font-family: $font-family-custom !default,
|
||||
$border-radius-root: 6px !default,
|
||||
|
||||
// 👉 Rounded
|
||||
$rounded: (
|
||||
"sm": 4px,
|
||||
"lg": 8px,
|
||||
"shaped": 30px 0,
|
||||
) !default,
|
||||
|
||||
// 👉 Shadows
|
||||
$shadow-key-umbra: (
|
||||
0: (0 0 0 0 rgba(var(--v-shadow-key-umbra-color), 1)),
|
||||
1: (0 2px 4px rgba(var(--v-shadow-key-umbra-color), 0.12)),
|
||||
2: (0 1px 6px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xs-opacity))),
|
||||
3: (0 3px 8px rgba(var(--v-shadow-key-umbra-color), 0.14)),
|
||||
4: (0 2px 8px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-sm-opacity))),
|
||||
5: (0 4px 10px rgba(var(--v-shadow-key-umbra-color), 0.15)),
|
||||
6: (0 3px 12px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-md-opacity))),
|
||||
7: (0 4px 18px rgba(var(--v-shadow-key-umbra-color), 0.1)),
|
||||
8: (0 4px 18px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-lg-opacity))),
|
||||
9: (0 5px 14px rgba(var(--v-shadow-key-umbra-color), 0.18)),
|
||||
10: (0 5px 30px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xl-opacity))),
|
||||
11: (0 5px 16px rgba(var(--v-shadow-key-umbra-color), 0.2)),
|
||||
12: (0 6px 17px rgba(var(--v-shadow-key-umbra-color), 0.22)),
|
||||
13: (0 6px 18px rgba(var(--v-shadow-key-umbra-color), 0.22)),
|
||||
14: (0 6px 19px rgba(var(--v-shadow-key-umbra-color), 0.24)),
|
||||
15: (0 7px 20px rgba(var(--v-shadow-key-umbra-color), 0.24)),
|
||||
16: (0 7px 21px rgba(var(--v-shadow-key-umbra-color), 0.26)),
|
||||
17: (0 7px 22px rgba(var(--v-shadow-key-umbra-color), 0.26)),
|
||||
18: (0 8px 23px rgba(var(--v-shadow-key-umbra-color), 0.28)),
|
||||
19: (0 8px 24px 6px rgba(var(--v-shadow-key-umbra-color), 0.28)),
|
||||
20: (0 9px 25px rgba(var(--v-shadow-key-umbra-color), 0.3)),
|
||||
21: (0 9px 26px rgba(var(--v-shadow-key-umbra-color), 0.32)),
|
||||
22: (0 9px 27px rgba(var(--v-shadow-key-umbra-color), 0.32)),
|
||||
23: (0 10px 28px rgba(var(--v-shadow-key-umbra-color), 0.34)),
|
||||
24: (0 10px 30px rgba(var(--v-shadow-key-umbra-color), 0.34))
|
||||
) !default,
|
||||
|
||||
$shadow-key-penumbra: (
|
||||
0: (0 0 transparent),
|
||||
1: (0 0 transparent),
|
||||
2: (0 0 transparent),
|
||||
3: (0 0 transparent),
|
||||
4: (0 0 transparent),
|
||||
5: (0 0 transparent),
|
||||
6: (0 0 transparent),
|
||||
7: (0 0 transparent),
|
||||
8: (0 0 transparent),
|
||||
9: (0 0 transparent),
|
||||
10: (0 0 transparent),
|
||||
11: (0 0 transparent),
|
||||
12: (0 0 transparent),
|
||||
13: (0 0 transparent),
|
||||
14: (0 0 transparent),
|
||||
15: (0 0 transparent),
|
||||
16: (0 0 transparent),
|
||||
17: (0 0 transparent),
|
||||
18: (0 0 transparent),
|
||||
19: (0 0 transparent),
|
||||
20: (0 0 transparent),
|
||||
21: (0 0 transparent),
|
||||
22: (0 0 transparent),
|
||||
23: (0 0 transparent),
|
||||
24: (0 0 transparent),
|
||||
) !default,
|
||||
|
||||
$shadow-key-ambient: (
|
||||
0: (0 0 transparent),
|
||||
1: (0 0 transparent),
|
||||
2: (0 0 transparent),
|
||||
3: (0 0 transparent),
|
||||
4: (0 0 transparent),
|
||||
5: (0 0 transparent),
|
||||
6: (0 0 transparent),
|
||||
7: (0 0 transparent),
|
||||
8: (0 0 transparent),
|
||||
9: (0 0 transparent),
|
||||
10: (0 0 transparent),
|
||||
11: (0 0 transparent),
|
||||
12: (0 0 transparent),
|
||||
13: (0 0 transparent),
|
||||
14: (0 0 transparent),
|
||||
15: (0 0 transparent),
|
||||
16: (0 0 transparent),
|
||||
17: (0 0 transparent),
|
||||
18: (0 0 transparent),
|
||||
19: (0 0 transparent),
|
||||
20: (0 0 transparent),
|
||||
21: (0 0 transparent),
|
||||
22: (0 0 transparent),
|
||||
23: (0 0 transparent),
|
||||
24: (0 0 transparent),
|
||||
) !default,
|
||||
|
||||
// 👉 Typography
|
||||
$typography: (
|
||||
"h1": (
|
||||
"size": 2.875rem,
|
||||
"weight": 500,
|
||||
"line-height": 4.25rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"h2": (
|
||||
"size": 2.375rem,
|
||||
"weight": 500,
|
||||
"line-height": 3.5rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"h3": (
|
||||
"size": 1.75rem,
|
||||
"weight": 500,
|
||||
"line-height": 2.625rem
|
||||
),
|
||||
"h4": (
|
||||
"size": 1.5rem,
|
||||
"weight": 500,
|
||||
"line-height": 2.375rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"h5": (
|
||||
"size": $typography-h5-font-size,
|
||||
"weight": 500,
|
||||
"line-height": 1.75rem
|
||||
),
|
||||
"h6":(
|
||||
"size": 0.9375rem,
|
||||
"line-height": 1.375rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"body-1":(
|
||||
"size": $typography-body-1-font-size,
|
||||
"line-height": $typography-body-1-line-height,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"body-2": (
|
||||
"size": 0.8125rem,
|
||||
"line-height": 1.25rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"subtitle-1":(
|
||||
"size": 0.9375rem,
|
||||
"weight": 400,
|
||||
"line-height": 1.375rem
|
||||
),
|
||||
"subtitle-2": (
|
||||
"size": 0.8125rem,
|
||||
"weight": 400,
|
||||
"line-height": 1.25rem,
|
||||
"letter-spacing": normal
|
||||
),
|
||||
"button": (
|
||||
"size": 0.9375rem,
|
||||
"weight": 500,
|
||||
"line-height": 1.125rem,
|
||||
"letter-spacing": 0.0269rem,
|
||||
"text-transform": capitalize
|
||||
),
|
||||
"caption":(
|
||||
"size": 0.8125rem,
|
||||
"line-height": 1.125rem,
|
||||
"letter-spacing": 0.025rem
|
||||
),
|
||||
"overline": (
|
||||
"size": 0.75rem,
|
||||
"weight": 400,
|
||||
"line-height": 0.875rem,
|
||||
"letter-spacing": 0.05rem,
|
||||
),
|
||||
) !default,
|
||||
|
||||
// 👉 Alert
|
||||
$alert-title-font-size: 1.125rem !default,
|
||||
$alert-title-line-height: 1.5rem !default,
|
||||
$alert-border-opacity: 0.38 !default,
|
||||
|
||||
// 👉 Badge
|
||||
$badge-dot-height: 8px !default,
|
||||
$badge-dot-width: 8px !default,
|
||||
$badge-min-width: 24px !default,
|
||||
$badge-height: 1.5rem !default,
|
||||
$badge-font-size: 0.8125rem !default,
|
||||
$badge-border-radius: 12px !default,
|
||||
$badge-border-color: rgb(var(--v-theme-surface)) !default,
|
||||
$badge-border-transform: scale(1.5) !default,
|
||||
$badge-dot-border-width: 2px !default,
|
||||
|
||||
// 👉 Chip
|
||||
$chip-font-size: 13px !default,
|
||||
$chip-font-weight: 500 !default,
|
||||
$chip-label-border-radius: 0.375rem !default,
|
||||
$chip-height: 32px !default,
|
||||
$chip-close-size: 1.25rem !default,
|
||||
$chip-elevation: 0 !default,
|
||||
|
||||
// 👉 Button
|
||||
$button-height: 38px !default,
|
||||
$button-padding-ratio: 1.9 !default,
|
||||
$button-line-height: 1.375rem !default,
|
||||
$button-disabled-opacity: 0.45 !default,
|
||||
$button-disabled-overlay: 0.2025 !default,
|
||||
$button-icon-font-size: 0.9375rem !default,
|
||||
|
||||
// 👉 Button Group
|
||||
$btn-group-border-radius: 8px !default,
|
||||
|
||||
// 👉 Dialog
|
||||
$dialog-card-header-padding: 24px 24px 0 !default,
|
||||
$dialog-card-header-text-padding-top: 24px !default,
|
||||
$dialog-card-text-padding: 24px !default,
|
||||
$dialog-elevation: 8 !default,
|
||||
|
||||
// 👉 Card
|
||||
$card-title-font-size: $typography-h5-font-size !default,
|
||||
$card-text-font-size: $typography-body-1-font-size !default,
|
||||
$card-subtitle-font-size: 0.9375rem !default,
|
||||
$card-subtitle-header-padding: 0 !default,
|
||||
$card-subtitle-line-height: 1.375rem !default,
|
||||
$card-title-line-height: 1.75rem !default,
|
||||
$card-text-padding: 24px !default,
|
||||
$card-text-line-height: 1.375rem !default,
|
||||
$card-item-padding: 24px !default,
|
||||
$card-elevation: 6 !default,
|
||||
|
||||
// 👉 Carousel
|
||||
$carousel-dot-margin: 0 !default,
|
||||
$carousel-dot-inactive-opacity: 0.4 !default,
|
||||
|
||||
// 👉 Expansion Panel
|
||||
$expansion-panel-title-padding: 12px 20px 12px 24px !default,
|
||||
$expansion-panel-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
|
||||
$expansion-panel-active-title-min-height: 46px !default,
|
||||
$expansion-panel-title-min-height: 46px !default,
|
||||
$expansion-panel-text-padding: 0 20px 20px 24px !default,
|
||||
|
||||
// 👉 Field
|
||||
$field-font-size: 0.9375rem !default,
|
||||
$input-density: ("default": -2, "comfortable": -4.5, "compact": -6.5) !default,
|
||||
$field-outline-opacity: 0.22 !default,
|
||||
$field-border-width: 1px !default,
|
||||
$field-focused-border-width: 2px !default,
|
||||
$field-control-affixed-padding: 14px !default,
|
||||
|
||||
// 👉 Input
|
||||
$input-details-padding-above: 4px !default,
|
||||
$input-details-font-size: 0.8125rem !default,
|
||||
|
||||
// 👉 List
|
||||
$list-density: ("default": 0, "comfortable": -1.5, "compact": -2.5) !default,
|
||||
$list-border-radius: 6px !default,
|
||||
$list-item-padding: 8px 20px !default,
|
||||
$list-item-icon-margin-end: 10px !default,
|
||||
$list-item-icon-margin-start : 12px !default,
|
||||
$list-item-subtitle-line-height: 20px !default,
|
||||
$list-subheader-font-size: 13px !default,
|
||||
$list-subheader-line-height: 1.25rem !default,
|
||||
$list-subheader-padding-end: 20px !default,
|
||||
$list-subheader-min-height: 40px !default,
|
||||
$list-item-avatar-margin-start: 12px !default,
|
||||
$list-item-avatar-margin-end: 12px !default,
|
||||
$list-disabled-opacity: 0.4,
|
||||
|
||||
// 👉 label
|
||||
$label-font-size: 0.9375rem !default,
|
||||
|
||||
// 👉 message
|
||||
$messages-font-size: 13px !default,
|
||||
|
||||
// 👉 menu
|
||||
$menu-elevation: 8 !default,
|
||||
|
||||
// 👉 navigation drawer
|
||||
$navigation-drawer-temporary-elevation: 8 !default,
|
||||
|
||||
// 👉 pagination
|
||||
$pagination-item-margin: 0.1875rem !default,
|
||||
|
||||
// 👉 Progress Linear
|
||||
$progress-linear-background-opacity: 1 !default,
|
||||
|
||||
// 👉 Radio
|
||||
$radio-group-label-selection-group-padding-inline: 0 !default,
|
||||
|
||||
// 👉 slider
|
||||
$slider-thumb-hover-opacity: var(--v-activated-opacity) !default,
|
||||
$slider-thumb-label-padding: 2px 10px !default,
|
||||
$slider-thumb-label-font-size: 0.8125rem !default,
|
||||
$slider-track-active-size: 6px !default,
|
||||
|
||||
// 👉 select
|
||||
$select-chips-margin-bottom: ("default": 1, "comfortable": 1, "compact": 1) !default,
|
||||
|
||||
// 👉 snackbar
|
||||
$snackbar-background: rgb(var(--v-tooltip-background)) !default,
|
||||
$snackbar-color: rgb(var(--v-theme-surface)) !default,
|
||||
$snackbar-content-padding: 12px 16px !default,
|
||||
$snackbar-font-size: 0.8125rem !default,
|
||||
$snackbar-elevation: 2 !default,
|
||||
$snackbar-wrapper-min-height:44px !default,
|
||||
$snackbar-btn-padding: 0 9px !default,
|
||||
$snackbar-action-margin: 16px !default,
|
||||
|
||||
// 👉 switch
|
||||
$switch-inset-track-width: 1.875rem !default,
|
||||
$switch-inset-track-height: 1.125rem !default,
|
||||
$switch-inset-thumb-height: 0.875rem !default,
|
||||
$switch-inset-thumb-width: 0.875rem !default,
|
||||
$switch-inset-thumb-off-height: 0.875rem !default,
|
||||
$switch-inset-thumb-off-width: 0.875rem !default,
|
||||
$switch-thumb-elevation: 2 !default,
|
||||
$switch-track-opacity: 1 !default,
|
||||
$switch-track-background: rgba(var(--v-theme-on-surface), var(--v-focus-opacity)) !default,
|
||||
$switch-thumb-background: rgb(var(--v-theme-on-primary)),
|
||||
|
||||
// 👉 table
|
||||
$table-row-height: 50px !default,
|
||||
$table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
|
||||
$table-font-size: 0.9375rem !default,
|
||||
|
||||
// 👉 tabs
|
||||
$tabs-height: 42px !default,
|
||||
$tab-min-width: 50px !default,
|
||||
|
||||
// 👉 tooltip
|
||||
$tooltip-background-color: rgb(var(--v-tooltip-background)) !default,
|
||||
$tooltip-text-color: rgb(var(--v-theme-surface)) !default,
|
||||
$tooltip-font-size: 0.8125rem !default,
|
||||
$tooltip-border-radius: 0.25rem !default,
|
||||
$tooltip-padding: 5px 12px !default,
|
||||
|
||||
// 👉 timeline
|
||||
$timeline-dot-size: 34px !default,
|
||||
$timeline-dot-divider-background: rgba(var(--v-border-color),0.08) !default,
|
||||
$timeline-divider-line-background: rgba(var(--v-border-color), var(--v-border-opacity)) !default,
|
||||
$timeline-divider-line-thickness: 1.5px !default,
|
||||
$timeline-item-padding: 16px !default,
|
||||
);
|
||||
@@ -0,0 +1,114 @@
|
||||
@use "@core-scss/base/mixins";
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
/* 👉 Alert
|
||||
/ ℹ️ custom icon styling */
|
||||
|
||||
$alert-prepend-icon-font-size: 1.375rem !important;
|
||||
|
||||
.v-alert {
|
||||
.v-alert__content {
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
|
||||
&:not(.v-alert--prominent) .v-alert__prepend {
|
||||
block-size: 1.875rem !important;
|
||||
inline-size: 1.875rem !important;
|
||||
|
||||
.v-icon {
|
||||
margin: auto;
|
||||
block-size: 1.375rem !important;
|
||||
font-size: 1.375rem !important;
|
||||
inline-size: 1.375rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.v-alert-title {
|
||||
margin-block-end: 0.25rem;
|
||||
}
|
||||
|
||||
.v-alert__close {
|
||||
.v-btn--icon {
|
||||
.v-icon {
|
||||
block-size: 1.25rem;
|
||||
font-size: 1.25rem;
|
||||
inline-size: 1.25rem;
|
||||
}
|
||||
|
||||
.v-btn__overlay,
|
||||
.v-ripple__container {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.v-alert--prominent) {
|
||||
/* stylelint-disable-next-line no-duplicate-selectors */
|
||||
.v-alert__prepend {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
&.v-alert--variant-flat,
|
||||
&.v-alert--variant-elevated {
|
||||
.v-alert__prepend {
|
||||
background-color: #fff;
|
||||
|
||||
@include mixins.elevation(2);
|
||||
}
|
||||
}
|
||||
|
||||
&.v-alert--variant-tonal {
|
||||
.v-alert__prepend {
|
||||
z-index: 1;
|
||||
background-color: rgb(var(--v-theme-surface));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-alert.v-alert--density-compact {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.v-alert.v-alert--density-default {
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
.v-alert {
|
||||
&:not(.v-alert--prominent) {
|
||||
&.bg-#{$color-name},
|
||||
&.text-#{$color-name} {
|
||||
.v-alert__prepend .v-icon {
|
||||
color: rgb(var(--v-theme-#{$color-name})) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.v-alert--variant-tonal {
|
||||
&.text-#{$color-name},
|
||||
&.bg-#{$color-name} {
|
||||
.v-alert__underlay {
|
||||
background: rgb(var(--v-theme-#{$color-name})) !important;
|
||||
}
|
||||
|
||||
.v-alert__prepend {
|
||||
background-color: rgb(var(--v-theme-#{$color-name}));
|
||||
|
||||
.v-icon {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.v-alert--variant-outlined {
|
||||
&.text-#{$color-name},
|
||||
&.bg-#{$color-name} {
|
||||
.v-alert__prepend {
|
||||
background-color: rgba(var(--v-theme-#{$color-name}), 0.16);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
@use "@core-scss/base/mixins";
|
||||
|
||||
// 👉 Avatar
|
||||
body {
|
||||
.v-avatar {
|
||||
.v-icon {
|
||||
block-size: 1.5rem;
|
||||
inline-size: 1.5rem;
|
||||
}
|
||||
|
||||
&.v-avatar--variant-tonal:not([class*="text-"]) {
|
||||
.v-avatar__underlay {
|
||||
--v-activated-opacity: 0.08;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-avatar-group {
|
||||
> * {
|
||||
&:hover {
|
||||
transform: translateY(-5px) scale(1);
|
||||
|
||||
@include mixins.elevation(6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
// 👉 Badge
|
||||
.v-badge {
|
||||
.v-badge__badge .v-icon {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
&.v-badge--bordered:not(.v-badge--dot) {
|
||||
.v-badge__badge {
|
||||
&::after {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.v-badge--tonal {
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
.v-badge__badge.bg-#{$color-name} {
|
||||
background-color: rgba(var(--v-theme-#{$color-name}), 0.16) !important;
|
||||
color: rgb(var(--v-theme-#{$color-name})) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,280 @@
|
||||
@use "sass:list";
|
||||
@use "sass:map";
|
||||
@use "@core-scss/template/mixins" as templateMixins;
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
/* 👉 Button
|
||||
Above map but opacity values as key and variant as value */
|
||||
|
||||
$btn-active-overlay-opacity: (
|
||||
0.08: (outlined, flat, text, plain),
|
||||
0.24: (tonal),
|
||||
);
|
||||
$btn-hover-overlay-opacity: (
|
||||
0: (elevated),
|
||||
0.08: (outlined, flat, text, plain),
|
||||
0.24: (tonal),
|
||||
);
|
||||
$btn-focus-overlay-opacity: (
|
||||
0.08: (outlined, flat, text, plain),
|
||||
0.24: (tonal),
|
||||
);
|
||||
|
||||
body .v-btn {
|
||||
// ℹ️ This is necessary because as we have darker overlay on hover for elevated variant, button text doesn't get dimmed
|
||||
// This style is already applied to `.v-icon`
|
||||
.v-btn__content {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
transition: all 0.135s ease; /* Add transition */
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
// Add transition on hover
|
||||
&:not(.v-btn--loading) .v-btn__overlay {
|
||||
transition: opacity 0.15s ease-in-out;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
// box-shadow
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
&:not(.v-btn--disabled) {
|
||||
&.bg-#{$color-name}.v-btn--variant-elevated {
|
||||
&,
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
@include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Loop over $btn-active-overlay-opacity map and add active styles for each variant.
|
||||
Group variants with same opacity value.
|
||||
*/
|
||||
@each $opacity, $variants in $btn-active-overlay-opacity {
|
||||
$overlay-selectors: ();
|
||||
$underlay-selectors: ();
|
||||
|
||||
// append each variant to selectors list
|
||||
@each $variant in $variants {
|
||||
$overlay-selectors: list.append($overlay-selectors, "&.v-btn--variant-#{$variant}:active > .v-btn__overlay,");
|
||||
$underlay-selectors: list.append($underlay-selectors, "&.v-btn--variant-#{$variant}:active > .v-btn__underlay,");
|
||||
}
|
||||
|
||||
#{$overlay-selectors} {
|
||||
--v-hover-opacity: #{$opacity};
|
||||
|
||||
opacity: var(--v-hover-opacity);
|
||||
}
|
||||
|
||||
#{$underlay-selectors} {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@each $opacity, $variants in $btn-focus-overlay-opacity {
|
||||
$selectors: ();
|
||||
|
||||
// append each variant to selectors list
|
||||
@each $variant in $variants {
|
||||
$selectors: list.append($selectors, "&.v-btn--variant-#{$variant}:focus > .v-btn__overlay,");
|
||||
}
|
||||
|
||||
#{$selectors} {
|
||||
opacity: $opacity;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Loop over $btn-hover-overlay-opacity map and add hover styles for each variant.
|
||||
Group variants with same opacity value.
|
||||
*/
|
||||
@each $opacity, $variants in $btn-hover-overlay-opacity {
|
||||
$selectors: ();
|
||||
|
||||
// append each variant to selectors list
|
||||
@each $variant in $variants {
|
||||
$selectors: list.append($selectors, "&.v-btn--variant-#{$variant}:hover > .v-btn__overlay,");
|
||||
}
|
||||
|
||||
#{$selectors} {
|
||||
--v-hover-opacity: #{$opacity};
|
||||
}
|
||||
}
|
||||
|
||||
// Default (elevated) button
|
||||
&--variant-elevated,
|
||||
&--variant-flat {
|
||||
// We want a darken color on hover
|
||||
&:not(.v-btn--loading, .v-btn--disabled) {
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
&.bg-#{$color-name} {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: rgb(var(--v-theme-#{$color-name}-darken-1)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Outlined button
|
||||
&:not(.v-btn--icon, .v-tab).v-btn--variant-text {
|
||||
&.v-btn--size-default {
|
||||
padding-inline: 0.75rem;
|
||||
}
|
||||
|
||||
&.v-btn--size-small {
|
||||
padding-inline: 0.5625rem;
|
||||
}
|
||||
|
||||
&.v-btn--size-large {
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Button border-radius
|
||||
&:not(.v-btn--icon).v-btn--size-x-small {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
&:not(.v-btn--icon).v-btn--size-small {
|
||||
border-radius: 4px;
|
||||
line-height: 1.125rem;
|
||||
padding-block: 0;
|
||||
padding-inline: 0.875rem;
|
||||
}
|
||||
|
||||
&:not(.v-btn--icon).v-btn--size-default {
|
||||
.v-btn__content,
|
||||
.v-btn__append,
|
||||
.v-btn__prepend {
|
||||
.v-icon {
|
||||
--v-icon-size-multiplier: 0.7113;
|
||||
|
||||
block-size: 1rem;
|
||||
font-size: 1rem;
|
||||
inline-size: 1rem;
|
||||
}
|
||||
|
||||
.v-icon--start {
|
||||
margin-inline: -2px 6px;
|
||||
}
|
||||
|
||||
.v-icon--end {
|
||||
margin-inline: 6px -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.v-btn--icon).v-btn--size-large {
|
||||
--v-btn-height: 3rem;
|
||||
|
||||
border-radius: 8px;
|
||||
line-height: 1.625rem;
|
||||
padding-block: 0;
|
||||
padding-inline: 1.625rem;
|
||||
}
|
||||
|
||||
&:not(.v-btn--icon).v-btn--size-x-large {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
// icon buttons
|
||||
&.v-btn--icon.v-btn--density-default {
|
||||
block-size: var(--v-btn-height);
|
||||
inline-size: var(--v-btn-height);
|
||||
|
||||
&.v-btn--size-default {
|
||||
.v-icon {
|
||||
--v-icon-size-multiplier: 0.978 !important;
|
||||
|
||||
block-size: 1.375rem;
|
||||
font-size: 1.375rem;
|
||||
inline-size: 1.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.v-btn--size-small {
|
||||
--v-btn-height: 2.125rem;
|
||||
|
||||
.v-icon {
|
||||
block-size: 1.25rem;
|
||||
font-size: 1.25rem;
|
||||
inline-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.v-btn--size-large {
|
||||
--v-btn-height: 2.625rem;
|
||||
|
||||
.v-icon {
|
||||
block-size: 1.75rem;
|
||||
font-size: 1.75rem;
|
||||
inline-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-group.v-btn-toggle {
|
||||
.v-btn {
|
||||
border-radius: 0.5rem;
|
||||
block-size: 52px !important;
|
||||
border-inline-end: none;
|
||||
inline-size: 52px !important;
|
||||
|
||||
&.v-btn--density-comfortable {
|
||||
border-radius: 0.375rem;
|
||||
block-size: 44px !important;
|
||||
inline-size: 44px !important;
|
||||
}
|
||||
|
||||
&.v-btn--density-compact {
|
||||
border-radius: 0.25rem;
|
||||
block-size: 36px !important;
|
||||
inline-size: 36px !important;
|
||||
}
|
||||
|
||||
&.v-btn--icon .v-icon {
|
||||
block-size: 1.5rem;
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||
font-size: 1.5rem;
|
||||
inline-size: 1.5rem;
|
||||
}
|
||||
|
||||
&.v-btn--icon.v-btn--active {
|
||||
.v-icon {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.v-btn-group {
|
||||
align-items: center;
|
||||
padding: 7px;
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
block-size: 66px;
|
||||
|
||||
.v-btn.v-btn--active {
|
||||
.v-btn__overlay {
|
||||
--v-activated-opacity: 0.08;
|
||||
}
|
||||
}
|
||||
|
||||
&.v-btn-group--density-compact {
|
||||
block-size: 50px;
|
||||
}
|
||||
|
||||
&.v-btn-group--density-comfortable {
|
||||
block-size: 58px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
.v-card-subtitle {
|
||||
color: rgba(var(--v-theme-on-background), 0.55);
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
@use "sass:list";
|
||||
@use "sass:map";
|
||||
@use "@styles/variables/vuetify";
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
// 👉 Checkbox
|
||||
.v-checkbox {
|
||||
// We adjusted it to vertically align the label
|
||||
|
||||
.v-selection-control--disabled {
|
||||
--v-disabled-opacity: 0.45;
|
||||
}
|
||||
|
||||
// Remove extra space below the label
|
||||
.v-input__details {
|
||||
min-block-size: unset !important;
|
||||
padding-block-start: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 checkbox size and box shadow
|
||||
.v-checkbox-btn {
|
||||
// 👉 Checkbox icon opacity
|
||||
.v-selection-control__input > .v-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.v-selection-control--dirty {
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
.v-selection-control__wrapper.text-#{$color-name} {
|
||||
.v-selection-control__input {
|
||||
/* ℹ️ Using filter: drop-shadow() instead of box-shadow because box-shadow creates white background for SVG; */
|
||||
.v-icon {
|
||||
filter: drop-shadow(0 2px 6px rgba(var(--v-theme-#{$color-name}), 0.3));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// checkbox icon size
|
||||
.v-checkbox,
|
||||
.v-checkbox-btn {
|
||||
&.v-selection-control {
|
||||
.v-selection-control__input {
|
||||
svg {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.v-label {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.v-selection-control--dirty) {
|
||||
.v-selection-control__input {
|
||||
> .custom-checkbox-indeterminate {
|
||||
color: rgb(var(--v-theme-primary)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
// 👉 Chip
|
||||
.v-chip {
|
||||
line-height: 1.25rem;
|
||||
|
||||
.v-chip__close {
|
||||
margin-inline: 4px -6px !important;
|
||||
|
||||
.v-icon {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.v-chip__content {
|
||||
.v-icon {
|
||||
block-size: 20px;
|
||||
font-size: 20px;
|
||||
inline-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.v-chip--variant-elevated) {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
&.v-chip--variant-elevated {
|
||||
background-color: rgba(var(--v-theme-on-surface), var(--v-activated-opacity));
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
&:not([class*="text-"]) {
|
||||
--v-activated-opacity: 0.08;
|
||||
}
|
||||
|
||||
// common style for all sizes
|
||||
&.v-chip--size-default,
|
||||
&.v-chip--size-small {
|
||||
.v-icon--start,
|
||||
.v-chip__filter {
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
&:not(.v-chip--pill) {
|
||||
.v-avatar--start {
|
||||
margin-inline: -6px 4px;
|
||||
}
|
||||
|
||||
.v-avatar--end {
|
||||
margin-inline: 4px -6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// small size
|
||||
&:not(.v-chip--pill).v-chip--size-small {
|
||||
--v-chip-height: 24px;
|
||||
|
||||
&.v-chip--label {
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
font-size: 13px;
|
||||
|
||||
.v-avatar {
|
||||
--v-avatar-height: 16px;
|
||||
}
|
||||
|
||||
.v-chip__close {
|
||||
font-size: 16px;
|
||||
max-block-size: 16px;
|
||||
max-inline-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// extra small size
|
||||
&:not(.v-chip--pill).v-chip--size-x-small {
|
||||
--v-chip-height: 20px;
|
||||
|
||||
&.v-chip--label {
|
||||
border-radius: 0.25rem;
|
||||
padding-inline: 0.625rem;
|
||||
}
|
||||
|
||||
font-size: 13px;
|
||||
|
||||
.v-avatar {
|
||||
--v-avatar-height: 16px;
|
||||
}
|
||||
|
||||
.v-chip__close {
|
||||
font-size: 16px;
|
||||
max-block-size: 16px;
|
||||
max-inline-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// default size
|
||||
&:not(.v-chip--pill).v-chip--size-default {
|
||||
.v-avatar {
|
||||
--v-avatar-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
@use "@layouts/styles/mixins" as layoutsMixins;
|
||||
|
||||
// 👉 Dialog
|
||||
body .v-dialog {
|
||||
// dialog custom close btn
|
||||
.v-dialog-close-btn {
|
||||
border-radius: 0.375rem;
|
||||
background-color: rgb(var(--v-theme-surface)) !important;
|
||||
block-size: 2rem;
|
||||
inline-size: 2rem;
|
||||
inset-block-start: 0;
|
||||
inset-inline-end: 0;
|
||||
transform: translate(0.5rem, -0.5rem);
|
||||
|
||||
@include layoutsMixins.rtl {
|
||||
transform: translate(-0.5rem, -0.5rem);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translate(0.3125rem, -0.3125rem);
|
||||
|
||||
@include layoutsMixins.rtl {
|
||||
transform: translate(-0.3125rem, -0.3125rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
@use "@core-scss/base/mixins";
|
||||
@use "@layouts/styles/mixins" as layoutsMixins;
|
||||
|
||||
// 👉 Expansion panels
|
||||
body .v-layout .v-application__wrap .v-expansion-panels {
|
||||
.v-expansion-panel {
|
||||
margin-block-start: 0 !important;
|
||||
|
||||
// expansion panel arrow font size
|
||||
.v-expansion-panel-title {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-weight: 500;
|
||||
|
||||
.v-expansion-panel-title__icon {
|
||||
transition: transform 0.2s ease-in-out;
|
||||
|
||||
.v-icon {
|
||||
block-size: 1.25rem !important;
|
||||
font-size: 1.25rem !important;
|
||||
inline-size: 1.25rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-expansion-panel-title,
|
||||
.v-expansion-panel-title--active,
|
||||
.v-expansion-panel-title:hover,
|
||||
.v-expansion-panel-title:focus,
|
||||
.v-expansion-panel-title:focus-visible,
|
||||
.v-expansion-panel-title--active:focus,
|
||||
.v-expansion-panel-title--active:hover {
|
||||
.v-expansion-panel-title__overlay {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Set Elevation when panel open
|
||||
&:not(.v-expansion-panels--variant-accordion) {
|
||||
&.v-expansion-panel--active {
|
||||
.v-expansion-panel__shadow {
|
||||
@include mixins.elevation(6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// custom style for expansion panels
|
||||
&.expansion-panels-width-border {
|
||||
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
border-radius: 0.375rem;
|
||||
|
||||
.v-expansion-panel-title {
|
||||
background-color: rgb(var(--v-theme-grey-light));
|
||||
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
margin-block-end: -1px;
|
||||
}
|
||||
|
||||
.v-expansion-panel-text {
|
||||
.v-expansion-panel-text__wrapper {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.no-icon-rotate, .expansion-panels-width-border) {
|
||||
.v-expansion-panel {
|
||||
.v-expansion-panel-title__icon {
|
||||
.v-icon {
|
||||
@include layoutsMixins.rtl {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.v-expansion-panel--active {
|
||||
.v-expansion-panel-title__icon {
|
||||
transform: rotate(90deg);
|
||||
|
||||
@include layoutsMixins.rtl {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.expansion-panels-width-border) {
|
||||
.v-expansion-panel {
|
||||
&:not(:last-child) {
|
||||
margin-block-end: 0.5rem;
|
||||
}
|
||||
|
||||
&:not(:first-child)::after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
// ℹ️ we have to use below style of increase the specificity and override the default style
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
&:first-child:not(:last-child),
|
||||
&:not(:first-child, :last-child),
|
||||
&:not(:first-child) {
|
||||
border-radius: 0.375rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,308 @@
|
||||
@use "sass:map";
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@core-scss/template/mixins" as templateMixins;
|
||||
|
||||
$v-input-density: (
|
||||
comfortable: (
|
||||
icon-size: 1rem,
|
||||
font-size: 0.9375rem,
|
||||
line-height: 1.5rem,
|
||||
),
|
||||
default: (
|
||||
icon-size: 1.125rem,
|
||||
font-size: 1.0625rem,
|
||||
line-height: 1.5rem,
|
||||
),
|
||||
compact: (
|
||||
icon-size: 0.8125rem,
|
||||
font-size: 0.8125rem,
|
||||
line-height: 1.375rem,
|
||||
),
|
||||
);
|
||||
|
||||
// 👉 VInput
|
||||
.v-input {
|
||||
// 👉 VField
|
||||
.v-field {
|
||||
.v-field__loader {
|
||||
.v-progress-linear {
|
||||
.v-progress-linear__background {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.v-field--variant-solo,
|
||||
&.v-field--variant-filled {
|
||||
--v-field-padding-top: 7px !important;
|
||||
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
|
||||
}
|
||||
|
||||
// Color for text field
|
||||
.v-field__input {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
|
||||
// Make field border width 2px when error
|
||||
&.v-field--error {
|
||||
.v-field__outline {
|
||||
--v-field-border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Label
|
||||
&.v-field--variant-outlined {
|
||||
.v-label {
|
||||
&.v-field-label--floating {
|
||||
line-height: 0.9375rem;
|
||||
margin-block: 0;
|
||||
margin-inline: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.v-field--focused, .v-field--error):hover .v-field__outline {
|
||||
--v-field-border-opacity: 0.6 !important;
|
||||
}
|
||||
|
||||
// Shadow on focus
|
||||
&.v-field--variant-outlined.v-field--focused:not(.v-field--error, .v-field--success) {
|
||||
.v-field__outline {
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
&.text-#{$color-name} {
|
||||
@include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
|
||||
}
|
||||
}
|
||||
|
||||
&:not([class*="text-"]) {
|
||||
@include templateMixins.custom-elevation(var(--v-theme-primary), "sm");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Give hint messages color based on theme color
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
&:has( .v-field.v-field--focused .v-field__outline.text-#{$color-name}) {
|
||||
.v-messages {
|
||||
color: rgb(var(--v-theme-#{$color-name}));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Loop through each density setting in the map
|
||||
@each $density, $settings in $v-input-density {
|
||||
&.v-input--density-#{$density} {
|
||||
.v-input__append,
|
||||
.v-input__prepend,
|
||||
.v-input__details,
|
||||
.v-field .v-field__append-inner,
|
||||
.v-field .v-field__prepend-inner,
|
||||
.v-field .v-field__clearable {
|
||||
> .v-icon {
|
||||
block-size: map.get($settings, icon-size);
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: map.get($settings, icon-size);
|
||||
inline-size: map.get($settings, icon-size);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.v-field {
|
||||
.v-field__input {
|
||||
font-size: map.get($settings, font-size);
|
||||
line-height: map.get($settings, line-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 TextField, Select, AutoComplete, ComboBox, Textarea
|
||||
// ℹ️ We added .v-application to increase the specificity of the selector
|
||||
|
||||
// Styles related to our custom input components
|
||||
body {
|
||||
.app-text-field,
|
||||
.app-select,
|
||||
.app-autocomplete,
|
||||
.app-combobox,
|
||||
.app-textarea,
|
||||
.app-picker-field {
|
||||
// making padding 0 for help text
|
||||
.v-text-field .v-input__details {
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
// Placeholder
|
||||
.v-input {
|
||||
.v-field {
|
||||
// Placeholder transition
|
||||
input,
|
||||
.v-field__input {
|
||||
&::placeholder {
|
||||
transition: transform 0.2s ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
&.v-field--focused {
|
||||
input,
|
||||
.v-field__input {
|
||||
&::placeholder {
|
||||
transform: translateX(4px) !important;
|
||||
|
||||
[dir="rtl"] & {
|
||||
transform: translateX(-4px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// padding for different density
|
||||
&.v-input--density-default {
|
||||
.v-field {
|
||||
.v-field__input {
|
||||
--v-field-padding-start: 16px;
|
||||
--v-field-padding-end: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.v-input--density-comfortable {
|
||||
.v-field {
|
||||
.v-field__input {
|
||||
--v-field-padding-start: 14px;
|
||||
--v-field-padding-end: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.v-input--density-compact {
|
||||
.v-field {
|
||||
.v-field__input {
|
||||
--v-field-padding-start: 12px;
|
||||
--v-field-padding-end: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled state
|
||||
&:has(.v-input.v-input--disabled) {
|
||||
.v-label {
|
||||
color: rgba(var(--v-theme-on-surface), 0.38);
|
||||
}
|
||||
|
||||
.v-input {
|
||||
.v-field.v-field--disabled {
|
||||
background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
|
||||
opacity: 1;
|
||||
|
||||
.v-field__outline {
|
||||
--v-field-border-opacity: 0.24;
|
||||
}
|
||||
|
||||
.v-field__input {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Apply color to label
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
.v-label {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
|
||||
&:has(+ .v-input .v-field.v-field--focused .v-field__outline.text-#{$color-name}) {
|
||||
color: rgb(var(--v-theme-#{$color-name}));
|
||||
}
|
||||
|
||||
&:has(+ .v-input .v-field.v-field--error) {
|
||||
color: rgb(var(--v-theme-error));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin style-selectable-component($component-name) {
|
||||
.app-#{$component-name} {
|
||||
.v-#{$component-name}__selection {
|
||||
line-height: 24px;
|
||||
margin-block: 0 !important;
|
||||
}
|
||||
|
||||
// Vertical alignment of placeholder & text
|
||||
.v-#{$component-name} .v-field .v-field__input > input {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
// Chips
|
||||
|
||||
.v-#{$component-name}.v-#{$component-name}--chips.v-input--dirty {
|
||||
.v-#{$component-name}__selection {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.v-field__input {
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
&.v-input--density-compact {
|
||||
.v-field__input {
|
||||
padding-inline-start: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.v-input--density-comfortable {
|
||||
.v-field__input {
|
||||
padding-inline-start: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.v-input--density-default {
|
||||
.v-field__input {
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include style-selectable-component("autocomplete");
|
||||
@include style-selectable-component("select");
|
||||
@include style-selectable-component("combobox");
|
||||
|
||||
// AutoComplete
|
||||
@at-root {
|
||||
.app-autocomplete__content {
|
||||
.v-list-item--active {
|
||||
.v-autocomplete__mask {
|
||||
background: rgba(92, 82, 192, 60%);
|
||||
}
|
||||
}
|
||||
|
||||
.v-theme--dark {
|
||||
.v-list-item:not(.v-list-item--active) {
|
||||
.v-autocomplete__mask {
|
||||
background: rgba(59, 64, 92, 60%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.app-inner-list {
|
||||
// Hide checkboxes
|
||||
.v-selection-control {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide resizer
|
||||
::-webkit-resizer {
|
||||
background: transparent;
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
// 👉 List
|
||||
.v-list-item {
|
||||
--v-hover-opacity: 0.06 !important;
|
||||
|
||||
.v-checkbox-btn.v-selection-control--density-compact {
|
||||
margin-inline-end: 0.5rem;
|
||||
}
|
||||
|
||||
.v-list-item__overlay {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.v-list-item__prepend {
|
||||
.v-icon {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.v-list-item--active {
|
||||
&.v-list-group__header {
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
|
||||
&:not(.v-list-group__header) {
|
||||
.v-list-item-subtitle {
|
||||
color: rgb(var(--v-theme-primary));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
// Style list differently when it's used in a components like select, menu etc
|
||||
.v-menu {
|
||||
// Adjust padding of list item inside menu
|
||||
.v-list-item {
|
||||
padding-block: 8px !important;
|
||||
padding-inline: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Menu
|
||||
// Menu custom style
|
||||
.v-menu.v-overlay {
|
||||
.v-overlay__content {
|
||||
.v-list {
|
||||
.v-list-item {
|
||||
border-radius: 0.375rem !important;
|
||||
margin-block: 0.125rem;
|
||||
margin-inline: 0.5rem;
|
||||
min-block-size: 2.375rem;
|
||||
|
||||
&:first-child {
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.v-list-item--density-default:not(.v-list-item--nav).v-list-item--one-line {
|
||||
padding-block: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
// otp input
|
||||
.v-otp-input {
|
||||
justify-content: unset !important;
|
||||
|
||||
.v-otp-input__content {
|
||||
max-inline-size: 100%;
|
||||
|
||||
.v-field.v-field--focused {
|
||||
.v-field__outline {
|
||||
.v-field__outline__start,
|
||||
.v-field__outline__end {
|
||||
border-color: rgb(var(--v-theme-primary)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
/* stylelint-disable no-descending-specificity */
|
||||
@use "@core-scss/template/mixins" as templateMixins;
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
// 👉 Pagination
|
||||
.v-pagination {
|
||||
// pagination
|
||||
.v-pagination__next,
|
||||
.v-pagination__prev {
|
||||
.v-btn--icon {
|
||||
&.v-btn--size-small {
|
||||
.v-icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.v-btn--size-default {
|
||||
.v-icon {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.v-btn--size-large {
|
||||
.v-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// common style for all components
|
||||
.v-pagination__next,
|
||||
.v-pagination__prev,
|
||||
.v-pagination__first,
|
||||
.v-pagination__last,
|
||||
.v-pagination__item {
|
||||
.v-btn {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 400;
|
||||
line-height: 1;
|
||||
|
||||
--v-activated-opacity: 0.08;
|
||||
|
||||
&:hover {
|
||||
.v-btn__overlay {
|
||||
--v-hover-opacity: 0.16;
|
||||
}
|
||||
}
|
||||
|
||||
&.v-btn--disabled {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
&.v-btn--size-large {
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disable scale animation for button
|
||||
.v-pagination__item {
|
||||
.v-btn {
|
||||
transform: scale(1) !important;
|
||||
|
||||
/* We disabled transition because it looks ugly 🤮 */
|
||||
transition-duration: 0s;
|
||||
|
||||
&:active {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-pagination__list {
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
&:has(.v-pagination__item.v-pagination__item--is-active .v-btn.text-#{$color-name}) {
|
||||
.v-pagination__item {
|
||||
.v-btn {
|
||||
&:hover {
|
||||
color: rgb(var(--v-theme-#{$color-name}));
|
||||
|
||||
.v-btn__overlay {
|
||||
background-color: rgb(var(--v-theme-#{$color-name}));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-pagination__item--is-active {
|
||||
.v-btn {
|
||||
&:not([class*="text-"]) {
|
||||
color: rgb(var(--v-theme-primary));
|
||||
|
||||
&:not(.v-btn--variant-outlined) {
|
||||
.v-btn__underlay {
|
||||
--v-activated-opacity: 0.04;
|
||||
}
|
||||
}
|
||||
|
||||
&.v-btn--variant-outlined {
|
||||
border-color: rgb(var(--v-theme-primary));
|
||||
|
||||
.v-btn__overlay {
|
||||
opacity: 0.16;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// box-shadow
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
&:not(.v-btn--disabled) {
|
||||
&.text-#{$color-name} {
|
||||
&,
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
@include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
|
||||
}
|
||||
|
||||
.v-btn__underlay {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.v-btn__content {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.v-btn--variant-outlined {
|
||||
background-color: rgb(var(--v-theme-#{$color-name}));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
// @use "@core-scss/template/mixins" as templateMixins;
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
// 👉 Progress
|
||||
// .v-progress-linear {
|
||||
// .v-progress-linear__determinate {
|
||||
// @each $color-name in variables.$theme-colors-name {
|
||||
// &.bg-#{$color-name} {
|
||||
// // @include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@@ -0,0 +1,46 @@
|
||||
@use "@core-scss/base/mixins";
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
// 👉 Radio
|
||||
.v-radio,
|
||||
.v-radio-btn {
|
||||
// 👉 radio icon opacity
|
||||
.v-selection-control__input > .v-icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.v-selection-control--disabled {
|
||||
--v-disabled-opacity: 0.45;
|
||||
}
|
||||
|
||||
&.v-selection-control--dirty {
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
.v-selection-control__wrapper.text-#{$color-name} {
|
||||
.v-selection-control__input {
|
||||
/* ℹ️ Using filter: drop-shadow() instead of box-shadow because box-shadow creates white background for SVG; */
|
||||
.v-icon {
|
||||
filter: drop-shadow(0 2px 6px rgba(var(--v-theme-#{$color-name}), 0.3));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.v-selection-control {
|
||||
.v-selection-control__input {
|
||||
svg {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.v-label {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Radio, Checkbox
|
||||
|
||||
.v-input.v-radio-group > .v-input__control > .v-label {
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
// 👉 Rating
|
||||
.v-rating {
|
||||
.v-rating__wrapper {
|
||||
.v-btn .v-icon {
|
||||
--v-icon-size-multiplier: 1;
|
||||
}
|
||||
|
||||
.v-btn--density-default {
|
||||
--v-btn-height: 26px;
|
||||
}
|
||||
|
||||
.v-btn--density-compact {
|
||||
--v-btn-height: 30px;
|
||||
}
|
||||
|
||||
.v-btn--density-comfortable {
|
||||
--v-btn-height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
// 👉 Slider
|
||||
.v-slider {
|
||||
.v-slider-track__background--opacity {
|
||||
opacity: 0.16;
|
||||
}
|
||||
}
|
||||
|
||||
.v-slider-thumb {
|
||||
.v-slider-thumb__surface::after {
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
block-size: calc(var(--v-slider-thumb-size) - 10px);
|
||||
inline-size: calc(var(--v-slider-thumb-size) - 10px);
|
||||
}
|
||||
|
||||
.v-slider-thumb__label {
|
||||
background-color: rgb(var(--v-tooltip-background));
|
||||
color: rgb(var(--v-theme-surface));
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.15px;
|
||||
line-height: 1.25rem;
|
||||
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
// 👉 snackbar
|
||||
.v-snackbar {
|
||||
.v-snackbar__actions {
|
||||
.v-btn {
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@core-scss/template/mixins" as templateMixins;
|
||||
|
||||
// 👉 switch
|
||||
.v-switch {
|
||||
&.v-switch--inset {
|
||||
.v-selection-control {
|
||||
.v-switch__track {
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
&.v-selection-control--dirty {
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
.v-switch__track.bg-#{$color-name} {
|
||||
@include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.v-selection-control--dirty) {
|
||||
.v-switch__track {
|
||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 16%) inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-selection-control__input {
|
||||
transform: translateX(-6px) !important;
|
||||
|
||||
--v-selection-control-size: 0.875rem;
|
||||
|
||||
.v-switch__thumb {
|
||||
box-shadow: 0 1px 6px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xs-opacity));
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.v-selection-control--dirty {
|
||||
.v-selection-control__input {
|
||||
transform: translateX(6px) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-label {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
line-height: 1.375rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.v-switch.v-input,
|
||||
.v-checkbox-btn,
|
||||
.v-radio-btn,
|
||||
.v-radio {
|
||||
--v-input-control-height: auto;
|
||||
|
||||
flex: unset;
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
// 👉 Table
|
||||
.v-table {
|
||||
th {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
|
||||
font-size: 0.8125rem;
|
||||
letter-spacing: 0.2px;
|
||||
text-transform: uppercase;
|
||||
|
||||
.v-data-table-header__content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Datatable
|
||||
.v-data-table,
|
||||
.v-table {
|
||||
table {
|
||||
thead,
|
||||
tbody {
|
||||
tr {
|
||||
th,
|
||||
td {
|
||||
&:first-child:has(.v-checkbox-btn) {
|
||||
padding-inline-start: 13px !important;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
padding-inline-start: 24px !important;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-inline-end: 24px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
.v-data-table-group-header-row {
|
||||
td {
|
||||
background-color: rgb(var(--v-theme-surface));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
@use "@configured-variables" as variables;
|
||||
@use "@core-scss/template/mixins" as templateMixins;
|
||||
|
||||
// 👉 Tabs
|
||||
.v-tabs {
|
||||
&.v-tabs--vertical {
|
||||
--v-tabs-height: 38px !important;
|
||||
|
||||
&:not(.v-tabs-pill) {
|
||||
block-size: 100%;
|
||||
border-inline-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
&.v-tabs--horizontal:not(.v-tabs-pill) {
|
||||
border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
|
||||
.v-tab__slider {
|
||||
block-size: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
.v-btn {
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
transform: none !important;
|
||||
|
||||
.v-icon {
|
||||
block-size: 1.125rem !important;
|
||||
font-size: 1.125rem !important;
|
||||
inline-size: 1.125rem !important;
|
||||
}
|
||||
|
||||
&:hover:not(.v-tab--selected) {
|
||||
color: rgb(var(--v-theme-primary));
|
||||
|
||||
.v-btn__content {
|
||||
.v-tab__slider {
|
||||
opacity: var(--v-activated-opacity);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.v-btn--stacked {
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
.v-icon {
|
||||
block-size: 1.5rem !important;
|
||||
font-size: 1.5rem !important;
|
||||
inline-size: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
.v-btn__overlay,
|
||||
.v-ripple__container {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
.v-tab__slider {
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 👉 Tab Pill
|
||||
.v-tabs.v-tabs-pill {
|
||||
.v-slide-group__content {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
.v-tab--selected.text-#{$color-name} {
|
||||
@include templateMixins.custom-elevation(var(--v-theme-#{$color-name}), "sm");
|
||||
}
|
||||
}
|
||||
|
||||
&.v-slide-group,
|
||||
.v-slide-group__container {
|
||||
box-sizing: content-box;
|
||||
padding: 1rem;
|
||||
margin: -1rem;
|
||||
}
|
||||
|
||||
.v-tab.v-btn:not(.v-tab--selected) {
|
||||
&:hover {
|
||||
background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
.v-textarea {
|
||||
textarea {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
& .v-field--active textarea {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
// 👉 Timeline
|
||||
.v-timeline {
|
||||
// timeline items
|
||||
.v-timeline-item {
|
||||
&:not(:last-child) {
|
||||
.v-timeline-item__body {
|
||||
margin-block-end: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.app-timeline-title {
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
|
||||
.app-timeline-meta {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.025rem;
|
||||
line-height: 1.125rem;
|
||||
}
|
||||
|
||||
.app-timeline-text {
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
// timeline icon only
|
||||
&.v-timeline-icon-only {
|
||||
.v-timeline-divider__dot {
|
||||
.v-timeline-divider__inner-dot {
|
||||
background: rgb(var(--v-theme-background));
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.v-timeline--variant-outlined) .v-timeline-divider__dot {
|
||||
background: none !important;
|
||||
|
||||
.v-timeline-divider__inner-dot {
|
||||
box-shadow: 0 0 0 0.1875rem rgb(var(--v-theme-on-surface-variant));
|
||||
|
||||
@each $color-name in variables.$theme-colors-name {
|
||||
|
||||
&.bg-#{$color-name} {
|
||||
box-shadow: 0 0 0 0.1875rem rgba(var(--v-theme-#{$color-name}), 0.12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.v-timeline--variant-outlined {
|
||||
.v-timeline-item {
|
||||
.v-timeline-divider {
|
||||
.v-timeline-divider__dot {
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.v-timeline-divider__after {
|
||||
border: 1.5px dashed rgba(var(--v-border-color), var(--v-border-opacity));
|
||||
background: none;
|
||||
}
|
||||
|
||||
.v-timeline-divider__before {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// we have to override the default bg-color of the timeline dot in the card
|
||||
.v-card:not(.v-card--variant-text, .v-card--variant-plain, .v-card--variant-outlined) & {
|
||||
&.v-timeline-icon-only {
|
||||
.v-timeline-divider__dot {
|
||||
.v-timeline-divider__inner-dot {
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
background: rgb(var(--v-theme-surface));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.v-card.v-card--variant-tonal & {
|
||||
&.v-timeline-icon-only {
|
||||
.v-timeline-divider__dot {
|
||||
.v-timeline-divider__inner-dot {
|
||||
/* stylelint-disable-next-line no-descending-specificity */
|
||||
.v-icon {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
// 👉 Tooltip
|
||||
.v-tooltip {
|
||||
.v-overlay__content {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
@use "alert";
|
||||
@use "avatar";
|
||||
@use "button";
|
||||
@use "badge";
|
||||
@use "cards";
|
||||
@use "chip";
|
||||
@use "dialog";
|
||||
@use "expansion-panels";
|
||||
@use "list";
|
||||
@use "menu";
|
||||
@use "pagination";
|
||||
@use "progress";
|
||||
@use "rating";
|
||||
@use "snackbar";
|
||||
@use "slider";
|
||||
@use "table";
|
||||
@use "tabs";
|
||||
@use "timeline";
|
||||
@use "tooltip";
|
||||
@use "otp-input";
|
||||
@use "field";
|
||||
@use "checkbox";
|
||||
@use "textarea";
|
||||
@use "radio";
|
||||
@use "switch";
|
||||
3
resources/styles/@core/template/libs/vuetify/index.scss
Normal file
3
resources/styles/@core/template/libs/vuetify/index.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@use "@core-scss/base/libs/vuetify";
|
||||
@use "overrides";
|
||||
@use "components/index.scss";
|
||||
18
resources/styles/@core/template/libs/vuetify/overrides.scss
Normal file
18
resources/styles/@core/template/libs/vuetify/overrides.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
@use "@core-scss/base/utils";
|
||||
@use "@configured-variables" as variables;
|
||||
|
||||
// 👉 Body
|
||||
|
||||
// set body font size 15px
|
||||
body {
|
||||
font-size: 15px !important;
|
||||
|
||||
// We reduced this margin to get 40px input height
|
||||
.v-input--density-compact {
|
||||
--v-input-chips-margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.text-caption {
|
||||
color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity));
|
||||
}
|
||||
Reference in New Issue
Block a user