From e517219bfaa8612250ab45635a6a8cf3b944e77c Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 14 Jan 2015 15:18:22 -0500 Subject: [PATCH] Add equal width grid --- RELEASE-NOTES.md | 3 +- src/definitions/collections/grid.less | 58 ++++++++++++++++++--------- 2 files changed, 42 insertions(+), 19 deletions(-) diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index d32e7f6d9..a06fc7165 100644 --- a/RELEASE-NOTES.md +++ b/RELEASE-NOTES.md @@ -7,11 +7,12 @@ - **Project** - Install now let you specify the outputted file permissions and RTL use (express/custom install) **Enhancements / Changes** +- **Grid** - Added `equal width` variation using `flex-box`, `equal height` now also uses `flex-box` (this may have to be removed if causes unexpected browser issues) +- **Sidebar** - Having a sidebar visible on page load is now much simpler. You can include ``ui visible sidebar`` on page load to have a sidebar element appear on page load. To close call `$('.ui.sidebar').sidebar('hide')` - **Site** - Form input highlighting color added (helps differentiate form colors with autocompleted fields). Default text highlighting color moved from highlighter yellow to a mellow blue. - **Dropdown** - Dropdown can now be disabled by adding ``disabled` class without requiring `destroy`. **Thanks Psyton** - **Dropdown** - Search dropdown input can now have backgrounds. Fixes issues with autocompleted search dropdowns which have forced yellow "autocompleted" bg. - **Dropdown** - Fix issue with search selection not correctly matching when values are not strings -- **Sidebar** - Having a sidebar visible on page load is now much simpler. You can include ``ui visible sidebar`` on page load to have a sidebar element appear on page load. To close call `$('.ui.sidebar').sidebar('hide')` - **Progress* - Progress bars can now display percent or amount left using `{value}` in text templates - **Dropdown** - New `upward dropdown` variation, which opens its menu upward. Default animation now uses ``settings.transition = 'auto'` and determines direction of animation based on menu direction - **Dropdown** - Dropdown matching fields without values now trims whitespace by default diff --git a/src/definitions/collections/grid.less b/src/definitions/collections/grid.less index 4cb8664ee..50e63bccf 100755 --- a/src/definitions/collections/grid.less +++ b/src/definitions/collections/grid.less @@ -1265,20 +1265,6 @@ vertical-align: bottom !important; } -/* Flex */ -.ui[class*="top aligned"].grid, -.ui.grid > [class*="top aligned"].row { - align-items: flex-start; -} -.ui[class*="middle aligned"].grid, -.ui.grid > [class*="middle aligned"].row { - align-items: center; -} -.ui[class*="bottom aligned"].grid, -.ui.grid > [class*="bottom aligned"].row { - align-items: flex-end; -} - /*---------------------- Colored -----------------------*/ @@ -1404,6 +1390,44 @@ } +/*---------------------- + Equal Width +-----------------------*/ + +.ui[class*="equal width"].grid { + display: table; + table-layout: fixed; +} +.ui[class*="equal width"].grid > .row, +.ui.grid > [class*="equal width"].row { + display: table; + table-layout: fixed; + width: 100% !important; +} +.ui[class*="equal width"].grid > .column, +.ui[class*="equal width"].grid > .row > .column, +.ui.grid > [class*="equal width"].row > .column { + display: table-cell; +} + +/* Flexbox (Experimental / Overrides Where Supported) */ +.ui[class*="equal width"].grid { + display: flex; + flex-direction: column; +} +.ui[class*="equal width"].grid > .row, +.ui.grid > [class*="equal width"].row { + display: flex; + flex-direction: row; + align-items: stretch; +} +.ui[class*="equal width"].grid > .column, +.ui[class*="equal width"].grid > .row > .column, +.ui.grid > [class*="equal width"].row > .column { + display: inline-block; + flex-direction: column; + flex: 1 0 auto; +} /*---------------------- @@ -1427,14 +1451,12 @@ } /* Flexbox (Experimental / Overrides Where Supported) */ -.ui[class*="equal height"].grid { - display: flex; - flex-direction: row; -} +.ui[class*="equal height"].grid, .ui[class*="equal height"].grid > .row, .ui.grid > [class*="equal height"].row { display: flex; flex-direction: row; + align-items: stretch; } .ui[class*="equal height"].grid > .column, .ui[class*="equal height"].grid > .row > .column,