Allow to add more embed responsive ratios (#25894)
This commit is contained in:
parent
9836a411e8
commit
976efcd5ee
|
@ -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,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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
Loading…
Reference in New Issue