@winchsa/ui 0.1.0

package/src/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/src/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/src/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/src/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);
+}

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

@@ -0,0 +1,418 @@
+@use '../../../assets/scss/variables/template' as variables;
+@use '../../../@layouts/styles/mixins' as layoutsMixins;
+
+//  Demo spacers
+// TODO: Use vuetify SCSS variable here
+$card-spacer-content: 16px;
+
+.demo-space-x {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-block-start: -$card-spacer-content;
+
+  & > * {
+    margin-block-start: $card-spacer-content;
+    margin-inline-end: $card-spacer-content;
+  }
+}
+
+.demo-space-y {
+  & > * {
+    margin-block-end: $card-spacer-content;
+
+    &:last-child {
+      margin-block-end: 0;
+    }
+  }
+}
+
+//  Card match height
+.match-height.v-row {
+  .v-card {
+    block-size: 100%;
+  }
+}
+
+//  Whitespace
+.whitespace-no-wrap {
+  white-space: nowrap;
+}
+
+//  Colors
+
+/*
+  ℹ️ Vuetify is applying `.text-white` class to badge icon but don't provide its styles
+  Moreover, we also use this class in some places
+
+  ℹ️ In vuetify 2 with `$color-pack: false` SCSS var config this class was getting generated but this is not the case in v3
+
+  ℹ️ We also need !important to get correct color in badge icon
+*/
+.text-white {
+  color: #fff !important;
+}
+
+.bg-var-theme-background {
+  background-color: rgba(var(--v-theme-on-background), 0.08) !important;
+}
+
+// [/^bg-light-(\w+)$/, ([, w]) => ({ backgroundColor: `rgba(var(--v-theme-${w}), var(--v-activated-opacity))` })],
+@each $color-name in variables.$theme-colors-name {
+  .bg-light-#{$color-name} {
+    background-color: rgba(var(--v-theme-#{$color-name}), var(--v-activated-opacity)) !important;
+  }
+}
+
+//  clamp text
+.clamp-text {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+}
+
+.leading-normal {
+  line-height: normal !important;
+}
+
+//  for rtl only
+.flip-in-rtl {
+  @include layoutsMixins.rtl {
+    transform: scaleX(-1);
+  }
+}
+
+//  Carousel
+.carousel-delimiter-top-end {
+  .v-carousel__controls {
+    justify-content: end;
+    block-size: 40px;
+    inset-block-start: 0;
+    padding-inline: 1rem;
+
+    .v-btn--icon.v-btn--density-default {
+      block-size: calc(var(--v-btn-height) + -10px);
+      color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+      inline-size: calc(var(--v-btn-height) + -8px);
+
+      &.v-btn--active {
+        color: #fff;
+      }
+
+      .v-btn__overlay {
+        opacity: 0;
+      }
+
+      .v-ripple__container {
+        display: none;
+      }
+
+      .v-btn__content {
+        .v-icon {
+          block-size: 8px !important;
+          inline-size: 8px !important;
+        }
+      }
+    }
+  }
+
+  @each $color-name in variables.$theme-colors-name {
+    &.dots-active-#{$color-name} {
+      .v-carousel__controls {
+        .v-btn--active {
+          color: rgb(var(--v-theme-#{$color-name})) !important;
+        }
+      }
+    }
+  }
+}
+
+//  Pagination small-select dropdown for table
+// TODO: remove this class after vuetify datatable implememtation
+
+.per-page-select {
+  margin-block: auto;
+
+  .v-field__input {
+    align-items: center;
+    padding: 2px;
+    font-size: 14px;
+  }
+
+  .v-field__append-inner {
+    align-items: center;
+    padding: 0;
+    margin-inline-start: -2.5rem;
+
+    .v-icon {
+      margin-inline-start: 0 !important;
+    }
+  }
+}
+
+.v-timeline-item {
+  .app-timeline-title {
+    color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1.3125rem;
+  }
+
+  .app-timeline-meta {
+    color: rgba(var(--v-theme-on-surface), var(--v-disabled-opacity));
+    font-size: 12px;
+    line-height: 0.875rem;
+  }
+
+  .app-timeline-text {
+    color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+    font-size: 14px;
+    line-height: 1.25rem;
+  }
+}
+
+@for $i from 1 through 1100 {
+  .app-z-#{$i} {
+    z-index: $i * 1;
+  }
+}
+
+@for $i from 1 through 100 {
+  .app-gap-#{$i} {
+    gap: $i * 0.25rem;
+  }
+}
+
+.app-font-weight-semibold {
+  font-weight: 600 !important;
+}
+
+.app-font-size-12 {
+  font-size: 12px !important;
+}
+
+.app-font-size-13 {
+  font-size: 13px;
+}
+
+.app-font-size-15 {
+  font-size: 15px;
+}
+
+.app-font-size-16 {
+  font-size: 15px;
+}
+
+.app-font-size-18 {
+  font-size: 18px;
+}
+
+.app-font-size-22 {
+  font-size: 22px;
+}
+
+.app-font-size-24 {
+  font-size: 24px;
+}
+
+@for $i from 1 through 400 {
+  .app-w-#{$i}px {
+    width: $i * 1px;
+  }
+}
+
+@for $i from 1 through 400 {
+  .app-min-w-#{$i}px {
+    min-width: $i * 1px;
+  }
+}
+
+@for $i from 1 through 200 {
+  .app-max-w-#{$i}px {
+    width: $i * 1px;
+  }
+  .\!app-max-w-#{$i}px {
+    width: $i * 1px !important;
+  }
+}
+
+@for $i from 1 through 100 {
+  .app-w-#{$i}rem {
+    width: $i * 0.25rem;
+  }
+}
+
+@for $i from 1 through 300 {
+  .app-h-#{$i}px {
+    height: $i * 1px;
+  }
+}
+
+@for $i from 1 through 300 {
+  .app-min-h-#{$i}px {
+    min-height: $i * 1px;
+  }
+}
+
+.app-min-h-250px {
+  min-height: 250px;
+}
+
+@for $i from 1 through 100 {
+  .app-h-#{$i}vh {
+    height: $i * 1vh;
+  }
+}
+
+@for $i from -100 through 100 {
+  .app-top-#{$i}px {
+    top: $i * 1px;
+  }
+}
+
+@for $i from -100 through 100 {
+  .app-left-#{$i}px {
+    left: $i * 1px;
+  }
+}
+
+@for $i from -100 through 100 {
+  .app-right-#{$i}px {
+    right: $i * 1px;
+  }
+}
+
+@for $i from -100 through 100 {
+  .app-bottom-#{$i}px {
+    bottom: $i * 1px;
+  }
+}
+
+.app-rounded-6 {
+  border-radius: 6px;
+}
+
+.slide-in-right {
+	-webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+  animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+}
+
+@-webkit-keyframes slide-in-right {
+  0% {
+    -webkit-transform: translateX(50px);
+            transform: translateX(50px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-in-right {
+  0% {
+    -webkit-transform: translateX(50px);
+            transform: translateX(50px);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.slide-out-right {
+	-webkit-animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+	        animation: slide-out-right 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+}
+
+@-webkit-keyframes slide-out-right {
+  0% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateX(50px);
+            transform: translateX(50px);
+    opacity: 0;
+  }
+}
+
+@keyframes slide-out-right {
+  0% {
+    -webkit-transform: translateX(0);
+            transform: translateX(0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translateX(50px);
+            transform: translateX(50px);
+    opacity: 0;
+  }
+}
+
+.app-w-fit {
+  width: fit-content;
+}
+
+.app-h-fit {
+  height: fit-content;
+}
+
+.app-cursor-pointer {
+  cursor: pointer;
+}
+
+.app-pointer-events-all {
+  pointer-events: all;
+}
+.app-min-h-screen {
+  min-height: 100vh;
+}
+
+.app-aspect-ratio-1 {
+  aspect-ratio: 1;
+}
+
+.app-flex-1 {
+  flex: 1 1 0%;
+}
+
+@for $i from 0 through 100 {
+  .app-opacity-#{$i} {
+    opacity: $i * 1%;
+  }
+}
+
+.app-border-silver {
+  border: 1px solid rgba(var(--v-theme-silver));
+}
+
+.app-inset-inline-end-9px {
+  inset-inline-end: 9px;
+}
+
+.app-h-fit {
+  height: fit-content !important;
+}
+
+.app-border-yellow {
+  border: 1px solid rgb(var(--v-theme-yellow));
+}
+
+.app-border-dark-gray {
+  border: 1px solid rgb(var(--v-theme-dark-gray));
+}
+
+.app-border-primary {
+  border-color: rgb(var(--v-theme-primary)) !important;
+}
+
+.app-dir-ltr {
+  direction: ltr !important;
+}