rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

Allow to add more embed responsive ratios (#25894)

Browse Source
This commit is contained in:
Martijn Cuppens 2018-11-11 10:04:04 +01:00 committed by XhmikosR
parent 9836a411e8
commit 976efcd5ee
3 changed files with 30 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
scss/_variables.scss
View File

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

27
scss/utilities/_embed.scss
View File

@ -27,26 +27,13 @@
}
}
.embed-responsive-21by9 {
&::before {
padding-top: percentage(9 / 21);
}
}
@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-16by9 {
&::before {
padding-top: percentage(9 / 16);
}
}
.embed-responsive-4by3 {
&::before {
padding-top: percentage(3 / 4);
}
}
.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);
}
}
}

13
site/docs/4.1/utilities/embed.md
View File

@ -25,7 +25,7 @@ Wrap any embed like an `<iframe>` in a parent element with `.embed-responsive` a
## Aspect ratios
Aspect ratios can be customized with modifier classes.
Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:
{% highlight html %}
<!-- 21:9 aspect ratio -->
@ -48,3 +48,14 @@ Aspect ratios can be customized with modifier classes.
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
{% endhighlight %}
Within `_variables.scss`, you can change the aspect ratios you want to use. Here's an example of the `$embed-responsive-aspect-ratios` list:
{% highlight scss %}
$embed-responsive-aspect-ratios: (
(21 9),
(16 9),
(3 4),
(1 1)
) !default;
{% endhighlight %}