Skip to content
Snippets Groups Projects
Commit 1406a9be authored by sebousan's avatar sebousan
Browse files

add aspect-ratio mixin

parent 4d45a47f
No related branches found
No related tags found
No related merge requests found
......@@ -90,3 +90,20 @@
z-index: $zindex-stretched-link
content: ""
@mixin aspect-ratio($width, $height, $tag: 'iframe')
#{$tag}
aspect-ratio: #{$width}/#{$height}
display: block
width: 100%
@supports not (aspect-ratio: 1)
position: relative
&::before
content: ''
padding-top: ($height / $width) * 100%
width: 100%
#{$tag}
bottom: 0
left: 0
position: absolute
right: 0
top: 0
// .block-video
// iframe
// aspect-ratio: 16/9
// display: block
// width: 100%
/* TODO : https://developer.mozilla.org/fr/docs/Web/HTML/Element/details */
// @supports not (aspect-ratio: 16/9)
// .video
// position: relative
// &::before
// content: ''
// display: block
// padding-top: 56.25%
// iframe
// bottom: 0
// height: 100%
// left: 0
// position: absolute
// top: 0
// width: 100%
.block-video
.video
@include aspect-ratio(16, 9, 'iframe')
// @include media-breakpoint-down(md)
// .container
// padding-left: 0
// padding-right: 0
// .transcription
// padding-left: $grid-gutter-width
// padding-right: $grid-gutter-width
// @include media-breakpoint-up(md)
// @include in-page-without-aside
// .block-content
// @include make-row()
// > *
// @include make-col-ready()
// @include make-col(8)
// @include make-col-offset(2)
// @include media-breakpoint-up(md)
// @include in-page-without-aside
// .block-content
// @include make-row()
// > *
// @include make-col-ready()
// @include make-col(8)
// @include make-col-offset(2)
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment