@winchsa/ui 0.1.31 → 0.1.33

package/dist/styles/core/base/_vertical-nav.scss

@@ -1,264 +0,0 @@
-@use 'placeholders' as *;
-@use '../template/placeholders' as *;
-@use '../../layouts/mixins' as layoutsMixins;
-@use '../../assets/scss/variables/template' as variables;
-@use 'mixins' as mixins;
-@use 'vuetify/lib/styles/tools/states' as vuetifyStates;
-
-.layout-nav-type-vertical {
-  //  Layout Vertical nav
-  .layout-vertical-nav {
-    $sl-layout-nav-type-vertical: &;
-
-    @extend %nav;
-
-    @at-root {
-      // ℹ️ Add styles for collapsed vertical nav
-      .layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}.hovered {
-        @include mixins.elevation(6);
-      }
-    }
-
-    background-color: variables.$vertical-nav-background-color;
-
-    //  Nav header
-    .nav-header {
-      overflow: hidden;
-      padding: variables.$vertical-nav-header-padding;
-      margin-inline: variables.$vertical-nav-header-inline-spacing;
-      min-block-size: variables.$vertical-nav-header-height;
-
-      // TEMPLATE: Check if we need to move this to master
-      .app-logo {
-        flex-shrink: 0;
-        transition: transform 0.25s ease-in-out;
-
-        @at-root {
-          // Move logo a bit to align center with the icons in vertical nav mini variant
-          .layout-vertical-nav-collapsed#{$sl-layout-nav-type-vertical}:not(.hovered)
-            .nav-header
-            .app-logo {
-            transform: translateX(
-              variables.$vertical-nav-header-logo-translate-x-when-vertical-nav-mini
-            );
-
-            @include layoutsMixins.rtl {
-              transform: translateX(
-                -(variables.$vertical-nav-header-logo-translate-x-when-vertical-nav-mini)
-              );
-            }
-          }
-        }
-      }
-
-      .header-action {
-        @extend %nav-header-action;
-      }
-    }
-
-    //  Nav items shadow
-    .vertical-nav-items-shadow {
-      position: absolute;
-      z-index: 1;
-      background: linear-gradient(
-        rgb(#{variables.$vertical-nav-background-color-rgb}) 5%,
-        rgba(#{variables.$vertical-nav-background-color-rgb}, 75%) 45%,
-        rgba(#{variables.$vertical-nav-background-color-rgb}, 20%) 80%,
-        transparent
-      );
-      block-size: 55px;
-      inline-size: 100%;
-      inset-block-start: calc(#{variables.$vertical-nav-header-height} - 2px);
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity 0.15s ease-in-out;
-      will-change: opacity;
-
-      @include layoutsMixins.rtl {
-        transform: translateX(8px);
-      }
-    }
-
-    &.scrolled {
-      .vertical-nav-items-shadow {
-        opacity: 1;
-      }
-    }
-
-    .ps__rail-y {
-      // ℹ️ Setting z-index: 1 will make perfect scrollbar thumb appear on top of vertical nav items shadow
-      z-index: 1;
-    }
-
-    //  Nav section title
-    .nav-section-title {
-      @extend %vertical-nav-item;
-      @extend %vertical-nav-section-title;
-
-      margin-block-end: variables.$vertical-nav-section-title-mb;
-
-      &:not(:first-child) {
-        margin-block-start: variables.$vertical-nav-section-title-mt;
-      }
-
-      .placeholder-icon {
-        margin-inline: auto;
-      }
-    }
-
-    // Nav item badge
-    .nav-item-badge {
-      @extend %vertical-nav-item-badge;
-    }
-
-    //  Nav group & Link
-    .nav-link,
-    .nav-group {
-      overflow: hidden;
-
-      > :first-child {
-        @extend %vertical-nav-item;
-        @extend %vertical-nav-item-interactive;
-      }
-
-      .nav-item-icon {
-        @extend %vertical-nav-items-icon;
-      }
-
-      &.disabled {
-        opacity: var(--v-disabled-opacity);
-        pointer-events: none;
-      }
-    }
-
-    //  Vertical nav link
-    .nav-link {
-      @extend %nav-link;
-
-      > .router-link-exact-active {
-        @extend %nav-link-active;
-      }
-
-      > a {
-        // Adds before psudo element to style hover state
-        transition: background 0.3s ease-in-out;
-        &:hover {
-          background: rgb(var(--v-theme-gray-200));
-        }
-
-        // Adds vuetify states
-        @include vuetifyStates.states($active: false);
-      }
-    }
-
-    //  Vertical nav group
-    .nav-group {
-      // Reduce the size of icon if link/group is inside group
-      .nav-group,
-      .nav-link {
-        .nav-item-icon {
-          @extend %vertical-nav-items-nested-icon;
-        }
-      }
-
-      // Hide icons after 2nd level
-      & .nav-group {
-        .nav-link,
-        .nav-group {
-          .nav-item-icon {
-            @extend %vertical-nav-items-icon-after-2nd-level;
-          }
-        }
-      }
-
-      .nav-group-arrow {
-        flex-shrink: 0;
-        transform-origin: center;
-        transition: transform variables.$vertical-nav-nav-group-arrow-transition-duration
-          variables.$vertical-nav-nav-group-arrow-transition-timing-function;
-        will-change: auto;
-      }
-
-      // Rotate arrow icon if group is opened
-      &.open {
-        > .nav-group-label {
-          background: rgb(var(--v-theme-gray-200));
-          .nav-group-arrow {
-            transform: rotateZ(90deg);
-          }
-        }
-      }
-
-      &:hover {
-        > .nav-group-label {
-          background: rgb(var(--v-theme-gray-200));
-        }
-      }
-
-      // Nav group label
-      > :first-child {
-        // Adds before psudo element to style hover state
-        @include mixins.before-pseudo;
-
-        // Adds vuetify states
-        @include vuetifyStates.states($active: false);
-      }
-
-      // Active & open states for nav group label
-      &.active,
-      &.open {
-        > :first-child {
-          @extend %vertical-nav-group-open-active;
-        }
-      }
-    }
-  }
-}
-
-// SECTION: Transitions
-.vertical-nav-section-title-enter-active,
-.vertical-nav-section-title-leave-active {
-  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
-}
-
-.vertical-nav-section-title-enter-from,
-.vertical-nav-section-title-leave-to {
-  opacity: 0;
-  transform: translateX(15px);
-
-  @include layoutsMixins.rtl {
-    transform: translateX(-15px);
-  }
-}
-
-.transition-slide-x-enter-active,
-.transition-slide-x-leave-active {
-  transition: opacity 0.1s ease-in-out, transform 0.12s ease-in-out;
-}
-
-.transition-slide-x-enter-from,
-.transition-slide-x-leave-to {
-  opacity: 0;
-  transform: translateX(-15px);
-
-  @include layoutsMixins.rtl {
-    transform: translateX(15px);
-  }
-}
-
-.vertical-nav-app-title-enter-active,
-.vertical-nav-app-title-leave-active {
-  transition: all 0.2;
-}
-
-.vertical-nav-app-title-enter-from,
-.vertical-nav-app-title-leave-to {
-  opacity: 0;
-  transform: translateX(-15px);
-
-  @include layoutsMixins.rtl {
-    transform: translateX(15px);
-  }
-}
-
-// !SECTION

package/dist/styles/core/base/libs/_perfect-scrollbar.scss

@@ -1,35 +0,0 @@
-$ps-size: 0.25rem;
-$ps-hover-size: 0.375rem;
-$ps-track-size: 0.5rem;
-
-.ps__thumb-y {
-  inline-size: $ps-size;
-  inset-inline-end: 0.0625rem;
-}
-
-.ps__thumb-x {
-  block-size: $ps-size !important;
-}
-
-.ps__rail-x {
-  background: transparent !important;
-  block-size: $ps-track-size;
-}
-
-.ps__rail-y {
-  background: transparent !important;
-  inline-size: $ps-track-size !important;
-  inset-inline-end: 0.125rem !important;
-  inset-inline-start: unset !important;
-}
-
-.ps__rail-y.ps--clicking .ps__thumb-y,
-.ps__rail-y:focus > .ps__thumb-y,
-.ps__rail-y:hover > .ps__thumb-y {
-  inline-size: $ps-hover-size;
-}
-
-.ps__thumb-x,
-.ps__thumb-y {
-  background-color: rgb(var(--v-theme-silver)) !important;
-}

package/dist/styles/core/base/libs/vuetify/_index.scss

@@ -1 +0,0 @@
-@use 'overrides';

package/dist/styles/core/base/libs/vuetify/_overrides.scss

@@ -1,380 +0,0 @@
-@use '../../utils';
-@use '../../../../core/template/variables' as variables;
-
-//  Application
-// ℹ️ We need accurate vh in mobile devices as well
-.v-application__wrap {
-  /* stylelint-disable-next-line liberty/use-logical-spec */
-  min-height: calc(var(--vh, 1vh) * 100);
-}
-
-//  Typography
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.text-h1,
-.text-h2,
-.text-h3,
-.text-h4,
-.text-h5,
-.text-h6,
-.text-button,
-.text-overline,
-.v-card-title {
-  color: rgba(var(--v-theme-on-background), var(--v-high-emphasis-opacity));
-}
-
-.v-application,
-.text-body-1,
-.text-body-2,
-.text-subtitle-1,
-.text-subtitle-2 {
-  color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
-}
-
-//  Grid
-// Remove margin-bottom of v-input_details inside grid (validation error message)
-.v-row {
-  .v-col,
-  [class^='v-col-*'] {
-    .v-input__details {
-      margin-block-end: 0;
-    }
-  }
-}
-
-
-@if variables.$vuetify-reduce-default-compact-button-icon-size {
-  .v-btn--density-compact.v-btn--size-default {
-    .v-btn__content > svg {
-      block-size: 22px;
-      font-size: 22px;
-      inline-size: 22px;
-    }
-  }
-}
-
-//  Card
-.v-card-subtitle {
-  color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity));
-}
-
-// Removes padding-top for immediately placed v-card-text after itself
-.v-card-text {
-  & + & {
-    padding-block-start: 0 !important;
-  }
-}
-
-/*
-   Checkbox & Radio Ripple
-
-  TODO Checkbox and switch component. Remove it when vuetify resolve the extra spacing: https://github.com/vuetifyjs/vuetify/issues/15519
-  We need this because form elements likes checkbox and switches are by default set to height of textfield height which is way big than we want
-  Tested with checkbox & switches
-*/
-.v-checkbox.v-input,
-.v-switch.v-input {
-  --v-input-control-height: auto;
-
-  flex: unset;
-}
-
-.v-selection-control--density-comfortable {
-  &.v-checkbox-btn,
-  &.v-radio,
-  &.v-radio-btn {
-    .v-selection-control__wrapper {
-      margin-inline-start: -0.5625rem;
-    }
-  }
-}
-
-.v-selection-control--density-compact {
-  &.v-radio,
-  &.v-radio-btn,
-  &.v-checkbox-btn {
-    .v-selection-control__wrapper {
-      margin-inline-start: -0.3125rem;
-    }
-  }
-}
-
-.v-selection-control--density-default {
-  &.v-checkbox-btn,
-  &.v-radio,
-  &.v-radio-btn {
-    .v-selection-control__wrapper {
-      margin-inline-start: -0.6875rem;
-    }
-  }
-}
-
-.v-radio-group {
-  .v-selection-control-group {
-    .v-radio:not(:last-child) {
-      margin-inline-end: 0.9rem;
-    }
-  }
-}
-
-/*
-   Tabs
-  Disable tab transition
-
-  This is for tabs where we don't have card wrapper to tabs and have multiple cards as tab content.
-
-  This class will disable transition and adds `overflow: unset` on `VWindow` to allow spreading shadow
-*/
-.disable-tab-transition {
-  overflow: unset !important;
-
-  .v-window__container {
-    block-size: auto !important;
-  }
-
-  .v-window-item:not(.v-window-item--active) {
-    display: none !important;
-  }
-
-  .v-window__container .v-window-item {
-    transform: none !important;
-  }
-}
-
-//  List
-.v-list {
-  // Set icons opacity to .87
-  .v-list-item__prepend > .v-icon,
-  .v-list-item__append > .v-icon {
-    opacity: 1;
-  }
-
-  .v-list-item:not(.v-list-item--active) {
-    &:hover {
-      background: rgb(var(--v-theme-gray-200)) !important;
-      .v-list-item__overlay {
-        opacity: 0;
-      }
-      .v-list-item__content {
-        color: rgb(var(--v-theme-on-primary)) !important;
-        .v-list-item-title {
-          color: rgb(var(--v-theme-on-primary)) !important;
-        }
-      }
-    }
-  }
-
-}
-
-//  Card list
-
-/*
-  ℹ️ Custom class
-
-  Remove list spacing inside card
-
-  This is because card title gets padding of 20px and list item have padding of 16px. Moreover, list container have padding-bottom as well.
-*/
-.card-list {
-  --v-card-list-gap: 20px;
-
-  &.v-list {
-    padding-block: 0;
-  }
-
-  .v-list-item {
-    min-block-size: unset;
-    min-block-size: auto !important;
-    padding-block: 0 !important;
-    padding-inline: 0 !important;
-
-    > .v-ripple__container {
-      opacity: 0;
-    }
-
-    &:not(:last-child) {
-      padding-block-end: var(--v-card-list-gap) !important;
-    }
-  }
-
-  .v-list-item:hover,
-  .v-list-item:focus,
-  .v-list-item:active,
-  .v-list-item.active {
-    > .v-list-item__overlay {
-      opacity: 0 !important;
-    }
-  }
-}
-
-//  Divider
-.v-divider {
-  color: rgb(var(--v-border-color));
-}
-
-//  DataTable
-//  DataTable
-.v-data-table {
-  /* stylelint-disable-next-line no-descending-specificity */
-  .v-checkbox-btn .v-selection-control__wrapper {
-    margin-inline-start: 0 !important;
-  }
-
-  .v-selection-control {
-    display: flex !important;
-  }
-
-  .v-pagination {
-    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
-  }
-
-  font-size: 13px;
-}
-
-.v-data-table-footer {
-  margin-block-start: 1rem;
-}
-
-//  v-field
-.v-field:hover .v-field__outline {
-  --v-field-border-opacity: var(--v-medium-emphasis-opacity);
-}
-
-//  VLabel
-.v-label {
-  opacity: 1 !important;
-
-  &:not(.v-field-label--floating) {
-    color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
-  }
-}
-
-//  Overlay
-.v-overlay__scrim {
-  background: rgba(var(--v-overlay-scrim-background), var(--v-overlay-scrim-opacity)) !important;
-}
-
-//  VMessages
-.v-messages {
-  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
-  opacity: 1;
-}
-
-//  Alert close btn
-.v-alert__close {
-  .v-btn--icon .v-icon {
-    --v-icon-size-multiplier: 1.5;
-  }
-}
-
-//  Badge icon alignment
-.v-badge__badge {
-  display: flex;
-  align-items: center;
-}
-
-//  Btn focus outline style removed
-.v-btn:focus-visible::after {
-  opacity: 0 !important;
-}
-
-// .v-select chip spacing for slot
-.v-input:not(.v-select--chips) .v-select__selection {
-  .v-chip {
-    margin-block: 2px var(--select-chips-margin-bottom);
-  }
-}
-
-//  VCard and VList subtitle color
-.v-list-item-subtitle {
-  color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
-}
-
-
-//  placeholders
-.v-field__input {
-  height: 40px;
-  font-size: 13px !important;
-  @at-root {
-    & input::placeholder,
-    input#{&}::placeholder,
-    textarea#{&}::placeholder {
-      color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity)) !important;
-      opacity: 1 !important;
-    }
-  }
-}
-
-.v-autocomplete--multiple {
-  .v-field__input {
-    height: auto;
-  }
-}
-
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-.app-autocomplete__content,
-.app-inner-list,
-.v-autocomplete__content {
-  box-shadow: 0 0px 9px rgba(var(--v-shadow-key-umbra-color), 0.3), 0 0 transparent, 0 0 transparent !important;
-    .v-list-item {
-        .v-list-item-title {
-          font-size: 13px !important;
-          text-transform: capitalize !important;
-        }
-
-        &.v-list-item--active {
-            background: rgb(var(--v-nav-background)) !important;
-            color: rgb(var(--v-theme-on-primary)) !important;
-        }
-    }
-}
-
-.v-card--variant-elevated {
-  box-shadow: 0 0 18px rgba(var(--v-shadow-key-umbra-color), 0.12), 0 0 transparent, 0 0 transparent !important;
-}
-
-.otp-input {
-  .v-field__input {
-    direction: ltr !important;
-  }
-}
-
-.v-input--disabled {
-  .v-input__control {
-    .v-field__field {
-      border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity)) !important;
-      border-radius: inherit !important;
-    }
-  }
-}
-
-.v-messages[role="alert"] {
-  color: rgb(var(--v-theme-error)) !important;
-}
-
-.v-input--disabled .v-input__details {
-  opacity: 1 !important;
-}
-
-.v-field__input {
-  padding-top: 2px !important;
-  padding-bottom: 2px !important;
-  input {
-    margin-top: 3px !important;
-    margin-bottom: 2px !important;
-  }
-}
-
-.v-input__details {
-  min-height: 10px !important;
-  padding-top: 3px !important;
-}

package/dist/styles/core/base/libs/vuetify/_variables.scss

@@ -1,48 +0,0 @@
-//  Shadow opacities
-$shadow-key-umbra-opacity-custom: var(--v-shadow-key-umbra-opacity);
-$shadow-key-penumbra-opacity-custom: var(--v-shadow-key-penumbra-opacity);
-$shadow-key-ambient-opacity-custom: var(--v-shadow-key-ambient-opacity);
-
-//  Card transition properties
-$card-transition-property-custom: box-shadow, opacity;
-
-@forward 'vuetify/settings' with (
-  //  General settings
-  $color-pack: false !default,
-
-  //  Shadow opacity
-  $shadow-key-umbra-opacity: $shadow-key-umbra-opacity-custom !default,
-  $shadow-key-penumbra-opacity: $shadow-key-penumbra-opacity-custom !default,
-  $shadow-key-ambient-opacity: $shadow-key-ambient-opacity-custom !default,
-
-  //  Card
-  $card-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
-  $card-elevation: 6 !default,
-  $card-title-line-height: 1.6 !default,
-  $card-actions-min-height: unset !default,
-  $card-text-padding: 1.25rem !default,
-  $card-item-padding: 1.25rem !default,
-  $card-actions-padding: 0 12px 12px !default,
-  $card-transition-property: $card-transition-property-custom !default,
-  $card-subtitle-opacity: 1 !default,
-  $card-title-font-weight: 600 !default,
-  
-  //  Expansion Panel
-  $expansion-panel-active-title-min-height: 48px !default,
-
-  //  List
-  $list-item-icon-margin-end: 16px !default,
-  $list-item-icon-margin-start: 16px !default,
-  $list-item-subtitle-opacity: 1 !default,
-
-  //  Tooltip
-  $tooltip-background-color: rgba(59, 55, 68, 0.9) !default,
-  $tooltip-text-color: rgb(var(--v-theme-on-primary)) !default,
-  $tooltip-font-size: 0.75rem !default,
-
-  //  VTimeline
-  $timeline-dot-size: 34px !default,
-
-  //  VOverlay
-  $overlay-opacity: 1 !default
-);