_align.scss
6 years ago
_background.scss
6 years ago
_borders.scss
6 years ago
_clearfix.scss
6 years ago
_display.scss
6 years ago
_embed.scss
6 years ago
_flex.scss
6 years ago
_float.scss
6 years ago
_overflow.scss
6 years ago
_position.scss
6 years ago
_screenreaders.scss
6 years ago
_shadows.scss
6 years ago
_sizing.scss
6 years ago
_spacing.scss
6 years ago
_stretched-link.scss
6 years ago
_text.scss
6 years ago
_visibility.scss
6 years ago
_embed.scss
40 lines
| 1 | // Credit: Nicolas Gallagher and SUIT CSS. |
| 2 | |
| 3 | .embed-responsive { |
| 4 | position: relative; |
| 5 | display: block; |
| 6 | width: 100%; |
| 7 | padding: 0; |
| 8 | overflow: hidden; |
| 9 | |
| 10 | &::before { |
| 11 | display: block; |
| 12 | content: ""; |
| 13 | } |
| 14 | |
| 15 | .embed-responsive-item, |
| 16 | iframe, |
| 17 | embed, |
| 18 | object, |
| 19 | video { |
| 20 | position: absolute; |
| 21 | top: 0; |
| 22 | bottom: 0; |
| 23 | left: 0; |
| 24 | width: 100%; |
| 25 | height: 100%; |
| 26 | border: 0; |
| 27 | } |
| 28 | } |
| 29 | |
| 30 | @each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios { |
| 31 | $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1); |
| 32 | $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2); |
| 33 | |
| 34 | .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} { |
| 35 | &::before { |
| 36 | padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x); |
| 37 | } |
| 38 | } |
| 39 | } |
| 40 |