diff --git a/src/definitions/views/feed.less b/src/definitions/views/feed.less index 18d4cb6da..583048d1f 100755 --- a/src/definitions/views/feed.less +++ b/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; } diff --git a/src/themes/default/views/feed.variables b/src/themes/default/views/feed.variables index df43af0ec..6fcf0fbe6 100644 --- a/src/themes/default/views/feed.variables +++ b/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; \ No newline at end of file diff --git a/src/themes/timeline/views/feed.overrides b/src/themes/timeline/views/feed.overrides index 55acd7c1e..4b51e3487 100644 --- a/src/themes/timeline/views/feed.overrides +++ b/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; -} \ No newline at end of file diff --git a/src/themes/timeline/views/feed.variables b/src/themes/timeline/views/feed.variables index 8052083a0..d1345e80b 100644 --- a/src/themes/timeline/views/feed.variables +++ b/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; \ No newline at end of file