@winchsa/ui 0.1.2 → 0.1.4

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

@@ -1,190 +0,0 @@
-@use 'vuetify/lib/styles/tools/functions' as *;
-
-/*
-  TODO: Add docs on when to use placeholder vs when to use SASS variable
-
-  Placeholder
-    - When we want to keep customization to our self between templates use it
-
-  Variables
-    - When we want to allow customization from both user and our side
-    - You can also use variable for consistency (e.g. mx 1 rem should be applied to both vertical nav items and vertical nav header)
-*/
-
-@forward '../../../@layouts/styles/variables' with (
-  // Adjust z-index so vertical nav & overlay stays on top of v-layout in v-main. E.g. Email app
-  $layout-vertical-nav-z-index: 1004,
-  $layout-overlay-z-index: 1003
-);
-@use '../../../@layouts/styles/variables' as *;
-
-//  Default layout
-
-$navbar-high-emphasis-text: true !default;
-
-// @forward "@layouts/styles/variables" with (
-//   $layout-vertical-nav-width: 350px !default,
-// );
-
-$theme-colors-name: ('primary', 'secondary', 'error', 'info', 'success', 'warning') !default;
-
-//  Default layout with vertical nav
-
-$default-layout-with-vertical-nav-navbar-footer-roundness: 10px !default;
-
-//  Vertical nav
-$vertical-nav-background-color-rgb: var(--v-theme-background) !default;
-$vertical-nav-background-color: rgb(#{$vertical-nav-background-color-rgb}) !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: 1rem !default;
-$vertical-nav-horizontal-padding: 0.75rem !default;
-
-// Vertical nav header height. Mostly we will align it with navbar height;
-$vertical-nav-header-height: $layout-vertical-nav-navbar-height !default;
-$vertical-nav-navbar-elevation: 3 !default;
-$vertical-nav-navbar-style: 'elevated' !default; // options: elevated, floating
-$vertical-nav-floating-navbar-top: 1rem !default;
-
-// Vertical nav header padding
-$vertical-nav-header-padding: 1rem $vertical-nav-horizontal-padding !default;
-$vertical-nav-header-inline-spacing: $vertical-nav-horizontal-spacing !default;
-
-// Move logo when vertical nav is mini (collapsed but not hovered)
-$vertical-nav-header-logo-translate-x-when-vertical-nav-mini: -4px !default;
-
-// Space between logo and title
-$vertical-nav-header-logo-title-spacing: 0.9rem !default;
-
-// Section title margin top (when its not first child)
-$vertical-nav-section-title-mt: 1.5rem !default;
-
-// Section title margin bottom
-$vertical-nav-section-title-mb: 0.5rem !default;
-
-// Vertical nav icons
-$vertical-nav-items-icon-size: 1.5rem !default;
-$vertical-nav-items-nested-icon-size: 0.9rem !default;
-$vertical-nav-items-icon-margin-inline-end: 0.5rem !default;
-
-// Transition duration for nav group arrow
-$vertical-nav-nav-group-arrow-transition-duration: 0.15s !default;
-
-// Timing function for nav group arrow
-$vertical-nav-nav-group-arrow-transition-timing-function: ease-in-out !default;
-
-//  Horizontal nav
-
-/*
-    ❗ Heads up
-    ==================
-    Here we assume we will always use shorthand property which will apply same padding on four side
-    This is because this have been used as value of top property by `.popper-content`
-*/
-$horizontal-nav-padding: 0.6875rem !default;
-
-// Gap between top level horizontal nav items
-$horizontal-nav-top-level-items-gap: 4px !default;
-
-// Horizontal nav icons
-$horizontal-nav-items-icon-size: 1.5rem !default;
-$horizontal-nav-third-level-icon-size: 0.9rem !default;
-$horizontal-nav-items-icon-margin-inline-end: 0.625rem !default;
-
-// ℹ️ We used SCSS variable because we want to allow users to update max height of popper content
-// 120px is combined height of navbar & horizontal nav
-$horizontal-nav-popper-content-max-height: calc((var(--vh, 1vh) * 100) - 120px - 4rem) !default;
-
-// ℹ️ This variable is used for horizontal nav popper content's `margin-top` and "The bridge"'s height. We need to sync both values.
-$horizontal-nav-popper-content-top: calc($horizontal-nav-padding + 0.375rem) !default;
-
-//  Plugins
-
-$plugin-ps-thumb-y-dark: rgba(var(--v-theme-surface-variant), 0.35) !default;
-
-//  Vuetify
-
-// Used in src/@core/scss/base/libs/vuetify/_overrides.scss
-$vuetify-reduce-default-compact-button-icon-size: true !default;
-
-//  Custom variables
-// for utility classes
-$font-sizes: () !default;
-$font-sizes: map-deep-merge(
-  (
-    'xs': 0.75rem,
-    'sm': 0.875rem,
-    'base': 1rem,
-    'lg': 1.125rem,
-    'xl': 1.25rem,
-    '2xl': 1.5rem,
-    '3xl': 1.875rem,
-    '4xl': 2.25rem,
-    '5xl': 3rem,
-    '6xl': 3.75rem,
-    '7xl': 4.5rem,
-    '8xl': 6rem,
-    '9xl': 8rem,
-  ),
-  $font-sizes
-);
-
-// line height
-$font-line-height: () !default;
-$font-line-height: map-deep-merge(
-  (
-    'xs': 1rem,
-    'sm': 1.25rem,
-    'base': 1.5rem,
-    'lg': 1.75rem,
-    'xl': 1.75rem,
-    '2xl': 2rem,
-    '3xl': 2.25rem,
-    '4xl': 2.5rem,
-    '5xl': 1,
-    '6xl': 1,
-    '7xl': 1,
-    '8xl': 1,
-    '9xl': 1,
-  ),
-  $font-line-height
-);
-
-// gap utility class
-$gap: () !default;
-$gap: map-deep-merge(
-  (
-    '0': 0,
-    '1': 0.25rem,
-    '2': 0.5rem,
-    '3': 0.75rem,
-    '4': 1rem,
-    '5': 1.25rem,
-    '6': 1.5rem,
-    '7': 1.75rem,
-    '8': 2rem,
-    '9': 2.25rem,
-    '10': 2.5rem,
-    '11': 2.75rem,
-    '12': 3rem,
-    '14': 3.5rem,
-    '16': 4rem,
-    '20': 5rem,
-    '24': 6rem,
-    '28': 7rem,
-    '32': 8rem,
-    '36': 9rem,
-    '40': 10rem,
-    '44': 11rem,
-    '48': 12rem,
-    '52': 13rem,
-    '56': 14rem,
-    '60': 15rem,
-    '64': 16rem,
-    '72': 18rem,
-    '80': 20rem,
-    '96': 24rem,
-  ),
-  $gap
-);

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

@@ -1,264 +0,0 @@
-@use 'placeholders' as *;
-@use '../template/placeholders' as *;
-@use '../../../@layouts/styles/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/src/styles/@core/scss/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/src/styles/@core/scss/base/libs/vuetify/_index.scss

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