kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Switch from list to map for responsive embeds (#28678)

This commit is contained in:
Martijn Cuppens 2019-05-05 09:41:27 +02:00 committed by XhmikosR
parent be2ad67786
commit a776cc473d
3 changed files with 38 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
scss/_variables.scss
View File

@ -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
);

9
scss/utilities/_embed.scss
View File

@ -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));
}
}
}

24
site/content/docs/4.3/utilities/embed.md
View File

@ -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 >}}