feat(container): wide variant

This PR implements a wide class for containers.

It works by applying a wideRatio (default 1.2) to the actual container width, except for mobile screens.

Author: prudho

src/definitions/elements/container.less

@@ -137,6 +137,25 @@
   }
 }
 
+& when (@variationContainerWide) {
+  /* Wide Container */
+  @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
+    .ui.ui.ui.wide.container {
+      width: @tabletWideWidth;
+    }
+  }
+  @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
+    .ui.ui.ui.wide.container {
+      width: @computerWideWidth;
+    }
+  }
+  @media only screen and (min-width: @largeMonitorBreakpoint) {
+    .ui.ui.ui.wide.container {
+      width: @largeMonitorWideWidth;
+    }
+  }
+}
+
 & when (@variationContainerFluid) {
   /* Fluid */
   .ui.fluid.container {

src/themes/default/elements/container.variables

@@ -9,6 +9,7 @@
 /* Minimum Gutter is used to determine  the maximum container width for a given device */
 
 @maxWidth: 100%;
+@wideRatio: 1.2;
 
 /* Devices */
 @mobileMinimumGutter: 0;
@@ -17,14 +18,17 @@
 
 @tabletMinimumGutter: (@emSize  * 1);
 @tabletWidth: @tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth;
+@tabletWideWidth: (@tabletBreakpoint - (@tabletMinimumGutter * 2) - @scrollbarWidth) * @wideRatio;
 @tabletGutter: auto;
 
 @computerMinimumGutter: (@emSize  * 1.5);
 @computerWidth: @computerBreakpoint - (@computerMinimumGutter * 2) - @scrollbarWidth;
+@computerWideWidth: (@computerBreakpoint - (@computerMinimumGutter * 2) - @scrollbarWidth) * @wideRatio;
 @computerGutter: auto;
 
 @largeMonitorMinimumGutter: (@emSize  * 2);
 @largeMonitorWidth: @largeMonitorBreakpoint - (@largeMonitorMinimumGutter * 2) - @scrollbarWidth;
+@largeMonitorWideWidth: (@largeMonitorBreakpoint - (@largeMonitorMinimumGutter * 2) - @scrollbarWidth) * @wideRatio;
 @largeMonitorGutter: auto;
 
 /* Coupling (Add Negative Margin to container size) */

src/themes/default/globals/variation.variables

@@ -46,6 +46,7 @@
 @variationContainerRelaxed: true;
 @variationContainerVeryRelaxed: true;
 @variationContainerText: true;
+@variationContainerWide: true;
 @variationContainerFluid: true;
 @variationContainerAligned: true;
 @variationContainerJustified: true;