ArticleTemplates/assets/scss/modules/_commentsHighlighted.scss (70 lines of code) (raw):
.comments {
.block--highlighted {
margin: 12px 8px 24px 8px;
.comment__container {
padding: 12px;
margin-bottom: 32px;
background: color(comment-highlighted);
.comment__options {
background-color: color(comment-highlighted)
}
&:after {
content: '';
width: 24px;
height: 24px;
border-radius: 0 0 24px;
position: absolute;
bottom: -24px;
left: 22px;
background-color: color(comment-highlighted);
@include mq(col2, col3) {
left: cols($base-3, 4, 1);
}
@include mq($from: col3) {
left: cols($base-4, 5, 1);
}
}
.comment__viewthread {
display: block;
text-align: right;
padding-bottom: 6px;
color: color(brightness-7);
}
.prose {
@include text-underline(color(comment-highlighted-link), color(comment-highlighted-link));
blockquote {
color: color(brightness-7);
}
}
}
.comment__recommend {
text-align: right;
position: relative;
float: right;
margin-right: 12px;
margin-top: 4px;
}
.avatar {
display: inline-block;
margin: 4px 6px 0 12px;
@include mq(col2, col3) {
margin-left: cols($base-3, 4, 1);
}
@include mq($from: col3) {
margin-left: cols($base-4, 5, 1);
}
}
.author-meta {
display: inline-block;
vertical-align: top;
max-width: 50%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@include mq($from: col4) {
margin-right: 0;
margin-left: 12px;
}
}
}