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

Allow to add more embed responsive ratios (#25894)

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-fade: opacity .15s linear !default;
$transition-collapse: height .35s ease !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 // Fonts
// //

27
scss/utilities/_embed.scss
View File

@ -27,26 +27,13 @@
} }
} }
.embed-responsive-21by9 { @each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios {
&::before { $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1);
padding-top: percentage(9 / 21); $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2);
}
}
.embed-responsive-16by9 { .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
&::before { &::before {
padding-top: percentage(9 / 16); padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
} }
}
.embed-responsive-4by3 {
&::before {
padding-top: percentage(3 / 4);
}
}
.embed-responsive-1by1 {
&::before {
padding-top: percentage(1 / 1);
} }
} }

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
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 %} {% highlight html %}
<!-- 21:9 aspect ratio --> <!-- 21:9 aspect ratio -->
@ -48,3 +48,14 @@ Aspect ratios can be customized with modifier classes.
<iframe class="embed-responsive-item" src="..."></iframe> <iframe class="embed-responsive-item" src="..."></iframe>
</div> </div>
{% endhighlight %} {% 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 %}