/*
* # Semantic - Feed
* http://github.com/semantic-org/semantic-ui/
*
*
* Copyright 2014 Contributors
* Released under the MIT license
* http://opensource.org/licenses/MIT
*
*/

/*******************************

Theme

*******************************/

@type : ‘view’; @element : ‘feed’;

@import ‘../../theme.config’;

/*******************************

Activity Feed

*******************************/

.ui.feed {

margin: @margin;

} .ui.feed:first-child {

margin-top: 0em;

} .ui.feed:last-child {

margin-top: 0em;

}

/*******************************

Content

*******************************/

/* Event */ .ui.feed > .event {

display: @eventDisplay;
width: @eventWidth;
padding: @eventPadding;
margin: @eventMargin;
background: @eventBackground;
border-top: @eventDivider;

} .ui.feed > .event:first-child {

border-top: 0px;
padding-top: 0em;

} .ui.feed > .event:last-child {

padding-bottom: 0em;

}

/* Event Label */ .ui.feed > .event > .label {

display: @labelDisplay;
width: @labelWidth;
height: @labelHeight;
vertical-align: @labelVerticalAlign;
text-align: @labelTextAlign;

} .ui.feed > .event > .label .icon {

opacity: @iconLabelOpacity;
font-size: @iconLabelSize;
width: @iconLabelWidth;
padding: @iconLabelPadding;
background: @iconLabelBackground;
border: @iconLabelBorder;
border-radius: @iconLabelBorderRadius;
color: @iconLabelColor;

} .ui.feed > .event > .label img {

width: @imageLabelWidth;
height: @imageLabelHeight;
border-radius: @imageLabelBorderRadius;

} .ui.feed > .event > .label + .content {

padding: @labeledContentPadding;

}

/* Content */ .ui.feed > .event > .content {

display: @contentDisplay;
vertical-align: @contentVerticalAlign;
text-align: @contentTextAlign;
word-wrap: @contentWordWrap;

} .ui.feed > .event:last-child > .content {

padding-bottom: @lastLabeledContentPadding;

}

/* Link */ .ui.feed > .event > .content a {

cursor: pointer;

}

/*————–

Date

—————*/

.ui.feed > .event > .content .date {

margin: @dateMargin;
padding: @datePadding;
color: @dateColor;
font-weight: @dateFontWeight;
font-size: @dateFontSize;
font-style: @dateFontStyle;
color: @dateColor;

}

/*————–

Summary

—————*/

.ui.feed > .event > .content .summary {

margin: @summaryMargin;
font-size: @summaryFontSize;
font-weight: @summaryFontWeight;
color: @summaryColor;

}

/* Summary Image */ .ui.feed > .event > .content .summary img {

display: inline-block;
width: @summaryImageWidth;
height: @summaryImageHeight;
margin: @summaryImageMargin;
border-radius: @summaryImageBorderRadius;
vertical-align: @summaryImageVerticalAlign;

} /*————–

User

—————*/

.ui.feed > .event > .content .user {

display: inline-block;
font-weight: @userFontWeight;
margin-right: @userDistance;
vertical-align: baseline;

} .ui.feed > .event > .content .user img {

margin: @userImageMargin;
width: @userImageWidth;
height: @userImageHeight;
vertical-align: @userImageVerticalAlign;

} /*————–

Inline Date

—————*/

/* Date inside Summary */ .ui.feed > .event > .content .summary > .date {

display: @summaryDateDisplay;
float: @summaryDateFloat;
font-weight: @summaryDateFontWeight;
font-size: @summaryDateFontSize;
font-style: @summaryDateFontStyle;
margin: @summaryDateMargin;
padding: @summaryDatePadding;
color: @summaryDateColor;

}

/*————–

Extra Summary

—————*/

.ui.feed > .event > .content .extra {

margin: @extraMargin;
background: @extraBackground;
padding: @extraPadding;
color: @extraColor;

}

/* Images */ .ui.feed > .event > .content .extra.images img {

display: inline-block;
margin: @extraImageMargin;
width: @extraImageWidth;

}

/* Text */ .ui.feed > .event > .content .extra.text {

padding: @extraTextPadding;
border-left: @extraTextPointer;
font-size: @extraTextFontSize;
max-width: @extraTextMaxWidth;
line-height: @extraTextLineHeight;

}

/*————–

Meta

—————*/

.ui.feed > .event > .content .meta {

display: @metadataDisplay;
font-size: @metadataFontSize;
margin: @metadataMargin;
background: @metadataBackground;
border: @metadataBorder;
border-radius: @metadataBorderRadius;
box-shadow: @metadataBoxShadow;
padding: @metadataPadding;
color: @metadataColor;

}

.ui.feed > .event > .content .meta > * {

position: relative;
margin-left: @metadataElementSpacing;

} .ui.feed > .event > .content .meta > *:after {

content: @metadataDivider;
color: @metadataDividerColor;
top: 0em;
left: @metadataDividerOffset;
opacity: 1;
position: absolute;
vertical-align: top;

}

.ui.feed > .event > .content .meta .like {

color: @likeColor;
transition: @likeTransition;

} .ui.feed > .event > .content .meta .like:hover .icon {

color: @likeHoverColor;

} .ui.feed > .event > .content .meta .active.like .icon {

color: @likeActiveColor;

}

/* First element */ .ui.feed > .event > .content .meta > :first-child {

margin-left: 0em;

} .ui.feed > .event > .content .meta > :first-child::after {

display: none;

}

/* Action */ .ui.feed > .event > .content .meta a, .ui.feed > .event > .content .meta > .icon {

cursor: @metadataActionCursor;
opacity: @metadataActionOpacity;
color: @metadataActionColor;
transition: @metadataActionTransition;

} .ui.feed > .event > .content .meta a:hover, .ui.feed > .event > .content .meta a:hover .icon, .ui.feed > .event > .content .meta > .icon:hover {

color: @metadataActionHoverColor;

}

/*******************************

Variations

*******************************/

.ui.small.feed {

font-size: @small;

} .ui.feed {

font-size: @medium;

} .ui.large.feed {

font-size: @large;

}

.loadUIOverrides();