diff options
| author | Martijn Cuppens <[email protected]> | 2018-11-11 10:04:04 +0100 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2018-11-11 11:04:04 +0200 |
| commit | 976efcd5ee95a37b14c64620ff39675b11b94e73 (patch) | |
| tree | 684941d1bdf6a602bc400949ae0d2d888fb1e9f7 /scss | |
| parent | 9836a411e81a117b47c8deacff17b04fc30d6b5d (diff) | |
| download | bootstrap-976efcd5ee95a37b14c64620ff39675b11b94e73.tar.xz bootstrap-976efcd5ee95a37b14c64620ff39675b11b94e73.zip | |
Allow to add more embed responsive ratios (#25894)
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_variables.scss | 11 | ||||
| -rw-r--r-- | scss/utilities/_embed.scss | 27 |
2 files changed, 18 insertions, 20 deletions
diff --git a/scss/_variables.scss b/scss/_variables.scss index e721c2a65..dac260c19 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -259,6 +259,17 @@ $transition-base: all .2s ease-in-out !default; $transition-fade: opacity .15s linear !default; $transition-collapse: height .35s ease !default; +$embed-responsive-aspect-ratios: () !default; +// stylelint-disable-next-line scss/dollar-variable-default +$embed-responsive-aspect-ratios: join( + ( + (21 9), + (16 9), + (3 4), + (1 1), + ), + $embed-responsive-aspect-ratios +); // Fonts // diff --git a/scss/utilities/_embed.scss b/scss/utilities/_embed.scss index d3362b6fd..4497ac040 100644 --- a/scss/utilities/_embed.scss +++ b/scss/utilities/_embed.scss @@ -27,26 +27,13 @@ } } -.embed-responsive-21by9 { - &::before { - padding-top: percentage(9 / 21); - } -} - -.embed-responsive-16by9 { - &::before { - padding-top: percentage(9 / 16); - } -} - -.embed-responsive-4by3 { - &::before { - padding-top: percentage(3 / 4); - } -} +@each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios { + $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1); + $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2); -.embed-responsive-1by1 { - &::before { - padding-top: percentage(1 / 1); + .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} { + &::before { + padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x); + } } } |