fomantic-ui/src/definitions/views/feed.less

Fomantic empowers designers and developers by creating a shared vocabulary for UI.

/*!
 * # Fomantic-UI - Feed
 * https://github.com/fomantic/Fomantic-UI/
 *
 *
 * Released under the MIT license
 * https://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

@type: "view";
@element: "feed";

@import (multiple) "../../theme.config";

/*******************************
         Activity Feed
*******************************/

.ui.feed {
    margin: @margin;
}
.ui.feed:first-child {
    margin-top: 0;
}
.ui.feed:last-child {
    margin-bottom: 0;
}

/*******************************
            Content
*******************************/

/* Event */
.ui.feed > .event {
    display: flex;
    flex-direction: row;
    width: @eventWidth;
    padding: @eventPadding;
    margin: @eventMargin;
    background: @eventBackground;
    border-top: @eventDivider;
}
.ui.feed > .event:first-child {
    border-top: 0;
    padding-top: 0;
}
.ui.feed > .event:last-child {
    padding-bottom: 0;
}

/* Event Label */
.ui.feed > .event > .label {
    display: block;
    flex: 0 0 auto;
    width: @labelWidth;
    height: @labelHeight;
    align-self: @labelAlignSelf;
    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 {
    margin: @labeledContentMargin;
}

/* --------------
     Content
--------------- */

/* Content */
.ui.feed > .event > .content {
    display: block;
    flex: 1 1 auto;
    align-self: @contentAlignSelf;
    text-align: @contentTextAlign;
    word-wrap: @contentWordWrap;
}
.ui.feed > .event:last-child > .content {
    padding-bottom: @lastLabeledContentPadding;
}

/* Link */
.ui.feed > .event > .content a {
    cursor: pointer;
}

& when (@variationFeedDate) {
    /* --------------
          Date
    --------------- */

    .ui.feed > .event > .content .date {
        margin: @dateMargin;
        padding: @datePadding;
        color: @dateColor;
        font-weight: @dateFontWeight;
        font-size: @dateFontSize;
        font-style: @dateFontStyle;
    }
}

& when (@variationFeedSummary) {
    /* --------------
         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;
    }
    & when (@variationFeedDate) {
        /* --------------
           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;
        }
    }
}
& when (@variationFeedUser) {
    /* --------------
          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;
    }
}

& when (@variationFeedExtra) {
    /* --------------
      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;
    }
}

& when (@variationFeedMeta) {
    /* --------------
          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: 0;
        left: @metadataDividerOffset;
        opacity: 1;
        position: absolute;
        vertical-align: top;
    }

    & when (@variationFeedLike) {
        .ui.feed > .event > .content .meta .like {
            color: @likeColor;
            transition: @likeTransition;
        }
        .ui.feed > .event > .content .meta .like:hover i.icon {
            color: @likeHoverColor;
        }
        .ui.feed > .event > .content .meta .active.like i.icon {
            color: @likeActiveColor;
        }
    }

    /* First element */
    .ui.feed > .event > .content .meta > :first-child {
        margin-left: 0;
    }
    .ui.feed > .event > .content .meta > :first-child::after {
        display: none;
    }

    /* Action */
    .ui.feed > .event > .content .meta a,
    .ui.feed > .event > .content .meta > i.icon {
        cursor: @metadataActionCursor;
        opacity: @metadataActionOpacity;
        color: @metadataActionColor;
        transition: @metadataActionTransition;
    }
    .ui.feed > .event > .content .meta a:hover,
    .ui.feed > .event > .content .meta a:hover i.icon,
    .ui.feed > .event > .content .meta > i.icon:hover {
        color: @metadataActionHoverColor;
    }
}

/*******************************
            Variations
*******************************/

.ui.feed {
    font-size: @medium;
}
& when not (@variationFeedSizes = false) {
    each(@variationFeedSizes, {
        @s: @@value;
        .ui.@{value}.feed {
            font-size: @s;
        }
    });
}

& when (@variationFeedInverted) {
    /* ------------------
          Inverted
    ------------------- */

    .ui.inverted.feed > .event {
        background: @black;
    }

    & when (@variationFeedDate) or (@variationFeedLike) {
        .ui.inverted.feed > .event > .content .date,
        .ui.inverted.feed > .event > .content .meta .like {
            color: @invertedLightTextColor;
        }
    }

    & when (@variationFeedSummary) or (@variationFeedExtra) {
        .ui.inverted.feed > .event > .content .summary,
        .ui.inverted.feed > .event > .content .extra.text {
            color: @invertedTextColor;
        }
    }

    & when (@variationFeedLike) {
        .ui.inverted.feed > .event > .content .meta .like:hover {
            color: @invertedSelectedTextColor;
        }
    }
}

.loadUIOverrides();