ezbookkeeping/src/styles/desktop/template/base/_components.scss

/** Materio Template base classes **/
/** https://github.com/themeselection/materio-vuetify-vuejs-admin-template-free **/

@use "./mixins";
@use "@/styles/desktop/template/layout/placeholders";
@use "@/styles/desktop/template/layout/mixins" as layoutMixins;
@use "@/styles/desktop/configured-variables/template" as variables;
@use "@/styles/desktop/template/vuetify/variables" as vuetify;

// 👉 Avatar group
.v-avatar-group {
    display: flex;
    align-items: center;

    > * {
        &:not(:first-child) {
            margin-inline-start: -0.8rem;
        }

        transition: transform 0.25s ease, box-shadow 0.15s ease;

        &:hover {
            z-index: 2;
            transform: translateY(-5px) scale(1.05);

            @include mixins.elevation(3);
        }
    }

    > .v-avatar {
        border: 2px solid rgb(var(--v-theme-surface));
        transition: transform 0.15s ease;
    }
}

// 👉 Button outline with default color border color
.v-alert--variant-outlined,
.v-avatar--variant-outlined,
.v-btn.v-btn--variant-outlined,
.v-card--variant-outlined,
.v-chip--variant-outlined,
.v-list-item--variant-outlined {
    &:not([class*="text-"]) {
        border-color: rgba(var(--v-border-color), var(--v-border-opacity));
    }

    &.text-default {
        border-color: rgba(var(--v-border-color), var(--v-border-opacity));
    }
}

// 👉 Custom Input
.v-label.custom-input {
    padding: 1rem;
    border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
    opacity: 1;
    white-space: normal;

    &:hover {
        border-color: rgba(var(--v-border-color), 0.25);
    }

    &.active {
        border-color: rgb(var(--v-theme-primary));

        .v-icon {
            color: rgb(var(--v-theme-primary)) !important;
        }
    }
}

// 👉 Datatable
.v-data-table-footer__pagination {
    @include layoutMixins.rtl {
        .v-btn {
            .v-icon {
                transform: rotate(180deg);
            }
        }
    }
}

// Dialog responsive width
.v-dialog {
    // dialog custom close btn
    .v-dialog-close-btn {
        position: absolute;
        z-index: 1;
        color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
        inset-block-start: 0.5rem;
        inset-inline-end: 0.5rem;

        .v-btn__overlay {
            display: none;
        }
    }

    .v-card {
        @extend %style-scroll-bar;
    }
}

@media (min-width: 600px) {
    .v-dialog {
        &.v-dialog-sm,
        &.v-dialog-lg,
        &.v-dialog-xl {
            .v-overlay__content {
                inline-size: 565px !important;
            }
        }
    }
}

@media (min-width: 960px) {
    .v-dialog {
        &.v-dialog-lg,
        &.v-dialog-xl {
            .v-overlay__content {
                inline-size: 865px !important;
            }
        }
    }
}

@media (min-width: 1264px) {
    .v-dialog.v-dialog-xl {
        .v-overlay__content {
            inline-size: 1165px !important;
        }
    }
}

// 👉 Expansion panel
.v-expansion-panels.customized-panels {
    border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
    border-radius: vuetify.$border-radius-root;

    .v-expansion-panel-title {
        background-color: rgb(var(--v-theme-expansion-panel-text-custom-bg));
        border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
        margin-block-end: -1px;
    }

    .v-expansion-panel-text__wrapper {
        padding: 20px;
    }
}

// v-tab with pill support
.v-tabs.v-tabs-pill {
    .v-tab.v-btn {
        border-radius: 0.25rem !important;
        transition: none;

        .v-tab__slider {
            visibility: hidden;
        }
    }
}

// loop for all colors bg
@each $color-name in variables.$theme-colors-name {
    .v-tabs.v-tabs-pill {
        .v-tab-item--selected.v-tab--selected.text-#{$color-name} {
            background-color: rgb(var(--v-theme-#{$color-name}));
            color: rgb(var(--v-theme-on-#{$color-name})) !important;
        }
    }
}

// ℹ️ We are make even width of all v-timeline body
.v-timeline--vertical.v-timeline {
    .v-timeline-item {
        .v-timeline-item__body {
            justify-self: stretch !important;
        }
    }
}

// 👉 Switch
.v-switch .v-selection-control:not(.v-selection-control--dirty) .v-switch__thumb {
    color: #fff !important;
}