mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-26 06:44:35 +02:00
Code Issues Releases Wiki 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
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);
}
}
}