@winchsa/ui 0.1.3 → 0.1.5

package/src/styles/@core/scss/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/src/styles/@core/scss/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);
-}

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

@@ -1,418 +0,0 @@
-@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;
-}

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

@@ -1,100 +0,0 @@
-@use 'sass:map';
-@use 'sass:list';
-@use '../../../assets/scss/variables/template' as variables;
-
-// Thanks: https://css-tricks.com/snippets/sass/deep-getset-maps/
-@function map-deep-get($map, $keys...) {
-  @each $key in $keys {
-    $map: map.get($map, $key);
-  }
-
-  @return $map;
-}
-
-@function map-deep-set($map, $keys, $value) {
-  $maps: ($map);
-  $result: null;
-
-  // If the last key is a map already
-  // Warn the user we will be overriding it with $value
-  @if type-of(nth($keys, -1)) == 'map' {
-    @warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
-  }
-
-  // If $keys is a single key
-  // Just merge and return
-  @if length($keys) == 1 {
-    @return map-merge(
-      $map,
-      (
-        $keys: $value,
-      )
-    );
-  }
-
-  // Loop from the first to the second to last key from $keys
-  // Store the associated map to this key in the $maps list
-  // If the key doesn't exist, throw an error
-  @for $i from 1 through length($keys) - 1 {
-    $current-key: list.nth($keys, $i);
-    $current-map: list.nth($maps, -1);
-    $current-get: map.get($current-map, $current-key);
-
-    @if not $current-get {
-      @error "Key `#{$key}` doesn't exist at current level in map.";
-    }
-
-    $maps: list.append($maps, $current-get);
-  }
-
-  // Loop from the last map to the first one
-  // Merge it with the previous one
-  @for $i from length($maps) through 1 {
-    $current-map: list.nth($maps, $i);
-    $current-key: list.nth($keys, $i);
-    $current-val: if($i == list.length($maps), $value, $result);
-    $result: map.map-merge(
-      $current-map,
-      (
-        $current-key: $current-val,
-      )
-    );
-  }
-
-  // Return result
-  @return $result;
-}
-
-// font size utility classes
-@each $name, $size in variables.$font-sizes {
-  .text-#{$name} {
-    font-size: $size;
-    line-height: map.get(variables.$font-line-height, $name);
-  }
-}
-
-// truncate utility class
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// gap utility class
-@each $name, $size in variables.$gap {
-  .gap-#{$name} {
-    gap: $size;
-  }
-
-  .gap-x-#{$name} {
-    column-gap: $size;
-  }
-
-  .gap-y-#{$name} {
-    row-gap: $size;
-  }
-}
-
-.list-none {
-  list-style-type: none;
-}