ArticleTemplates/assets/scss/modules/_container.scss

// /*doc
// ---
// title: Container
// name: container
// category: Containers
// ---
// Display a titled container for comments, cards or other components that should be visually grouped.
//
// ```html_example
// <div class="container">
//     <div class="container__header">
//         <div class="container__title">
//             <h2 class="container__title__label"><a class="container__title__link" href="#">Comments <span class="container__title__meta">350</span></a></h2>
//         </div>
//
//         <div class="container__action container__action--comment">
//             <a class="touchpoint touchpoint--primary" href="#">
//                 <span class="touchpoint__label">Leave a comment</span>
//                 <span class="touchpoint__button icon">&#xe03d;</span>
//             </a>
//         </div>
//     </div>
//
//     <div class="container__body">
//         <p>Container content</p>
//     </div>
//
//     <div class="container__footer">
//         <div class="container__action container__action--view-more">
//             <a class="touchpoint touchpoint--secondary" href="#">
//                 <span class="touchpoint__label">View more</span>
//                 <span class="touchpoint__button icon">&#xe00b;</span>
//             </a>
//         </div>
//     </div>
// </div>
// ```
// */

.container {
    margin: base-px(0, 0, 2, 0);
    border-top: 1px solid color(brightness-46);
}

.container__header,
.container__footer {
    overflow: auto;
    font-family: $guardian-sans;
    font-weight: bold;
    padding: base-px(.666667, .166667, 2, .166667);
    display: table;
    width: 100%;

    @include mq($to: col1) {
        padding: $base-1 / 1.5;
    }
}

.container__title {
    color: color(brightness-7);
    vertical-align: top;
    display: table-cell;
}

.container__title__label {
    font-family: $egyptian-display;
    font-weight: 600;
    @include body(1.5);
    margin-top: -1px;

    .container__title__link {
        color: color(brightness-7);

        &:active {
            color: color(brightness-7);
        }
    }
}

.container__title__meta {
    color: color(brightness-60);
    font-weight: 600;
}

.container__action {
    vertical-align: top;
    @include meta();
    display: table-cell;

    &.container__action--sort {
        padding-top: 12px;
    }
}

.container__action--comment,
.container__action--view-more {
    float: right;
}

.container__action--comment {
    .touchpoint__button:before {
        position: relative;
        top: -2px;
        left: 2px;
    }
}

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

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

        .container__header {
            float: left;
            margin: 20px;
            padding: 0;
            width: 200px;

            > h2,
            > span,
            > div {
                display: block;
                width: 200px;
            }

            .touchpoint__label {
                padding-left: 0;
            }
        }

        .container__title {
            margin-bottom: 15px;
        }

        .container__body {
            margin: {
                left: 240px;
                top: 20px;
            };
            width: 858px; // This is the width of 4 related cards at this breakpoint
        }

        .container__footer {
            margin-left: 240px;
            width: 858px;
        }
    }
}

.container__header {
    height: 54px;

    .container__action {
        .touchpoint--primary {
            display: none !important;
        }

        .comments-closed-label {
            .touchpoint__label {
                display: none;
            }
        }
    }
}

.comments--open {
    .container__header {
        height: 54px;

        .container__action {
            .touchpoint--primary {
                display: block !important;
            }
        }

        .comments-closed-label .touchpoint__label {
            display: none !important;
        }
    }
}

.container__body {
    overflow: hidden;

    //putting comments back to how they originally were - keeping any cached comments after failure
    .container--has-failed:not(.container--comments) & {
        display: none;
    }
}

/* Android Tweaks - Displays Leave a comment icon by default */

.android {
    .container {
        &.comments--closed {
            .container__action .touchpoint--primary {
                display: none !important;
            }
        }

        .container__action .touchpoint--primary {
            display: block !important;
        }
    }

    .container--related {
        margin-bottom: 48px;
    }
}