@nice-digital/nds-grid 1.2.13 → 1.2.14

package/lib/Grid.js

@@ -23,7 +23,7 @@ require("../scss/grid.scss");
 
 var _excluded = ["children", "reverse", "equalHeight", "gutter", "horizontalAlignment", "verticalAlignment", "debug", "className", "elementType"];
 
-var _jsxFileName = "C:\\_dev\\nice-design-system\\components\\nds-grid\\src\\Grid.js",
+var _jsxFileName = "C:\\dev\\nice-design-system\\components\\nds-grid\\src\\Grid.js",
     _this = void 0;
 
 var Grid = function Grid(props) {

package/lib/GridItem.js

@@ -15,7 +15,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _excluded = ["children", "cols", "push", "pull", "xs", "sm", "md", "lg", "xl", "className", "elementType"];
 
-var _jsxFileName = "C:\\_dev\\nice-design-system\\components\\nds-grid\\src\\GridItem.js",
+var _jsxFileName = "C:\\dev\\nice-design-system\\components\\nds-grid\\src\\GridItem.js",
     _this = void 0;
 
 var GridItem = function GridItem(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nice-digital/nds-grid",
-	"version": "1.2.13",
+	"version": "1.2.14",
 	"description": "Grid component for the NICE Design System",
 	"keywords": [
 		"grid"
@@ -37,12 +37,12 @@
 		"url": "https://github.com/nice-digital/nice-design-system/issues"
 	},
 	"dependencies": {
-		"@nice-digital/nds-core": "^1.2.12",
+		"@nice-digital/nds-core": "^1.2.13",
 		"classnames": "^2.2.6",
 		"prop-types": "^15.7.2"
 	},
 	"peerDependencies": {
 		"react": "^16 || ^17"
 	},
-	"gitHead": "70d5237c684b38532174d7e7b81e0d859867b222"
+	"gitHead": "2bdf3454416a51f8e6c407a0f03ff14c08b6023a"
 }

package/scss/grid.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 @import '~@nice-digital/nds-core/scss/core';
 
 ////
@@ -32,8 +34,8 @@
   flex-wrap: wrap;
   justify-content: flex-start;
   list-style: none; // Allow the grid system to be used on lists.
-  margin-left: -#{$nds-grid-gutter / 2};
-  margin-right: -#{$nds-grid-gutter / 2};
+  margin-left: -#{$nds-grid-gutter * 0.5};
+  margin-right: -#{$nds-grid-gutter * 0.5};
   max-width: none; // To override the 66ch max width on lists
   padding: 0; // Remove any paddings that might affect the grid system.
   width: calc(100% + #{$nds-grid-gutter});
@@ -114,8 +116,8 @@
 [data-g] {
   // Auto flex-basis with separate width property for IE11 because of https://github.com/philipwalton/flexbugs#flexbug-8
   flex: 0 0 auto;
-  margin-left: #{$nds-grid-gutter / 2};
-  margin-right: #{$nds-grid-gutter / 2};
+  margin-left: #{$nds-grid-gutter * 0.5};
+  margin-right: #{$nds-grid-gutter * 0.5};
   position: relative;
   // Fixed gutters fallback for IE11, due to lack of custom property support:
   width: calc(100% - #{$nds-grid-gutter});
@@ -155,18 +157,18 @@
 
   @for $index from 1 through 12 {
     [data-g~='#{ $prefix }#{ $index }'] {
-      --grid-item-width: #{percentage($index / 12)};
+      --grid-item-width: #{percentage(math.div($index, 12))};
       // IE 11 fallback, due to lack of custom property support:
-      width: calc(#{percentage($index / 12)} - #{$nds-grid-gutter});
+      width: calc(#{percentage(math.div($index, 12))} - #{$nds-grid-gutter});
     }
   }
 
   @for $index from 0 through 12 {
     [data-g~='#{ $prefix }push:#{ $index }'] {
-      left: percentage($index / 12);
+      left: percentage(math.div($index, 12));
     }
     [data-g~='#{ $prefix }pull:#{ $index }'] {
-      right: percentage($index / 12);
+      right: percentage(math.div($index, 12));
     }
   }
 }