/* * # 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();