gaf-mobile/app/styles/modules/ThreadSnapshot.less

GAF mobile Web site

@import (reference) '../libs/mixins';
@import (reference) '../themes/variables';

/**
 * Thread Snapshot
 *
 * A snapshot of a thread in the Inbox page and it's details
 * Currently used in Inbox
 *
 * Markup: ThreadSnapshot.html
 *
 * Styleguide 5
 */

.ThreadSnapshot {
    @this: ThreadSnapshot;
    padding: 0 @padding;

    font-weight: @type-weight-medium;
    word-wrap: break-word;

    &-overlayLink {
        .flex();
        .flex-align-items(center);
        position: relative;
        padding: 12px 6px;
    }

    &-content {
        width: 100%;
        padding-left: 14px;
    }

    &-avatar {
        .flex-shrink(0);
        .flex-align-self(baseline);

        &::before {
            position: absolute;
            top: 9px;
            left: 2px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: @quinary-color;
            content: "";
        }

        &-container {
            .flex-shrink(0);
        }
    }

    &-title {
        margin-top: 0;
        font-size: @type-size;
        font-weight: @type-weight-bold;
        color: @text-color-mid;

        &:only-child {
            margin-bottom: 0;
        }
    }

    &-desc {
        margin: 0;
        font-size: @type-size-lge - 4;
        font-weight: @type-weight-regular;
        line-height: 1.4;
        color: @text-color-dark;
        word-break: break-word;

        &.@{this}-desc--attachment {
            font-weight: @type-weight-light;
        }
    }

    /* Details Section */
    &-details {
        .flex();
        .flex-wrap(wrap);
    }

    &-projectName,
    &-time {
        font-size: @type-size-sml;
    }

    &-time {
        font-weight: @type-weight-light;
        margin-left: auto;
        text-align: right;
        color: @link-color;

        &.@{this}-time--attachment {
            color: @text-color-mid;
        }
    }

    &-projectName {
        font-weight: @type-weight-medium;
        color: @text-color-dark;
    }

    &-secondary {
        .flex();
    }

    &-icon {
        margin-left: auto;

        .Icon {
            width: 16px;
            height: 16px;
            fill: @quaternary-color-light;
        }
    }

    &--unread {
        background-color: @septenary-color-xxlight;

        .@{this}-desc,
        .@{this}-time {
            font-weight: @type-weight-bold;
        }
    }

    &-onlineStatus {
        top: 7px;
        left: 0;
    }
}