ArticleTemplates/assets/scss/modules/_figure.scss

// /*doc
// ---
// title: Figure
// name: figure
// category: Modules
// ---
// Display an embedded element. Element embeds are typically shown as figures, and can optionally include a supporting caption.
//
// ```html_example
// <figure>
//     <img src="http://images.mobile-apps.guardianapis.com/sys-images/Guardian/Pix/pictures/2014/6/11/1402512126497/Matt-Kenyon-on-Birmingham-014.jpg?width=900&amp;height=540&amp;quality=60"/>
//     <figcaption>
//         ‘The absurdity of the inspectors’ findings is clearest in the case of Gracelands, whose staff were taken to task for failing to ensure its 2- to 4-year-olds were protected against ‘extreme and radical behaviour'.' Illustration: Matt Kenyon
//     </figcaption>
// </figure>
// ```
// */

figure {
    img {
        display: block;
    }

    video {
        width: 100%;
    }

    figcaption {
        color: color(brightness-46);
        font-family: $guardian-sans;
        font-size: 1.4rem;
        line-height: 1.8rem;
        @include mq($from: col2) {
            padding: 0;
        }
    }

    &.element--supporting,
    &.element-interactive {
        figcaption {
            padding: base-px(0.125, 0);
        }
    }

    &.figure-wide {
        figcaption {
            padding: base-px(0.125, 1);
        }
    }

    figcaption:empty {
        display: none;
    }
}

// Full width
.figure-wide {
    margin: base-px(1, 0);

    .figure__inner {
        background: color(brightness-93);
    }

    // for when these are displayed in the main media area (at the top we don't need these margins)
    .main-media & {
        margin: 0;
    }
}

// Inline
.figure-inline {
    margin-right: 12px;
    float: left;

    @include mq($from: col1) {
        margin: base-px(.5, 1, 0, 0);
        float: left;

        img {
            width: 100%;
            height: auto;
        }
    }

    figcaption {
        padding-left: 0;
        padding-right: 0;
    }
}

.figure__caption__icon {
    @extend %caption-icon;
}

.figure--thumbnail,
.figure--thumbnail-with-caption,
.figure-wide {
    img {
        width: 100%;
        height: 100%;
    }

    figcaption {
        font-size: 1.4rem;
        line-height: 1.8rem;
    }

    .element-image-inner {
        height: 100%;
        background: color(brightness-96);
    }
}

.figure--thumbnail {
    float: left;
    max-width: 33.33%;
    margin: 6px 13px 0 0;

    @include mq($from: col4) {
        max-width: 140px;
    }

    .prose & {
        // extra specificity for overiding style to override styles in prose
        margin-top: 6px;

        @include mq($from: col3) {
            clear: both;
            margin-bottom: 12px;
        }

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

    &:not(.figure--thumbnail-with-caption) {
        .element-image-inner {
            min-width: 65px;
        }
    }
}

.figure--thumbnail-with-caption {
    display: block;
    float: left;
    clear: left;
    margin: base-px(.5, .75, .5, 0);
    width: 50%;

    .figure__inner {
        width: 100%;
        display: block;
    }

    .element-image__credit {
        display: block;
    }

    figcaption {
        padding: 0;
    }

    @include mq($to: col1) {

        .figure__inner {
            display: block;
        }

        &.portrait-thumbnail {
            position: relative;

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

        &.landscape-thumbnail {
            .figure__inner {
                width: 100%;
            }
        }
    }

    @include mq($from: col1) {
        width: 33%;
        max-width: 200px;
    }

    @include mq($from: col2) {
        margin-right: 16px;
    }

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

.youtube-sdk-caption {
    font-size: 1.4rem;
    line-height: 1.8rem;
    color: color(brightness-46);
    font-family: $guardian-sans;
    margin: 0;
    padding: 2px 0;
    display: inline-block;
    margin-top: -12px !important;
}

.ios {
    .youtube-sdk-caption {
        .figure__caption__icon {
            top: 1px;
        }
    }
}

.element-embed {
    .js-email-sub__iframe + figcaption {
        margin-bottom: 12px;
        padding: 0;

        strong {
            font-weight: normal;
        }
    }
}