//////////////////////// // Fluid Embeds and whatever WITH NO JAVASCIPT! //////////////////////// @mixin intrinsic-ratio-parent($extend: null) { $extend: if($extend != null, $extend, toolkit-get('intrinsic ratio extend')); @if $extend { @extend %intrinsic-ratio-parent; } @else { position: relative; height: 0; } } @mixin intrinsic-ratio-child($extend: null) { $extend: if($extend != null, $extend, toolkit-get('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; } } @mixin intrinsic-ratio-ratio($ratio: null, $width: null, $direction: null) { $ratio: if($ratio != null, $ratio, toolkit-get('intrinsic ratio')); $width: if($width != null, $width, toolkit-get('intrinsic ratio width')); $direction: if($direction != null, $direction, toolkit-get('intrinsic ratio direction')); padding-#{$direction}: (1 / $ratio) * $width; width: $width; } @mixin intrinsic-ratio($ratio: null, $width: null, $elements: null, $direction: null, $extend: null) { $ratio: if($ratio != null, $ratio, toolkit-get('intrinsic ratio')); $width: if($width != null, $width, toolkit-get('intrinsic ratio width')); $elements: if($elements != null, $elements, toolkit-get('intrinsic ratio elements')); $direction: if($direction != null, $direction, toolkit-get('intrinsic ratio direction')); $extend: if($extend != null, $extend, toolkit-get('intrinsic ratio extend')); @include intrinsic-ratio-parent($extend); @include intrinsic-ratio-ratio($ratio, $width, $direction); @each $element in $elements { #{$element} { @include intrinsic-ratio-child($extend); } } } @mixin ir($ratio: null, $width: null, $elements: null, $direction: null, $extend: null) { @include intrinsic-ratio($ratio, $width, $elements, $extend, $direction); } %intrinsic-ratio-parent { @include intrinsic-ratio-parent(false); } %intrinsic-ratio-child { @include intrinsic-ratio-child(false); }