ArticleTemplates/assets/scss/modules/blocks/_block--live.scss

// /*doc
// ---
// title: Liveblog
// name: block--live
// category: Blocks
// ---
// Display a liveblog update:
//
// ```html_example
// <div class="block block--live-blog" id="block-539ac02ce4b0bc906f6b6039">
//     <p class="block__time" title="2014-06-13T09:18:19Z">50 minutes ago</p>
//     <div class="block__body">
//         <div class="from-content-api prose resizable selectable">
//             <p><b>Adrian Giles and ITV's expert analysts found themselves under attack from anti-World Cup protesters during the Brazil v Croatia game. </b>Lee Dixon, Fabio Cannavaro and Patrick Vieira were uninjured during the attack on their studio in Rio, but it was a prescient reminder that not everyone is in carnival mood. <a href="#">For full details of the assault with rocks, read here.</a></p>
//         </div>
//         <p class="block__updated">Last Updated: 10:21 GMT+1 Friday, 13 June 2014</p>
//     </div>
// </div>
// ```
//
// Highlight a key event:
//
// ```html_example
// <div class="block block--live-key-event" id="block-5399f964e4b076bb7c59cad9">
//     <p class="block__time" title="20:04">20:04</p>
//     <div class="block__body">
//         <div class="from-content-api prose resizable selectable">
//             <h2 class="block__title">Brazil v Croatia - line-ups</h2>
//             <p><b>Brazil:</b> Cesar; Alves, Silva, Luiz, Marcelo; Paulinho, Gustavo; Hulk, Oscar, Neymar; Fred.</p>
//             <p><b>Croatia:</b> Pletikosa; Srna, Corluka, Lovren, Vrsaijko; Kovacic, Modric; Rakitic, Perisic, Olic; Jelavic.</p>
//         </div>
//         <p class="block__updated">Last Updated: 20:14 GMT+1 Thursday, 12 June 2014</p>
//     </div>
// </div>
// ```
//
// Provide a summary of events:
//
// ```html_example
// <div class="block block--live-summary" id="block-539a8ba0e4b06fa6efefb577">
//     <p class="block__time" title="2014-06-13T05:28:14Z">5 hours ago</p>
//     <div class="block__body">
//         <div class="from-content-api prose resizable selectable">
//             <h2 class="block__title">Day two starts here</h2>
//             <p>Hello world, whatever time of day it may be for you. Finally the World Cup is up and running, and we'll be bringing you all the reaction to the opening game (Brazil won, you may have heard) and looking forward to the next three, which take place this evening, late at night or early tomorrow morning, depending on where you are.</p>
//         </div>
//     </div>
// </div>
// ```
// */

[class*='block--live-'] {
    padding-top: 0;

    @include mq($from: col2) {
        padding-top: 12px;
    }

    @include mq($from: col4) {
        padding: {
            left: 20px;
            right: 20px;
        }
    }

    .block__time {
        color: color(brightness-46);
        display: inline-block;
        font-family: $guardian-sans;
        padding: base-px(1, 0);
        vertical-align: top;

        @include mq($from: col2) {
            float: left;
            height: 100px; // Forces both block__byline and block__body to float next to time
            padding: base-px(0, 1, 0, 0);
            margin-top: -5px; // Offset for space above in our fonts to align text to top of block rule
        }

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

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

        @include mq($from: col4) {
            width: 220px;
        }
    }

    .block__body {
        @include mq($to: col4) {
            .element-rich-link {
                width: 100%;
            }
        }

        @include mq($from: col2) {
            float: left;

            .twitter-tweet,
            .js-tweet {
                position: relative;

                &::before {
                    position: absolute;
                    left: -4rem;
                }
            }

            .twitter-tweet,
            .js-tweet {
                &::before {
                    left: -5rem;
                }
            }
        }

        @include mq(col2, col3) {
            width: cols($base-3, 8);
        }

        @include mq($from: col3) {
            width: cols($base-4, 11);
        }

        @include mq($from: col4) {
            width: 620px;
        }
    }

    .block__updated {
        clear: both;
        color: color(brightness-60);
        font-family: $guardian-sans;
        font-size: 1.3rem;
        line-height: 2.2rem;
        margin-top: base-px(1);
    }

    .block__byline {
        border-left: 1px solid color(brightness-93);
        display: inline-block;
        padding: base-px(.5, 1);
        margin: base-px(0, 0, 1, 1);
        vertical-align: top;

        @include mq($from: col2) {
            border: 0;
            float: left;
            margin: base-px(0, 0, 1, 0);
            padding: 0;
        }

        @include mq($from: col4) {
            width: 620px;
        }
    }

    .block__avatar {
        background: color(brightness-96);
        border-radius: 50%;
        display: inline-block;
        height: 40px;
        margin-right: base-px(.5);
        overflow: hidden;
        position: relative;
        vertical-align: middle;
        width: 40px;

        img {
            left: 50%;
            max-height: 100%;
            position: absolute;
            top: 0;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            width: auto;
        }
    }

    .block__author {
        display: inline;
        line-height: 40px;
    }

    .prose {
        blockquote {
            margin-right: 0;
            margin-left: 0;
        }

        figure {
            &.figure-inline {
                float: none;
                clear: both;
            }

            // When thumbnail images are the first element of a block
            &.element--thumbnail:first-child {
                margin-top: 2px; // line up to floated text

                @include mq($from: col4) {
                    margin-top: 20px; // add space beneath time stamp
                }
            }

            &:last-child {
                figcaption:not(.figure--thumbnail, .figure-wide, .figure--thumbnail-with-caption) {
                    border-bottom: 0;
                }
            }
        }

        figcaption {
            padding: base-px(.125, 0, 1, .33);
        }

        @include mq($to: col1) {
            figure {
                &.portrait-thumbnail {
                    figcaption {
                        padding: 0 0 0 6px;
                    }

                    .element-image__caption {
                        @include text-ellipses(9);
                    }
                }
           }
        }

        @include mq($from: col1, $to: col4) {
            figure {
                &.portrait-thumbnail, &.landscape-thumbnail {
                    margin-bottom: 2px;
                }
            }
        }

        // Offsets for space above in our fonts to align text to top of block rule
        p:first-child {
            margin-top: -2px;
        }

        h2:first-child {
            margin-top: -3px;
            margin-bottom: 1em;
        }

        h2 + .figure--thumbnail-with-caption,
        h2 + .figure--thumbnail {
            margin: 6px 9px 6px 0;
        }
    }
}