From ffd2a73c1dad674888607ea94b2c217fc2962032 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Tue, 28 Jul 2015 18:07:28 -0400
Subject: [PATCH] Fix relaxed/veryrelaxed grid container

---
 RELEASE-NOTES.md                              |  1 +
 src/definitions/elements/container.less       | 24 +++++++++++++++++++
 .../default/elements/container.variables      | 15 +++++++++++-
 3 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
index 4cb2f2718..f2b1c89db 100644
--- a/RELEASE-NOTES.md
+++ b/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
diff --git a/src/definitions/elements/container.less b/src/definitions/elements/container.less
index 60c57bc4b..aba216a45 100644
--- a/src/definitions/elements/container.less
+++ b/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;
+  }
 }
 
 /*******************************
diff --git a/src/themes/default/elements/container.variables b/src/themes/default/elements/container.variables
index 72874e15c..33f3a8c97 100644
--- a/src/themes/default/elements/container.variables
+++ b/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
 --------------------*/