@nuvoui/core 1.2.0 → 1.2.2

package/src/styles/utilities/_sizing.scss

@@ -32,65 +32,67 @@
 @mixin w-screen { & { width: 100vw; } }
 @mixin h-screen { & { height: 100dvh; } }
 
-.w-screen { @include w-screen; }
-.h-screen { @include h-screen; }
+@if VAR.$generate-utility-classes {
+    .w-screen { @include w-screen; }
+    .h-screen { @include h-screen; }
 
-// Width utilities need :not(.flex) to avoid conflicts with flex child sizing
-:not(.flex)>.w-auto { @include w-auto; }
-:not(.flex)>.w-full { @include w-full; }
+    // Width utilities need :not(.flex) to avoid conflicts with flex child sizing
+    :not(.flex)>.w-auto { @include w-auto; }
+    :not(.flex)>.w-full { @include w-full; }
 
-.h-auto { @include h-auto; }
-.h-full { @include h-full; }
-.min-w-full { @include min-w-full; }
-.max-w-full { @include max-w-full; }
-.min-h-full { @include min-h-full; }
-.max-h-full { @include max-h-full; }
+    .h-auto { @include h-auto; }
+    .h-full { @include h-full; }
+    .min-w-full { @include min-w-full; }
+    .max-w-full { @include max-w-full; }
+    .min-h-full { @include min-h-full; }
+    .max-h-full { @include max-h-full; }
 
-// Percentage widths
-@each $i in VAR.$percentages {
-    .w-#{$i}p { @include width-percent($i); }
-    .h-#{$i}p { @include height-percent($i); }
-    .min-w-#{$i}p { @include min-width-percent($i); }
-    .min-h-#{$i}p { @include min-height-percent($i); }
-    .max-w-#{$i}p { @include max-width-percent($i); }
-    .max-h-#{$i}p { @include max-height-percent($i); }
-}
+    // Percentage widths
+    @each $i in VAR.$percentages {
+        .w-#{$i}p { @include width-percent($i); }
+        .h-#{$i}p { @include height-percent($i); }
+        .min-w-#{$i}p { @include min-width-percent($i); }
+        .min-h-#{$i}p { @include min-height-percent($i); }
+        .max-w-#{$i}p { @include max-width-percent($i); }
+        .max-h-#{$i}p { @include max-height-percent($i); }
+    }
 
-// Generate utilities from spacing map
-@each $key, $value in VAR.$spacings {
-    .w-#{$key} { @include width($value); }
-    .h-#{$key} { @include height($value); }
-    .min-w-#{$key} { @include min-width($value); }
-    .min-h-#{$key} { @include min-height($value); }
-    .max-w-#{$key} { @include max-width($value); }
-    .max-h-#{$key} { @include max-height($value); }
-}
+    // Generate utilities from spacing map
+    @each $key, $value in VAR.$spacings {
+        .w-#{$key} { @include width($value); }
+        .h-#{$key} { @include height($value); }
+        .min-w-#{$key} { @include min-width($value); }
+        .min-h-#{$key} { @include min-height($value); }
+        .max-w-#{$key} { @include max-width($value); }
+        .max-h-#{$key} { @include max-height($value); }
+    }
 
-// Pixel widths based on spacing scale
-@each $breakpoint, $width in VAR.$breakpoints {
+    // Pixel widths based on spacing scale
+    @each $breakpoint, $width in VAR.$breakpoints {
 
-    .w-#{$breakpoint} { @include width($width); }
-    .min-w-#{$breakpoint} { @include min-width($width); }
-    .max-w-#{$breakpoint} { @include max-width($width); }
+        .w-#{$breakpoint} { @include width($width); }
+        .min-w-#{$breakpoint} { @include min-width($width); }
+        .max-w-#{$breakpoint} { @include max-width($width); }
 
-    @include MQ.media-up ($breakpoint) {
-        // Generate utilities from spacing map
-        @each $i in VAR.$percentages {
-            .w-#{$i}p\@#{$breakpoint} { @include width-percent($i); }
-            .h-#{$i}p\@#{$breakpoint} { @include height-percent($i); }
-            .min-w-#{$i}p\@#{$breakpoint} { @include min-width-percent($i); }
-            .min-h-#{$i}p\@#{$breakpoint} { @include min-height-percent($i); }
-            .max-w-#{$i}p\@#{$breakpoint} { @include max-width-percent($i); }
-            .max-h-#{$i}p\@#{$breakpoint} { @include max-height-percent($i); }
-        }
+        @include MQ.media-up ($breakpoint) {
+            // Generate utilities from spacing map
+            @each $i in VAR.$percentages {
+                .w-#{$i}p\@#{$breakpoint} { @include width-percent($i); }
+                .h-#{$i}p\@#{$breakpoint} { @include height-percent($i); }
+                .min-w-#{$i}p\@#{$breakpoint} { @include min-width-percent($i); }
+                .min-h-#{$i}p\@#{$breakpoint} { @include min-height-percent($i); }
+                .max-w-#{$i}p\@#{$breakpoint} { @include max-width-percent($i); }
+                .max-h-#{$i}p\@#{$breakpoint} { @include max-height-percent($i); }
+            }
 
-        @each $key, $value in VAR.$spacings {
-            .w-#{$key}\@#{$breakpoint} { @include width($value); }
-            .h-#{$key}\@#{$breakpoint} { @include height($value); }
-            .min-w-#{$key}\@#{$breakpoint} { @include min-width($value); }
-            .min-h-#{$key}\@#{$breakpoint} { @include min-height($value); }
-            .max-w-#{$key}\@#{$breakpoint} { @include max-width($value); }
-            .max-h-#{$key}\@#{$breakpoint} { @include max-height($value); }
+            @each $key, $value in VAR.$spacings {
+                .w-#{$key}\@#{$breakpoint} { @include width($value); }
+                .h-#{$key}\@#{$breakpoint} { @include height($value); }
+                .min-w-#{$key}\@#{$breakpoint} { @include min-width($value); }
+                .min-h-#{$key}\@#{$breakpoint} { @include min-height($value); }
+                .max-w-#{$key}\@#{$breakpoint} { @include max-width($value); }
+                .max-h-#{$key}\@#{$breakpoint} { @include max-height($value); }
+            }
         }
     }
 }

package/src/styles/utilities/_spacing.scss

@@ -126,9 +126,11 @@
 */
 @mixin px($val) { 
   $val: format-unit-value($val); 
-  
-  padding-left: $val; 
-  padding-right: $val; 
+
+  & {
+    padding-left: $val; 
+    padding-right: $val; 
+  }
 }
 
 /**
@@ -138,38 +140,64 @@
 */
 @mixin py($val) { 
   $val: format-unit-value($val); 
-  
-  padding-top: $val; 
-  padding-bottom: $val; 
-}
 
+  & {
+    padding-top: $val; 
+    padding-bottom: $val; 
+  }
+}
+  
 /**
 * @mixin pt
 * @description Sets padding-top
 * @param {Number|String} $val - Padding value
 */
-@mixin pt($val) { $val: format-unit-value($val); padding-top: $val; }
+@mixin pt($val) { 
+  & {
+     $val: format-unit-value($val); 
+    
+     padding-top: $val; 
+    } 
+}
 
 /**
 * @mixin pr
 * @description Sets padding-right
 * @param {Number|String} $val - Padding value
 */
-@mixin pr($val) { $val: format-unit-value($val); padding-right: $val; }
+@mixin pr($val) { 
+  & {
+     $val: format-unit-value($val); 
+    
+     padding-right: $val; 
+    } 
+}
 
 /**
 * @mixin pb
 * @description Sets padding-bottom
 * @param {Number|String} $val - Padding value
 */
-@mixin pb($val) { $val: format-unit-value($val); padding-bottom: $val; }
+@mixin pb($val) { 
+  & {
+     $val: format-unit-value($val); 
+    
+     padding-bottom: $val; 
+    } 
+}
 
 /**
 * @mixin pl
 * @description Sets padding-left
 * @param {Number|String} $val - Padding value
 */
-@mixin pl($val) { $val: format-unit-value($val); padding-left: $val; }
+@mixin pl($val) { 
+  & {
+     $val: format-unit-value($val); 
+    
+     padding-left: $val; 
+    } 
+}
 
 // -----------------------------------------------
 // MARGIN MIXINS
@@ -180,7 +208,13 @@
 * @description Sets margin on all sides
 * @param {Number|String} $val - Margin value
 */
-@mixin m($val) { $val: format-unit-value($val); margin: $val; }
+@mixin m($val) { 
+  & {
+     $val: format-unit-value($val); 
+    
+     margin: $val; 
+    } 
+}
 
 /**
 * @mixin mx
@@ -189,9 +223,11 @@
 */
 @mixin mx($val) { 
   $val: format-unit-value($val); 
-  
-  margin-left: $val; 
-  margin-right: $val; 
+
+  & {
+    margin-left: $val; 
+    margin-right: $val; 
+  }
 }
 
 /**
@@ -202,8 +238,10 @@
 @mixin my($val) { 
   $val: format-unit-value($val); 
 
-  margin-top: $val; 
-  margin-bottom: $val; 
+  &{
+    margin-top: $val; 
+    margin-bottom: $val; 
+  }
 }
 
 /**
@@ -211,40 +249,64 @@
 * @description Sets margin-top
 * @param {Number|String} $val - Margin value
 */
-@mixin mt($val) { $val: format-unit-value($val); margin-top: $val; }
+@mixin mt($val) { 
+  & {  
+    $val: format-unit-value($val); 
+    
+    margin-top: $val; 
+  } 
+}
 
 /**
 * @mixin mr
 * @description Sets margin-right
 * @param {Number|String} $val - Margin value
 */
-@mixin mr($val) { $val: format-unit-value($val); margin-right: $val; }
+@mixin mr($val) { 
+  & { 
+    $val: format-unit-value($val); 
+    
+    margin-right: $val; 
+  } 
+}
 
 /**
 * @mixin mb
 * @description Sets margin-bottom
 * @param {Number|String} $val - Margin value
 */
-@mixin mb($val) { $val: format-unit-value($val); margin-bottom: $val; }
+@mixin mb($val) { 
+  & { 
+    $val: format-unit-value($val); 
+    
+    margin-bottom: $val; 
+  } 
+}
 
 /**
 * @mixin ml
 * @description Sets margin-left
 * @param {Number|String} $val - Margin value
 */
-@mixin ml($val) { $val: format-unit-value($val); margin-left: $val; }
+@mixin ml($val) { 
+  & { 
+    $val: format-unit-value($val); 
+    
+    margin-left: $val; 
+  } 
+}
 
 /**
 * @mixin ml-auto
 * @description Sets margin-left to auto
 */
-@mixin ml-auto { margin-left: auto; }
+@mixin ml-auto { & {  margin-left: auto; } }
 
 /**
 * @mixin mr-auto
 * @description Sets margin-right to auto
 */
-@mixin mr-auto { margin-right: auto; }
+@mixin mr-auto { & {  margin-right: auto; } }
 
 /**
 * @mixin mx-auto
@@ -308,91 +370,93 @@
   */
  @mixin gap-y($val) { $val: format-unit-value($val); row-gap: $val; }
 
-// -----------------------------------------------
-// AUTO MARGIN UTILITY CLASSES
-// -----------------------------------------------
-
-.mx-auto { @include mx-auto; }
-.ml-auto { @include ml-auto; }
-.mr-auto { @include mr-auto; }
-
-// -----------------------------------------------
-// GAP AUTO CLASS
-// -----------------------------------------------
-
-.gap-auto { gap: auto; }
-
-// -----------------------------------------------
-// SPACING CLASSES
-// -----------------------------------------------
-
-@each $key, $value in $spacings {
-    // Padding classes
-    .p-#{$key} { @include p($value); }
-    .px-#{$key} { @include px($value); }
-    .py-#{$key} { @include py($value); }
-    .pt-#{$key} { @include pt($value); }
-    .pr-#{$key} { @include pr($value); }
-    .pb-#{$key} { @include pb($value); }
-    .pl-#{$key} { @include pl($value); }
-
-    // Margin classes
-    .m-#{$key} { @include m($value); }
-    .mx-#{$key} { @include mx($value); }
-    .my-#{$key} { @include my($value); }
-    .mt-#{$key} { @include mt($value); }
-    .mr-#{$key} { @include mr($value); }
-    .mb-#{$key} { @include mb($value); }
-    .ml-#{$key} { @include ml($value); }
-    
-    // Gap classes
-    .gap-#{$key} { @include gap($value); }
-    .gap-x-#{$key} { @include gap-x($value); }
-    .gap-y-#{$key} { @include gap-y($value); }
-
-    // Space classes
-    .space-x-#{$key} { @include space-x($value); }
-    .space-y-#{$key} { @include space-y($value); }
-}
-
+@if $generate-utility-classes {
+  // -----------------------------------------------
+  // AUTO MARGIN UTILITY CLASSES
+  // -----------------------------------------------
+
+  .mx-auto { @include mx-auto; }
+  .ml-auto { @include ml-auto; }
+  .mr-auto { @include mr-auto; }
+
+  // -----------------------------------------------
+  // GAP AUTO CLASS
+  // -----------------------------------------------
+
+  .gap-auto { gap: auto; }
+
+  // -----------------------------------------------
+  // SPACING CLASSES
+  // -----------------------------------------------
+
+  @each $key, $value in $spacings {
+      // Padding classes
+      .p-#{$key} { @include p($value); }
+      .px-#{$key} { @include px($value); }
+      .py-#{$key} { @include py($value); }
+      .pt-#{$key} { @include pt($value); }
+      .pr-#{$key} { @include pr($value); }
+      .pb-#{$key} { @include pb($value); }
+      .pl-#{$key} { @include pl($value); }
+
+      // Margin classes
+      .m-#{$key} { @include m($value); }
+      .mx-#{$key} { @include mx($value); }
+      .my-#{$key} { @include my($value); }
+      .mt-#{$key} { @include mt($value); }
+      .mr-#{$key} { @include mr($value); }
+      .mb-#{$key} { @include mb($value); }
+      .ml-#{$key} { @include ml($value); }
+      
+      // Gap classes
+      .gap-#{$key} { @include gap($value); }
+      .gap-x-#{$key} { @include gap-x($value); }
+      .gap-y-#{$key} { @include gap-y($value); }
+
+      // Space classes
+      .space-x-#{$key} { @include space-x($value); }
+      .space-y-#{$key} { @include space-y($value); }
+  }
 
-// -----------------------------------------------
-// RESPONSIVE SPACING CLASSES
-// -----------------------------------------------
 
-@each $breakpoint, $width in $breakpoints {
-    @media (min-width: #{$width}) {
-        .mx-auto\@#{$breakpoint} { @include mx-auto; }
-        .ml-auto\@#{$breakpoint} { @include ml-auto; }
-        .mr-auto\@#{$breakpoint} { @include mr-auto; }
-
-        // Generate utilities from spacing map
-        @each $key, $value in $spacings {
-            // Padding classes
-            .p-#{$key}\@#{$breakpoint} { @include p($value); }
-            .px-#{$key}\@#{$breakpoint} { @include px($value); }
-            .py-#{$key}\@#{$breakpoint} { @include py($value); }
-            .pt-#{$key}\@#{$breakpoint} { @include pt($value); }
-            .pr-#{$key}\@#{$breakpoint} { @include pr($value); }
-            .pb-#{$key}\@#{$breakpoint} { @include pb($value); }
-            .pl-#{$key}\@#{$breakpoint} { @include pl($value); }
-
-            // Margin classes
-            .m-#{$key}\@#{$breakpoint} { @include m($value); }
-            .mx-#{$key}\@#{$breakpoint} { @include mx($value); }
-            .my-#{$key}\@#{$breakpoint} { @include my($value); }
-            .mt-#{$key}\@#{$breakpoint} { @include mt($value); }
-            .mr-#{$key}\@#{$breakpoint} { @include mr($value); }
-            .mb-#{$key}\@#{$breakpoint} { @include mb($value); }
-            .ml-#{$key}\@#{$breakpoint} { @include ml($value); }
-
-            .gap-#{$key}\@#{$breakpoint} { gap: $value; }
-            .gap-x-#{$key}\@#{$breakpoint} { column-gap: $value; }
-            .gap-y-#{$key}\@#{$breakpoint} { row-gap: $value; }
-      
-            // Space classes
-            .space-x-#{$key}\@#{$breakpoint} { @include space-x($value); }
-            .space-y-#{$key}\@#{$breakpoint} { @include space-y($value); }
-        }
-    }
+  // -----------------------------------------------
+  // RESPONSIVE SPACING CLASSES
+  // -----------------------------------------------
+
+  @each $breakpoint, $width in $breakpoints {
+      @media (min-width: #{$width}) {
+          .mx-auto\@#{$breakpoint} { @include mx-auto; }
+          .ml-auto\@#{$breakpoint} { @include ml-auto; }
+          .mr-auto\@#{$breakpoint} { @include mr-auto; }
+
+          // Generate utilities from spacing map
+          @each $key, $value in $spacings {
+              // Padding classes
+              .p-#{$key}\@#{$breakpoint} { @include p($value); }
+              .px-#{$key}\@#{$breakpoint} { @include px($value); }
+              .py-#{$key}\@#{$breakpoint} { @include py($value); }
+              .pt-#{$key}\@#{$breakpoint} { @include pt($value); }
+              .pr-#{$key}\@#{$breakpoint} { @include pr($value); }
+              .pb-#{$key}\@#{$breakpoint} { @include pb($value); }
+              .pl-#{$key}\@#{$breakpoint} { @include pl($value); }
+
+              // Margin classes
+              .m-#{$key}\@#{$breakpoint} { @include m($value); }
+              .mx-#{$key}\@#{$breakpoint} { @include mx($value); }
+              .my-#{$key}\@#{$breakpoint} { @include my($value); }
+              .mt-#{$key}\@#{$breakpoint} { @include mt($value); }
+              .mr-#{$key}\@#{$breakpoint} { @include mr($value); }
+              .mb-#{$key}\@#{$breakpoint} { @include mb($value); }
+              .ml-#{$key}\@#{$breakpoint} { @include ml($value); }
+
+              .gap-#{$key}\@#{$breakpoint} { gap: $value; }
+              .gap-x-#{$key}\@#{$breakpoint} { column-gap: $value; }
+              .gap-y-#{$key}\@#{$breakpoint} { row-gap: $value; }
+        
+              // Space classes
+              .space-x-#{$key}\@#{$breakpoint} { @include space-x($value); }
+              .space-y-#{$key}\@#{$breakpoint} { @include space-y($value); }
+          }
+      }
+  }
 }