src/app/users/comment-list/comment-list.component.scss
.comment-list {
margin: 24px 24px 124px;
border-bottom: 1px solid #dadada;
&__comment {
padding-top: 12px;
padding-bottom: 12px;
border-top: 1px solid #dadada;
}
}
.comment {
display: flex;
&__author-icon {
width: 48px;
height: 48px;
margin-right: 16px;
background: white;
border-radius: 4px;
box-sizing: border-box;
margin-top: 1px;
image-rendering: -webkit-optimize-contrast;
}
&__article {
display: flex;
font-size: 14px;
&__author-icon {
width: 24px;
height: 24px;
margin-right: 6px;
background: white;
border-radius: 2px;
box-sizing: border-box;
margin-top: 1px;
cursor: pointer;
image-rendering: -webkit-optimize-contrast;
&:hover {
opacity: 0.6;
}
&:focus {
outline: 0
}
}
&__author-wrapper {
margin-right: 6px;
}
&__author {
font-weight: bold;
color: #3f51b5;
cursor: pointer;
&:hover {
color: #606DB0
}
&:focus {
outline: 0
}
}
&__title-wrapper {
margin-right: 6px;
}
&__title {
font-weight: bold;
color: #3f51b5;
cursor: pointer;
&:hover {
color: #606DB0
}
&:focus {
outline: 0
}
}
}
&__created {
white-space: nowrap;
color: #A4A2A2;
}
&__main {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
&__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;
margin-top: 12px;
}
}