// Outputs calculated styles // ------------------------------------------------------------------------------- // @param $width [number] : width // @param $margin-right [number] : right margin // @param $margin-left [number] : left margin // ------------------------------------------------------------------------------- // @output outputs styles @mixin flint-output($width, $margin-right, $margin-left) { width: $width; margin-right: $margin-right; margin-left: $margin-left; @content; } // Calculate widths, save all variables to instance // ------------------------------------------------------------------------------- // @param $calc-key [string] : breakpoint key // @param $calc-span [number] : span value // @param $calc-context [number] : context value // @param $calc-gutter [number] : gutter value // @param $calc-shift [number] : shift value // @param $i [number] : index if variable length is > 1 // ------------------------------------------------------------------------------- // @output calculated styles @mixin flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i: null) { // Default values $output-width: 0; $output-margin-right: 0; $output-margin-left: 0; // Keep track of errors $errors: false; // Default value for cache search result $cached: false; // Check if any arguments are lists if called from loop @if $i != null { @if length($calc-key) > 1 { $calc-key: nth($calc-key, $i); } @if length($calc-span) > 1 { $calc-span: nth($calc-span, $i); } @if length($calc-context) > 1 { $calc-context: nth($calc-context, $i); } @if length($calc-gutter) > 1 { $calc-gutter: nth($calc-gutter, $i); } @if length($calc-shift) > 1 { $calc-shift: nth($calc-shift, $i); } } // Check for cached results @if $calc-context != "auto" and $calc-span != 0 { @if map-has-key($flint__cache-results, "#{$calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i}") { // Get results $output-width: nth(map-get($flint__cache-results, "#{$calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i}"), 1); $output-margin-right: nth(map-get($flint__cache-results, "#{$calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i}"), 2); $output-margin-left: nth(map-get($flint__cache-results, "#{$calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i}"), 3); // Declare successful search $cached: true; } } // Hide if span is zero // ---- @if $calc-span == 0 { // First check if it's the default, so we don't hide the element on all breakpoints @if $calc-key == flint-get-value("settings", "default") { @include _($calc-key) { display: none; } } @else { display: none; } @include flint-new-instance($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $output-width, $output-margin-right, $output-margin-left); @include flint-debug-instance($calc-key); } @else { // Only run through if cache search was unsuccessful @if $cached == false { // Shift, no context // ---- @if $calc-shift != null and $calc-context == null { @if $calc-gutter == null or $calc-gutter == "normal" or $calc-gutter == "default" or $calc-gutter == "regular" and flint-get-value("settings", "gutter") != false { // Save to variables for instance creation $output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span))*2); $output-margin-right: flint-calc-margin($calc-key, $calc-span); $output-margin-left: ( if( $calc-shift > 0, (flint-calc-margin($calc-key, $calc-span)) + (flint-calc-width($calc-key, $calc-shift)), (flint-calc-margin($calc-key, -$calc-span)) + (flint-calc-width($calc-key, $calc-shift)) )); } @else if $calc-gutter == "inside" and flint-get-value("settings", "gutter") != false { $output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span))*4); $output-margin-right: flint-calc-margin($calc-key, $calc-span); $output-margin-left: ( if( $calc-shift > 0, (flint-calc-margin($calc-key, $calc-span)) + (flint-calc-width($calc-key, $calc-shift)), (flint-calc-margin($calc-key, -$calc-span)) + (flint-calc-width($calc-key, $calc-shift)) )); } @else if $calc-gutter == "alpha" or $calc-gutter == "no-left" or $calc-gutter == "first" and flint-get-value("settings", "gutter") != false { $output-width: (flint-calc-width($calc-key, $calc-span)) - (flint-calc-margin($calc-key, $calc-span)); $output-margin-right: flint-calc-margin($calc-key, $calc-span); $output-margin-left: ( if( $calc-shift > 0, flint-calc-width($calc-key, $calc-shift), flint-calc-width($calc-key, $calc-shift) )); } @else if $calc-gutter == "omega" or $calc-gutter == "no-right" or $calc-gutter == "flint-last" and flint-get-value("settings", "gutter") != false { $output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span))); $output-margin-right: 0; $output-margin-left: ( if( $calc-shift > 0, (flint-calc-margin($calc-key, $calc-span)) + (flint-calc-width($calc-key, $calc-shift)), (flint-calc-margin($calc-key, -$calc-span)) + (flint-calc-width($calc-key, $calc-shift)) )); } @else if $calc-gutter == "row" or $calc-gutter == "none" or flint-get-value("settings", "gutter") == false { $output-width: (flint-calc-width($calc-key, $calc-span)); $output-margin-right: 0; $output-margin-left: ( if( $calc-shift > 0, flint-calc-width($calc-key, $calc-shift), flint-calc-width($calc-key, $calc-shift) )); } // Shift, context // ---- } @else if $calc-context != null { // Check if parent instance flint-exists $flint-exists: flint-has-family-instance($calc-key); @if $calc-shift != null { @if $calc-gutter == null or $calc-gutter == "normal" or $calc-gutter == "default" or $calc-gutter == "regular" and flint-get-value("settings", "gutter") != false { // Check if context is set to auto @if $calc-context == "auto" { // Does parent exist? @if $flint-exists != false { @if flint-get-value("settings", "grid") == "fluid" { // Get parent span value $output-width: (flint-calc-width($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))*2); $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))); $output-margin-left: ( if( $calc-shift > 0, (flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))), (flint-calc-margin($calc-key, -$calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))) )); } @else if flint-get-value("settings", "grid") == "fixed" { // Get parent width instead of parent span for fixed grids $output-width: (flint-to-number(flint-get-instance-value($calc-key, "output", "width")) / flint-to-number(flint-get-instance-value($calc-key, "span")) * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))*2); $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))); $output-margin-left: ( if( $calc-shift > 0, (flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))), (flint-calc-margin($calc-key, -$calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))) )); } } @else { // Else warn that context should not be set to `auto` @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`"; // Throw error $errors: true; } // Output styles normally if not set to auto } @else { $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - ((flint-calc-margin($calc-key, $calc-span, $calc-context))*2); $output-margin-right: flint-calc-margin($calc-key, $calc-span, $calc-context); $output-margin-left: ( if( $calc-shift > 0, (flint-calc-margin($calc-key, $calc-span, $calc-context)) + (flint-calc-width($calc-key, $calc-shift, $calc-context)), (flint-calc-margin($calc-key, -$calc-span, $calc-context)) + (flint-calc-width($calc-key, $calc-shift, $calc-context)) )); } } @else if $calc-gutter == "inside" and flint-get-value("settings", "gutter") != false { @if $calc-context == "auto" { @if $flint-exists != false { @if flint-get-value("settings", "grid") == "fluid" { $output-width: (flint-calc-width($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))*4); $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))); $output-margin-left: ( if( $calc-shift > 0, (flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))), (flint-calc-margin($calc-key, -$calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))) )); } @else if flint-get-value("settings", "grid") == "fixed" { $output-width: (flint-to-number(flint-get-instance-value($calc-key, "output", "width")) / flint-to-number(flint-get-instance-value($calc-key, "span")) * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))*4); $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))); $output-margin-left: ( if( $calc-shift > 0, (flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))), (flint-calc-margin($calc-key, -$calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))) )); } } @else { // Else warn that context should not be set to `auto` @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`"; $errors: true; } // Output styles normally if not set to auto } @else { $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - ((flint-calc-margin($calc-key, $calc-span, $calc-context))*2); $output-margin-right: flint-calc-margin($calc-key, $calc-span, $calc-context); $output-margin-left: ( if( $calc-shift > 0, (flint-calc-margin($calc-key, $calc-span, $calc-context)) + (flint-calc-width($calc-key, $calc-shift, $calc-context)), (flint-calc-margin($calc-key, -$calc-span, $calc-context)) + (flint-calc-width($calc-key, $calc-shift, $calc-context)) )); } } @else if $calc-gutter == "alpha" or $calc-gutter == "no-left" or $calc-gutter == "first" and flint-get-value("settings", "gutter") != false { @if $calc-context == "auto" { @if $flint-exists != false { @if flint-get-value("settings", "grid") == "fluid" { $output-width: (flint-calc-width($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) - (flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))); $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))); $output-margin-left: ( if( $calc-shift > 0, flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span"))), flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span"))) )); } @else if flint-get-value("settings", "grid") == "fixed" { $output-width: (flint-to-number(flint-get-instance-value($calc-key, "output", "width")) / flint-to-number(flint-get-instance-value($calc-key, "span")) * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))); $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))); $output-margin-left: ( if( $calc-shift > 0, flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span"))), flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span"))) )); } } @else { @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`"; $errors: true; } } @else { $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - (flint-calc-margin($calc-key, $calc-span, $calc-context)); $output-margin-right: flint-calc-margin($calc-key, $calc-span, $calc-context); $output-margin-left: ( if( $calc-shift > 0, flint-calc-width($calc-key, $calc-shift, $calc-context), flint-calc-width($calc-key, $calc-shift, $calc-context) )); } } @else if $calc-gutter == "omega" or $calc-gutter == "no-right" or $calc-gutter == "flint-last" and flint-get-value("settings", "gutter") != false { @if $calc-context == "auto" { @if $flint-exists != false { @if flint-get-value("settings", "grid") == "fluid" { $output-width: (flint-calc-width($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))); $output-margin-right: 0; $output-margin-left: ( if( $calc-shift > 0, (flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))), (flint-calc-margin($calc-key, -$calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))) )); } @else if flint-get-value("settings", "grid") == "fixed" { $output-width: (flint-to-number(flint-get-instance-value($calc-key, "output", "width")) / flint-to-number(flint-get-instance-value($calc-key, "span")) * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))); $output-margin-right: 0; $output-margin-left: ( if( $calc-shift > 0, (flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))), (flint-calc-margin($calc-key, -$calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) + (flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span")))) )); } } @else { @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`"; $errors: true; } } @else { $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - ((flint-calc-margin($calc-key, $calc-span, $calc-context))); $output-margin-right: 0; $output-margin-left: ( if( $calc-shift > 0, (flint-calc-margin($calc-key, $calc-span, $calc-context)) + (flint-calc-width($calc-key, $calc-shift, $calc-context)), (flint-calc-margin($calc-key, -$calc-span, $calc-context)) + (flint-calc-width($calc-key, $calc-shift, $calc-context)) )); } } @else if $calc-gutter == "row" or $calc-gutter == "none" or flint-get-value("settings", "gutter") == false { @if $calc-context == "auto" { @if $flint-exists != false { @if flint-get-value("settings", "grid") == "fluid" { $output-width: (flint-calc-width($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))); $output-margin-right: 0; $output-margin-left: ( if( $calc-shift > 0, flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span"))), flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span"))) )); } @else if flint-get-value("settings", "grid") == "fixed" { $output-width: (flint-to-number(flint-get-instance-value($calc-key, "output", "width")) / flint-to-number(flint-get-instance-value($calc-key, "span")) * $calc-span); $output-margin-right: 0; $output-margin-left: ( if( $calc-shift > 0, flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span"))), flint-calc-width($calc-key, $calc-shift, flint-to-number(flint-get-instance-value($calc-key, "span"))) )); } } @else { @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`"; $errors: true; } } @else { $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)); $output-margin-right: 0; $output-margin-left: ( if( $calc-shift > 0, flint-calc-width($calc-key, $calc-shift, $calc-context), flint-calc-width($calc-key, $calc-shift, $calc-context) )); } } // Context, no shift // ---- } @else { @if $calc-gutter == null or $calc-gutter == "normal" or $calc-gutter == "default" or $calc-gutter == "regular" and flint-get-value("settings", "gutter") != false { @if $calc-context == "auto" { @if $flint-exists != false { @if flint-get-value("settings", "grid") == "fluid" { $output-width: (flint-calc-width($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))*2); $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))); $output-margin-left: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))); } @else if flint-get-value("settings", "grid") == "fixed" { $output-width: (flint-to-number(flint-get-instance-value($calc-key, "output", "width")) / flint-to-number(flint-get-instance-value($calc-key, "span")) * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))*2); $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))); $output-margin-left: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))); } } @else { @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`"; $errors: true; } } @else { $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - ((flint-calc-margin($calc-key, $calc-span, $calc-context))*2); $output-margin-right: flint-calc-margin($calc-key, $calc-span, $calc-context); $output-margin-left: flint-calc-margin($calc-key, $calc-span, $calc-context); } } @else if $calc-gutter == "inside" and flint-get-value("settings", "gutter") != false { @if $calc-context == "auto" { @if $flint-exists != false { @if flint-get-value("settings", "grid") == "fluid" { $output-width: (flint-calc-width($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))*4); $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))); $output-margin-left: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))); } @else if flint-get-value("settings", "grid") == "fixed" { $output-width: (flint-to-number(flint-get-instance-value($calc-key, "output", "width")) / flint-to-number(flint-get-instance-value($calc-key, "span")) * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))*4); $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))); $output-margin-left: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))); } } @else { @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`"; $errors: true; } } @else { $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - ((flint-calc-margin($calc-key, $calc-span, $calc-context))*2); $output-margin-right: flint-calc-margin($calc-key, $calc-span, $calc-context); $output-margin-left: flint-calc-margin($calc-key, $calc-span, $calc-context); } } @else if $calc-gutter == "alpha" or $calc-gutter == "no-left" or $calc-gutter == "first" and flint-get-value("settings", "gutter") != false { @if $calc-context == "auto" { @if $flint-exists != false { @if flint-get-value("settings", "grid") == "fluid" { $output-width: (flint-calc-width($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) - (flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))); $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))); $output-margin-left: 0; } @else if flint-get-value("settings", "grid") == "fixed" { $output-width: (flint-to-number(flint-get-instance-value($calc-key, "output", "width")) / flint-to-number(flint-get-instance-value($calc-key, "span")) * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))); $output-margin-right: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))); $output-margin-left: 0; } } @else { @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`"; $errors: true; } } @else { $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - (flint-calc-margin($calc-key, $calc-span, $calc-context)); $output-margin-right: flint-calc-margin($calc-key, $calc-span, $calc-context); $output-margin-left: 0; } } @else if $calc-gutter == "omega" or $calc-gutter =="no-right" or $calc-gutter == "flint-last" and flint-get-value("settings", "gutter") != false { @if $calc-context == "auto" { @if $flint-exists != false { @if flint-get-value("settings", "grid") == "fluid" { $output-width: (flint-calc-width($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))) - (flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span")))); $output-margin-right: 0; $output-margin-left: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))); } @else if flint-get-value("settings", "grid") == "fixed" { $output-width: (flint-to-number(flint-get-instance-value($calc-key, "output", "width")) / flint-to-number(flint-get-instance-value($calc-key, "span")) * $calc-span) - ((flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))))); $output-margin-right: 0; $output-margin-left: flint-calc-margin($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))); } } @else { @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`"; $errors: true; } } @else { $output-width: (flint-calc-width($calc-key, $calc-span, $calc-context)) - (flint-calc-margin($calc-key, $calc-span, $calc-context)); $output-margin-right: 0; $output-margin-left: flint-calc-margin($calc-key, $calc-span, $calc-context); } } @else if $calc-gutter == "row" or $calc-gutter == "none" or flint-get-value("settings", "gutter") == false { @if $calc-context == "auto" { @if $flint-exists != false { @if flint-get-value("settings", "grid") == "fluid" { $output-width: flint-calc-width($calc-key, $calc-span, flint-to-number(flint-get-instance-value($calc-key, "span"))); $output-margin-right: 0; $output-margin-left: 0; } @else if flint-get-value("settings", "grid") == "fixed" { $output-width: (flint-to-number(flint-get-instance-value($calc-key, "output", "width")) / flint-to-number(flint-get-instance-value($calc-key, "span")) * $calc-span); $output-margin-right: 0; $output-margin-left: 0; } } @else { @warn "You set context to `#{$calc-context}`, but a parent instance could not be found for `#{selector_string()}`"; $errors: true; } } @else { $output-width: flint-calc-width($calc-key, $calc-span, $calc-context); $output-margin-right: 0; $output-margin-left: 0; } } } // No context // ---- } @else { @if $calc-gutter == null or $calc-gutter == "normal" or $calc-gutter == "default" or $calc-gutter == "regular" and flint-get-value("settings", "gutter") != false { $output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span))*2); $output-margin-right: flint-calc-margin($calc-key, $calc-span); $output-margin-left: flint-calc-margin($calc-key, $calc-span); } @else if $calc-gutter == "inside" and flint-get-value("settings", "gutter") != false { $output-width: (flint-calc-width($calc-key, $calc-span)) - ((flint-calc-margin($calc-key, $calc-span))*4); $output-margin-right: flint-calc-margin($calc-key, $calc-span); $output-margin-left: flint-calc-margin($calc-key, $calc-span); } @else if $calc-gutter == "alpha" or $calc-gutter == "no-left" or $calc-gutter == "first" and flint-get-value("settings", "gutter") != false { $output-width: (flint-calc-width($calc-key, $calc-span)) - (flint-calc-margin($calc-key, $calc-span)); $output-margin-right: flint-calc-margin($calc-key, $calc-span); $output-margin-left: 0; } @else if $calc-gutter == "omega" or $calc-gutter == "no-right" or $calc-gutter == "flint-last" and flint-get-value("settings", "gutter") != false { $output-width: (flint-calc-width($calc-key, $calc-span)) - (flint-calc-margin($calc-key, $calc-span)); $output-margin-right: 0; $output-margin-left: flint-calc-margin($calc-key, $calc-span); } @else if $calc-gutter == "row" or $calc-gutter == "none" or flint-get-value("settings", "gutter") == false { $output-width: flint-calc-width($calc-key, $calc-span); $output-margin-right: 0; $output-margin-left: 0; } } } // Make sure there are no errors // ---- @if $errors == false { // Cache result @if $calc-context != "auto" and $calc-span != 0 and $cached == false { $flint__cache-results: map-merge($flint__cache-results, ( "#{$calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i}": ($output-width, $output-margin-right, $output-margin-left) )) !global; } // Output styles @include flint-output($output-width, $output-margin-right, $output-margin-left) { @content; } // Create new instance @include flint-new-instance($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $output-width, $output-margin-right, $output-margin-left); // If debug mode, print instance @include flint-debug-instance($calc-key); } } }