From a99af7b4934dc58ad15084a571a84d528c558239 Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Mon, 30 Mar 2015 17:15:59 -0400
Subject: [PATCH] Adds flexbox ui item

---
 src/definitions/views/item.less         | 20 +++++++++-----------
 src/themes/default/views/item.variables |  8 ++++----
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/definitions/views/item.less b/src/definitions/views/item.less
index c1bd767e3..4dc47b04a 100755
--- a/src/definitions/views/item.less
+++ b/src/definitions/views/item.less
@@ -27,8 +27,6 @@
 ---------------*/
 
 .ui.items > .item {
-  table-layout: fixed;
-
   display: @display;
   margin: @itemSpacing 0em;
   width: @width;
@@ -65,9 +63,6 @@
       Item
 ---------------*/
 
-.ui.items > .item {
-  min-width: 100%;
-}
 .ui.items > .item:after {
   display: block;
   content: ' ';
@@ -91,12 +86,13 @@
 
 .ui.items > .item > .image {
   position: relative;
+  flex: 0 0 auto;
   display: @imageDisplay;
   float: @imageFloat;
   margin: @imageMargin;
   padding: @imagePadding;
   max-height: @imageMaxHeight;
-  vertical-align: @imageVerticalAlign;
+  align-self: @imageVerticalAlign;
 }
 .ui.items > .item > .image > img {
   display: block;
@@ -117,6 +113,7 @@
 
 .ui.items > .item > .content {
   display: block;
+  flex: 1 1 auto;
   background: @contentBackground;
   margin: @contentMargin;
   padding: @contentPadding;
@@ -138,7 +135,7 @@
   width: @contentWidth;
   display: @contentDisplay;
   margin-left: @contentOffset;
-  vertical-align: @contentVerticalAlign;
+  align-self: @contentVerticalAlign;
   padding-left: @contentImageDistance;
 }
 
@@ -171,7 +168,7 @@
 ---------------*/
 
 .ui.items > .item .content img {
-  vertical-align: @contentImageVerticalAlign;
+  align-self: @contentImageVerticalAlign;
   width: @contentImageWidth;
 }
 .ui.items > .item img.avatar,
@@ -356,6 +353,7 @@
 /* Mobily Only */
 @media only screen and (max-width: @largestMobileScreen) {
   .ui.items > .item {
+    flex-direction: column;
     margin: @mobileItemSpacing 0em;
   }
   .ui.items > .item > .image {
@@ -387,13 +385,13 @@
 --------------------*/
 
 .ui.items > .item > .image + [class*="top aligned"].content {
-  vertical-align: top;
+  align-self: top;
 }
 .ui.items > .item > .image + [class*="middle aligned"].content {
-  vertical-align: middle;
+  align-self: center;
 }
 .ui.items > .item > .image + [class*="bottom aligned"].content {
-  vertical-align: bottom;
+  align-self: bottom;
 }
 
 
diff --git a/src/themes/default/views/item.variables b/src/themes/default/views/item.variables
index 95aeb22e5..b91120f4b 100644
--- a/src/themes/default/views/item.variables
+++ b/src/themes/default/views/item.variables
@@ -10,7 +10,7 @@
 @groupMargin: 1.5em 0em;
 
 /* Item */
-@display: table;
+@display: flex;
 @background: transparent;
 @borderRadius: 0rem;
 @minHeight: 0px;
@@ -40,7 +40,7 @@
 --------------------*/
 
 /* Image */
-@imageDisplay: table-cell;
+@imageDisplay: block;
 @imageFloat: none;
 @imageMaxHeight: '';
 @imageVerticalAlign: top;
@@ -52,10 +52,10 @@
 @imageBorder: none;
 
 /* Content */
-@contentDisplay: table-cell;
+@contentDisplay: block;
 @contentVerticalAlign: top;
 
-@contentWidth: 100%;
+@contentWidth: auto;
 @contentOffset: 0em;
 @contentBackground: none;
 @contentMargin: 0em;