stylesheets/toolkit/_intrinsic-ratio.scss in toolkit-2.0.0.alpha.10 vs stylesheets/toolkit/_intrinsic-ratio.scss in toolkit-2.0.0

- old
+ new

@@ -2,24 +2,28 @@ // 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; + @if $extend { + @include toolkit-placeholder('intrinsic ratio parent') { + @include intrinsic-ratio-parent(false); } - @else { - position: relative; - height: 0; - } + } + @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; + @include toolkit-placeholder('intrinsic ratio child') { + @include intrinsic-ratio-child(false); + } } @else { display: block; position: absolute; width: 100% !important; // Nuke the external styles @@ -31,21 +35,23 @@ } @mixin intrinsic-ratio-ratio($ratio: null, $width: null, $position: null) { $ratio: if($ratio != null, $ratio, toolkit-get('intrinsic ratio')); $width: if($width != null, $width, toolkit-get('intrinsic ratio width')); - $position: if($position != null, $position, toolkit-get('intrinsic ratio direction')); + $position: if($position != null, $position, toolkit-get('intrinsic ratio position')); + padding-#{$position}: (1 / $ratio) * $width; width: $width; } @mixin intrinsic-ratio($ratio: null, $width: null, $elements: null, $position: 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')); - $position: if($position != null, $position, toolkit-get('intrinsic ratio direction')); + $position: if($position != null, $position, toolkit-get('intrinsic ratio position')); $extend: if($extend != null, $extend, toolkit-get('intrinsic ratio extend')); + @include intrinsic-ratio-parent($extend); @include intrinsic-ratio-ratio($ratio, $width, $position); @each $element in $elements { @@ -55,14 +61,6 @@ } } @mixin ir($ratio: null, $width: null, $elements: null, $position: null, $extend: null) { @include intrinsic-ratio($ratio, $width, $elements, $extend, $position); -} - -%intrinsic-ratio-parent { - @include intrinsic-ratio-parent(false); -} - -%intrinsic-ratio-child { - @include intrinsic-ratio-child(false); } \ No newline at end of file