Add equal width grid

fomantic · Jan 14, 2015 · e517219 · e517219
1 parent 44328b5
commit e517219
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 19 deletions.
diff --git 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
@@ -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,