src/app/articles/comment-list/comment-list.component.scss
.comment-list-header {
display: flex;
&__count {
margin-bottom: 12px;
font-weight: bold;
color: gray;
}
&__spacer {
flex: 1 1 auto
}
&__toggle-btn {
color: #3f51b5;
height: 24px;
width: 24px;
line-height: 0;
&:hover {
background-color: #B8BFE0;
}
}
}
.comment-list-content,
.reply-list-content {
padding-top: 6px;
padding-bottom: 6px;
border-top: 1px solid #f5f4f4;
}
.comment {
display: flex;
$parent: &;
&_deleted {
@extend #{$parent};
background-color: #f5f4f4;
padding: 8px;
}
&__author-icon {
width: 36px;
height: 36px;
margin-right: 12px;
background: white;
border-radius: 4px;
box-sizing: border-box;
margin-top: 1px;
image-rendering: -webkit-optimize-contrast;
cursor: pointer;
&:hover {
opacity: 0.6;
}
&:focus {
outline: 0;
}
}
&__main {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
&__metadata {
display: flex;
font-size: 14px;
}
&__author {
font-weight: bold;
color: #3f51b5;
padding-right: 6px;
cursor: pointer;
&:hover {
color: #606DB0;
}
&:focus {
outline: 0;
}
}
&__created {
white-space: nowrap;
color: #A4A2A2;
span {
font-size: 0.7em;
}
}
&__text {
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: -moz-pre-wrap;
white-space: -hp-pre-wrap;
word-wrap: break-word;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
color: #24292e;
margin: 0;
$parent: &;
&_deleted {
@extend #{$parent};
color: gray;
line-height: 36px;
height: 36px;
}
}
&__operation {
min-height: 24px;
color: gray;
}
}
.comment-list-footer {
display: flex;
margin-bottom: 60px;
&__spacer {
flex: 1 1 auto
}
&__toggle-btn {
color: #3f51b5;
height: 24px;
width: 24px;
line-height: 0;
&:hover {
background-color: #B8BFE0;
}
}
}
.reply-list-content {
margin-left: 42px;
}
.reply {
margin: 12px 0 12px 42px;
padding-top: 18px;
padding-bottom: 18px;
border-top: 1px solid #eaeaea;
}
.new-comment {
margin-top: 24px;
}