ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make use of css variables in responsive-video component.

Browse source
This commit is contained in:
Fredrik Jonsson 2023-03-23 19:11:04 +01:00
commit f8f7981f4b
1 changed files with 4 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
assets/sass/components/responsive-video/_responsive-video.scss
View file

@ -9,8 +9,10 @@
.responsive-video, .responsive-video,
%responsive-video { %responsive-video {
--aspect-ratio: 9 / 16; // 16:9 aspect ratio
position: relative; position: relative;
padding-bottom: calc(9 / 16 * 100%); // 16:9 aspect ratio padding-bottom: calc(var(--aspect-ratio) * 100%); // 16:9 aspect ratio
padding-top: 25px; // Height of video controls padding-top: 25px; // Height of video controls
height: 0; height: 0;
@ -27,6 +29,6 @@
} }
&--4-3 { &--4-3 {
padding-bottom: calc(3 / 4 * 100%); // 4:3 aspect ratio --aspect-ratio: 3 / 4; // 4:3 aspect ratio
} }
} }