@nuvoui/core 1.2.0 → 1.2.2

package/src/styles/utilities/_display.scss

@@ -77,61 +77,63 @@
 @mixin overflow-y-auto { overflow-y: auto; }
 
 
-// Base Classes 
-.hide { @include hide; }
-.show { @include show; }
-.block { @include block; }
-.inline { @include inline; }
-.inline-block { @include inline-block; }
-.visible { @include visible; }
-.invisible { @include invisible; }
-.collapse { @include collapse; }
-.contents { @include contents; }
-.overflow-hidden { @include overflow-hidden; }
-.overflow-visible { @include overflow-visible; }
-.overflow-scroll { @include overflow-scroll; }
-.overflow-auto { @include overflow-auto; }
-.overflow-x-hidden { @include overflow-x-hidden; }
-.overflow-y-hidden { @include overflow-y-hidden; }
-.overflow-x-scroll { @include overflow-x-scroll; }
-.overflow-y-scroll { @include overflow-y-scroll; }
-.overflow-x-auto { @include overflow-x-auto; }
-.overflow-y-auto { @include overflow-y-auto; }
-
-
-.d {
-  &-tbl { @include d-tbl; }
-  &-tbl-row { @include d-tbl-row; }
-  &-tbl-cell { @include d-tbl-cell; }
-}
-                 
-// Responsive Variants
-@each $breakpoint, $width in $breakpoints {
-  @media (min-width: #{$width}) {
-    .hide\@#{$breakpoint} { @include hide; }
-    .show\@#{$breakpoint} { @include show; }
-    .block\@#{$breakpoint} { @include block; }
-    .inline\@#{$breakpoint} { @include inline; }
-    .inline-block\@#{$breakpoint} { @include inline-block; }
-    .visible\@#{$breakpoint} { @include visible; }
-    .invisible\@#{$breakpoint} { @include invisible; }
-    .collapse\@#{$breakpoint} { @include collapse; }
-    .contents\@#{$breakpoint} { @include contents; }
-    .overflow-hidden\@#{$breakpoint} { @include overflow-hidden; }
-    .overflow-visible\@#{$breakpoint} { @include overflow-visible; }
-    .overflow-scroll\@#{$breakpoint} { @include overflow-scroll; }
-    .overflow-auto\@#{$breakpoint} { @include overflow-auto; }
-    .overflow-x-hidden\@#{$breakpoint} { @include overflow-x-hidden; }
-    .overflow-y-hidden\@#{$breakpoint} { @include overflow-y-hidden; }
-    .overflow-x-scroll\@#{$breakpoint} { @include overflow-x-scroll; }
-    .overflow-y-scroll\@#{$breakpoint} { @include overflow-y-scroll; }
-    .overflow-x-auto\@#{$breakpoint} { @include overflow-x-auto; }
-    .overflow-y-auto\@#{$breakpoint} { @include overflow-y-auto; }
-
-    .d {
-      &-tbl\@#{$breakpoint} { @include d-tbl; }
-      &-tbl-row\@#{$breakpoint} { @include d-tbl-row; }
-      &-tbl-cell\@#{$breakpoint} { @include d-tbl-cell; }
+@if $generate-utility-classes {
+  // Base Classes 
+  .hide { @include hide; }
+  .show { @include show; }
+  .block { @include block; }
+  .inline { @include inline; }
+  .inline-block { @include inline-block; }
+  .visible { @include visible; }
+  .invisible { @include invisible; }
+  .collapse { @include collapse; }
+  .contents { @include contents; }
+  .overflow-hidden { @include overflow-hidden; }
+  .overflow-visible { @include overflow-visible; }
+  .overflow-scroll { @include overflow-scroll; }
+  .overflow-auto { @include overflow-auto; }
+  .overflow-x-hidden { @include overflow-x-hidden; }
+  .overflow-y-hidden { @include overflow-y-hidden; }
+  .overflow-x-scroll { @include overflow-x-scroll; }
+  .overflow-y-scroll { @include overflow-y-scroll; }
+  .overflow-x-auto { @include overflow-x-auto; }
+  .overflow-y-auto { @include overflow-y-auto; }
+
+
+  .d {
+    &-tbl { @include d-tbl; }
+    &-tbl-row { @include d-tbl-row; }
+    &-tbl-cell { @include d-tbl-cell; }
+  }
+                  
+  // Responsive Variants
+  @each $breakpoint, $width in $breakpoints {
+    @media (min-width: #{$width}) {
+      .hide\@#{$breakpoint} { @include hide; }
+      .show\@#{$breakpoint} { @include show; }
+      .block\@#{$breakpoint} { @include block; }
+      .inline\@#{$breakpoint} { @include inline; }
+      .inline-block\@#{$breakpoint} { @include inline-block; }
+      .visible\@#{$breakpoint} { @include visible; }
+      .invisible\@#{$breakpoint} { @include invisible; }
+      .collapse\@#{$breakpoint} { @include collapse; }
+      .contents\@#{$breakpoint} { @include contents; }
+      .overflow-hidden\@#{$breakpoint} { @include overflow-hidden; }
+      .overflow-visible\@#{$breakpoint} { @include overflow-visible; }
+      .overflow-scroll\@#{$breakpoint} { @include overflow-scroll; }
+      .overflow-auto\@#{$breakpoint} { @include overflow-auto; }
+      .overflow-x-hidden\@#{$breakpoint} { @include overflow-x-hidden; }
+      .overflow-y-hidden\@#{$breakpoint} { @include overflow-y-hidden; }
+      .overflow-x-scroll\@#{$breakpoint} { @include overflow-x-scroll; }
+      .overflow-y-scroll\@#{$breakpoint} { @include overflow-y-scroll; }
+      .overflow-x-auto\@#{$breakpoint} { @include overflow-x-auto; }
+      .overflow-y-auto\@#{$breakpoint} { @include overflow-y-auto; }
+
+      .d {
+        &-tbl\@#{$breakpoint} { @include d-tbl; }
+        &-tbl-row\@#{$breakpoint} { @include d-tbl-row; }
+        &-tbl-cell\@#{$breakpoint} { @include d-tbl-cell; }
+      }
     }
   }
 }

package/src/styles/utilities/_media-queries.scss

@@ -2,6 +2,7 @@
 // Module: Media Queries
 
 @use "sass:map";
+@use "sass:math";
 @use "sass:meta";
 @use "../abstracts" as *;
 @use "../abstracts/functions" as FN;
@@ -12,13 +13,25 @@
  * @param {string} $type - The media query type (e.g. 'lg', 'md').
  */
 @mixin media-up($breakpoint) {
-  @media screen and (min-width: FN.get-breakpoint-value($breakpoint)) {
+  $blueprint-value: FN.get-breakpoint-value($breakpoint);
+  $unit: math.unit($blueprint-value);
+  @if $unit == '' {
+    $blueprint-value: $blueprint-value * 1px; 
+    $unit: 'px';
+  }
+  
+  @media screen and (min-width: FN.get-breakpoint-value($blueprint-value)) {
     @content;
   }
 }
 
 @mixin media-down($breakpoint) {
-  $val: FN.get-breakpoint-value($breakpoint) - 0.01rm;
+  $blueprint-value: FN.get-breakpoint-value($breakpoint);
+  $unit: math.unit($blueprint-value);
+  @if $unit == '' {
+    $blueprint-value: $blueprint-value * 1px; 
+  }
+  $val: $blueprint-value - 0.01;
   @media screen and (max-width: #{$val}) {
     @content;
   }
@@ -26,7 +39,13 @@
 
 @mixin media-between($lower, $upper) {
   $lower-val: FN.get-breakpoint-value($lower);
-  $upper-val: FN.get-breakpoint-value($upper) - 0.01rm;
+  $upper-val: FN.get-breakpoint-value($upper);
+  $unit: math.unit($upper-val);
+  @if $unit == '' {
+    $upper-val: $upper-val * 1px; 
+  }
+  $upper-val: $blueprint-value - 0.01;
+
   @media screen and (min-width: #{$lower-val}) and (max-width: #{$upper-val}) {
     @content;
   }

package/src/styles/utilities/_opacity.scss

@@ -71,52 +71,58 @@
  * @see transitions
  */
 
-// Opacity Utilities
-@each $i in $percentages {
-  .opacity-#{$i} {
-    opacity: math.div($i, 100);
-  }
-  .hover\:opacity-#{$i}:hover {
-    opacity: math.div($i, 100);
-  }
-  .focus\:opacity-#{$i}:focus {
-    opacity: math.div($i, 100);
-  }
-  .active\:opacity-#{$i}:active {
-    opacity: math.div($i, 100);
-  }
-  .group:hover .group-hover\:opacity-#{$i} {
-    opacity: math.div($i, 100);
-  }
+@mixin opacity($value) {
+  opacity: math.div($value, 100);
 }
 
-// Responsive Variants for Opacity
-@each $breakpoint, $width in $breakpoints {
-  @media (min-width: #{$width}) {
-    @each $i in $percentages {
-      .opacity-#{$i}\@#{$breakpoint} {
-        opacity: math.div($i, 100);
-      }
-      .hover\:opacity-#{$i}\@#{$breakpoint}:hover {
-        opacity: math.div($i, 100);
-      }
-      .focus\:opacity-#{$i}\@#{$breakpoint}:focus {
-        opacity: math.div($i, 100);
-      }
-      .active\:opacity-#{$i}\@#{$breakpoint}:active {
-        opacity: math.div($i, 100);
-      }
-      .group:hover .group-hover\:opacity-#{$i}\@#{$breakpoint} {
-        opacity: math.div($i, 100);
+@if $generate-utility-classes {
+  // Opacity Utilities
+  @each $i in $percentages {
+    .opacity-#{$i} {
+      @include opacity ($i);
+    }
+    .hover\:opacity-#{$i}:hover {
+      @include opacity ($i);
+    }
+    .focus\:opacity-#{$i}:focus {
+      @include opacity ($i);
+    }
+    .active\:opacity-#{$i}:active {
+      @include opacity ($i);
+    }
+    .group:hover .group-hover\:opacity-#{$i} {
+      @include opacity ($i);
+    }
+  }
+
+  // Responsive Variants for Opacity
+  @each $breakpoint, $width in $breakpoints {
+    @media (min-width: #{$width}) {
+      @each $i in $percentages {
+        .opacity-#{$i}\@#{$breakpoint} {
+          @include opacity ($i);
+        }
+        .hover\:opacity-#{$i}\@#{$breakpoint}:hover {
+          @include opacity ($i);
+        }
+        .focus\:opacity-#{$i}\@#{$breakpoint}:focus {
+          @include opacity ($i);
+        }
+        .active\:opacity-#{$i}\@#{$breakpoint}:active {
+          @include opacity ($i);
+        }
+        .group:hover .group-hover\:opacity-#{$i}\@#{$breakpoint} {
+          @include opacity ($i);
+        }
       }
     }
   }
-}
 
-// Transition Opacity
-// TODO move to transitons may be?
-.transition-opacity {
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
+  // Transition Opacity
+  // TODO move to transitons may be?
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+  }
+}

package/src/styles/utilities/_position.scss

@@ -171,42 +171,88 @@
 
 
 
+ // todo: Documentation
+ @mixin absolute-center {
+  & {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+   
+    --translate-x: -50%;
+    --translate-y: -50%;
+   
+    transform: translateX(var(--translate-x)) translateY(var(--translate-y)) translateZ(var(--translate-z, 0)) rotate(var(--rotate, 0)) skewX(var(--skew-x, 0)) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, 1)) scaleY(var(--scale-y, 1));
+  }
+}
+
+// todo: Documentation
+// Fractional and percentage placements
+$position-fractions: (
+  '25p': 25%,
+  '33p': 33.333%,
+  '50p': 50%,
+  '66p': 66.667%,
+  '75p': 75%,
+  "100p": 100%
+);
+
+
+
 // -----------------------------------------------
 // UTILITY CLASSES
 // -----------------------------------------------
+@if $generate-utility-classes {
+  // Position Classes
+  .static { @include static; }
+  .relative { @include relative; }
+  .absolute { @include absolute; }
+  .fixed { @include fixed; }
+  .sticky { @include sticky; }
+  .absolute-center { @include absolute-center; } 
 
-// Position Classes
-.static { @include static; }
-.relative { @include relative; }
-.absolute { @include absolute; }
-.fixed { @include fixed; }
-.sticky { @include sticky; }
-
-// Placement Classes
-@each $key, $value in $spacings {
-  .top-#{$key} { @include top($value); }
-  .right-#{$key} { @include right($value); }
-  .bottom-#{$key} { @include bottom($value); }
-  .left-#{$key} { @include left($value); }
-}
+  @each $key, $value in $position-fractions {
+    .top-#{$key} { @include top($value); }
+    .right-#{$key} { @include right($value); }
+    .bottom-#{$key} { @include bottom($value); }
+    .left-#{$key} { @include left($value); }
+  }
 
-// -----------------------------------------------
-// RESPONSIVE CLASSES
-// -----------------------------------------------
+  // Placement Classes
+  @each $key, $value in $spacings {
+    .top-#{$key} { @include top($value); }
+    .right-#{$key} { @include right($value); }
+    .bottom-#{$key} { @include bottom($value); }
+    .left-#{$key} { @include left($value); }
+  }
+
+  // -----------------------------------------------
+  // RESPONSIVE CLASSES
+  // -----------------------------------------------
+
+  // Responsive Position Classes
+  @each $breakpoint, $width in $breakpoints {
+    @media (min-width: #{$width}) {
+      .static\@#{$breakpoint} {@include static;}
+      .relative\@#{$breakpoint} {@include relative;}
+      .absolute\@#{$breakpoint} {@include absolute;}
+      .fixed\@#{$breakpoint} {@include fixed;}
+      .sticky\@#{$breakpoint} {@include sticky;}
+      .absolute-center\@#{$breakpoint} { @include absolute-center; }
+
+      // Fractional responsive placements
+      @each $key, $value in $position-fractions {
+        .top-#{$key}\@#{$breakpoint} { @include top($value); }
+        .right-#{$key}\@#{$breakpoint} { @include right($value); }
+        .bottom-#{$key}\@#{$breakpoint} { @include bottom($value); }
+        .left-#{$key}\@#{$breakpoint} { @include left($value); }
+      }
 
-// Responsive Position Classes
-@each $breakpoint, $width in $breakpoints {
-  @media (min-width: #{$width}) {
-    .static\@#{$breakpoint} {@include static;}
-    .relative\@#{$breakpoint} {@include relative;}
-    .absolute\@#{$breakpoint} {@include absolute;}
-    .fixed\@#{$breakpoint} {@include fixed;}
-    .sticky\@#{$breakpoint} {@include sticky;}
-    @each $key, $value in $spacings {
-        .top-#{$key}\@#{$breakpoint} {@include top($value);}
-        .right-#{$key}\@#{$breakpoint} {@include right($value);}
-        .bottom-#{$key}\@#{$breakpoint} {@include bottom($value);}
-        .left-#{$key}\@#{$breakpoint} {@include left($value);}
+      @each $key, $value in $spacings {
+          .top-#{$key}\@#{$breakpoint} {@include top($value);}
+          .right-#{$key}\@#{$breakpoint} {@include right($value);}
+          .bottom-#{$key}\@#{$breakpoint} {@include bottom($value);}
+          .left-#{$key}\@#{$breakpoint} {@include left($value);}
+      }
     }
   }
 }

package/src/styles/utilities/_shadows.scss

@@ -90,144 +90,150 @@ $shadow-sizes: (
     $shadow-color;
 }
 
-// Utility Classes
-.shadow-none {
-  box-shadow: none !important;
+@mixin elevation($i){
+  @if $i == 1 {
+    @include shadow("sm");
+  } @else if $i == 2 {
+    @include shadow("md");
+  } @else if $i == 3 {
+    @include shadow("lg");
+  } @else if $i == 4 {
+    @include shadow("xl");
+  } @else if $i == 5 {
+    @include shadow("monster");
+  }
+
+  z-index: $i;
 }
 
-@each $size, $values in $shadow-sizes {
-  .shadow-#{$size} {
-    @include shadow($size);
+// Utility Classes
+@if VAR.$generate-utility-classes {
+  .shadow-none {
+    box-shadow: none !important;
   }
 
-  // Shadow with color variants
-  @each $color-name, $color-value in VAR.$shadow-colors {
-    @if $color-name != "default" {
-      .shadow-#{$size}-#{$color-name} {
-        @include shadow($size, $color-name);
+  @each $size, $values in $shadow-sizes {
+    .shadow-#{$size} {
+      @include shadow($size);
+    }
+
+    // Shadow with color variants
+    @each $color-name, $color-value in VAR.$shadow-colors {
+      @if $color-name != "default" {
+        .shadow-#{$size}-#{$color-name} {
+          @include shadow($size, $color-name);
+        }
       }
     }
-  }
 
-  .shadow-inset-#{$size} {
-    @include shadow-inset($size);
-  }
+    .shadow-inset-#{$size} {
+      @include shadow-inset($size);
+    }
 
-  // Inset shadows with color variants
-  @each $color-name, $color-value in VAR.$shadow-colors {
-    @if $color-name != "default" {
-      .shadow-inset-#{$size}-#{$color-name} {
-        @include shadow-inset($size, $color-name);
+    // Inset shadows with color variants
+    @each $color-name, $color-value in VAR.$shadow-colors {
+      @if $color-name != "default" {
+        .shadow-inset-#{$size}-#{$color-name} {
+          @include shadow-inset($size, $color-name);
+        }
       }
     }
-  }
 
-  // Hover shadows
-  .hover\:shadow-#{$size}:hover {
-    @include shadow($size);
-  }
+    // Hover shadows
+    .hover\:shadow-#{$size}:hover {
+      @include shadow($size);
+    }
 
-  // Hover shadows with color variants
-  @each $color-name, $color-value in VAR.$shadow-colors {
-    @if $color-name != "default" {
-      .hover\:shadow-#{$size}-#{$color-name}:hover {
-        @include shadow($size, $color-name);
+    // Hover shadows with color variants
+    @each $color-name, $color-value in VAR.$shadow-colors {
+      @if $color-name != "default" {
+        .hover\:shadow-#{$size}-#{$color-name}:hover {
+          @include shadow($size, $color-name);
+        }
       }
     }
-  }
 
-  // Focus shadows
-  .focus\:shadow-#{$size}:focus {
-    @include shadow($size);
-  }
+    // Focus shadows
+    .focus\:shadow-#{$size}:focus {
+      @include shadow($size);
+    }
 
-  // Focus shadows with color variants
-  @each $color-name, $color-value in VAR.$shadow-colors {
-    @if $color-name != "default" {
-      .focus\:shadow-#{$size}-#{$color-name}:focus {
-        @include shadow($size, $color-name);
+    // Focus shadows with color variants
+    @each $color-name, $color-value in VAR.$shadow-colors {
+      @if $color-name != "default" {
+        .focus\:shadow-#{$size}-#{$color-name}:focus {
+          @include shadow($size, $color-name);
+        }
       }
     }
-  }
 
-  // Active shadows
-  .active\:shadow-#{$size}:active {
-    @include shadow($size);
-  }
+    // Active shadows
+    .active\:shadow-#{$size}:active {
+      @include shadow($size);
+    }
 
-  // Active shadows with color variants
-  @each $color-name, $color-value in VAR.$shadow-colors {
-    @if $color-name != "default" {
-      .active\:shadow-#{$size}-#{$color-name}:active {
-        @include shadow($size, $color-name);
+    // Active shadows with color variants
+    @each $color-name, $color-value in VAR.$shadow-colors {
+      @if $color-name != "default" {
+        .active\:shadow-#{$size}-#{$color-name}:active {
+          @include shadow($size, $color-name);
+        }
       }
     }
   }
-}
 
-// Responsive variants
-@each $breakpoint, $width in VAR.$breakpoints {
-  @media (min-width: #{$width}) {
-    @each $size, $values in $shadow-sizes {
-      // Regular shadows with breakpoints
-      .shadow-#{$size}\@#{$breakpoint} {
-        @include shadow($size);
-      }
+  // Responsive variants
+  @each $breakpoint, $width in VAR.$breakpoints {
+    @media (min-width: #{$width}) {
+      @each $size, $values in $shadow-sizes {
+        // Regular shadows with breakpoints
+        .shadow-#{$size}\@#{$breakpoint} {
+          @include shadow($size);
+        }
 
-      // Shadows with color variants at breakpoints
-      @each $color-name, $color-value in VAR.$shadow-colors {
-        @if $color-name != "default" {
-          .shadow-#{$size}-#{$color-name}\@#{$breakpoint} {
-            @include shadow($size, $color-name);
+        // Shadows with color variants at breakpoints
+        @each $color-name, $color-value in VAR.$shadow-colors {
+          @if $color-name != "default" {
+            .shadow-#{$size}-#{$color-name}\@#{$breakpoint} {
+              @include shadow($size, $color-name);
+            }
           }
         }
-      }
 
-      // Hover shadows with breakpoints
-      .hover\:shadow-#{$size}\@#{$breakpoint}:hover {
-        @include shadow($size);
-      }
+        // Hover shadows with breakpoints
+        .hover\:shadow-#{$size}\@#{$breakpoint}:hover {
+          @include shadow($size);
+        }
 
-      // Hover shadows with color variants at breakpoints
-      @each $color-name, $color-value in VAR.$shadow-colors {
-        @if $color-name != "default" {
-          .hover\:shadow-#{$size}-#{$color-name}\@#{$breakpoint}:hover {
-            @include shadow($size, $color-name);
+        // Hover shadows with color variants at breakpoints
+        @each $color-name, $color-value in VAR.$shadow-colors {
+          @if $color-name != "default" {
+            .hover\:shadow-#{$size}-#{$color-name}\@#{$breakpoint}:hover {
+              @include shadow($size, $color-name);
+            }
           }
         }
-      }
 
-      // Focus shadows with breakpoints
-      .focus\:shadow-#{$size}\@#{$breakpoint}:focus {
-        @include shadow($size);
-      }
+        // Focus shadows with breakpoints
+        .focus\:shadow-#{$size}\@#{$breakpoint}:focus {
+          @include shadow($size);
+        }
 
-      // Focus shadows with color variants at breakpoints
-      @each $color-name, $color-value in VAR.$shadow-colors {
-        @if $color-name != "default" {
-          .focus\:shadow-#{$size}-#{$color-name}\@#{$breakpoint}:focus {
-            @include shadow($size, $color-name);
+        // Focus shadows with color variants at breakpoints
+        @each $color-name, $color-value in VAR.$shadow-colors {
+          @if $color-name != "default" {
+            .focus\:shadow-#{$size}-#{$color-name}\@#{$breakpoint}:focus {
+              @include shadow($size, $color-name);
+            }
           }
         }
       }
     }
   }
-}
 
-@for $i from 1 through 5 {
-  .elevation-#{$i} {
-    @if $i == 1 {
-      @include shadow("sm");
-    } @else if $i == 2 {
-      @include shadow("md");
-    } @else if $i == 3 {
-      @include shadow("lg");
-    } @else if $i == 4 {
-      @include shadow("xl");
-    } @else if $i == 5 {
-      @include shadow("monster");
+  @for $i from 1 through 5 {
+    .elevation-#{$i} {
+      @include elevation($i);
     }
-
-    z-index: $i;
   }
 }