first commit

scss/components/_VAlert.scss

@@ -0,0 +1,24 @@
+.single-line-alert {
+    .v-alert__close,
+    .v-alert__prepend {
+        align-self: center !important;
+    }
+}
+
+@media (max-width: 500px) {
+    .single-line-alert {
+        display: flex;
+        flex-wrap: wrap;
+       
+        .v-alert__append {
+            margin-inline-start: 0px;
+        }
+        .v-alert__close {
+            margin-left: auto;
+        }
+        .v-alert__content {
+            width: 100%;
+            margin-top: 5px;
+        }
+    }
+}

scss/components/_VBreadcrumb.scss

@@ -0,0 +1,16 @@
+.v-breadcrumbs{
+    .v-breadcrumbs-item{
+        .v-breadcrumbs-item--link{
+            display: none;
+        }
+        &.v-breadcrumbs-item--disabled{
+            opacity: 1;
+            .v-breadcrumbs-item--link{
+                display: block;
+            }
+        }
+    }
+    .v-breadcrumbs-divider{
+        padding: 0 4px !important;
+    }
+}

scss/components/_VButtons.scss

@@ -0,0 +1,36 @@
+//
+// global
+
+.v-btn-group .v-btn {
+    height: inherit !important;
+}
+
+.v-btn-group {
+    border-color: rgb(var(--v-theme-borderColor)) !important;
+}
+
+.v-btn--size-large{
+    font-size: 14px;
+}
+
+.v-btn{
+    text-transform: capitalize;
+    letter-spacing: 0;
+    border-radius: 8px;
+
+    &.v-btn--variant-elevated{
+        box-shadow: none !important;
+    }
+    &.v-btn--icon{
+        border-radius: 50%;
+    }
+}
+
+.btn-white{
+    background-color: rgb(var(--v-theme-surface)) !important;
+    padding:10px 15px;
+    &:hover{
+        background-color: rgb(var(--v-theme-primary)) !important; 
+        color: #fff !important;
+    }
+}

scss/components/_VCard.scss

@@ -0,0 +1,62 @@
+// Outline Card
+.v-card--variant-outlined {
+    border-color: rgba(var(--v-theme-borderColor)) !important;
+    background-color:rgb(var(--v-theme-surface)) !important; 
+}
+
+.v-card--variant-elevated,
+.v-card--variant-flat {
+    color: rgb(var(--v-theme-textPrimary));
+}
+
+.card-hover {
+    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+    &:hover {
+        img {
+            transform: scale(1.09);
+            transition: transform .2s;
+        }
+    }
+}
+
+.v-card {
+    width: 100%;
+    overflow: visible;
+
+    .color-inherits {
+        color: inherit;
+    }
+
+    .feature-card {
+        .v-responsive__content {
+            height: 100%;
+        }
+    }
+
+    .v-card-title {
+        line-height: normal !important;
+        margin-bottom: 4px;
+    }
+    .v-card-subtitle{
+        color: rgb(var(--v-theme-textSecondary));
+    }
+    .v-card-text{
+        font-size: 14px;
+    }
+    .v-card-text{
+        padding: 30px 30px;
+    }
+    .v-card-item{
+        padding: 30px 30px;
+    }
+
+}
+
+// Theme cards
+.cardBordered {
+    .v-card {
+        box-shadow: none !important;
+        border: 1px solid rgb(var(--v-theme-borderColor));
+    }
+}

scss/components/_VCarousel.scss

@@ -0,0 +1,3 @@
+.theme-carousel .v-carousel__progress {
+  position: absolute;
+}

scss/components/_VChip.scss

@@ -0,0 +1,9 @@
+.v-chip{
+    &.v-chip--size-small {
+        --v-chip-size: 10px !important;
+        --v-chip-height: 25px !important;
+        font-size: 13px !important;
+        font-weight: 600;
+        padding: 0px 10px;
+    } 
+}

scss/components/_VDatatables.scss

@@ -0,0 +1,82 @@
+.v-table {
+
+    &.datatabels {
+
+        &.productlist {
+            .v-data-table-header__content span {
+                color: rgb(var(--v-theme-textPrimary));
+            }
+
+            .v-toolbar {
+                .v-input__control {
+                    max-width: 300px;
+                }
+
+                .v-toolbar__content {
+                    height: auto !important;
+                }
+            }
+
+            thead tr th:first-child {
+                padding-left: 24px !important;
+            }
+
+            tbody tr td:first-child {
+                padding-left: 24px !important;
+            }
+
+        }
+
+        .v-selection-control--dirty .v-selection-control__input>.v-icon {
+            color: rgb(var(--v-theme-primary));
+        }
+    }
+
+}
+
+
+@media screen and (max-width:1368px) {
+
+    .v-table {
+
+        &.datatabels {
+
+            &.productlist {
+                .v-data-table-header__content span {
+                    color: rgb(var(--v-theme-textPrimary));
+                }
+
+                table {
+                    tbody {
+                        tr {
+
+                            td {
+                                padding: 14px 5px !important;
+
+                                &:first-child {
+                                    padding-left: 15px !important;
+                                }
+                            }
+                        }
+                    }
+
+                    thead {
+                        tr {
+                            th {
+                                padding: 14px 5px !important;
+
+                                &:first-child {
+                                    padding-left: 15px !important;
+                                }
+                            }
+                        }
+                    }
+                }
+
+
+            }
+        }
+
+    }
+
+}

scss/components/_VExpansionpanel.scss

@@ -0,0 +1,9 @@
+.v-expansion-panel-title__overlay{
+    background: rgba(var(--v-theme-primary));
+}
+.v-expansion-panel:not(:first-child)::after {
+    border-color: transparent !important;
+}
+.v-expansion-panel-text{
+    color: rgba(var(--v-theme-textSecondary));
+}

scss/components/_VField.scss

@@ -0,0 +1,31 @@
+.v-field--variant-outlined .v-field__outline__start.v-locale--is-ltr,
+.v-locale--is-ltr .v-field--variant-outlined .v-field__outline__start {
+    border-radius: $border-radius-root 0 0 $border-radius-root;
+}
+
+.v-field--variant-outlined .v-field__outline__end.v-locale--is-ltr,
+.v-locale--is-ltr .v-field--variant-outlined .v-field__outline__end {
+    border-radius: 0 $border-radius-root $border-radius-root 0;
+}
+
+.v-field {
+    font-size: 14px !important;
+    color:  rgba(var(--v-theme-textPrimary));
+}
+
+// select outlined
+.v-field--variant-outlined .v-field__outline__start,
+.v-field--variant-outlined .v-field__outline__notch::before,
+.v-field--variant-outlined .v-field__outline__notch::after,
+.v-field--variant-outlined .v-field__outline__end {
+    opacity: 1;
+}
+
+
+.v-label{
+    color: rgba(var(--v-theme-textPrimary)) !important;
+}
+
+.v-field.v-field--active .v-label.v-field-label--floating{
+    color: rgba(var(--v-theme-textPrimary),0.6) !important;
+}

scss/components/_VInput.scss

@@ -0,0 +1,34 @@
+// variant
+.v-input--density-default,
+.v-field--variant-solo,
+.v-field--variant-filled {
+    --v-input-control-height: 51px;
+    --v-input-padding-top: 14px;
+}
+
+// comfortable
+.v-input--density-comfortable {
+    --v-input-control-height: 44px !important;
+}
+
+// compact
+.v-input--density-compact {
+    --v-input-padding-top: 10px;
+}
+.v-label {
+    font-size: 0.875rem;
+    opacity: 1;
+}
+.v-switch .v-label,
+.v-checkbox .v-label {
+    opacity: 1;
+}
+
+.v-text-field__suffix {
+    opacity: 1;
+    padding-left: 20px;
+}
+
+.shadow-none .v-field--variant-solo {
+    box-shadow: none !important;
+}

scss/components/_VLabs.scss

@@ -0,0 +1,18 @@
+.v-time-picker-clock{
+    background: rgb(var(--v-theme-background)) ; 
+}   
+.v-time-picker-controls__ampm__btn.v-btn.v-btn--density-default{
+    border: 0 !important;
+}
+.v-stepper-header,.v-stepper.v-sheet{
+    box-shadow: none !important;
+}
+
+.v-time-picker-controls__time__btn.v-btn--density-default.v-btn {
+    width: 55px !important;
+    height: 55px !important;
+    font-size: 30px;
+}
+.v-time-picker-controls__time__separator {
+    font-size: 36px !important;
+}

scss/components/_VList.scss

@@ -0,0 +1,32 @@
+.v-list.theme-list {
+    .v-list-item:hover > .v-list-item__overlay {
+        opacity: 1;
+        z-index: 1;
+    }
+    .v-list-item--variant-text {
+        .v-list-item__overlay {
+            background: rgb(var(--v-theme-light));
+        }
+    }
+
+    .v-list-item__prepend,
+    .v-list-item__content {
+        z-index: 2;
+    }
+
+    .v-list-item__overlay {
+        background-color: rgb(var(--v-theme-light));
+    }
+
+    .v-list-item.v-list-item--active{
+        .v-list-item__overlay{
+            opacity: 1;
+        }
+    } 
+
+    .mail-items{
+        min-height: 40px !important;
+        margin-bottom: 5px !important;
+       }
+    
+}

scss/components/_VNavigationDrawer.scss

@@ -0,0 +1,3 @@
+.v-navigation-drawer__scrim.fade-transition-leave-to {
+  display: none;
+}

scss/components/_VPagination.scss

@@ -0,0 +1,6 @@
+.v-pagination {
+    .v-btn--icon.v-btn--density-default{
+        height: 40px !important;
+        width: 40px !important;
+    }
+}

scss/components/_VSelectionControl.scss

@@ -0,0 +1,19 @@
+// For checkbox & radios
+.v-selection-control__input > .v-icon.mdi-checkbox-blank-outline,
+.v-selection-control__input > .v-icon.mdi-radiobox-blank {
+    color: rgba(var(--v-theme-muted),0.5);
+    opacity: 1;
+}
+.v-switch .v-label, .v-checkbox .v-label,.v-selection-control .v-label{
+    font-weight: 500;
+}
+
+.v-select{
+    .v-field{
+        color: rgba(var(--v-theme-textPrimary),0.9) !important;
+        font-weight: 600 !important;
+    }
+    .v-field__input{
+        padding-top: 7px !important;
+    }
+}

scss/components/_VShadow.scss

@@ -0,0 +1,31 @@
+.elevation-9 {
+  box-shadow: rgb(0 0 0 / 5%) 0px 9px 17.5px !important;
+}
+
+.elevation-10 {
+  box-shadow: $box-shadow !important;
+}
+
+.elevation-1 {
+  box-shadow:0px 12px 30px -2px rgba(58,75,116,0.14) !important
+}
+.elevation-2 {
+  box-shadow:0px 24px 24px -12px rgba(0, 0, 0, .05) !important
+}
+.elevation-3 {
+  box-shadow: rgba(145,158,171,0.2) 0px 0px 2px 0px, rgba(145,158,171,0.12) 0px 12px 24px -4px  !important;
+}
+.elevation-4{
+  box-shadow: 0px 12px 12px -6px rgba(0,0,0,0.15) !important;
+}
+.elevation-dropdown{
+  box-shadow: #919eab4d 0 0 2px, #919eab1f 0 12px 24px -4px !important;
+}
+
+.primary-shadow {
+  box-shadow: rgba(var(--v-theme-primary), 0.30) 0px 12px 14px 0px;
+  &:hover {
+    box-shadow: none;
+  }
+}
+

scss/components/_VStepper.scss

@@ -0,0 +1,8 @@
+.v-stepper-item--selected .v-stepper-item__avatar.v-avatar, .v-stepper-item--complete .v-stepper-item__avatar.v-avatar {
+    background: rgb(var(--v-theme-primary)) !important;
+}
+
+.v-stepper-item__avatar.v-avatar {
+    background: rgba(var(--v-theme-primary), var(--v-medium-emphasis-opacity)) !important;
+    color: rgb(var(--v-theme-on-primary)) !important;
+}

scss/components/_VSwitch.scss

@@ -0,0 +1,52 @@
+.v-selection-control.v-selection-control--density-default {
+    .v-switch__track{
+        background-color: rgb(var(--v-theme-muted),0.3);
+    }
+    .v-switch__thumb {
+        background-color: rgb(var(--v-theme-grey200),0.3);
+    }
+    &.v-selection-control--dirty {
+        .v-selection-control__wrapper.text-primary {
+            .v-switch__track {
+                background-color: rgba(var(--v-theme-primary), 0.6);
+            }
+            .v-switch__thumb {
+                background-color: rgb(var(--v-theme-primary));
+            }
+        }
+        .v-selection-control__wrapper.text-secondary {
+            .v-switch__track {
+                background-color: rgba(var(--v-theme-secondary), 0.6);
+            }
+            .v-switch__thumb {
+                background-color: rgb(var(--v-theme-secondary));
+            }
+        }
+        .v-selection-control__wrapper.text-warning {
+            .v-switch__track {
+                background-color: rgba(var(--v-theme-warning), 0.6);
+            }
+            .v-switch__thumb {
+                background-color: rgb(var(--v-theme-warning));
+            }
+        }
+        .v-selection-control__wrapper.text-error {
+            .v-switch__track {
+                background-color: rgba(var(--v-theme-error), 0.6);
+            }
+            .v-switch__thumb {
+                background-color: rgb(var(--v-theme-error));
+            }
+        }
+        .v-selection-control__wrapper.text-success {
+            .v-switch__track {
+                background-color: rgba(var(--v-theme-success), 0.6);
+            }
+            .v-switch__thumb {
+                background-color: rgb(var(--v-theme-success));
+            }
+        }
+    }
+}
+
+

scss/components/_VTable.scss

@@ -0,0 +1,228 @@
+.v-table .v-table__wrapper>table>tbody>tr:not(:last-child)>td,
+.v-table .v-table__wrapper>table>tbody>tr:not(:last-child)>th,
+.v-table .v-table__wrapper>table>thead>tr:last-child>th {
+    border-bottom: thin solid rgba(var(--v-theme-borderColor)) !important;
+}
+
+.v-table {
+    &.dark-table {
+        background-color: rgb(var(--v-theme-grey200));
+    }
+}
+
+.v-table {
+    .v-table__wrapper {
+        table {
+            tbody {
+                tr {
+
+                    td {
+                        padding: 14px 24px !important;
+
+                        &:first-child {
+                            padding-left: 0;
+                        }
+                    }
+                }
+            }
+
+            thead {
+                tr {
+                    th {
+                        padding: 14px 24px !important;
+
+                        &:first-child {
+                            padding-left: 0;
+                        }
+                    }
+                }
+            }
+        }
+
+    }
+}
+
+.v-table {
+
+
+    &.ticket-table {
+
+        table {
+            thead {
+                th {
+                    font-weight: 600 !important;
+                }
+            }
+
+            tbody {
+                tr {
+
+                    td {
+                        padding: 20px 24px !important;
+                    }
+                }
+            }
+        }
+
+    }
+
+    &.invoice-table {
+        .v-table__wrapper {
+            table {
+                thead {
+                    th {
+                        font-weight: 600 !important;
+                        padding: 0px 24px !important;
+                        &:first-child {
+                            padding-left: 0 !important;
+                        }
+                        &:last-child {
+                            padding-right: 0 !important;
+                        }
+                        
+                    }
+                }
+
+                tbody {
+                    tr {
+
+                        td {
+                            padding: 8px 24px !important;
+                            &:first-child {
+                                padding-left: 0 !important;
+                            }
+                            &:last-child {
+                                padding-right: 0 !important;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+
+    }
+
+
+    &.revenue-table {
+        .v-table__wrapper {
+            table {
+                tbody {
+                    tr {
+
+                        td {
+                            padding: 14px 24px !important;
+
+                            &:first-child {
+                                padding-left: 0 !important;
+                            }
+                        }
+                    }
+                }
+
+                thead {
+                    tr {
+                        th {
+                            padding: 14px 24px !important;
+
+                            &:first-child {
+                                padding-left: 0 !important;
+                            }
+                        }
+                    }
+                }
+            }
+
+        }
+    }
+
+    &.light-border {
+        .v-table__wrapper>table>tbody>tr:not(:last-child)>td {
+            border-bottom: thin solid rgba(var(--v-theme-borderColor), 0.3) !important;
+        }
+
+        .v-table__wrapper>table>tbody>tr:not(:last-child)>th,
+        .v-table__wrapper>table>thead>tr:last-child>th {
+            border-bottom: thin solid rgba(var(--v-theme-borderColor), 0.3) !important;
+        }
+    }
+}
+
+.v-data-table {
+    th.v-data-table__th {
+        font-size: 16px;
+        color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+    }
+
+    td.v-data-table__td {
+        font-size: 14px;
+        text-wrap: nowrap;
+    }
+
+    .v-data-table-footer {
+        padding: 15px 8px;
+    }
+
+    .v-data-table-header__sort-badge {
+        background-color: rgb(var(--v-theme-borderColor)) !important;
+    }
+
+    .tdhead {
+        font-size: 16px;
+    }
+}
+
+@media screen and (max-width:767px) {
+    .v-data-table-footer {
+        justify-content: center;
+    }
+}
+
+
+.datatabels {
+    overflow: hidden;
+
+    table {
+        tbody {
+            tr {
+
+                td {
+                    padding: 14px 24px;
+
+                    &:first-child {
+                        padding-left: 24px !important;
+                    }
+                }
+            }
+        }
+
+        thead {
+            tr {
+                th {
+                    padding: 14px 24px;
+
+                    &:first-child {
+                        padding-left: 24px !important;
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+
+// Datatable Pagination 
+.v-pagination {
+    .v-pagination__list {
+        .v-pagination__item--is-active {
+            .v-btn {
+                .v-btn__overlay {
+                    opacity: 0;
+                }
+
+                background-color: rgb(var(--v-theme-light)) !important;
+            }
+        }
+    }
+}

scss/components/_VTabs.scss

@@ -0,0 +1,12 @@
+.theme-tab {
+    &.v-tabs {
+        .v-tab {
+            border-radius: $border-radius-root !important;
+            min-width: auto !important;
+            &.v-slide-group-item--active {
+                background: rgb(var(--v-theme-primary));
+                
+            }
+        }
+    }
+}

scss/components/_VTextField.scss

@@ -0,0 +1,22 @@
+
+.v-text-field input {
+  font-size: 0.875rem;
+}
+.v-field__outline {
+  color: rgb(var(--v-theme-borderColor));
+  --v-field-border-opacity: 1 !important;
+}
+.input {
+  .v-field--variant-outlined {
+    background-color: rgba(0, 0, 0, 0.025);
+  }
+}
+
+input::placeholder {
+  color: rgba(var(--v-theme-textPrimary),0.6) !important;
+  opacity: 1 !important;
+}
+textarea::placeholder {
+  color: rgba(var(--v-theme-textPrimary),0.6) !important;
+  opacity: 1 !important;
+}

scss/components/_VTextarea.scss

@@ -0,0 +1,7 @@
+.v-textarea input {
+  font-size: 0.875rem;
+  font-weight: 500;
+  &::placeholder {
+    color: rgba(0, 0, 0, 0.38);
+  }
+}

scss/components/_VTooltip.scss

@@ -0,0 +1,14 @@
+.v-tooltip{
+    .v-overlay__content{
+        border-radius: $border-radius-root + 4 !important;
+    }
+}
+
+.v-tooltip{
+    &.custom-tooltip {
+        .v-overlay__content {
+            background: rgba(var(--v-theme-secondary), 0.9);
+            color: white;
+        }
+    }
+}