@vueland/ui 0.0.1 → 0.0.3

package/dist/scss/utils/_sizing.scss

@@ -0,0 +1,40 @@
+// Width
+.w-0    { width: 0 !important; }
+.w-25   { width: 25% !important; }
+.w-50   { width: 50% !important; }
+.w-75   { width: 75% !important; }
+.w-100  { width: 100% !important; }
+.w-auto { width: auto !important; }
+.w-fit  { width: fit-content !important; }
+.w-min  { width: min-content !important; }
+.w-max  { width: max-content !important; }
+
+// Height
+.h-0    { height: 0 !important; }
+.h-25   { height: 25% !important; }
+.h-50   { height: 50% !important; }
+.h-75   { height: 75% !important; }
+.h-100  { height: 100% !important; }
+.h-auto { height: auto !important; }
+.h-fit  { height: fit-content !important; }
+.h-min  { height: min-content !important; }
+.h-max  { height: max-content !important; }
+
+// Viewport
+.w-screen { width: 100vw !important; }
+.h-screen { height: 100vh !important; }
+
+// Min
+.min-w-0      { min-width: 0 !important; }
+.min-w-full   { min-width: 100% !important; }
+.min-h-0      { min-height: 0 !important; }
+.min-h-full   { min-height: 100% !important; }
+.min-h-screen { min-height: 100vh !important; }
+
+// Max
+.max-w-full   { max-width: 100% !important; }
+.max-w-screen { max-width: 100vw !important; }
+.max-w-none   { max-width: none !important; }
+.max-h-full   { max-height: 100% !important; }
+.max-h-screen { max-height: 100vh !important; }
+.max-h-none   { max-height: none !important; }

package/dist/scss/utils/_spaces.scss

@@ -0,0 +1,164 @@
+@use "../maps/grids" as *;
+@use "sass:map";
+
+$step: 4;
+$max: 20;
+
+@for $r from 0 through $max {
+  $z: $r * $step;
+
+  .ma-#{$r} {
+    margin: #{$z}px !important;
+  }
+
+  .ml-#{$r} {
+    margin-left: #{$z}px !important;
+  }
+
+  .mr-#{$r} {
+    margin-right: #{$z}px !important;
+  }
+
+  .mb-#{$r} {
+    margin-bottom: #{$z}px !important;
+  }
+
+  .mt-#{$r} {
+    margin-top: #{$z}px !important;
+  }
+
+  .mx-#{$r} {
+    margin-left: #{$z}px !important;
+    margin-right: #{$z}px !important;
+  }
+
+  .my-#{$r} {
+    margin-top: #{$z}px !important;
+    margin-bottom: #{$z}px !important;
+  }
+
+  .pl-#{$r} {
+    padding-left: #{$z}px !important;
+  }
+
+  .pr-#{$r} {
+    padding-right: #{$z}px !important;
+  }
+
+  .pb-#{$r} {
+    padding-bottom: #{$z}px !important;
+  }
+
+  .pt-#{$r} {
+    padding-top: #{$z}px !important;
+  }
+
+  .pa-#{$r} {
+    padding: #{$z}px !important;
+  }
+
+  .px-#{$r} {
+    padding-left: #{$z}px !important;
+    padding-right: #{$z}px !important;
+  }
+
+  .py-#{$r} {
+    padding-top: #{$z}px !important;
+    padding-bottom: #{$z}px !important;
+  }
+
+  .gap-#{$r} {
+    gap: #{$z}px !important;
+  }
+
+  .gap-x-#{$r} {
+    column-gap: #{$z}px !important;
+  }
+
+  .gap-y-#{$r} {
+    row-gap: #{$z}px !important;
+  }
+}
+
+// responsive
+@each $size, $breakpoint in $grid-breakpoints {
+  @if $breakpoint != 0 {
+    @media (min-width: $breakpoint) {
+      @for $r from 0 through $max {
+        $z: $r * $step;
+
+        .#{$size}\:pa-#{$r} {
+          padding: #{$z}px !important;
+        }
+
+        .#{$size}\:pl-#{$r} {
+          padding-left: #{$z}px !important;
+        }
+
+        .#{$size}\:pr-#{$r} {
+          padding-right: #{$z}px !important;
+        }
+
+        .#{$size}\:pb-#{$r} {
+          padding-bottom: #{$z}px !important;
+        }
+
+        .#{$size}\:pt-#{$r} {
+          padding-top: #{$z}px !important;
+        }
+
+        .#{$size}\:px-#{$r} {
+          padding-left: #{$z}px !important;
+          padding-right: #{$z}px !important;
+        }
+
+        .#{$size}\:py-#{$r} {
+          padding-top: #{$z}px !important;
+          padding-bottom: #{$z}px !important;
+        }
+
+        .#{$size}\:ma-#{$r} {
+          margin: #{$z}px !important;
+        }
+
+        .#{$size}\:ml-#{$r} {
+          margin-left: #{$z}px !important;
+        }
+
+        .#{$size}\:mr-#{$r} {
+          margin-right: #{$z}px !important;
+        }
+
+        .#{$size}\:mb-#{$r} {
+          margin-bottom: #{$z}px !important;
+        }
+
+        .#{$size}\:mt-#{$r} {
+          margin-top: #{$z}px !important;
+        }
+
+        .#{$size}\:mx-#{$r} {
+          margin-left: #{$z}px !important;
+          margin-right: #{$z}px !important;
+        }
+
+        .#{$size}\:my-#{$r} {
+          margin-top: #{$z}px !important;
+          margin-bottom: #{$z}px !important;
+        }
+
+        .#{$size}\:gap-#{$r} {
+          gap: #{$z}px !important;
+        }
+
+        .#{$size}\:gap-x-#{$r} {
+          column-gap: #{$z}px !important;
+        }
+
+        .#{$size}\:gap-y-#{$r} {
+          row-gap: #{$z}px !important;
+        }
+      }
+    }
+  }
+}

package/dist/scss/utils/_text.scss

@@ -0,0 +1,76 @@
+@use "../maps/grids" as *;
+@use "sass:map";
+
+.text-left {
+  text-align: left !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-right {
+  text-align: right !important;
+}
+
+.text-justify {
+  text-align: justify !important;
+}
+
+.text-justify-all {
+  text-align: justify-all !important;
+}
+
+.text-nowrap {
+  white-space: nowrap !important;
+}
+
+.text-truncate {
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+}
+
+.text-uppercase {
+  text-transform: uppercase !important;
+}
+
+.text-lowercase {
+  text-transform: lowercase !important;
+}
+
+.text-capitalize {
+  text-transform: capitalize !important;
+}
+
+@each $size, $breakpoint in $grid-breakpoints {
+  @if $breakpoint != 0 {
+    @media (min-width: $breakpoint) {
+
+      .#{$size}\:text-left {
+        text-align: left !important;
+      }
+
+      .#{$size}\:text-center {
+        text-align: center !important;
+      }
+
+      .#{$size}\:text-right {
+        text-align: right !important;
+      }
+
+      .#{$size}\:text-justify {
+        text-align: justify !important;
+      }
+
+      .#{$size}\:text-justify-all {
+        text-align: justify-all !important;
+      }
+
+      .#{$size}\:text-nowrap {
+        white-space: nowrap !important;
+      }
+
+    }
+  }
+}

package/dist/scss/utils/_transitions.scss

@@ -0,0 +1,98 @@
+@use "../modules/global-vars" as *;
+
+@mixin transition-default() {
+  &-enter-active,
+  &-leave-active {
+    transition: .4s all $primary-transition;
+  }
+
+  &-move {
+    transition: transform .4s;
+  }
+}
+
+.fade {
+  &-enter-from, &-leave-to {
+    opacity: 0;
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: .2s opacity $primary-transition;
+  }
+}
+
+.scale-in {
+  &-enter-from, &-leave-to {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: .2s opacity $primary-transition, transform .2s $primary-transition;
+  }
+}
+
+.scale-in-out {
+  &-enter-from, &-leave-to {
+    opacity: 0;
+    transform: scale(.9);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: .15s opacity $primary-transition, transform .15s $primary-transition;
+  }
+
+  &-leave-active {
+    transform: scale(1.1);
+  }
+}
+
+.fade-in-down {
+  &-enter-from, &-leave-to {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: .15s opacity $primary-transition, transform .15s $primary-transition;
+  }
+
+  &-leave-active {
+    transform: translateY(15px);
+  }
+}
+
+.fade-in-up {
+  &-enter-from, &-leave-to {
+    opacity: 0;
+    transform: translateY(15px);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: .15s opacity $primary-transition, transform .15s $primary-transition;
+  }
+
+  &-leave-active {
+    transform: translateY(-15px);
+  }
+}
+
+.slide-in-left {
+  &-enter-from, &-leave-to {
+    transform: translateX(-100%);
+  }
+
+  &-enter-active,
+  &-leave-active {
+    transition: .2s opacity $primary-transition, transform .2s $primary-transition;
+  }
+
+  &-leave-active {
+    transform: translateX(100%);
+  }
+}

package/dist/scss/utils/_typography.scss

@@ -0,0 +1,81 @@
+@use "../maps/grids" as *;
+@use "sass:map";
+
+$font-sizes: (
+  xs:   12px,
+  sm:   14px,
+  base: 16px,
+  lg:   18px,
+  xl:   20px,
+  2xl:  24px,
+  3xl:  32px,
+  4xl:  40px,
+);
+
+$font-weights: (
+  thin:      100,
+  light:     300,
+  regular:   400,
+  medium:    500,
+  semi-bold: 600,
+  bold:      700,
+  heavy:     900,
+);
+
+$line-heights: (
+  none:    1,
+  tight:   1.25,
+  snug:    1.375,
+  normal:  1.5,
+  relaxed: 1.625,
+  loose:   2,
+);
+
+$letter-spacings: (
+  tighter: -0.05em,
+  tight:   -0.025em,
+  normal:   0,
+  wide:     0.025em,
+  wider:    0.05em,
+  widest:   0.1em,
+);
+
+@each $name, $size in $font-sizes {
+  .fs-#{$name} { font-size: $size !important; }
+}
+
+@each $name, $weight in $font-weights {
+  .fw-#{$name} { font-weight: $weight !important; }
+}
+
+@each $name, $value in $line-heights {
+  .lh-#{$name} { line-height: $value !important; }
+}
+
+@each $name, $value in $letter-spacings {
+  .ls-#{$name} { letter-spacing: $value !important; }
+}
+
+// Font style
+.italic     { font-style: italic !important; }
+.not-italic { font-style: normal !important; }
+
+// Font weight shortcuts
+.font-weight-thin      { font-weight: 100 !important; }
+.font-weight-light     { font-weight: 300 !important; }
+.font-weight-regular   { font-weight: 400 !important; }
+.font-weight-medium    { font-weight: 500 !important; }
+.font-weight-semi-bold { font-weight: 600 !important; }
+.font-weight-bold      { font-weight: 700 !important; }
+.font-weight-heavy     { font-weight: 900 !important; }
+
+// Responsive font sizes
+@each $bp, $breakpoint in $grid-breakpoints {
+  @if $breakpoint != 0 {
+    @media (min-width: $breakpoint) {
+      @each $name, $size in $font-sizes {
+        .#{$bp}\:fs-#{$name} { font-size: $size !important; }
+      }
+    }
+  }
+}