@progressio_resources/gravity-design-system 2.0.4 → 2.0.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progressio_resources/gravity-design-system",
   "description": "Gravity Design System",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "license": "SEE LICENSE IN LIBRARY-LICENSE",
   "peerDependencies": {
     "@angular/common": "^16.2.12",

package/src/lib/styles/foundations/grids/_grids.scss

@@ -5,154 +5,308 @@ $grids: (
   xl: 16
 );
 
+$gutter: 8px;
+
 .gravity-col-sm-1 {
   width: calc(100% / 4) * 1;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-sm-2 {
   width: calc(100% / 4) * 2;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-sm-3 {
   width: calc(100% / 4) * 3;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-sm-4 {
   width: calc(100% / 4) * 4;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-md-1 {
   width: calc(100% / 6) * 1;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-md-2 {
   width: calc(100% / 6) * 2;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-md-3 {
   width: calc(100% / 6) * 3;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-md-4 {
   width: calc(100% / 6) * 4;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-md-5 {
   width: calc(100% / 6) * 5;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-md-6 {
   width: calc(100% / 6) * 6;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-1 {
   width: calc(100% / 12) * 1;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-2 {
   width: calc(100% / 12) * 2;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-3 {
   width: calc(100% / 12) * 3;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-4 {
   width: calc(100% / 12) * 4;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-5 {
   width: calc(100% / 12) * 5;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-6 {
   width: calc(100% / 12) * 6;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-7 {
   width: calc(100% / 12) * 7;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-8 {
   width: calc(100% / 12) * 8;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-9 {
   width: calc(100% / 12) * 9;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-10 {
   width: calc(100% / 12) * 10;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-11 {
   width: calc(100% / 12) * 11;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-lg-12 {
   width: calc(100% / 12) * 12;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-1 {
   width: calc(100% / 16) * 1;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-2 {
   width: calc(100% / 16) * 2;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-3 {
   width: calc(100% / 16) * 3;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-4 {
   width: calc(100% / 16) * 4;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-5 {
   width: calc(100% / 16) * 5;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-6 {
   width: calc(100% / 16) * 6;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-7 {
   width: calc(100% / 16) * 7;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-8 {
   width: calc(100% / 16) * 8;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-9 {
   width: calc(100% / 16) * 9;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-10 {
   width: calc(100% / 16) * 10;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-11 {
   width: calc(100% / 16) * 11;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-12 {
   width: calc(100% / 16) * 12;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-13 {
   width: calc(100% / 16) * 13;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-14 {
   width: calc(100% / 16) * 14;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-15 {
   width: calc(100% / 16) * 15;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }
 
 .gravity-col-xl-16 {
   width: calc(100% / 16) * 16;
+
+  &:not(:last-of-type) {
+    margin-right: $gutter;
+  }
 }