Fix relaxed/veryrelaxed grid container

RELEASE-NOTES.md

@@ -14,6 +14,7 @@
 
 **Additional Bugs**
 - **Form Validation** - Fixed issue with `get value(s)` where unchecked checkboxes would not correctly retrieve values
+- **Grid / Container ** - `ui relaxed grid container` and `ui very relaxed grid container` will now all render at same container width
 - **Input** - `labeled input` now keeps border on label edge so that focus color appears correctly
 - **Input** - Input now will reset `font-weight` and `font-style` if set on parent;
 - **Menu** - Added `flex: 0 0 auto` to menu item to make sure menu do not collapse text content to reduce space

src/definitions/elements/container.less

@@ -38,6 +38,12 @@
   .ui.grid.container {
     width: @mobileGridWidth !important;
   }
+  .ui.relaxed.grid.container {
+    width: @mobileRelaxedGridWidth !important;
+  }
+  .ui.very.relaxed.grid.container {
+    width: @mobileVeryRelaxedGridWidth !important;
+  }
 }
 
 /* Tablet */
@@ -50,6 +56,12 @@
   .ui.grid.container {
     width: @tabletGridWidth !important;
   }
+  .ui.relaxed.grid.container {
+    width: @tabletRelaxedGridWidth !important;
+  }
+  .ui.very.relaxed.grid.container {
+    width: @tabletVeryRelaxedGridWidth !important;
+  }
 }
 
 /* Small Monitor */
@@ -62,6 +74,12 @@
   .ui.grid.container {
     width: @computerGridWidth !important;
   }
+  .ui.relaxed.grid.container {
+    width: @computerRelaxedGridWidth !important;
+  }
+  .ui.very.relaxed.grid.container {
+    width: @computerVeryRelaxedGridWidth !important;
+  }
 }
 
 /* Large Monitor */
@@ -74,6 +92,12 @@
   .ui.grid.container {
     width: @largeMonitorGridWidth !important;
   }
+  .ui.relaxed.grid.container {
+    width: @largeMonitorRelaxedGridWidth !important;
+  }
+  .ui.very.relaxed.grid.container {
+    width: @largeMonitorVeryRelaxedGridWidth !important;
+  }
 }
 
 /*******************************

src/themes/default/elements/container.variables

@@ -28,12 +28,25 @@
 @largeMonitorGutter: auto;
 
 /* Coupling (Add Negative Margin to container size) */
-@gridGutterWidth: 2em;
+@gridGutterWidth: 2rem;
+@relaxedGridGutterWidth: 3rem;
+@veryRelaxedGridGutterWidth: 5rem;
+
 @mobileGridWidth: @mobileWidth;
 @tabletGridWidth: ~"calc("@tabletWidth~" + "@gridGutterWidth~")";
 @computerGridWidth: ~"calc("@computerWidth~" + "@gridGutterWidth~")";
 @largeMonitorGridWidth: ~"calc("@largeMonitorWidth~" + "@gridGutterWidth~")";
 
+@mobileRelaxedGridWidth: @mobileWidth;
+@tabletRelaxedGridWidth: ~"calc("@tabletWidth~" + "@relaxedGridGutterWidth~")";
+@computerRelaxedGridWidth: ~"calc("@computerWidth~" + "@relaxedGridGutterWidth~")";
+@largeMonitorRelaxedGridWidth: ~"calc("@largeMonitorWidth~" + "@relaxedGridGutterWidth~")";
+
+@mobileVeryRelaxedGridWidth: @mobileWidth;
+@tabletVeryRelaxedGridWidth: ~"calc("@tabletWidth~" + "@veryRelaxedGridGutterWidth~")";
+@computerVeryRelaxedGridWidth: ~"calc("@computerWidth~" + "@veryRelaxedGridGutterWidth~")";
+@largeMonitorVeryRelaxedGridWidth: ~"calc("@largeMonitorWidth~" + "@veryRelaxedGridGutterWidth~")";
+
 /*-------------------
        Types
 --------------------*/