ArticleTemplates/assets/scss/modules/blocks/_comment.scss (288 lines of code) (raw):
// /*doc
// ---
// title: Comment
// name: comment
// category: Blocks
// ---
// Display an individual comment.
//
// ```html_example
// <div class="comment visible" id="37064238">
// <div class="comment__container">
// <div class="comment__header">
// <span class="avatar avatar--user">
// <img class="avatar__img" src="http://static.guim.co.uk/sys-images/Guardian/Pix/site_furniture/2010/09/01/no-user-image.gif">
// </span>
// <span class="comment__username">grumpyhistorian</span>
// <span class="comment__response-to"><span data-icon="" aria-hidden="true"></span><span class="screen-readable">in response to </span></span>
// <span class="comment__role"></span>
// <span class="comment__timestamp">5 hours ago</span>
// </div>
//
// <div class="comment__body">
// <div class="prose resizable selectable">
// <p>Phew thats ok then. I mean govt officials would never lie about the legality of their actions right?</p>
// </div>
// </div>
//
// <div class="comment__options">
// <a class="comment__reply touchpoint touchpoint--primary touchpoint--small" href="x-gu://leavereply/37064238">
// <span class="touchpoint__button icon"></span>
// <span class="touchpoint__label">Reply</span>
// </a>
// <a class="comment__report touchpoint" href="x-gu://reportabuse/37064238">
// <span class="touchpoint__label">Report</span>
// </a>
// </div>
//
// <a class="comment__recommend touchpoint touchpoint--secondary touchpoint--small" href="x-gu://recommendcomment/37064238">
// <span class="touchpoint__button icon"></span>
// <span class="touchpoint__label comment__recommend__count">295 <span class="screen-readable">recommendations. Tap to recommend.</span></span>
// </a>
// </div>
// </div>
// ```
//
// Comment response:
//
// ```html_example
// <div class="comment is-response visible" id="37065948">
// <div class="comment__container">
// <div class="comment__header">
// <span class="avatar avatar--user">
// <img class="avatar__img" src="http://static.guim.co.uk/sys-images/discussion/avatars/2012/12/19/4780434/1816263f-962a-4b24-8e96-1218886e083e/60x60.png">
// </span>
// <span class="comment__username">FredericMoreau</span>
// <span class="comment__response-to"><span data-icon="" aria-hidden="true"></span><span class="screen-readable">in response to </span>grumpyhistorian</span>
// <span class="comment__role"></span>
// <span class="comment__timestamp">5 hours ago</span>
// </div>
//
// <div class="comment__body">
// <div class="prose resizable selectable">
// <p>When it's tax-avoiders and evaders, the government vows to close legal "loop-holes" - when it comes to mass surveillance, they see an opportunity to be exploited.</p>
// <p>We're told that Parliament has spent far more time on recess this last year than it has sitting, and that the government is running out of things to do - they genuinely think they've fixed everything that needs fixing.</p>
// <p>After Edward Snowdon, surely there had to be a new Bill put forward, with the aim of replacing RIPA and having a Parliamentary and public debate on the issue? All we've had so far is Malcolm Rifkind sneering on the news about "national security."</p>
// </div>
// </div>
//
// <div class="comment__options">
// <a class="comment__reply touchpoint touchpoint--primary touchpoint--small" href="x-gu://leavereply/37065948">
// <span class="touchpoint__button" data-icon="" aria-hidden="true"></span>
// <span class="touchpoint__label">Reply</a>
// </a>
// <a class="comment__report touchpoint" href="x-gu://reportabuse/37065948">
// <span class="touchpoint__label">Report</a>
// </a>
// </div>
//
// <a class="comment__recommend touchpoint touchpoint--secondary touchpoint--small" href="x-gu://recommendcomment/37065948">
// <span class="touchpoint__button" data-icon="" aria-hidden="true"></span>
// <span class="touchpoint__label comment__recommend__count">109 <span class="screen-readable">recommendations. Tap to recommend.</span></span>
// </a>
// </div>
// </div>
// ```
//
// Comment blocked:
//
// ```html_example
// <div class="comment blocked" id="9454526">
// <div class="comment__container">
// <div class="comment__header">
// <span class="avatar avatar--user">
// <img class="avatar__img" src="http://static.guim.co.uk/sys-images/discussion/avatars/2012/12/19/4780434/1816263f-962a-4b24-8e96-1218886e083e/60x60.png">
// </span>
// <span class="comment__username">FredericMoreau</span>
// <span class="comment__response-to"><span data-icon="" aria-hidden="true"></span><span class="screen-readable">in response to </span>grumpyhistorian</span>
// <span class="comment__role"></span>
// <span class="comment__timestamp">5 hours ago</span>
// </div>
//
// <div class="comment__body">
// <div class="prose resizable selectable">
// This comment was removed by a moderator because it didn't abide by our <a href="http://www.theguardian.com/community-standards">community standards</a>. Replies may also be deleted. For more detail see <a href="http://www.guardian.co.uk/community-faqs">our FAQs</a>.
// </div>
// </div>
//
// <div class="comment__options">
// <a class="comment__reply touchpoint touchpoint--primary touchpoint--small" href="x-gu://leavereply/37065948">
// <span class="touchpoint__button" data-icon="" aria-hidden="true"></span>
// <span class="touchpoint__label">Reply</a>
// </a>
// <a class="comment__report touchpoint" href="x-gu://reportabuse/37065948">
// <span class="touchpoint__label">Report</span>
// </a>
// </div>
//
// <a class="comment__recommend touchpoint touchpoint--secondary touchpoint--small" href="x-gu://recommendcomment/37065948">
// <span class="touchpoint__button" data-icon="" aria-hidden="true"></span>
// <span class="touchpoint__label comment__recommend__count">109 <span class="screen-readable">recommendations. Tap to recommend.</span></span>
// </a>
// </div>
// </div>
// ```
//
// Comment preview:
//
// ```html_example
// <div class="discussion--preview">
// <div class="comment visible comment--preview" id="37089601">
// <div class="comment__container">
// <div class="comment__header">
// <span class="avatar avatar--user">
// <img class="avatar__img" src="http://static.guim.co.uk/sys-images/discussion/avatars/2012/02/26/TechnicalEphemera/ee18a40d-1f30-4197-9d3a-76fe081b99a0/60x60.png">
// </span>
// <span class="comment__username">TechnicalEphemera</span>
// <span class="comment__response-to"><span data-icon="" aria-hidden="true"></span><span class="screen-readable">in response to </span></span>
// <span class="comment__role"></span>
// <span class="comment__timestamp">16 hours ago</span>
// </div>
//
// <div class="comment__body">
// <div class="prose resizable selectable">
// <p>Well he has certainly cocked this up in a spectacularly inept way.</p>
// <p>Why pick a fight so publicly if you don't know you are going to win.</p>
// <p>If Cameron had shut up nobody in the UK would even care who Juncker was. Now he is utterly humiliated, as Merkel has abandoned him - and the incoming head of the commission hates him personally.</p>
// </div>
// </div>
//
// <div class="comment__options">
// <a class="comment__reply touchpoint touchpoint--primary touchpoint--small" href="x-gu://leavereply/37089601">
// <span class="touchpoint__button" data-icon="" aria-hidden="true"></span>
// <span class="touchpoint__label">Reply</a>
// </a>
// <a class="comment__report touchpoint" href="x-gu://reportabuse/37089601">
// <span class="touchpoint__label">Report</span>
// </a>
// </div>
//
// <a class="comment__recommend touchpoint touchpoint--secondary touchpoint--small" href="x-gu://recommendcomment/37089601">
// <span class="touchpoint__button" data-icon="" aria-hidden="true"></span>
// <span class="touchpoint__label comment__recommend__count">273 <span class="screen-readable">recommendations. Tap to recommend.</span></span>
// </a>
// </div>
// </div>
// </div>
// ```
// */
.comment {
font-family: $guardian-sans;
@include body();
// Open
&.comment--open {
.comment__options {
display: block;
}
}
// Hidden response
&.is-response-hidden {
display: none;
}
// Blocked
&.blocked {
color: color(brightness-60);
.comment__header {
opacity: .5;
}
.comment__recommend {
display: none;
}
}
}
.comment__container {
min-height: 64px;
margin-bottom: base-px(1);
position: relative;
}
.comment__header {
word-break: break-all;
word-wrap: break-word;
margin-top: -2px;
padding: base-px(0, 1, .75, 0);
overflow: auto;
@include mq(col2, col3) {
width: cols($base-3, 4, 1);
float: left;
}
@include mq($from: col3) {
width: cols($base-4, 5, 1);
float: left;
overflow: hidden;
}
.avatar--user {
margin: base-px(.33333, .66666, .66666, 0);
float: left;
}
}
.comment__body {
word-break: break-word;
word-wrap: break-word;
padding-bottom: base-px(1);
@include mq(col2, col3) {
margin-right: cols($base-3, 1);
margin-left: cols($base-3, 4, 1);
}
@include mq($from: col3) {
margin-right: cols($base-4, 1);
margin-left: cols($base-4, 5, 1);
}
blockquote:first-child {
margin: base-px(0, 2, 1, 2);
}
}
[data-highlighted=''] {
display: none;
}
.comment__role {
text-transform: capitalize;
&[data-role=''] {
display: none;
}
&__title {
line-height: 30px;
vertical-align: top;
margin-left: 2px;
}
@include mq($from: col2) {
display: inline-block;
}
}
.comment__pick {
line-height: 28px;
vertical-align: top;
margin-left: 2px;
}
.comment__badge {
width: 18px;
height: 18px;
padding-top: 4px;
}
.comment__meta {
display: inline-block;
width: 140px;
@include mq($from: col2) {
width: 340px;
}
@include mq($from: col3) {
width: 440px;
}
}
.comment__username {
display: block;
@include mq($to: col2) {
display: inline;
white-space: nowrap;
}
}
.comment__username {
color: color(brightness-7);
font-weight: bold;
white-space: nowrap;
}
.comment__response-to {
font-weight: bold;
display: none;
}
.comment__timestamp {
color: color(brightness-60);
font-family: $guardian-sans;
@include meta();
display: block;
white-space: nowrap;
}
.comment__recommend {
@include meta();
text-align: center;
width: auto;
display: block;
position: absolute;
top: 0;
right: 0;
.touchpoint__button {
background-color: transparent;
font-size: 14px;
&::before {
position: relative;
top: -1px;
}
@include mq($from: col2) {
margin: 0 auto;
display: block;
}
}
&:active {
.touchpoint__button {
color: color(brightness-100);
background-color: color(tone-sandy-light);
}
}
.touchpoint__label {
color: color(brightness-60);
font-weight: normal;
margin-top: 4px;
@include mq($from: col2) {
padding: 0;
display: block;
text-align: center;
}
}
@include mq($from: col2) {
display: flex;
flex-direction: column;
.comment__recommend__count {
order: 2;
}
.touchpoint__button {
order: 1;
}
}
}
.comment__options {
@include meta();
background-color: color(brightness-100);
padding-bottom: base-px(.5);
overflow: hidden;
display: none;
@include mq(col2, col3) {
margin-left: cols($base-3, 4, 1);
}
@include mq($from: col3) {
margin-left: cols($base-4, 5, 1);
}
.comment__reply {
font-weight: bold;
float: left;
}
.comment__report {
float: right;
margin-top: 3px;
.touchpoint__label {
font-weight: normal;
}
}
}
.is-response {
.comment__header {
border-top: color(tone-sandy-light) 1px dotted;
width: auto;
float: none;
position: static;
padding: base-px(.75, 1, 1.5, 0);
@include mq($to: col2) {
margin-left: base-px(4.33333);
}
@include mq(col2, col3) {
margin-left: cols($base-3, 4, 1);
}
@include mq($from: col3) {
margin-left: cols($base-4, 5, 1);
}
}
.comment__body {
color: color(brightness-46);
@include mq($to: col2) {
margin-left: base-px(4.33333);
}
p:last-child {
margin-bottom: 0;
}
}
.comment__options {
@include mq($to: col2) {
margin-left: base-px(4.33333);
}
}
.comment__avatar {
display: none;
}
.comment__username {
display: inline-block;
}
.comment__response-to {
display: inline-block;
white-space: nowrap;
color: color(brightness-46);
&::before {
color: color(brightness-60);
}
}
.comment__recommend {
padding: base-px(.75, 0, 0, 0);
background: white;
padding-left: 9px;
border-top: color(tone-sandy-light) 1px dotted;
}
}
// Preview
.discussion--preview {
background-color: color(brightness-20);
border: 0;
padding: base-px(1);
.comment {
position: relative;
}
.comment__body {
color: color(brightness-100);
background-color: color(brightness-20);
border-top: 0;
height: 100px;
overflow: hidden;
text-overflow: ellipsis;
font-family: $egyptian-text;
&::after {
content: '';
background-image: linear-gradient(to bottom, rgba(color(brightness-20), 0) 66%, color(brightness-20) 100%);
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 2;
}
.prose blockquote {
color: color(brightness-100);
}
a {
color: color(brightness-100);
}
}
.comment__recommend {
display: none;
}
.comment__username {
color: color(tone-news-accent);
}
.comment__pick, .comment__role {
color: color(brightness-100);
}
}