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