@nuvoui/core 1.3.4 → 1.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuvoui/core",
-  "version": "1.3.4",
+  "version": "1.3.5",
   "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

@@ -7,6 +7,7 @@ $feature-flags: (
   "animations": true,
   "backdrops": true,
   "borders": true,
+  "container": true,
   "container-queries": true,
   "cursors": true,
   "displays": true,

package/src/styles/layouts/_container.scss

@@ -28,7 +28,7 @@
   @include container-padding(1rem);
 }
 
-@if FN.feature-enabled("container-queries") {
+@if FN.feature-enabled("container") {
   // Container classes
   #{VAR.$parent-selector} .container {
     @include container;

package/src/styles/layouts/_flex.scss

@@ -292,13 +292,9 @@
 // @description Sets how many columns this would take using percentage of VAR.$column-count.
 // @param {Number} $size - The number of columns to span.
 @mixin fill($size) {
-  $percentage: math.percentage(math.div($size, VAR.$column-count));
+  $columns: math.div(VAR.$column-count, $size); // How many items per row
 
-  $n: math.div(VAR.$column-count, $size); // How many items fit in a row
-  $gap-adjustment: calc(var(--flex-gap, 0px) * #{$n - 1} / #{$n});
-
-  // The width calculation accounts for the gap proportionally
-  flex: 0 0 calc(#{$percentage} - #{$gap-adjustment});
+  flex: 0 0 calc((100% - (#{$columns - 1} * var(--flex-gap, 0px))) / #{$columns});
 }
 
 @if FN.feature-enabled("flex") {

package/src/styles/utilities/_spacing.scss

@@ -291,7 +291,11 @@
 // @description Sets vertical gap between grid/flex children
 // @param {Number|String} $val - Gap value
 @mixin gap-y($val) {
-  row-gap: FN.fix-units($val);
+  $val: FN.fix-units($val);
+
+  row-gap: $val;
+
+  --flex-gap: #{$val};
 }
 
 @if FN.feature-enabled("spacing") {