2019-11-27 15:31:49 +07:00
|
|
|
/**
|
|
|
|
* Horizontal scroller (<figure>)
|
|
|
|
*/
|
|
|
|
|
|
|
|
// Wrapper to make any content responsive across all viewports
|
|
|
|
figure {
|
|
|
|
display: block;
|
|
|
|
margin-right: -$spacing-gutter;
|
|
|
|
margin-left: -$spacing-gutter;
|
|
|
|
padding: 0;
|
|
|
|
overflow-x: auto;
|
|
|
|
|
|
|
|
figcaption {
|
|
|
|
color: var(--muted-text);
|
|
|
|
font-size: 87.5%;
|
2019-11-30 12:43:20 +07:00
|
|
|
padding: ($spacing-gutter/2) $spacing-gutter;
|
2019-11-27 15:31:49 +07:00
|
|
|
}
|
|
|
|
|
|
|
|
@if map-get($breakpoints, "sm") {
|
|
|
|
@media (min-width: map-get($breakpoints, "sm")) {
|
|
|
|
margin-right: 0;
|
|
|
|
margin-left: 0;
|
|
|
|
|
|
|
|
figcaption {
|
2019-11-30 12:43:20 +07:00
|
|
|
padding: ($spacing-gutter/2) 0;
|
2019-11-27 15:31:49 +07:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|