@nuvoui/core 1.2.0 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "NuvoUI is a human-friendly SCSS framework designed for simplicity, and modern responsive designs.",
   "author": {
     "name": "AALA IT Solutions",

package/src/styles/abstracts/_config.scss

@@ -116,42 +116,24 @@ $font-sizes: (
 
 // Updated spacing map
 $spacings: (
-  // 0rem
   0: 0,
-  // 0.25rem
-  1: rem(4),
-  // 0.5rem
-  2: rem(8),
-  // 0.75rem
-  3: rem(12),
-  // 1rem
-  4: rem(16),
-  // 1.25rem
-  5: rem(20),
-  // 1.5rem
-  6: rem(24),
-  // 2rem
-  8: rem(32),
-  // 2.5rem
-  10: rem(40),
-  // 3rem
-  12: rem(48),
-  // 4rem
-  16: rem(64),
-  // 5rem
-  20: rem(80),
-  // 6rem
-  24: rem(96),
-  // 8rem
-  32: rem(128),
-  // 10rem
-  40: rem(160),
-  // 12rem
-  48: rem(192),
-  // 14rem
-  56: rem(224),
-  // 16rem
-  64: rem(256)
-);
+  1: 0.25rem,    // 4px
+  2: 0.5rem,     // 8px
+  3: 0.75rem,    // 12px
+  4: 1rem,       // 16px
+  5: 1.25rem,    // 20px
+  6: 1.5rem,     // 24px
+  8: 2rem,       // 32px
+  10: 2.5rem,    // 40px
+  12: 3rem,      // 48px
+  16: 4rem,      // 64px
+  20: 5rem,      // 80px
+  24: 6rem,      // 96px
+  32: 8rem,      // 128px
+  40: 10rem, 
+  48: 12rem, 
+  56: 14rem, 
+  64: 16rem, 
+)  !default;
 
 $percentages: (0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 100) !default;

package/src/styles/layouts/_container.scss

@@ -27,7 +27,10 @@
   @include container-padding(1rem);
 }
 
-// Container classes
-.container {
-  @include container;
+
+@if VAR.$generate-utility-classes {
+  // Container classes
+  .container {
+    @include container;
+  }
 }

package/src/styles/layouts/_flex.scss

@@ -51,90 +51,92 @@
 /**
  * @description Establishes a flex container.
  */
-@mixin flex {display: flex;}
+@mixin flex {& { display: flex;}}
 
 /**
  * @description Establishes a flex-inline container.
  */
-@mixin flex-inline {display: inline-flex;}
+@mixin flex-inline {& { display: inline-flex;}}
 
 /**
  * @description Sets flex-direction to row.
  * @dependencies flex | flex-inline
  */
-@mixin row {flex-direction: row;}
+@mixin row {& { flex-direction: row;}}
 
 /**
  * @description Sets flex-direction to row-reverse.
  * @dependencies flex | flex-inline
  */
-@mixin row-reverse {flex-direction: row-reverse;}
+@mixin row-reverse {& { flex-direction: row-reverse;}}
 
 /**
  * @description Sets flex-direction to column.
  * @dependencies flex | flex-inline
  */
-@mixin col {flex-direction: column;}
+@mixin col {
+  flex-direction: column;
+}
 
 /**
  * @description Sets flex-direction to column-reverse.
  * @dependencies flex | flex-inline
  */
-@mixin col-reverse {flex-direction: column-reverse;}
+@mixin col-reverse {& { flex-direction: column-reverse;}}
 
 /**
  * @description Sets flex-wrap to wrap.
  * @dependencies flex | flex-inline
  */
-@mixin wrap {flex-wrap: wrap;}
+@mixin wrap {& { flex-wrap: wrap;}}
 
 /**
  * @description Sets flex-wrap to nowrap.
  * @dependencies flex | flex-inline
  */
-@mixin nowrap {flex-wrap: nowrap;}
+@mixin nowrap {& { flex-wrap: nowrap;}}
 
 /**
  * @description Sets flex-wrap to wrap-reverse
  * @dependencies flex | flex-inline
  */
-@mixin wrap-reverse {flex-wrap: wrap-reverse;}
+@mixin wrap-reverse {& { flex-wrap: wrap-reverse;}}
 
 /**
  * @description Sets justify-content to flex-start
  * @dependencies flex | flex-inline
  */
-@mixin start {justify-content: flex-start;}
+@mixin start {& { justify-content: flex-start;}}
 
 /**
  * @description Sets justify-content to flex-end
  * @dependencies flex | flex-inline
  */
-@mixin end {justify-content: flex-end;}
+@mixin end {& { justify-content: flex-end;}}
 
 /**
  * @description Sets justify-content to center
  * @dependencies flex | flex-inline
  */
-@mixin center {justify-content: center;}
+@mixin center {& { justify-content: center;}}
 
 /**
  * @description Sets justify-content to space-between
  * @dependencies flex | flex-inline
  */
-@mixin between {justify-content: space-between;}
+@mixin between {& { justify-content: space-between;}}
 
 /**
  * @description Sets justify-content to space-around
  * @dependencies flex | flex-inline
  */
-@mixin around {justify-content: space-around;}
+@mixin around {& { justify-content: space-around;}}
 
 /**
  * @description Sets justify-content to space-evenly
  * @dependencies flex | flex-inline
  */
-@mixin evenly {justify-content: space-evenly;}
+@mixin evenly {& { justify-content: space-evenly;}}
 
 // Cross Axis Alignment Mixins
 
@@ -142,31 +144,31 @@
  * @description Sets align-items to flex-start - aligns items to the start of the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-start {align-items: flex-start;}
+@mixin x-start {& { align-items: flex-start;}}
 
 /**
  * @description Sets align-items to flex-end - aligns items to the end of the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-end {align-items: flex-end;}
+@mixin x-end {& { align-items: flex-end;}}
 
 /**
  * @description Sets align-items to center - aligns items to the center of the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-center {align-items: center;}
+@mixin x-center {& { align-items: center;}}
 
 /**
  * @description Sets align-items to stretch - aligns items to the stretch of the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-stretch {align-items: stretch;}
+@mixin x-stretch {& { align-items: stretch;}}
 
 /**
  * @description Sets align-items to baseline - aligns items to the baseline of the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-baseline {align-items: baseline;}
+@mixin x-baseline {& { align-items: baseline;}}
 
 // Cross Axis Content Mixins
 
@@ -174,43 +176,43 @@
  * @description Sets align-content to flex-start - aligns content to the start of the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-content-start { align-content: flex-start; }
+@mixin x-content-start { & { align-content: flex-start; }}
 
 /**
  * @description Sets align-content to flex-end - aligns content to the end of the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-content-end { align-content: flex-end; }
+@mixin x-content-end { & { align-content: flex-end; }}
 
 /**
  * @description Sets align-content to center - aligns content to the center of the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-content-center { align-content: center; }
+@mixin x-content-center { & { align-content: center; }}
 
 /**
  * @description Sets align-content to space-between - aligns content to the space between the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-content-between { align-content: space-between; }
+@mixin x-content-between { & { align-content: space-between; }}
 
 /**
  * @description Sets align-content to space-around - aligns content to the space around the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-content-around { align-content: space-around; }
+@mixin x-content-around { & { align-content: space-around; }}
 
 /**
  * @description Sets align-content to space-evenly - aligns content to the space evenly between the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-content-evenly { align-content: space-evenly; }
+@mixin x-content-evenly { & { align-content: space-evenly; }}
 
 /**
  * @description Sets align-content to stretch - aligns content to the stretch of the cross axis.
  * @dependencies flex | flex-inline
  */
-@mixin x-content-stretch { align-content: stretch; }
+@mixin x-content-stretch { & { align-content: stretch; }}
 
 // Self Alignment Mixins
 
@@ -218,55 +220,55 @@
  * @description Sets align-self to auto
  * @dependencies flex | flex-inline
  */
-@mixin self-auto {align-self: auto;}
+@mixin self-auto {& { align-self: auto;}}
 
 /**
  * @description Sets align-self to flex-start
  * @dependencies flex | flex-inline
  */
-@mixin self-start {align-self: flex-start;}
+@mixin self-start {& { align-self: flex-start;}}
 
 /**
  * @description Sets align-self to flex-end
  * @dependencies flex | flex-inline
  */
-@mixin self-end {align-self: flex-end;}
+@mixin self-end {& { align-self: flex-end;}}
 
 /**
  * @description Sets align-self to center
  * @dependencies flex | flex-inline
  */
-@mixin self-center {align-self: center;}
+@mixin self-center {& { align-self: center;}}
 
 /**
  * @description Sets align-self to stretch
  * @dependencies flex | flex-inline
  */
-@mixin self-stretch {align-self: stretch;}
+@mixin self-stretch {& { align-self: stretch;}}
 
 /**
  * @description Sets align-self to baseline
  * @dependencies flex | flex-inline
  */
-@mixin self-baseline {align-self: baseline;}
+@mixin self-baseline {& { align-self: baseline;}}
 
 /**
  * @description Sets flex-shrink to 1 - allows the item to shrink.
  * @dependencies flex | flex-inline
  */
-@mixin shrink {flex-shrink: 1;}
+@mixin shrink {& { flex-shrink: 1;}}
 
 /**
  * @description Sets flex-shrink to 0 - prevents the item from shrinking.
  * @dependencies flex | flex-inline
  */
-@mixin shrink-0 {flex-shrink: 0;}
+@mixin shrink-0 {& { flex-shrink: 0;}}
 
 /**
  * @description Sets flex-shrink to 2 - allows the item to shrink twice as much as the other items.
  * @dependencies flex | flex-inline
  */
-@mixin shrink-2 {flex-shrink: 2;}
+@mixin shrink-2 {& { flex-shrink: 2;}}
 
 
 // Flex Child Mixins
@@ -274,144 +276,158 @@
 /**
  * @description Sets flex to 0 0 100%
  */
-@mixin f-w-full {flex: 0 0 100%;}
+@mixin fill-full {& { flex: 0 0 100%;}}
 
 /**
  * @description Sets flex to 1 1 auto - allows the item to grow and shrink.
  */
-@mixin f-w-auto {flex: 1 1 auto;}
+@mixin fill-auto {& { flex: 1 1 auto;}}
 
 /**
  * @description Sets flex to 1 1 0% - allows the item to grow but not shrink.
  */
-@mixin grow { flex: 1 1 0%; }
+@mixin grow { & { flex: 1 1 0%; }}
 
 /**
  * @description Sets flex to none - prevents the item from growing.
  */
-@mixin no-grow { flex: none; }
+@mixin no-grow { & { flex: none; }}
 
 /**
  * @description Sets how many columns this would take using percentage of VAR.$column-count.
  * @param {Number} $size - The number of columns to span.
  */
-@mixin w-col($size) {
-  flex: 0 0 math.percentage(math.div($size, VAR.$column-count));
+@mixin fill($size) {
+  & { flex: 0 0 math.percentage(math.div($size, VAR.$column-count));}
 }
 
-// Base flex container
-.flex {
-  display: flex;
-  
-  // Direction modifiers
-  &.row { flex-direction: row; }
-  &.row-reverse { flex-direction: row-reverse; }
-  &.col { flex-direction: column; }
-  &.col-reverse { flex-direction: column-reverse; }
-  
-  // Wrap modifiers
-  &.wrap { flex-wrap: wrap; }
-  &.nowrap { flex-wrap: nowrap; }
-  &.wrap-reverse { flex-wrap: wrap-reverse; }
-
-  // Justify modifiers
-  &.start { justify-content: flex-start; }
-  &.end { justify-content: flex-end; }
-  &.center { justify-content: center; }
-  &.between { justify-content: space-between; }
-  &.around { justify-content: space-around; }
-  &.evenly { justify-content: space-evenly; }
-  
-  // Align modifiers
-  &.x-start { align-items: flex-start; }
-  &.x-end { align-items: flex-end; }
-  &.x-center { align-items: center; }
-  &.x-baseline { align-items: baseline; }
-  &.x-stretch { align-items: stretch; }
-  
-  &.x-content-start { align-content: flex-start; }
-  &.x-content-end { align-content: flex-end; }
-  &.x-content-center { align-content: center; }
-  &.x-content-between { align-content: space-between; }
-  &.x-content-around { align-content: space-around; }
-  &.x-content-evenly { align-content: space-evenly; }
-  &.x-content-stretch { align-content: stretch; }
-
-  // Child flex items (using column count)
-  > .w-auto { @include f-w-auto; }
-  > .w-full { @include f-w-full; }
-  > .grow { @include grow; }
-  > .no-grow { @include no-grow; }
-
-  > .order-first { order: -1; }
-  > .order-last { order: 9999; }
-  > .order-none { order: 0; }
-
-  > .shrink { @include shrink; }
-  > .shrink-0 { @include shrink-0; }
-  > .shrink-2 { @include shrink-2; }
-  @for $i from 1 through VAR.$column-count {
-    > .w-#{$i} { @include w-col($i); }
-    > .order-#{$i} { order: $i; }
+@if VAR.$generate-utility-classes {
+  // Base flex container
+  .flex {
+    display: flex;
+    
+    // Direction modifiers
+    &.row { flex-direction: row; }
+    &.row-reverse { flex-direction: row-reverse; }
+    &.col { flex-direction: column; }
+    &.col-reverse { flex-direction: column-reverse; }
+    
+    // Wrap modifiers
+    &.wrap { flex-wrap: wrap; }
+    &.nowrap { flex-wrap: nowrap; }
+    &.wrap-reverse { flex-wrap: wrap-reverse; }
+
+    // Justify modifiers
+    &.start { justify-content: flex-start; }
+    &.end { justify-content: flex-end; }
+    &.center { justify-content: center; }
+    &.between { justify-content: space-between; }
+    &.around { justify-content: space-around; }
+    &.evenly { justify-content: space-evenly; }
+    
+    // Align modifiers
+    &.x-start { align-items: flex-start; }
+    &.x-end { align-items: flex-end; }
+    &.x-center { align-items: center; }
+    &.x-baseline { align-items: baseline; }
+    &.x-stretch { align-items: stretch; }
+    
+    &.x-content-start { align-content: flex-start; }
+    &.x-content-end { align-content: flex-end; }
+    &.x-content-center { align-content: center; }
+    &.x-content-between { align-content: space-between; }
+    &.x-content-around { align-content: space-around; }
+    &.x-content-evenly { align-content: space-evenly; }
+    &.x-content-stretch { align-content: stretch; }
+
+    // Child flex items (using column count) 
+    > .fill-auto { @include fill-auto; }
+    > .fill-full { @include fill-full; }
+    > .grow { @include grow; }
+    > .no-grow { @include no-grow; }
+
+    > .order-first { order: -1; }
+    > .order-last { order: 9999; }
+    > .order-none { order: 0; }
+
+    > .shrink { @include shrink; }
+    > .shrink-0 { @include shrink-0; }
+    > .shrink-2 { @include shrink-2; }
+
+    > .self-end { @include self-end; }
+    > .self-start { @include self-start; }
+    > .self-center { @include self-center; }
+    > .self-stretch { @include self-stretch; }
+    > .self-baseline { @include self-baseline; }
+    > .self-auto { @include self-auto; }
+    
+    @for $i from 1 through VAR.$column-count {
+      > .fill-#{$i} { @include fill($i); }
+      > .order-#{$i} { order: $i; }
+    }
   }
-}
 
-@each $breakpoint, $width in VAR.$breakpoints {
-  // Get breakpoint value using FN function
-  $bp-val: FN.get-breakpoint-value($breakpoint);
-  
-  @media (min-width: #{$bp-val}) {
-    .flex {
-      // Direction
-      &.row\@#{$breakpoint} { flex-direction: row; }
-      &.row-reverse\@#{$breakpoint} { flex-direction: row-reverse; }
-      &.col\@#{$breakpoint} { flex-direction: column; }
-      &.col-reverse\@#{$breakpoint} { flex-direction: column-reverse; }
-      
-      // Wrap
-      &.wrap\@#{$breakpoint} { flex-wrap: wrap; }
-      &.nowrap\@#{$breakpoint} { flex-wrap: nowrap; }
-      &.wrap-reverse\@#{$breakpoint} { flex-wrap: wrap-reverse; }
-      
-      // Justify
-      &.start\@#{$breakpoint} { justify-content: flex-start; }
-      &.end\@#{$breakpoint} { justify-content: flex-end; }
-      &.center\@#{$breakpoint} { justify-content: center; }
-      &.between\@#{$breakpoint} { justify-content: space-between; }
-      &.around\@#{$breakpoint} { justify-content: space-around; }
-      &.evenly\@#{$breakpoint} { justify-content: space-evenly; }
-
-      // Align
-      &.x-start\@#{$breakpoint} { align-items: flex-start; }
-      &.x-end\@#{$breakpoint} { align-items: flex-end; }
-      &.x-center\@#{$breakpoint} { align-items: center; }
-      &.x-baseline\@#{$breakpoint} { align-items: baseline; }
-      &.x-stretch\@#{$breakpoint} { align-items: stretch; }
-
-      &.x-content-start\@#{$breakpoint} { align-content: flex-start; }
-      &.x-content-end\@#{$breakpoint} { align-content: flex-end; }
-      &.x-content-center\@#{$breakpoint} { align-content: center; }
-      &.x-content-between\@#{$breakpoint} { align-content: space-between; }
-      &.x-content-around\@#{$breakpoint} { align-content: space-around; }
-      &.x-content-evenly\@#{$breakpoint} { align-content: space-evenly; }
-      &.x-content-stretch\@#{$breakpoint} { align-content: stretch; }
-      
-      // Width (using column count)
-      & > .w-auto\@#{$breakpoint} { @include f-w-auto; }
-      & > .w-full\@#{$breakpoint} { @include f-w-full; }
-      & > .grow\@#{$breakpoint} { @include grow; }
-      & > .no-grow\@#{$breakpoint} { @include no-grow; }
-      & > .order-first\@#{$breakpoint} { order: -1; }
-      & > .order-last\@#{$breakpoint} { order: 9999; }
-      & > .order-none\@#{$breakpoint} { order: 0; }
-      & > .shrink\@#{$breakpoint} { @include shrink; }
-      & > .shrink-0\@#{$breakpoint} { @include shrink-0; }
-      & > .shrink-2\@#{$breakpoint} { @include shrink-2; }
-
-      @for $i from 1 through VAR.$column-count {
-        & > .w-#{$i}\@#{$breakpoint} { @include w-col($i); }
-        & > .col-#{$i}\@#{$breakpoint} { @include w-col($i); }
-        & > .order-#{$i}\@#{$breakpoint} { order: $i; }
+  @each $breakpoint, $width in VAR.$breakpoints {
+    // Get breakpoint value using FN function
+    $bp-val: FN.get-breakpoint-value($breakpoint);
+    
+    @media (min-width: #{$bp-val}) {
+      .flex {
+        // Direction
+        &.row\@#{$breakpoint} { flex-direction: row; }
+        &.row-reverse\@#{$breakpoint} { flex-direction: row-reverse; }
+        &.col\@#{$breakpoint} { flex-direction: column; }
+        &.col-reverse\@#{$breakpoint} { flex-direction: column-reverse; }
+        
+        // Wrap
+        &.wrap\@#{$breakpoint} { flex-wrap: wrap; }
+        &.nowrap\@#{$breakpoint} { flex-wrap: nowrap; }
+        &.wrap-reverse\@#{$breakpoint} { flex-wrap: wrap-reverse; }
+        
+        // Justify
+        &.start\@#{$breakpoint} { justify-content: flex-start; }
+        &.end\@#{$breakpoint} { justify-content: flex-end; }
+        &.center\@#{$breakpoint} { justify-content: center; }
+        &.between\@#{$breakpoint} { justify-content: space-between; }
+        &.around\@#{$breakpoint} { justify-content: space-around; }
+        &.evenly\@#{$breakpoint} { justify-content: space-evenly; }
+
+        // Align
+        &.x-start\@#{$breakpoint} { align-items: flex-start; }
+        &.x-end\@#{$breakpoint} { align-items: flex-end; }
+        &.x-center\@#{$breakpoint} { align-items: center; }
+        &.x-baseline\@#{$breakpoint} { align-items: baseline; }
+        &.x-stretch\@#{$breakpoint} { align-items: stretch; }
+
+        &.x-content-start\@#{$breakpoint} { align-content: flex-start; }
+        &.x-content-end\@#{$breakpoint} { align-content: flex-end; }
+        &.x-content-center\@#{$breakpoint} { align-content: center; }
+        &.x-content-between\@#{$breakpoint} { align-content: space-between; }
+        &.x-content-around\@#{$breakpoint} { align-content: space-around; }
+        &.x-content-evenly\@#{$breakpoint} { align-content: space-evenly; }
+        &.x-content-stretch\@#{$breakpoint} { align-content: stretch; }
+        
+        // Width (using column count)
+        & > .fill-auto\@#{$breakpoint} { @include fill-auto; }
+        & > .fill-full\@#{$breakpoint} { @include fill-full; }
+        & > .grow\@#{$breakpoint} { @include grow; }
+        & > .no-grow\@#{$breakpoint} { @include no-grow; }
+        & > .order-first\@#{$breakpoint} { order: -1; }
+        & > .order-last\@#{$breakpoint} { order: 9999; }
+        & > .order-none\@#{$breakpoint} { order: 0; }
+        & > .shrink\@#{$breakpoint} { @include shrink; }
+        & > .shrink-0\@#{$breakpoint} { @include shrink-0; }
+        & > .shrink-2\@#{$breakpoint} { @include shrink-2; }
+        & > .self-end\@#{$breakpoint} { @include self-end; }
+        & > .self-start\@#{$breakpoint} { @include self-start; }
+        & > .self-center\@#{$breakpoint} { @include self-center; }
+        & > .self-stretch\@#{$breakpoint} { @include self-stretch; }
+        & > .self-baseline\@#{$breakpoint} { @include self-baseline; }
+        & > .self-auto\@#{$breakpoint} { @include self-auto; }
+        @for $i from 1 through VAR.$column-count {
+          & > .fill-#{$i}\@#{$breakpoint} { @include fill($i); }
+          & > .order-#{$i}\@#{$breakpoint} { order: $i; }
+        }
       }
     }
   }