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 --------------------*/