@justin_evo/evo-ui 1.1.0 → 1.2.1

package/src/css/utilities/_sizing.scss

@@ -1,138 +1,138 @@
-// ==========================================
-// SIZING UTILITIES
-// w-{n} | h-{n} | min-w | max-w | min-h | max-h
-// ==========================================
-
-$_size-scale: (
-  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,
-  56: 14rem,
-  64: 16rem,
-  72: 18rem,
-  80: 20rem,
-  96: 24rem,
-);
-
-// Numeric size classes
-@each $key, $val in $_size-scale {
-  .w-#{$key} { width: $val; }
-  .h-#{$key} { height: $val; }
-}
-
-// Fraction widths
-.w-1\/2  { width: 50%; }
-.w-1\/3  { width: 33.333333%; }
-.w-2\/3  { width: 66.666667%; }
-.w-1\/4  { width: 25%; }
-.w-2\/4  { width: 50%; }
-.w-3\/4  { width: 75%; }
-.w-1\/5  { width: 20%; }
-.w-2\/5  { width: 40%; }
-.w-3\/5  { width: 60%; }
-.w-4\/5  { width: 80%; }
-.w-1\/6  { width: 16.666667%; }
-.w-5\/6  { width: 83.333333%; }
-.w-1\/12 { width: 8.333333%; }
-
-// Special width values
-.w-auto   { width: auto; }
-.w-full   { width: 100%; }
-.w-screen { width: 100vw; }
-.w-svw    { width: 100svw; }
-.w-lvw    { width: 100lvw; }
-.w-dvw    { width: 100dvw; }
-.w-min    { width: min-content; }
-.w-max    { width: max-content; }
-.w-fit    { width: fit-content; }
-.w-px    { width: 1px; }
-
-// Special height values
-.h-auto   { height: auto; }
-.h-full   { height: 100%; }
-.h-screen { height: 100vh; }
-.h-svh    { height: 100svh; }
-.h-lvh    { height: 100lvh; }
-.h-dvh    { height: 100dvh; }
-.h-min    { height: min-content; }
-.h-max    { height: max-content; }
-.h-fit    { height: fit-content; }
-.h-px    { height: 1px; }
-
-// Size (width + height shorthand)
-@each $key, $val in $_size-scale {
-  .size-#{$key} { width: $val; height: $val; }
-}
-.size-auto   { width: auto; height: auto; }
-.size-full   { width: 100%; height: 100%; }
-.size-fit    { width: fit-content; height: fit-content; }
-
-// Min width
-.min-w-0      { min-width: 0; }
-.min-w-px     { min-width: 1px; }
-.min-w-full   { min-width: 100%; }
-.min-w-screen { min-width: 100vw; }
-.min-w-min    { min-width: min-content; }
-.min-w-max    { min-width: max-content; }
-.min-w-fit    { min-width: fit-content; }
-
-// Max width
-.max-w-none   { max-width: none; }
-.max-w-xs     { max-width: 20rem; }
-.max-w-sm     { max-width: 24rem; }
-.max-w-md     { max-width: 28rem; }
-.max-w-lg     { max-width: 32rem; }
-.max-w-xl     { max-width: 36rem; }
-.max-w-2xl    { max-width: 42rem; }
-.max-w-3xl    { max-width: 48rem; }
-.max-w-4xl    { max-width: 56rem; }
-.max-w-5xl    { max-width: 64rem; }
-.max-w-6xl    { max-width: 72rem; }
-.max-w-7xl    { max-width: 80rem; }
-.max-w-full   { max-width: 100%; }
-.max-w-screen { max-width: 100vw; }
-.max-w-min    { max-width: min-content; }
-.max-w-max    { max-width: max-content; }
-.max-w-fit    { max-width: fit-content; }
-.max-w-prose  { max-width: 65ch; }
-
-// Min height
-.min-h-0      { min-height: 0; }
-.min-h-px     { min-height: 1px; }
-.min-h-full   { min-height: 100%; }
-.min-h-screen { min-height: 100vh; }
-.min-h-svh    { min-height: 100svh; }
-.min-h-dvh    { min-height: 100dvh; }
-.min-h-min    { min-height: min-content; }
-.min-h-max    { min-height: max-content; }
-.min-h-fit    { min-height: fit-content; }
-
-// Max height
-.max-h-none   { max-height: none; }
-.max-h-full   { max-height: 100%; }
-.max-h-screen { max-height: 100vh; }
-.max-h-svh    { max-height: 100svh; }
-.max-h-dvh    { max-height: 100dvh; }
-.max-h-min    { max-height: min-content; }
-.max-h-max    { max-height: max-content; }
-.max-h-fit    { max-height: fit-content; }
+// ==========================================
+// SIZING UTILITIES
+// w-{n} | h-{n} | min-w | max-w | min-h | max-h
+// ==========================================
+
+$_size-scale: (
+  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,
+  56: 14rem,
+  64: 16rem,
+  72: 18rem,
+  80: 20rem,
+  96: 24rem,
+);
+
+// Numeric size classes
+@each $key, $val in $_size-scale {
+  .w-#{$key} { width: $val; }
+  .h-#{$key} { height: $val; }
+}
+
+// Fraction widths
+.w-1\/2  { width: 50%; }
+.w-1\/3  { width: 33.333333%; }
+.w-2\/3  { width: 66.666667%; }
+.w-1\/4  { width: 25%; }
+.w-2\/4  { width: 50%; }
+.w-3\/4  { width: 75%; }
+.w-1\/5  { width: 20%; }
+.w-2\/5  { width: 40%; }
+.w-3\/5  { width: 60%; }
+.w-4\/5  { width: 80%; }
+.w-1\/6  { width: 16.666667%; }
+.w-5\/6  { width: 83.333333%; }
+.w-1\/12 { width: 8.333333%; }
+
+// Special width values
+.w-auto   { width: auto; }
+.w-full   { width: 100%; }
+.w-screen { width: 100vw; }
+.w-svw    { width: 100svw; }
+.w-lvw    { width: 100lvw; }
+.w-dvw    { width: 100dvw; }
+.w-min    { width: min-content; }
+.w-max    { width: max-content; }
+.w-fit    { width: fit-content; }
+.w-px    { width: 1px; }
+
+// Special height values
+.h-auto   { height: auto; }
+.h-full   { height: 100%; }
+.h-screen { height: 100vh; }
+.h-svh    { height: 100svh; }
+.h-lvh    { height: 100lvh; }
+.h-dvh    { height: 100dvh; }
+.h-min    { height: min-content; }
+.h-max    { height: max-content; }
+.h-fit    { height: fit-content; }
+.h-px    { height: 1px; }
+
+// Size (width + height shorthand)
+@each $key, $val in $_size-scale {
+  .size-#{$key} { width: $val; height: $val; }
+}
+.size-auto   { width: auto; height: auto; }
+.size-full   { width: 100%; height: 100%; }
+.size-fit    { width: fit-content; height: fit-content; }
+
+// Min width
+.min-w-0      { min-width: 0; }
+.min-w-px     { min-width: 1px; }
+.min-w-full   { min-width: 100%; }
+.min-w-screen { min-width: 100vw; }
+.min-w-min    { min-width: min-content; }
+.min-w-max    { min-width: max-content; }
+.min-w-fit    { min-width: fit-content; }
+
+// Max width
+.max-w-none   { max-width: none; }
+.max-w-xs     { max-width: 20rem; }
+.max-w-sm     { max-width: 24rem; }
+.max-w-md     { max-width: 28rem; }
+.max-w-lg     { max-width: 32rem; }
+.max-w-xl     { max-width: 36rem; }
+.max-w-2xl    { max-width: 42rem; }
+.max-w-3xl    { max-width: 48rem; }
+.max-w-4xl    { max-width: 56rem; }
+.max-w-5xl    { max-width: 64rem; }
+.max-w-6xl    { max-width: 72rem; }
+.max-w-7xl    { max-width: 80rem; }
+.max-w-full   { max-width: 100%; }
+.max-w-screen { max-width: 100vw; }
+.max-w-min    { max-width: min-content; }
+.max-w-max    { max-width: max-content; }
+.max-w-fit    { max-width: fit-content; }
+.max-w-prose  { max-width: 65ch; }
+
+// Min height
+.min-h-0      { min-height: 0; }
+.min-h-px     { min-height: 1px; }
+.min-h-full   { min-height: 100%; }
+.min-h-screen { min-height: 100vh; }
+.min-h-svh    { min-height: 100svh; }
+.min-h-dvh    { min-height: 100dvh; }
+.min-h-min    { min-height: min-content; }
+.min-h-max    { min-height: max-content; }
+.min-h-fit    { min-height: fit-content; }
+
+// Max height
+.max-h-none   { max-height: none; }
+.max-h-full   { max-height: 100%; }
+.max-h-screen { max-height: 100vh; }
+.max-h-svh    { max-height: 100svh; }
+.max-h-dvh    { max-height: 100dvh; }
+.max-h-min    { max-height: min-content; }
+.max-h-max    { max-height: max-content; }
+.max-h-fit    { max-height: fit-content; }

package/src/css/utilities/_spacing.scss

@@ -1,99 +1,99 @@
-// ==========================================
-// SPACING UTILITIES
-// m-{n} | p-{n} | gap-{n}  (1 unit = 0.25rem)
-// ==========================================
-
-$_spacing: (
-  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,
-  56: 14rem,
-  64: 16rem,
-  72: 18rem,
-  80: 20rem,
-  96: 24rem,
-);
-
-@each $key, $val in $_spacing {
-  // Margin
-  .m-#{$key}  { margin: $val; }
-  .mt-#{$key} { margin-top: $val; }
-  .mr-#{$key} { margin-right: $val; }
-  .mb-#{$key} { margin-bottom: $val; }
-  .ml-#{$key} { margin-left: $val; }
-  .mx-#{$key} { margin-inline: $val; }
-  .my-#{$key} { margin-block: $val; }
-
-  // Padding
-  .p-#{$key}  { padding: $val; }
-  .pt-#{$key} { padding-top: $val; }
-  .pr-#{$key} { padding-right: $val; }
-  .pb-#{$key} { padding-bottom: $val; }
-  .pl-#{$key} { padding-left: $val; }
-  .px-#{$key} { padding-inline: $val; }
-  .py-#{$key} { padding-block: $val; }
-
-  // Gap
-  .gap-#{$key}   { gap: $val; }
-  .gap-x-#{$key} { column-gap: $val; }
-  .gap-y-#{$key} { row-gap: $val; }
-}
-
-// Pixel variants
-.m-px  { margin: 1px; }
-.mt-px { margin-top: 1px; }
-.mr-px { margin-right: 1px; }
-.mb-px { margin-bottom: 1px; }
-.ml-px { margin-left: 1px; }
-.mx-px { margin-inline: 1px; }
-.my-px { margin-block: 1px; }
-.p-px  { padding: 1px; }
-.pt-px { padding-top: 1px; }
-.pr-px { padding-right: 1px; }
-.pb-px { padding-bottom: 1px; }
-.pl-px { padding-left: 1px; }
-.px-px { padding-inline: 1px; }
-.py-px { padding-block: 1px; }
-.gap-px { gap: 1px; }
-
-// Auto margins
-.m-auto  { margin: auto; }
-.mt-auto { margin-top: auto; }
-.mr-auto { margin-right: auto; }
-.mb-auto { margin-bottom: auto; }
-.ml-auto { margin-left: auto; }
-.mx-auto { margin-inline: auto; }
-.my-auto { margin-block: auto; }
-
-// Negative margins
-@each $key, $val in $_spacing {
-  @if $key != 0 {
-    .-m-#{$key}  { margin: -$val; }
-    .-mt-#{$key} { margin-top: -$val; }
-    .-mr-#{$key} { margin-right: -$val; }
-    .-mb-#{$key} { margin-bottom: -$val; }
-    .-ml-#{$key} { margin-left: -$val; }
-    .-mx-#{$key} { margin-inline: -$val; }
-    .-my-#{$key} { margin-block: -$val; }
-  }
-}
+// ==========================================
+// SPACING UTILITIES
+// m-{n} | p-{n} | gap-{n}  (1 unit = 0.25rem)
+// ==========================================
+
+$_spacing: (
+  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,
+  56: 14rem,
+  64: 16rem,
+  72: 18rem,
+  80: 20rem,
+  96: 24rem,
+);
+
+@each $key, $val in $_spacing {
+  // Margin
+  .m-#{$key}  { margin: $val; }
+  .mt-#{$key} { margin-top: $val; }
+  .mr-#{$key} { margin-right: $val; }
+  .mb-#{$key} { margin-bottom: $val; }
+  .ml-#{$key} { margin-left: $val; }
+  .mx-#{$key} { margin-inline: $val; }
+  .my-#{$key} { margin-block: $val; }
+
+  // Padding
+  .p-#{$key}  { padding: $val; }
+  .pt-#{$key} { padding-top: $val; }
+  .pr-#{$key} { padding-right: $val; }
+  .pb-#{$key} { padding-bottom: $val; }
+  .pl-#{$key} { padding-left: $val; }
+  .px-#{$key} { padding-inline: $val; }
+  .py-#{$key} { padding-block: $val; }
+
+  // Gap
+  .gap-#{$key}   { gap: $val; }
+  .gap-x-#{$key} { column-gap: $val; }
+  .gap-y-#{$key} { row-gap: $val; }
+}
+
+// Pixel variants
+.m-px  { margin: 1px; }
+.mt-px { margin-top: 1px; }
+.mr-px { margin-right: 1px; }
+.mb-px { margin-bottom: 1px; }
+.ml-px { margin-left: 1px; }
+.mx-px { margin-inline: 1px; }
+.my-px { margin-block: 1px; }
+.p-px  { padding: 1px; }
+.pt-px { padding-top: 1px; }
+.pr-px { padding-right: 1px; }
+.pb-px { padding-bottom: 1px; }
+.pl-px { padding-left: 1px; }
+.px-px { padding-inline: 1px; }
+.py-px { padding-block: 1px; }
+.gap-px { gap: 1px; }
+
+// Auto margins
+.m-auto  { margin: auto; }
+.mt-auto { margin-top: auto; }
+.mr-auto { margin-right: auto; }
+.mb-auto { margin-bottom: auto; }
+.ml-auto { margin-left: auto; }
+.mx-auto { margin-inline: auto; }
+.my-auto { margin-block: auto; }
+
+// Negative margins
+@each $key, $val in $_spacing {
+  @if $key != 0 {
+    .-m-#{$key}  { margin: -$val; }
+    .-mt-#{$key} { margin-top: -$val; }
+    .-mr-#{$key} { margin-right: -$val; }
+    .-mb-#{$key} { margin-bottom: -$val; }
+    .-ml-#{$key} { margin-left: -$val; }
+    .-mx-#{$key} { margin-inline: -$val; }
+    .-my-#{$key} { margin-block: -$val; }
+  }
+}