// ————————————– // // tools.intrinsic-ratio // Fluid Embeds and whatever WITH NO JAVASCIPT! // // ————————————–
$intrinsic-ratio: 16 / 9 !default $intrinsic-ratio-width: 100% !default $intrinsic-ratio-elements: “> *” !default $intrinsic-ratio-extend: true !default $intrinsic-ratio-direction: top !default
intrinsic-ratio-parent($extend: $intrinsic-ratio-extend)¶ ↑
@if $extend @extend %intrinsic-ratio-parent @else position: relative height: 0
intrinsic-ratio-child($extend: $intrinsic-ratio-extend)¶ ↑
@if $extend @extend %intrinsic-ratio-child @else display: block position: absolute width: 100% !important // Nuke the external styles height: 100% !important // Nuke the external styles top: 0 margin: 0 padding: 0
intrinsic-ratio-ratio($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $direction: $intrinsic-ratio-direction)¶ ↑
padding-#{$direction}: 1 / $ratio * $width width: $width
intrinsic-ratio($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend, $direction: $intrinsic-ratio-direction)¶ ↑
+intrinsic-ratio-parent($extend) +intrinsic-ratio-ratio($ratio, $width, $direction) @each $element in $elements #{$element} +intrinsic-ratio-child($extend)
ir($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend, $direction: $intrinsic-ratio-direction)¶ ↑
+intrinsic-ratio($ratio, $width, $elements, $extend, $direction)
%intrinsic-ratio-parent
+intrinsic-ratio-parent(false)
%intrinsic-ratio-child
+intrinsic-ratio-child(false)