//////////////////////// // 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; @mixin intrinsic-ratio-parent { position: relative; height: 0; } @mixin intrinsic-ratio-child { display: block; position: absolute; width: 100% !important; // Nuke the external styles height: 100% !important; // Nuke the external styles top: 0; margin: 0; padding: 0; } @mixin intrinsic-ratio($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend) { @if not $extend { @include intrinsic-ratio-parent; } @else { @extend %intrinsic-ratio-parent; } padding-top: (1 / $ratio) * $width; width: $width; @each $element in $elements { #{$element} { @if not $extend { @include intrinsic-ratio-child; } @else { @extend %intrinsic-ratio-child; } } } } %intrinsic-ratio-parent { @include intrinsic-ratio-parent; } %intrinsic-ratio-child { @include intrinsic-ratio-child; }