diff options
| author | Martijn Cuppens <[email protected]> | 2019-05-05 09:41:27 +0200 |
|---|---|---|
| committer | XhmikosR <[email protected]> | 2019-05-05 10:41:27 +0300 |
| commit | a776cc473d17f53d8136537c2f2aa31d29ce0d12 (patch) | |
| tree | daadfb7741d3e27da30768cb109e56e427c1963d | |
| parent | be2ad677860d3ca94b5f9c64755884ab0390ddb5 (diff) | |
| download | bootstrap-a776cc473d17f53d8136537c2f2aa31d29ce0d12.tar.xz bootstrap-a776cc473d17f53d8136537c2f2aa31d29ce0d12.zip | |
Switch from list to map for responsive embeds (#28678)
| -rw-r--r-- | scss/_variables.scss | 22 | ||||
| -rw-r--r-- | scss/utilities/_embed.scss | 9 | ||||
| -rw-r--r-- | site/content/docs/4.3/utilities/embed.md | 24 |
3 files changed, 38 insertions, 17 deletions
diff --git a/scss/_variables.scss b/scss/_variables.scss index f4fbddee9..8255d107a 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -255,12 +255,24 @@ $transition-collapse: height .35s ease !default; $embed-responsive-aspect-ratios: () !default; // stylelint-disable-next-line scss/dollar-variable-default -$embed-responsive-aspect-ratios: join( +$embed-responsive-aspect-ratios: map-merge( ( - (21 9), - (16 9), - (4 3), - (1 1), + "21by9": ( + x: 21, + y: 9 + ), + "16by9": ( + x: 16, + y: 9 + ), + "4by3": ( + x: 4, + y: 3 + ), + "1by1": ( + x: 1, + y: 1 + ) ), $embed-responsive-aspect-ratios ); diff --git a/scss/utilities/_embed.scss b/scss/utilities/_embed.scss index 4497ac040..89d22aa6c 100644 --- a/scss/utilities/_embed.scss +++ b/scss/utilities/_embed.scss @@ -27,13 +27,10 @@ } } -@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-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} { +@each $key, $ratio in $embed-responsive-aspect-ratios { + .embed-responsive-#{$key} { &::before { - padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x); + padding-top: percentage(map-get($ratio, y) / map-get($ratio, x)); } } } diff --git a/site/content/docs/4.3/utilities/embed.md b/site/content/docs/4.3/utilities/embed.md index 7fdb6b943..e744f27c0 100644 --- a/site/content/docs/4.3/utilities/embed.md +++ b/site/content/docs/4.3/utilities/embed.md @@ -48,13 +48,25 @@ Aspect ratios can be customized with modifier classes. By default the following </div> {{< /highlight >}} -Within `_variables.scss`, you can change the aspect ratios you want to use. Here's an example of the `$embed-responsive-aspect-ratios` list: +Within `_variables.scss`, you can change the aspect ratios you want to use. Here's an example of the `$embed-responsive-aspect-ratios` map: {{< highlight scss >}} $embed-responsive-aspect-ratios: ( - (21 9), - (16 9), - (4 3), - (1 1) -) !default; + "21by9": ( + x: 21, + y: 9 + ), + "16by9": ( + x: 16, + y: 9 + ), + "4by3": ( + x: 4, + y: 3 + ), + "1by1": ( + x: 1, + y: 1 + ) +); {{< /highlight >}} |