@mixin output-isolation($span, $location, $columns, $gutter, $options: false) { $gutter: find-gutter($gutter); $gutter-span: gutter-span($gutter, $columns); $end-row: end-row($span, $location, $columns); $start-row: start-row($location); $gutter-style: find-gutter-style(); $fixed-gutter: fixed-gutter($columns, $gutter); $gutter-property: gutter-property($columns, $gutter); $split: index($gutter-style, split); $margin-span: column-span(($location - 1), 1, $columns, $gutter, $gutter-style); @if not $fixed-gutter { $margin-span: $margin-span + $gutter-span; } @if $direction == 'ltr' or $direction == 'both' { // Set the CSS direction to ltr $cssdir: 'ltr'; // Find the CSS named direction and opposite direction $dir: named-direction($cssdir); $opp: opposite-direction($dir); width: column-span($span, $location, $columns, $gutter, $gutter-style); // If we are at the last item in the row, we float it the opposite direction @if ($end-row) { float: $opp; margin-#{$dir}: 0; @if $split and not $fixed-gutter { #{$gutter-property}-#{$opp}: $gutter-span / 2; } @else { margin-#{$opp}: 0; } } @else { float: $dir; margin-#{$opp}: -100%; @if $start-row { @if $split and not $fixed-gutter { margin-#{$dir}: $gutter-span / 2; } @else { margin-#{$dir}: 0%; } } @else { @if $split and not $fixed-gutter { margin-#{$dir}: $margin-span + $gutter-span / 2; } @else { margin-#{$dir}: $margin-span; } } } // If options are set, we clear to that option, otherwise no clear! @if ($options) { clear: unquote($options); } @else { clear: none; } @if $fixed-gutter { @if index($gutter-style, split) { #{$gutter-property}-#{$dir}: $gutter-span / 2; #{$gutter-property}-#{$opp}: $gutter-span / 2; } @else { #{$gutter-property}-#{$opp}: $gutter-span; } } } @if $direction == 'rtl' or $direction == 'both' { // Set the CSS direction to ltr $cssdir: 'rtl'; // Find the CSS named direction and opposite direction $dir: named-direction($cssdir); $opp: opposite-direction($dir); [dir="#{$cssdir}"] & { // If we are at the last item in the row, we float it the opposite direction @if ($end-row) { float: $opp; margin-#{$dir}: 0; @if $split and not $fixed-gutter { #{$gutter-property}-#{$opp}: $gutter-span / 2; } @else { margin-#{$opp}: 0; } } @else { float: $dir; margin-#{$opp}: -100%; @if $start-row { @if $split and not $fixed-gutter { margin-#{$dir}: $gutter-span / 2; } @else { margin-#{$dir}: 0%; } } @else { @if $split and not $fixed-gutter { margin-#{$dir}: $margin-span + $gutter-span / 2; } @else { margin-#{$dir}: $margin-span; } } } // If options are set, we clear to that option, otherwise no clear! @if ($options) { clear: unquote($options); } @else { clear: none; } @if $fixed-gutter { @if $direction == 'rtl' { @if index($gutter-style, split) { #{$gutter-property}-#{$dir}: $gutter-span / 2; #{$gutter-property}-#{$opp}: $gutter-span / 2; } @else { #{$gutter-property}-#{$opp}: $gutter-span; } } @else if not index($gutter-style, split) { #{$gutter-property}-#{$opp}: $gutter-span; } } } } @include span-shared; } @mixin push-isolation($span, $location, $columns: false, $gutter: false) { @include push-float($span, $location, $columns, $gutter); } @mixin pull-isolation($span, $location, $columns: false, $gutter: false) { @include pull-float($span, $location, $columns, $gutter); } ////////////////////////////// // Happy Syntax for Isolation // // Makes working with Isolation easier, as it moves Clear to a 1st class citizen of the mixin, and automatically builds the verbose grid-span mixin call ////////////////////////////// @mixin isolation-span($span, $location, $clear: false, $grid: false, $gutter: false) { @include grid-span($span, $location, $grid, $gutter, 'isolation', $clear); }