// Figures. Note: we use the blockquote element to wrap figures and their captions in valid XHTML. // Use the .figure class for the blockquote wrapping an image and a caption. // Add .fixed, .small and/or .large for layout and size options.

blockquote.figure {

clear: both;
float: top; // By default all figures float to the tops of their pages
page-break-inside: avoid;
background-color: inherit;
font-size: inherit;
font-weight: inherit;
color: inherit;
margin: 0 0 $line-height-default 0;
padding: 0;
width: 100%;
box-sizing: border-box;

}

// Experimental. Effectively overrides ‘unless-fit’ to reduce ugly instances // of indented images in lists beside floated, non-indented images. ol li blockquote.figure, ul li blockquote.figure {

display: inline-block;

}

// Fix figures in place, for when they must keep their position in the text flow, // and not float to the top of the page. .figure.fixed {

clear: both;
float: none;
margin-top: $line-height-default;

}

// The p (some with child img) elements inside the figure .figure p {

clear: both;
page-break-inside: avoid;
page-break-before: avoid;
text-align: center;
text-indent: 0;

}

// The image(s) in the figure .figure p img {

width: auto;
max-width: 100%;
max-height: 100%; // Prevents image from expanding below a parent p set to a specific height
margin: 0 auto 0 auto;

}

// The caption (always the last paragraph in the figure) // Note doesn’t allow for multi-para captions – have to use line breaks :( .figure p:last-of-type {

padding: ($line-height-default / 2) 0 ($line-height-default / 2) 0;
margin: 0;
text-align: center;
text-indent: 0;
font-style: italic;

}

// Emphasis inside the italic caption .figure p:last-of-type em {

font-style: initial;

}

// Image size options // These need to be deprecated in favour of a multiple-based system. .figure.x-small p img {

width: auto;
max-height: 30mm;

} .figure.small p img {

width: auto;
max-height: 45mm;

} .figure.medium p img {

width: auto;
max-height: 65mm;

} .figure.large {

float: none;
page-break-before: always;

} .figure.large img {

max-height: 150mm;
max-width: 100%;
width: auto;

}

// Paragraphs that follow figures should: // have an indent when following floated figures // not have an indent when following fixed figures. blockquote.figure + p {

text-indent: $line-height-default;

} blockquote.figure.fixed + p {

text-indent: 0;

}