@winchsa/ui 0.1.0

package/src/styles/@core/scss/template/_default-layout-w-vertical-nav.scss

@@ -0,0 +1,20 @@
+@use '../base/mixins';
+
+.layout-wrapper.layout-nav-type-vertical {
+  //  Layout footer
+  .layout-footer {
+    $ele-layout-footer: &;
+
+    .footer-content-container {
+      // Sticky footer
+      @at-root {
+        // ℹ️ .layout-footer-sticky#{$ele-layout-footer} => .layout-footer-sticky.layout-wrapper.layout-nav-type-vertical .layout-footer
+        .layout-footer-sticky#{$ele-layout-footer} {
+          .footer-content-container {
+            @include mixins.elevation(2);
+          }
+        }
+      }
+    }
+  }
+}

package/src/styles/@core/scss/template/_utilities.scss

@@ -0,0 +1,20 @@
+.v-timeline-item {
+  .app-timeline-title {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 1.3125rem;
+  }
+
+  .app-timeline-meta {
+    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+    font-size: 11px;
+    line-height: 0.875rem;
+  }
+
+  .app-timeline-text {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+    font-size: 13px;
+    line-height: 1.25rem;
+  }
+}

package/src/styles/@core/scss/template/_variables.scss

@@ -0,0 +1,67 @@
+@forward '../base/variables' with (
+  $default-layout-with-vertical-nav-navbar-footer-roundness: 6px !default,
+
+  $vertical-nav-navbar-style: 'floating' !default,
+
+  // options: elevated, floating
+  //  Vertical nav
+  $vertical-nav-background-color-rgb: var(--v-theme-surface) !default,
+  // ℹ️ This is used to keep consistency between nav items and nav header left & right margin
+  // This is used by nav items & nav header
+  $vertical-nav-horizontal-spacing: 0.875rem !default,
+
+  // Section title margin top (when its not first child)
+  $vertical-nav-section-title-mt: 1.25rem !default,
+  $vertical-nav-navbar-elevation: 2 !default,
+
+  // Move logo when vertical nav is mini (collapsed but not hovered)
+  $vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -2px !default,
+
+  // Section title margin bottom
+  $vertical-nav-section-title-mb: 0.375rem !default,
+
+  // Vertical nav icons
+  $vertical-nav-items-icon-size: 1.375rem !default,
+  $vertical-nav-items-nested-icon-size: 0.425rem !default,
+
+  //  Footer
+  $layout-vertical-nav-footer-height: 48px !default,
+
+  // Font sizes
+  $font-sizes:
+    (
+      'xs': 0.6875rem,
+      'sm': 0.8125rem,
+      'base': 0.9375rem,
+      'lg': 1.125rem,
+      'xl': 1.375rem,
+      '2xl': 1.625rem,
+      '3xl': 2rem,
+      '4xl': 2.375rem,
+      '5xl': 3rem,
+      '6xl': 3.5rem,
+      '7xl': 4rem,
+      '8xl': 4.5rem,
+      '9xl': 5.25rem,
+    )
+    !default,
+
+  // Line heights
+  $font-line-height:
+    (
+      'xs': 0.9375rem,
+      'sm': 1.25rem,
+      'base': 1.3125rem,
+      'lg': 1.5rem,
+      'xl': 1.875rem,
+      '2xl': 2.25rem,
+      '3xl': 2.75rem,
+      '4xl': 3.25rem,
+      '5xl': 1,
+      '6xl': 1,
+      '7xl': 1,
+      '8xl': 1,
+      '9xl': 1,
+    )
+    !default
+);

package/src/styles/@core/scss/template/_vertical-nav.scss

@@ -0,0 +1,41 @@
+@use '../../../assets/scss/variables/template' as variables;
+@use '../base/mixins';
+
+.layout-nav-type-vertical {
+  //  Layout Vertical nav
+  .layout-vertical-nav {
+    @include mixins.elevation(2);
+
+    .nav-header {
+      .app-logo {
+        .app-title {
+          font-size: 22px;
+        }
+      }
+
+      .header-action {
+        margin-inline-end: -0.85rem;
+      }
+    }
+
+    //  Nav group & Link
+    .nav-link,
+    .nav-group {
+      // shadow cut issue fix
+      margin-block-end: -0.5rem;
+      padding-block-end: 0.5rem;
+    }
+
+    //  Nav group active
+    .nav-group.active {
+      > .nav-group-label {
+        color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+        font-weight: 500;
+      }
+    }
+
+    .nav-section-title .placeholder-icon {
+      margin-inline-start: 0.3rem;
+    }
+  }
+}

package/src/styles/@core/scss/template/index.scss

@@ -0,0 +1,15 @@
+@use 'sass:map';
+@use '../base';
+
+// Layout
+@use 'vertical-nav';
+@use 'default-layout-w-vertical-nav';
+
+// Skins
+@use 'skins';
+
+// Components
+@use 'components';
+
+// Utilities
+@use 'utilities';

package/src/styles/@core/scss/template/libs/apex-chart.scss

@@ -0,0 +1,99 @@
+@use '../../../../assets/scss/variables/_vuetify.scss' as vuetify;
+@use '../../../../@layouts/styles/mixins' as layoutsMixins;
+@use '../../base/mixins';
+
+.v-application .apexcharts-canvas {
+  &line[stroke='transparent'] {
+    display: 'none';
+  }
+
+  .apexcharts-tooltip {
+    @include mixins.elevation(3);
+
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    background: rgb(var(--v-theme-surface));
+
+    .apexcharts-tooltip-title {
+      border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+      background: rgb(var(--v-theme-surface));
+      font-weight: 500;
+    }
+
+    &.apexcharts-theme-light {
+      color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+    }
+
+    &.apexcharts-theme-dark {
+      color: white;
+    }
+
+    .apexcharts-tooltip-series-group:first-of-type {
+      padding-block-end: 0;
+    }
+  }
+
+  .apexcharts-xaxistooltip {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    background: rgb(var(--v-theme-gray-50));
+    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+
+    &::after {
+      border-block-end-color: rgb(var(--v-theme-gray-50));
+    }
+
+    &::before {
+      border-block-end-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+  }
+
+  .apexcharts-yaxistooltip {
+    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    background: rgb(var(--v-theme-gray-50));
+
+    &::after {
+      border-inline-start-color: rgb(var(--v-theme-gray-50));
+    }
+
+    &::before {
+      border-inline-start-color: rgba(var(--v-border-color), var(--v-border-opacity));
+    }
+  }
+
+  .apexcharts-xaxistooltip-text,
+  .apexcharts-yaxistooltip-text {
+    color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
+  }
+
+  .apexcharts-yaxis .apexcharts-yaxis-texts-g .apexcharts-yaxis-label {
+    @include layoutsMixins.rtl {
+      text-anchor: start;
+    }
+  }
+
+  .apexcharts-text,
+  .apexcharts-tooltip-text,
+  .apexcharts-datalabel-label,
+  .apexcharts-datalabel,
+  .apexcharts-xaxistooltip-text,
+  .apexcharts-yaxistooltip-text,
+  .apexcharts-legend-text {
+    font-family: vuetify.$body-font-family !important;
+  }
+
+  .apexcharts-pie-label {
+    fill: white;
+    filter: none;
+  }
+
+  .apexcharts-marker {
+    box-shadow: none;
+  }
+
+  .apexcharts-legend-marker {
+    margin-inline-end: 0.3875rem !important;
+
+    @include layoutsMixins.rtl {
+      margin-inline-end: 0.75rem !important;
+    }
+  }
+}

package/src/styles/@core/scss/template/libs/shepherd.scss

@@ -0,0 +1,88 @@
+// commented out because it's not used
+// @use 'shepherd.js/dist/css/shepherd.css';
+
+@use '../../../../assets/scss/variables/vuetify.scss' as variables;
+
+.shepherd-button {
+  border-radius: variables.$button-border-radius;
+  block-size: 1.75rem;
+  font-size: 0.8125rem;
+  font-weight: variables.$button-font-weight;
+  margin-inline-end: 0.75rem;
+  padding-block: 0.25rem;
+  padding-inline: 1rem;
+}
+
+.shepherd-footer {
+  background: rgb(var(--v-theme-background));
+  padding-block: 0.5rem 1rem;
+  padding-inline: 1rem;
+}
+
+.shepherd-element .shepherd-content .shepherd-header {
+  background: rgb(var(--v-theme-background));
+  padding-block: 1rem 0;
+  padding-inline: 1rem;
+}
+
+.shepherd-element .shepherd-content .shepherd-header .shepherd-title {
+  color: rgb(var(--v-theme-on-background));
+  font-size: 1.125rem;
+  font-weight: 500;
+}
+
+.shepherd-text {
+  padding: 1rem;
+  background: rgb(var(--v-theme-background));
+  color: rgb(var(--v-theme-on-background));
+  font-size: variables.$card-text-font-size;
+}
+
+.shepherd-cancel-icon {
+  color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity)) !important;
+  font-size: 1.5rem;
+}
+
+.shepherd-element[data-popper-placement^='bottom'] {
+  margin-block-start: 0.75rem !important;
+}
+
+.shepherd-element[data-popper-placement^='top'] {
+  margin-block-end: 0.75rem !important;
+}
+
+.shepherd-element[data-popper-placement^='right'] {
+  margin-inline-start: 0.75rem !important;
+}
+
+.shepherd-element[data-popper-placement^='left'] {
+  margin-inline-end: 0.75rem !important;
+}
+
+.shepherd-element[data-popper-placement] {
+  .shepherd-arrow::before {
+    background: rgb(var(--v-theme-background)) !important;
+  }
+}
+
+.shepherd-element {
+  border-radius: variables.$card-border-radius;
+  background: transparent;
+}
+
+.nextBtnClass,
+.nextBtnClass:not(:disabled):hover {
+  background: rgb(var(--v-theme-primary));
+}
+
+.backBtnClass,
+.backBtnClass:not(:disabled):hover {
+  background: rgba(var(--v-theme-secondary), var(--v-activated-opacity));
+  color: rgb(var(--v-theme-secondary));
+}
+
+@media screen and (max-width: 600px) {
+  .shepherd-element {
+    max-inline-size: 75vw;
+  }
+}