@winchsa/ui 0.1.30 → 0.1.33

package/dist/styles/assets/scss/variables/_vuetify.scss

@@ -1 +0,0 @@
-@forward '../../../core/template/libs/vuetify/variables';

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

@@ -1,164 +0,0 @@
-@use 'mixins';
-@use '../../layouts/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-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-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/base/_dark.scss

@@ -1,16 +0,0 @@
-@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/base/_default-layout-w-vertical-nav.scss

@@ -1,106 +0,0 @@
-@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/base/_default-layout.scss

@@ -1,16 +0,0 @@
-@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/base/_index.scss

@@ -1,47 +0,0 @@
-@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/base/_layouts.scss

@@ -1,63 +0,0 @@
-@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/base/_misc.scss

@@ -1,20 +0,0 @@
-// ℹ️ 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/base/_mixins.scss

@@ -1,84 +0,0 @@
-@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/base/_route-transitions.scss

@@ -1,70 +0,0 @@
-//  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);
-}