ArticleTemplates/assets/scss/modules/_more.scss

// /*doc
// ---
// title: More
// name: more
// category: Modules
// ---
// Display a link to view more.
//
// ```html_example
// <div class="more more--comments">
//     <span class="more__label" data-icon="&#xe050;">
//         <span class="more__text">Show 3 more replies</span>
//     </span>
// </div>
//
// <div class="more more--live-blogs">
//     <button class="more__button">
//         <span class="more__icon" data-icon="&#xe050;" aria-hidden="true"></span>
//         <span class="more__text">View more updates</span>
//     </button>
// </div>
// ```
// */

.more {
    padding: base-px(2, 0);

    .more__label,
    .more__button {
        display: inline-block;
        vertical-align: middle;
        color: color(brightness-100);
        font-family: $guardian-sans;
        font-weight: bold;
        @include body(.875);
        padding: base-px(.5, 1.5, .5, 1.166);
        border-radius: 40px;
        border: 0;
        outline: none;
    }

    .more__label {
        padding: base-px(.5, 1, .5, .5);
        position: static;

        &:before {
            position: relative;
            font-size: 110%;
            right: 5px;
        }

        &:active {
            color: darken(color(brightness-100), 10);
        }
    }

    .more__text,
    .more__icon {
        display: inline-block;
        padding: base-px(0, .5);
    }

    .more__text {
        vertical-align: top;
        margin-top: 2px;
    }
}

.more--comments {
    padding-top: base-px(1);

    @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);
    }
}

.more--live-blogs-blocks {
    text-align: center;
}

.more--live-blogs, .more--live-blogs-blocks {
    @include mq($to: col2) {
        margin: base-px(0, 1);
    }

    @include mq(col2, col3) {
        margin-left: cols($base-3, 4, 1);
    }

    @include mq($from: col3) {
        margin-left: cols($base-4, 5, 1);
    }

    @include mq($from: col4) {
        margin: 0 auto;
        max-width: 1200px;
        padding-left: 240px;
    }

    .more__button {
        background-color: color(tone-live);

        &:active {
            background-color: darken(color(tone-live), 10%);
        }
    }
}