mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-11 08:04:59 +02:00
Code Issues Releases Wiki Activity

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

Browse Source
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
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; $embed-responsive-aspect-ratios: () !default;
// stylelint-disable-next-line scss/dollar-variable-default // stylelint-disable-next-line scss/dollar-variable-default
$embed-responsive-aspect-ratios: join( $embed-responsive-aspect-ratios: map-merge(
( (
(21 9), "21by9": (
(16 9), x: 21,
(4 3), y: 9
(1 1), ),
"16by9": (
x: 16,
y: 9
),
"4by3": (
x: 4,
y: 3
),
"1by1": (
x: 1,
y: 1
)
), ),
$embed-responsive-aspect-ratios $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 { @each $key, $ratio in $embed-responsive-aspect-ratios {
$embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1); .embed-responsive-#{$key} {
$embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2);
.embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
&::before { &::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> </div>
{{< /highlight >}} {{< /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 >}} {{< highlight scss >}}
$embed-responsive-aspect-ratios: ( $embed-responsive-aspect-ratios: (
(21 9), "21by9": (
(16 9), x: 21,
(4 3), y: 9
(1 1) ),
) !default; "16by9": (
x: 16,
y: 9
),
"4by3": (
x: 4,
y: 3
),
"1by1": (
x: 1,
y: 1
)
);
{{< /highlight >}} {{< /highlight >}}