Flexbox feeds

src/definitions/views/feed.less

@@ -29,7 +29,7 @@
   margin-top: 0em;
 }
 .ui.feed:last-child {
-  margin-top: 0em;
+  margin-bottom: 0em;
 }
 
 
@@ -39,7 +39,8 @@
 
 /* Event */
 .ui.feed > .event {
-  display: @eventDisplay;
+  display: flex;
+  flex-direction: row;
   width: @eventWidth;
   padding: @eventPadding;
   margin: @eventMargin;
@@ -56,10 +57,11 @@
 
 /* Event Label */
 .ui.feed > .event > .label {
-  display: @labelDisplay;
+  display: block;
+  flex: 0 0 auto;
   width: @labelWidth;
   height: @labelHeight;
-  vertical-align: @labelVerticalAlign;
+  align-self: @labelAlignSelf;
   text-align: @labelTextAlign;
 }
 .ui.feed > .event > .label .icon {
@@ -78,13 +80,18 @@
   border-radius: @imageLabelBorderRadius;
 }
 .ui.feed > .event > .label + .content {
-  padding: @labeledContentPadding;
+  margin: @labeledContentMargin;
 }
 
+/*--------------
+     Content
+---------------*/
+
 /* Content */
 .ui.feed > .event > .content {
-  display: @contentDisplay;
-  vertical-align: @contentVerticalAlign;
+  display: block;
+  flex: 1 1 auto;
+  align-self: @contentAlignSelf;
   text-align: @contentTextAlign;
   word-wrap: @contentWordWrap;
 }

src/themes/default/views/feed.variables

@@ -13,18 +13,16 @@
 --------------------*/
 
 /* Event */
-@eventDisplay: table;
 @eventWidth: 100%;
-@eventPadding: 0.5rem 0em;
+@eventPadding: 0.214285rem 0em;
 @eventMargin: 0em;
 @eventBackground: none;
 @eventDivider: none;
 
 /* Event Label */
-@labelDisplay: table-cell;
 @labelWidth: 2.5em;
-@labelHeight: 2.5em;
-@labelVerticalAlign: top;
+@labelHeight: auto;
+@labelAlignSelf: stretch;
 @labelTextAlign: left;
 
 /* Icon Label */
@@ -43,12 +41,11 @@
 @imageLabelBorderRadius: @circularRadius;
 
 /* Content w/ Label */
-@labeledContentPadding: 0.5em 0em 0.5em 1.25em;
+@labeledContentMargin: 0.5em 0em 0.35714em @relativeLarge;
 @lastLabeledContentPadding: 0em;
 
 /* Content */
-@contentDisplay: table-cell;
-@contentVerticalAlign: top;
+@contentAlignSelf: stretch;
 @contentTextAlign: left;
 @contentWordWrap: break-word;
 
@@ -142,8 +139,3 @@
 /*-------------------
       Variations
 --------------------*/
-
-/* Size */
-@small: 0.9em;
-@medium: 1em;
-@large: 1.1em;

src/themes/timeline/views/feed.overrides

@@ -9,6 +9,10 @@
   border-left-color: transparent;
 }
 
+.ui.feed > .event > .label {
+  margin-left: 1.6em;
+}
+
 .ui.feed > .event > .label > img,
 .ui.feed > .event > .label > .icon {
   background-color: #009FDA;
@@ -21,15 +25,3 @@
   opacity: 1;
   position: relative;
 }
-
-.ui.feed > .event > .content {
-  display: block;
-  border-left: 3px solid #ddd;
-  padding-bottom: 2em;
-  padding-left: 4em;
-}
-.ui.feed > .event > .label + .content {
-  display: table-cell;
-  border-left: medium none;
-  margin-left: 0;
-}

src/themes/timeline/views/feed.variables

@@ -6,15 +6,15 @@
       Elements
 --------------------*/
 
-@eventMargin: 0em 0em 0em 2em;
+@eventMargin: 0em;
 @eventDivider: none;
 @eventPadding: 0em;
 
 /* Event Label */
 @labelWidth: 3em;
-@labelHeight: 3em;
+@labelHeight: auto;
 
-@labeledContentPadding: 0.75em 0em 2em 0.75em;
+@labeledContentMargin: 0.75em 0em 2em 0.75em;
 
 /* Icon */
 @iconLabelBackground: @primaryColor;
@@ -34,7 +34,3 @@
 /*-------------------
       Variations
 --------------------*/
-
-/* Size */
-@small: 0.9em;
-@medium: 1em;