ArticleTemplates/assets/scss/modules/_comments.scss

// /*doc
// ---
// title: Comments
// name: comments
// category: Modules
// ---
// Comments Module
//
// ```html_example
// <section class="comments comments--module comments-56">
//     <div class="comments__wrapper">
//         <div class="comments__header">
//             <h2 class="comments__title">
//                 <a class="comments__link" href="x-gu://showcomments">
//                     Comments <span class="comments__count">56</span>
//                 </a>
//             </h2>
//             <span class="touchpoint comments-closed-label" id="comments-module-closed-label">
//                 <span class="touchpoint__label">Comments are closed</span>
//             </span>
//              <a class="comments__link touchpoint touchpoint--primary" href="x-gu://leavecomment">
//                 <span class="touchpoint__label">Post a comment</span>
//                 <span class="touchpoint__button" data-icon="&#xe03d;" aria-hidden="true"></span>
//             </a>
//         </div>
//         <div class="comments__container">
//             <div class="comments__block comments__block--empty block">
//                 <div class="prose resizable">
//                     <p>
//                         Open for comments. <a href="x-gu://leavecomment">Be the first to join the debate</a>
//                     </p>
//                 </div>
//             </div>
//             <div class="comments__block comments__block--failed block">
//                 <div class="prose resizable">
//                     <p>
//                         Comments are currently unavailable. Please try again later.
//                     </p>
//                 </div>
//             </div>
//             <div class="comments__block comments__block--loading block loading" style="display:none;">
//                 <img src="" alt="Loading…">
//             </div>
//             <div class="block block--discussion-thread block--discussion-thread--checked">
//                 SEE blocks/_comment
//             </div>
//         </div>
//         <div class="comments__footer">
//             <div class="container__action container__action--view-more" id="comments-module-view-more">
//                 <a class="touchpoint touchpoint--secondary" id="comments-module-view-more-link" href="x-gu://showcomments">
//                 <span class="touchpoint__label" id="comments-module-view-more-label">View more</span>
//                 <span class="touchpoint__button" id="comments-module-view-more-button" data-icon="" aria-hidden="true"></span>
//                 </a>
//             </div>
//         </div>
//     </div>
// </section>
// ```
// */

.comments {
    margin: 0;
    padding: base-px(0, 0, 2, 0);
    overflow: hidden;
    background: color(brightness-96);

    .comment__recommend, .comments__viewmore--button {
        .touchpoint__button, &.touchpoint__button {
            border: solid 1px rgba(18, 18, 18, .5);
            color: color(brightness-7);
        }
    }

    &--module {
        border-top: 1px solid color(brightness-46);
        max-width: 1200px;
        margin: 0 auto;
    }

    &__wrapper {
        @include mq($from: col4) {
            margin: {
                left: auto;
                right: auto;
                top: base-px(2);
            }
            max-width: 1200px;

            .comments--page & {
                margin-top: 0;
            }
        }
    }

    &__header {
        position: relative;
        margin: 6px 8px 36px 8px;

        @include mq($from: col2) {
            margin: base-px(1, 1, 1.5, 1);
            min-height: 44px;
        }

        .android & {
            @include mq(col2, col4) {
                margin-left: base-px(1);
            }
        }

        @include mq($from: col4) {
            .comments--module & {
                float: left;
                margin: 0;
                width: 240px;

                .comments__post {
                    display: none;
                }
            }
        }
    }

    &__headline {
        @include headline(.75);
        margin-bottom: base-px(3);
    }

    &__title,
    &__label,
    &__post {
        @include mq($from: col4) {
            .comments--module & {
                display: block;
                width: 200px;
            }
        }

        .touchpoint__button {
            &::before {
                position: relative;
                top: -2px;
            }
        }
    }

    &__title {
        font-family: 'Guardian Headline', 'Guardian Egyptian Web', Georgia, serif;
        font-weight: 700;
        font-size: 24px;
        padding-bottom: 0;

        @include mq($from: col2) {
            line-height: 1;
        }

        @include mq($from: col4) {
            margin-bottom: 6px;
        }
    }

    &__link,
    &__link:active,
    .comments__link {
        color: color(brightness-7);
        font-size: 24px;
        vertical-align: top;
    }

    &__count {
        font-family: $egyptian-display;
        color: color(brightness-60);
        margin-left: 4px;
        @include mq($from: col4) {
            margin: 4px 0;
            display: block;
        }
        .comments--page & {
            @include headline(.5);
            margin-bottom: base-px(1);
        }
    }

    &__closed {
        @include meta;
        display: none;
        font-family: 'Guardian Text Sans Web', 'Guardian Egyptian Web', sans-serif;
        margin-top: base-px(1);

        .comments--closed & {
            display: block;
        }

        .comments--page & {
            text-align: right;
        }
    }

    &__post {
        padding: 8px;
        margin: -6px;
        position: absolute;
        right: 0;

        .touchpoint__button {
            line-height: 22px;
            width: 32px;
            height: 32px;
            font-size: 16px;

            &::before {
                top: 3px;
            }
        }

        .comments--module & {
            top: 0;

            @include mq($to: col1) {
                .touchpoint__label {
                    display: none;
                }
            }
        }

        .comments--page & {
            bottom: 0;
        }

        .comments--closed & {
            display: none;
        }

        .touchpoint__label {
            padding-left: 0;
            padding: 0 4px;
            margin-top: 2px;
        }
    }

    &__container {
        overflow: hidden;
        padding: 0;
        margin-top: base-px(2);

        .comments--page & {
            margin-top: base-px(1);
        }

        @include mq($from: col4) {
            margin: {
                top: 20px;
            }
        }
    }

    &__block {
        font-family: $guardian-sans;

        @include mq($to: col3) {
            margin: base-px(1);
        }

        @include mq($from: col4) {
            margin-top: 0;
        }

        // Hide the empty / failed blocks by default
        &--empty,
        &--failed {
            display: none;
        }

        // If comment count is 0 then show the --empty block
        &--empty {
            @include mq($from: col2, $to: col4) {
                margin-left: 12px;
            }

            .comments-0:not(.comments--closed) & {
                display: block;
            }
        }

        // If comment loading has failed then show the --failed block
        &--failed {
            @include mq($from: col2, $to: col4) {
                margin-left: 12px;
            }

            .comments-has-failed & {
                display: block;
            }
        }
    }

    .block {
        margin: 12px 8px;
        border: solid 1px color(tone-sandy-light);
        border-top: 1px solid color(brightness-60);
        border-bottom: 2px solid color(tone-sandy-light);

        @include mq($from: col4) {
            margin-right: 0;
            margin-left: 12px;
        }
    }

    &__footer {
        overflow: hidden;
        margin: base-px(2, 1, 0, 0);

        @include mq($from: col4) {
            margin-right: 0;
        }
    }

    &__viewmore {
        float: right;
        padding: 12px;
        margin: -12px;

        .comments-0 &,
        .comments-1 &,
        .container--has-failed & {
            display: none;
        }

        &--button {
            line-height: 22px;
            width: 32px;
            height: 32px;
            font-size: 16px;

            &::before {
                position: relative;
                top: 3px;
            }
        }

        &--label {
            padding: 0px 4px;
            margin-top: 2px;
        }
    }

    &__ordering {
        @include meta;
        font-family: $guardian-sans;
        font-weight: 700;

        .comments--open & {
            line-height: 44px;
        }

        .comments--closed & {
            float: left;
        }
    }

    .comments__footer {
        .comments__post {
            display: none;

            @include mq($from: col4) {
                display: block;
                position: relative;
                left: 140px;
                top: 32px;
            }
        }
    }

    @include mq($from: col2, $to: col4) {
        padding-left: 4px;
        padding-right: 4px;
    }
}