roolith css framework

Comments

Single comment

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim asperiores repellat officiis! Labore expedita libero vitae omnis vel ab, blanditiis ea sit delectus tenetur assumenda quo placeat quaerat voluptate id.

23 min ago

2 likes Like
Reply
Share

<div class="comment">
    <div class="avatar avatar-small">
        <figure class="avatar-fig rounded">
            <img src="https://picsum.photos/40/40?image=500" alt="">
        </figure>
        <a href="#" class="avatar-label">Killmonger
            <span>@killmonger</span>
        </a>
    </div>
    <div class="comment-body">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim asperiores repellat officiis! Labore expedita libero vitae omnis vel ab, blanditiis ea sit delectus tenetur assumenda quo placeat quaerat voluptate id.
    </div>
    <div class="comment-info">23 min ago</div>
    <ul class="comment-action">
        <li class="comment-action-item"><span>2 likes</span> <a href="#" class="comment-action-item-link"><i class="ion-thumbsup"></i> Like</a></li>
        <li class="comment-action-item"><a href="#" class="comment-action-item-link"><i class="ion-reply"></i> Reply</a></li>
        <li class="comment-action-item"><a href="#" class="comment-action-item-link"><i class="ion-android-share-alt"></i> Share</a></li>
    </ul>
</div>

Comment group

Killmonger @killmonger

23 min ago

2 likes Like
Reply
Share

Killmonger @killmonger

23 min ago

Killmonger @killmonger

23 min ago

2 likes Like
Reply
Share

James, Christina and 3 others likes this

Killmonger @killmonger

23 min ago

Killmonger @killmonger

23 min ago

Killmonger @killmonger

23 min ago

2 likes Like
Reply
Share

James, Christina and 3 others likes this

<div class="comment-group">
    <div class="comment">
        <div class="avatar avatar-small">
            <figure class="avatar-fig rounded">
                <img src="https://picsum.photos/40/40?image=500" alt="">
            </figure>
            <a href="#" class="avatar-label">Killmonger
                <span>@killmonger</span>
            </a>
        </div>
        <div class="comment-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim asperiores repellat officiis! Labore expedita libero vitae omnis vel ab, blanditiis ea sit delectus tenetur assumenda quo placeat quaerat voluptate id.
        </div>
        <div class="comment-info">23 min ago</div>
        <ul class="comment-action">
            <li class="comment-action-item"><span>2 likes</span> <a href="#" class="comment-action-item-link"><i class="ion-thumbsup"></i> Like</a></li>
            <li class="comment-action-item"><a href="#" class="comment-action-item-link"><i class="ion-reply"></i> Reply</a></li>
            <li class="comment-action-item"><a href="#" class="comment-action-item-link"><i class="ion-android-share-alt"></i> Share</a></li>
        </ul>
    </div>

    <div class="comment comment-indent-1">
        <div class="avatar avatar-small">
            <figure class="avatar-fig rounded">
                <img src="https://picsum.photos/40/40?image=500" alt="">
            </figure>
            <a href="#" class="avatar-label">Killmonger
                <span>@killmonger</span>
            </a>
        </div>
        <div class="comment-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim asperiores repellat officiis! Labore expedita libero vitae omnis vel ab, blanditiis ea sit delectus tenetur assumenda quo placeat quaerat voluptate id.
        </div>
        <div class="comment-info">23 min ago</div>
        <ul class="comment-action">
            <li class="comment-action-item"><a href="#" class="comment-action-item-link color-success"><i class="ion-arrow-up-b"></i> 22</a></li>
            <li class="comment-action-item"><a href="#" class="comment-action-item-link color-danger"><i class="ion-arrow-down-b"></i> 5</a></li>
        </ul>
    </div>

    <div class="comment">
        <div class="avatar avatar-small">
            <figure class="avatar-fig rounded">
                <img src="https://picsum.photos/40/40?image=500" alt="">
            </figure>
            <a href="#" class="avatar-label">Killmonger
                <span>@killmonger</span>
            </a>
        </div>
        <div class="comment-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim asperiores repellat officiis! Labore expedita libero vitae omnis vel ab, blanditiis ea sit delectus tenetur assumenda quo placeat quaerat voluptate id.
        </div>
        <div class="comment-info">23 min ago</div>
        <ul class="comment-action">
            <li class="comment-action-item"><span>2 likes</span> <a href="#" class="comment-action-item-link">Like</a></li>
            <li class="comment-action-item"><a href="#" class="comment-action-item-link">Reply</a></li>
            <li class="comment-action-item"><a href="#" class="comment-action-item-link">Share</a></li>
        </ul>
        <div class="comment-info">James, Christina and 3 others likes this</div>
    </div>

    <div class="comment comment-indent-1">
        <div class="avatar avatar-small">
            <figure class="avatar-fig rounded">
                <img src="https://picsum.photos/40/40?image=500" alt="">
            </figure>
            <a href="#" class="avatar-label">Killmonger
                <span>@killmonger</span>
            </a>
        </div>
        <div class="comment-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim asperiores repellat officiis! Labore expedita libero vitae omnis vel ab, blanditiis ea sit delectus tenetur assumenda quo placeat quaerat voluptate id.
        </div>
        <div class="comment-info">23 min ago</div>
        <ul class="comment-action">
            <li class="comment-action-item"><a href="#" class="comment-action-item-link color-success"><i class="ion-arrow-up-b"></i> 22</a></li>
            <li class="comment-action-item"><a href="#" class="comment-action-item-link color-danger"><i class="ion-arrow-down-b"></i> 5</a></li>
        </ul>
    </div>

    <div class="comment comment-indent-2 comment-blurred">
        <div class="avatar avatar-small">
            <figure class="avatar-fig rounded">
                <img src="https://picsum.photos/40/40?image=500" alt="">
            </figure>
            <a href="#" class="avatar-label">Killmonger
                <span>@killmonger</span>
            </a>
        </div>
        <div class="comment-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim asperiores repellat officiis! Labore expedita libero vitae omnis vel ab, blanditiis ea sit delectus tenetur assumenda quo placeat quaerat voluptate id.
        </div>
        <div class="comment-info">23 min ago</div>
        <ul class="comment-action">
            <li class="comment-action-item"><a href="#" class="comment-action-item-link color-success"><i class="ion-arrow-up-b"></i> 5</a></li>
            <li class="comment-action-item"><a href="#" class="comment-action-item-link color-danger"><i class="ion-arrow-down-b"></i> 40</a></li>
        </ul>
    </div>

    <div class="comment comment-highlight">
        <div class="avatar avatar-small">
            <figure class="avatar-fig rounded">
                <img src="https://picsum.photos/40/40?image=500" alt="">
            </figure>
            <a href="#" class="avatar-label">Killmonger
                <span>@killmonger</span>
            </a>
        </div>
        <div class="comment-body">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim asperiores repellat officiis! Labore expedita libero vitae omnis vel ab, blanditiis ea sit delectus tenetur assumenda quo placeat quaerat voluptate id.
        </div>
        <div class="comment-info">23 min ago</div>
        <ul class="comment-action">
            <li class="comment-action-item"><span>2 likes</span> <a href="#" class="comment-action-item-link">Like</a></li>
            <li class="comment-action-item"><a href="#" class="comment-action-item-link">Reply</a></li>
            <li class="comment-action-item"><a href="#" class="comment-action-item-link">Share</a></li>
        </ul>
        <div class="comment-info">James, Christina and 3 others likes this</div>
    </div>

    <br><br>
    <a href="" class="button button-small">Show more 20 replies</a>
</div>

There are comment-indent-1 - comment-indent-10, comment-highlight, comment-blurred with diffrent comment action layouts.

SASS

Reference from _comment.scss

$comment-border: rgba(map-get($colors, dark), 0.1) !default;
$comment-highlight-color: lighten(map-get($colors, primary), 47%) !default;