You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
239 lines
4.9 KiB
239 lines
4.9 KiB
/*
|
|
* # 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 '../../semantic.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;
|
|
}
|
|
|
|
/*--------------
|
|
Date
|
|
---------------*/
|
|
|
|
.ui.feed > .event > .content .date {
|
|
margin: @dateMargin;
|
|
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;
|
|
margin: @summaryDateMargin;
|
|
padding: @summaryDatePadding;
|
|
}
|
|
|
|
/*--------------
|
|
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;
|
|
}
|
|
|
|
/*--------------
|
|
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: 1.5em;
|
|
}
|
|
.ui.feed > .event > .content .meta > *:after {
|
|
content: @metadataDivider;
|
|
color: @metadataDividerColor;
|
|
top: 0em;
|
|
left: @metadataDividerOffset;
|
|
opacity: 1;
|
|
position: absolute;
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.loadUIOverrides();
|