@winchsa/ui 0.1.0

package/dist/styles/@core/scss/base/_components.scss

@@ -0,0 +1,164 @@
+@use 'mixins';
+@use '../../../@layouts/styles/placeholders';
+@use '../../../assets/scss/variables/template' as variables;
+
+//  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;
+  height: auto;
+
+  &: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;
+    }
+  }
+}
+
+// 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.9375rem;
+    inset-inline-end: 0.9375rem;
+
+    .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;
+    }
+  }
+}
+
+// v-tab with pill support
+
+.v-tabs.v-tabs-pill {
+  .v-tab.v-btn {
+    border-radius: 6px !important;
+    transition: none;
+
+    &:not(.v-tab--selected):hover {
+      background-color: rgb(var(--v-theme-gray-200));
+    }
+
+    .v-tab__slider {
+      visibility: hidden;
+    }
+  }
+}
+
+// loop for all colors bg
+@each $color-name in variables.$theme-colors-name {
+  .v-tabs.v-tabs-pill {
+    .v-slide-group-item--active.v-tab--selected.text-#{$color-name} {
+      background-color: rgb(var(--v-theme-#{$color-name}));
+      color: rgb(var(--v-theme-on-#{$color-name})) !important;
+    }
+
+    &:not(.v-tab--selected) {
+      button {
+        background-color: rgb(var(--v-theme-#{gray-100}));
+        color: rgb(var(--v-theme-on-#{gray-100})) !important;
+      }
+    }
+  }
+}
+
+.v-tabs.v-tabs-pill .v-slide-group-item--active.v-tab--selected.text-primary {
+  color: rgb(var(--v-theme-button-on-primary)) !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;
+    }
+  }
+}

package/dist/styles/@core/scss/base/_dark.scss

@@ -0,0 +1,16 @@
+@use '../../../assets/scss/variables/template' as variables;
+
+// ————————————————————————————————————
+// * ——— Perfect Scrollbar
+// ————————————————————————————————————
+
+.v-application.v-theme--dark {
+  .ps__rail-y,
+  .ps__rail-x {
+    background-color: transparent !important;
+  }
+
+  .ps__thumb-y {
+    background-color: variables.$plugin-ps-thumb-y-dark;
+  }
+}

package/dist/styles/@core/scss/base/_default-layout-w-vertical-nav.scss

@@ -0,0 +1,106 @@
+@use '../../../assets/scss/variables/template' as variables;
+@use 'placeholders' as *;
+@use '../template/placeholders' as *;
+@use 'misc';
+@use 'mixins';
+
+$header: '.layout-navbar';
+
+@if variables.$layout-vertical-nav-navbar-is-contained {
+  $header: '.layout-navbar .navbar-content-container';
+}
+
+.layout-wrapper.layout-nav-type-vertical {
+  // SECTION  Layout Navbar
+  //  Elevated navbar
+  @if variables.$vertical-nav-navbar-style == 'elevated' {
+    // Add transition
+    #{$header} {
+      transition: padding 0.2s ease, background-color 0.18s ease;
+    }
+
+    // If navbar is contained => Add border radius to header
+    @if variables.$layout-vertical-nav-navbar-is-contained {
+      #{$header} {
+        border-radius: 0
+          0
+          variables.$default-layout-with-vertical-nav-navbar-footer-roundness
+          variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
+      }
+    }
+
+    // Scrolled styles for sticky navbar
+    @at-root {
+      /* ℹ️ This html selector with not selector is required when:
+        dialog is opened and window don't have any scroll. This removes window-scrolled class from layout and out style broke
+    */
+      html.v-overlay-scroll-blocked:not([style*='--v-body-scroll-y:0px;']) .layout-navbar-sticky,
+      &.window-scrolled.layout-navbar-sticky {
+        #{$header} {
+          @extend %default-layout-vertical-nav-scrolled-sticky-elevated-nav;
+          @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
+        }
+
+        .navbar-blur#{$header} {
+          @extend %blurry-bg;
+        }
+      }
+    }
+  }
+
+  //  Floating navbar
+  @else if variables.$vertical-nav-navbar-style == 'floating' {
+    // ℹ️ Regardless of navbar is contained or not => Apply overlay to .layout-navbar
+    .layout-navbar {
+      &.navbar-blur {
+        @extend %default-layout-vertical-nav-floating-navbar-overlay;
+      }
+    }
+
+    &:not(.layout-navbar-sticky) {
+      #{$header} {
+        margin-block-start: variables.$vertical-nav-floating-navbar-top;
+      }
+    }
+
+    #{$header} {
+      @if variables.$layout-vertical-nav-navbar-is-contained {
+        border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness;
+      }
+
+      background-color: rgb(var(--v-theme-surface));
+
+      @extend %default-layout-vertical-nav-floating-navbar-and-sticky-elevated-navbar-scrolled;
+    }
+
+    .navbar-blur#{$header} {
+      @extend %blurry-bg;
+    }
+  }
+
+  // !SECTION
+
+  //  Layout footer
+  .layout-footer {
+    $ele-layout-footer: &;
+
+    .footer-content-container {
+      border-radius: variables.$default-layout-with-vertical-nav-navbar-footer-roundness
+        variables.$default-layout-with-vertical-nav-navbar-footer-roundness 0 0;
+
+      // 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 {
+            background-color: rgb(var(--v-theme-surface));
+            padding-block: 0;
+            padding-inline: 1.2rem;
+
+            @include mixins.elevation(3);
+          }
+        }
+      }
+    }
+  }
+}

package/dist/styles/@core/scss/base/_default-layout.scss

@@ -0,0 +1,16 @@
+@use 'placeholders';
+@use 'variables';
+
+.layout-vertical-nav,
+.layout-horizontal-nav {
+  ol,
+  ul {
+    list-style: none;
+  }
+}
+
+.layout-navbar {
+  @if variables.$navbar-high-emphasis-text {
+    @extend %layout-navbar;
+  }
+}

package/dist/styles/@core/scss/base/_index.scss

@@ -0,0 +1,47 @@
+@use 'sass:map';
+
+// Layout
+@use 'vertical-nav';
+@use 'default-layout';
+@use 'default-layout-w-vertical-nav';
+
+// Layouts package
+@use 'layouts';
+
+// Skins
+@use 'skins';
+
+// Components
+@use 'components';
+
+// Utilities
+@use 'utilities';
+
+// Route Transitions
+@use 'route-transitions';
+
+// Misc
+@use 'misc';
+
+// Dark
+@use 'dark';
+
+// libs
+@use 'libs/perfect-scrollbar';
+
+a {
+  color: rgb(var(--v-theme-blue));
+  text-decoration: none;
+  cursor: pointer;
+}
+
+// Vuetify 3 don't provide margin bottom style like vuetify 2
+p {
+  margin-block-end: 1rem;
+}
+
+// Iconify icon size
+svg.iconify {
+  block-size: 1em;
+  inline-size: 1em;
+}

package/dist/styles/@core/scss/base/_layouts.scss

@@ -0,0 +1,63 @@
+@use '../../../assets/scss/variables/template' as variables;
+
+/* ℹ️ This styles extends the existing layout package's styles for handling cases that aren't related to layouts package */
+
+/*
+  ℹ️ When we use v-layout as immediate first child of `.page-content-container`, it adds display:flex and page doesn't get contained height
+*/
+// .layout-wrapper.layout-nav-type-vertical {
+//   &.layout-content-height-fixed {
+//     .page-content-container {
+//       > .v-layout:first-child > :not(.v-navigation-drawer):first-child {
+//         flex-grow: 1;
+//         block-size: 100%;
+//       }
+//     }
+//   }
+// }
+.layout-wrapper.layout-nav-type-vertical {
+  &.layout-content-height-fixed {
+    .page-content-container {
+      > .v-layout:first-child {
+        overflow: hidden;
+        min-block-size: 100%;
+
+        > .v-main {
+          // overflow-y: auto;
+
+          .v-main__wrap > :first-child {
+            block-size: 100%;
+            overflow-y: auto;
+          }
+        }
+      }
+    }
+  }
+}
+
+// ℹ️ Let div/v-layout take full height. E.g. Email App
+.layout-wrapper.layout-nav-type-horizontal {
+  &.layout-content-height-fixed {
+    > .layout-page-content {
+      display: flex;
+    }
+  }
+}
+
+//  Floating navbar styles
+@if variables.$vertical-nav-navbar-style == 'floating' {
+  // ℹ️ Add spacing above navbar if navbar is floating (was in %layout-navbar-sticky placeholder)
+  .layout-wrapper.layout-nav-type-vertical.layout-navbar-sticky {
+    .layout-navbar {
+      inset-block-start: variables.$vertical-nav-floating-navbar-top;
+    }
+
+    /*
+      ℹ️ If it's floating navbar
+      Add `vertical-nav-floating-navbar-top` as margin top to .layout-page-content
+    */
+    .layout-page-content {
+      margin-block-start: variables.$vertical-nav-floating-navbar-top;
+    }
+  }
+}

package/dist/styles/@core/scss/base/_misc.scss

@@ -0,0 +1,20 @@
+// ℹ️ scrollable-content allows creating fixed header and scrollable content for VNavigationDrawer (Used when perfect scrollbar is used)
+.scrollable-content {
+  &.v-navigation-drawer {
+    .v-navigation-drawer__content {
+      display: flex;
+      overflow: hidden;
+      flex-direction: column;
+    }
+  }
+}
+
+// ℹ️ adding styling for code tag
+code {
+  border-radius: 3px;
+  color: rgb(var(--v-code-color));
+  font-size: 90%;
+  font-weight: 400;
+  padding-block: 0.2em;
+  padding-inline: 0.4em;
+}

package/dist/styles/@core/scss/base/_mixins.scss

@@ -0,0 +1,84 @@
+@use 'sass:map';
+@use '../../../assets/scss/variables/vuetify.scss';
+
+@mixin elevation($z, $important: false) {
+  box-shadow: map.get(vuetify.$shadow-key-umbra, $z), map.get(vuetify.$shadow-key-penumbra, $z),
+    map.get(vuetify.$shadow-key-ambient, $z) if($important, !important, null);
+}
+
+// ℹ️ This mixin is inspired from vuetify for adding hover styles via before pseudo element
+@mixin before-pseudo() {
+  position: relative;
+
+  &::before {
+    position: absolute;
+    border-radius: inherit;
+    background: var(--v-hover-color);
+    block-size: 100%;
+    content: '';
+    inline-size: 100%;
+    inset: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+@mixin bordered-skin($component, $border-property: 'border', $important: false) {
+  #{$component} {
+    // background-color: rgb(var(--v-theme-background));
+    box-shadow: none !important;
+    #{$border-property}: 1px solid rgba(var(--v-border-color), var(--v-border-opacity))
+      if($important, !important, null);
+  }
+}
+
+// ℹ️ Inspired from vuetify's active-states mixin
+// focus => 0.12 & selected => 0.08
+@mixin selected-states($selector) {
+  // #{$selector} {
+  //   opacity: calc(#{map.get(vuetify.$states, "selected")} * var(--v-theme-overlay-multiplier));
+  // }
+
+  // &:hover
+  // #{$selector} {
+  //   opacity: calc(#{map.get(vuetify.$states, "selected") + map.get(vuetify.$states, "hover")} * var(--v-theme-overlay-multiplier));
+  // }
+
+  // &:focus-visible
+  // #{$selector} {
+  //   opacity: calc(#{map.get(vuetify.$states, "selected") + map.get(vuetify.$states, "focus")} * var(--v-theme-overlay-multiplier));
+  // }
+
+  // @supports not selector(:focus-visible) {
+  //   &:focus {
+  //     #{$selector} {
+  //       opacity: calc(#{map.get(vuetify.$states, "selected") + map.get(vuetify.$states, "focus")} * var(--v-theme-overlay-multiplier));
+  //     }
+  //   }
+  // }
+  #{$selector} {
+    opacity: calc(var(--v-selected-opacity) * var(--v-theme-overlay-multiplier));
+  }
+
+  &:hover #{$selector} {
+    opacity: calc(
+      var(--v-selected-opacity) + var(--v-hover-opacity) * var(--v-theme-overlay-multiplier)
+    );
+  }
+
+  &:focus-visible #{$selector} {
+    opacity: calc(
+      var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier)
+    );
+  }
+
+  @supports not selector(:focus-visible) {
+    &:focus {
+      #{$selector} {
+        opacity: calc(
+          var(--v-selected-opacity) + var(--v-focus-opacity) * var(--v-theme-overlay-multiplier)
+        );
+      }
+    }
+  }
+}

package/dist/styles/@core/scss/base/_route-transitions.scss

@@ -0,0 +1,70 @@
+//  Zoom fade
+.app-transition-zoom-fade-enter-active,
+.app-transition-zoom-fade-leave-active {
+  transition: transform 0.35s, opacity 0.28s ease-in-out;
+}
+
+.app-transition-zoom-fade-enter-from {
+  opacity: 0;
+  transform: scale(0.98);
+}
+
+.app-transition-zoom-fade-leave-to {
+  opacity: 0;
+  transform: scale(1.02);
+}
+
+//  Fade
+.app-transition-fade-enter-active,
+.app-transition-fade-leave-active {
+  transition: opacity 0.25s ease-in-out;
+}
+
+.app-transition-fade-enter-from,
+.app-transition-fade-leave-to {
+  opacity: 0;
+}
+
+//  Fade bottom
+.app-transition-fade-bottom-enter-active,
+.app-transition-fade-bottom-leave-active {
+  transition: opacity 0.3s, transform 0.35s;
+}
+
+.app-transition-fade-bottom-enter-from {
+  opacity: 0;
+  transform: translateY(-0.6rem);
+}
+
+.app-transition-fade-bottom-leave-to {
+  opacity: 0;
+  transform: translateY(0.6rem);
+}
+
+//  Slide fade
+.app-transition-slide-fade-enter-active,
+.app-transition-slide-fade-leave-active {
+  transition: opacity 0.3s, transform 0.35s;
+}
+
+.app-transition-slide-fade-enter-from {
+  opacity: 0;
+  transform: translateX(-0.6rem);
+}
+
+.app-transition-slide-fade-leave-to {
+  opacity: 0;
+  transform: translateX(0.6rem);
+}
+
+//  Zoom out
+.app-transition-zoom-out-enter-active,
+.app-transition-zoom-out-leave-active {
+  transition: opacity 0.26s ease-in-out, transform 0.3s ease-out;
+}
+
+.app-transition-zoom-out-enter-from,
+.app-transition-zoom-out-leave-to {
+  opacity: 0;
+  transform: scale(0.98);
+}