initial commit

resources/styles/@core/template/_components.scss

@@ -0,0 +1,69 @@
+@use "@configured-variables" as variables;
+@use "vuetify/lib/styles/tools/_elevation" as mixins_elevation;
+
+// 👉 VExpansionPanel
+.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
+.v-expansion-panels {
+  .v-expansion-panel {
+    .v-expansion-panel__shadow {
+      @include mixins_elevation.elevation(3);
+    }
+  }
+
+  .v-expansion-panel-text__wrapper {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !important;
+    font-size: 1rem;
+  }
+}
+
+// 👉 Timeline outlined variant
+.v-timeline-item {
+  .v-timeline-divider__dot {
+    .v-timeline-divider__inner-dot {
+      box-shadow: 0 0 0 0.1875rem rgb(var(--v-theme-on-surface-variant));
+
+      @each $color-name in variables.$theme-colors-name {
+
+        &.bg-#{$color-name} {
+          box-shadow: 0 0 0 0.1875rem rgba(var(--v-theme-#{$color-name}), 0.12);
+        }
+      }
+    }
+  }
+}
+
+// 👉 Timeline Outlined style
+.v-timeline-variant-outlined.v-timeline {
+  .v-timeline-divider__dot {
+    .v-timeline-divider__inner-dot {
+      box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-on-surface-variant));
+
+      @each $color-name in variables.$theme-colors-name {
+        background-color: rgb(var(--v-theme-surface)) !important;
+
+        &.bg-#{$color-name} {
+          box-shadow: inset 0 0 0 0.125rem rgb(var(--v-theme-#{$color-name}));
+        }
+      }
+    }
+  }
+}
+
+// 👉 v-tab with pill support
+.v-tabs.v-tabs-pill {
+  .v-tab.v-btn {
+    border-radius: 0.375rem !important;
+  }
+}