@mixin _( $key: NULL, $span: NULL, $context: NULL, $gutter: NULL, $shift: NULL ) { // Foundation check // ------------------------------------------------------------------------------- // @param $key [Value] : checks if key is a foundation or container instance // ------------------------------------------------------------------------------- // @output [Foundation] | container @if $key == "foundation" { // apply global border-box-sizing if true @if get-value(settings, border-box-sizing) == true { $flint__foundation: "existant" !global; } // foundation is now globally existant @if $flint__foundation == "existant" { @at-root *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; @content; } } } @else if $key == "clear" { @include clearfix(); } @else if $key == "container" or exists($flint, $key) and $span != NULL or length($key) == 1 and exists($flint, $key) == false or length($span) > 1 or length($key) > 1 and is-not-string(nth($key, 1)) and is-not-string(nth($key, 2)) { // only apply display rule if the key is the default @if is-default($key) or $key == "container" { display: block; } @else if length($key) > 1 or is-not-string($key) { @for $i from 1 through length($flint__all__keys) { $calcKey: steal-key($i); @if is-default($calcKey) { display: block; } } } // apply individually if foundation is not set globally, but is set to true in config @if get-value(settings, border-box-sizing) == true and $flint__foundation == "nonexistant" { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; // warn to either set a global foundation, or turn border-box-sizing off @if global-variable-exists(global-foundation-is-set) == false { @warn "Global foundation is #{$flint__foundation}. To avoid repeated box-sizing incidents, set a global flint(foundation) rule, or turn border-box-sizing to false in your config file."; // declare global variable so only a single warning prints out $global-foundation-is-set: true !global; } } // check if center container is set to true @if $key == "container" { float: none; // check if max-width is set @if get-value(settings, max-width) { max-width: max(get-all-breakpoints()...); } @else if is-number(get-value(settings, max-width)) { max-width: get-value(settings, max-width); } @if get-value(settings, center-container) { margin-right: auto; margin-left: auto; } @else { margin-right: 0; margin-left: 0; } } @else { @if is-default($key) { float: unquote(get-value(settings, float-style)); } @else if length($key) > 1 or is-not-string($key) { @for $i from 1 through length($flint__all__keys) { $calcKey: steal-key($i); @if is-default($calcKey) { float: unquote(get-value(settings, float-style)); } } } } } // Recursive shorthand without context // ------------------------------------------------------------------------------- // @param $span [Value] : span // ------------------------------------------------------------------------------- // @output [Styles...] @if is-number($key) and length($key) == 1 or $key == "container" { @if $key == "container" { @if get-value(settings, grid) == "fixed" { @for $i from 1 through length($flint__all__keys) { $calcKey: steal-key($i); $calcSpan: $key; $calcContext: $span; $calcGutter: $gutter; $calcShift: $shift; @if is-default($calcKey) { width: calc-width($calcKey, $calcSpan); @content; } @else { @if is-highest-breakpoint($calcKey) { @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) { width: calc-width($calcKey, $calcSpan); @content; } } @else { @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) and ( max-width: (calc-breakpoint(prev, $calcKey, $i) - 1) ) { width: calc-width($calcKey, $calcSpan); @content; } } } } } } @else { @if length($key) == 1 and $span == NULL { @for $i from 1 through length($flint__all__keys) { $calcKey: steal-key($i); $calcSpan: $key; $calcContext: $span; $calcGutter: $gutter; $calcShift: $shift; @if is-default($calcKey) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } @else { @if get-value(settings, grid) == "fluid" { @if is-highest-breakpoint($calcKey) { @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + 1) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } } @else { @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, $i) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } } } @else if get-value(settings, grid) == "fixed" { @if is-highest-breakpoint($calcKey) { @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } } @else { @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) and ( max-width: (calc-breakpoint(prev, $calcKey, $i) - 1) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } } } } } // Recursive shorthand with identical context // ------------------------------------------------------------------------------- // @param $span [Value] : span // @param $context [Value] : context of span // ------------------------------------------------------------------------------- // @output [Styles...] } @else if length($key) == 1 and length($span) == 1 { @for $i from 1 through length($flint__all__keys) { $calcKey: steal-key($i); $calcSpan: $key; $calcContext: $span; $calcGutter: $gutter; $calcShift: $shift; @if is-default($calcKey) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } @else { @if get-value(settings, grid) == "fluid" { @if is-highest-breakpoint($calcKey) { @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + 1) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } } @else { @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, $i) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } } } @else if get-value(settings, grid) == "fixed" { @if is-highest-breakpoint($calcKey) { @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } } @else { @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) and ( max-width: (calc-breakpoint(prev, $calcKey, $i) - 1) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } } } } } // Recursive shorthand with differing context // ------------------------------------------------------------------------------- // @param $span [Value] : span // @param $context [Values...] : context of span for each breakpoint // ------------------------------------------------------------------------------- // @output [Styles...] } @else if length($key) == 1 and length($span) > 1 { @for $i from 1 through length($flint__all__keys) { $calcKey: steal-key($i); $calcSpan: $key; $calcContext: $span; $calcGutter: $gutter; $calcShift: $shift; @if is-default($calcKey) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } @else { @if get-value(settings, grid) == "fluid" { @if is-highest-breakpoint($calcKey) { @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + 1) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } } @else { @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, $i) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } } } @else if get-value(settings, grid) == "fixed" { @if is-highest-breakpoint($calcKey) { @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } } @else { @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) and ( max-width: (calc-breakpoint(prev, $calcKey, $i) - 1) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } } } } } } } } // Variable shorthand // ------------------------------------------------------------------------------- // @param $span [Values...] : span for each breakpoint // ------------------------------------------------------------------------------- // @output [Styles...] @if length($key) > 1 and $span == NULL and is-not-string(nth($key, 1)) and is-not-string(nth($key, 2)) { @for $i from 1 through length($flint__all__keys) { $calcKey: steal-key($i); $calcSpan: $key; $calcContext: $context; $calcGutter: $gutter; $calcShift: $shift; @if is-default($calcKey) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } @else { @if get-value(settings, grid) == "fluid" { @if is-highest-breakpoint($calcKey) { @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + 1) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } } @else { @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, $i) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } } } @else if get-value(settings, grid) == "fixed" { @if is-highest-breakpoint($calcKey) { @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } } @else { @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) and ( max-width: (calc-breakpoint(prev, $calcKey, $i) - 1) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } } } } } // Variable shorthand with context // ------------------------------------------------------------------------------- // @param $span [Values...] : span for each breakpoint // @param $context [Values...] : context for each breakpoint // ------------------------------------------------------------------------------- // @output [Styles...] } @else if length($key) > 1 and length($span) >= 1 and is-not-string(nth($key, 1)) and is-not-string(nth($key, 2)) { @for $i from 1 through length($flint__all__keys) { $calcKey: steal-key($i); $calcSpan: $key; $calcContext: $span; $calcGutter: $gutter; $calcShift: $shift; @if is-default($calcKey) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } @else { @if get-value(settings, grid) == "fluid" { @if is-highest-breakpoint($calcKey) { @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + 1) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } } @else { @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, $i) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, $i) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } } } @else if get-value(settings, grid) == "fixed" { @if is-highest-breakpoint($calcKey) { @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } } @else { @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, $i) ) and ( max-width: (calc-breakpoint(prev, $calcKey, $i) - 1) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i) { @content; } } } } } } // Call by key // ------------------------------------------------------------------------------- // @param $key [Breakpoint] : breakpoint key // @param $span [Value] : span // ------------------------------------------------------------------------------- // @output [Styles...] } @else if exists($flint, $key) and $span != NULL and $context == NULL { $calcKey: $key; $calcSpan: $span; $calcContext: $context; $calcGutter: $gutter; $calcShift: $shift; @if is-default($calcKey) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) { @content; } } @else { @if get-value(settings, grid) == "fluid" { @if is-highest-breakpoint($calcKey) { @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, get-index($calcKey)) + 1) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) { @content; } } } @else { @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, get-index($calcKey)) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) { @content; } } } } @else if get-value(settings, grid) == "fixed" { @if is-highest-breakpoint($calcKey) { @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) { @content; } } } @else { @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint(prev, $calcKey, get-index($calcKey)) - 1) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) { @content; } } } } } // Call by key with context // ------------------------------------------------------------------------------- // @param $key [Breakpoint] : breakpoint key // @param $span [Value] : span // @param $context [Value] : context of span // ------------------------------------------------------------------------------- // @output [Styles...] } @else if exists($flint, $key) and $span != NULL and $context != NULL { $calcKey: $key; $calcSpan: $span; $calcContext: $context; $calcGutter: $gutter; $calcShift: $shift; @if is-default($calcKey) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) { @content; } } @else { @if get-value(settings, grid) == "fluid" { @if is-highest-breakpoint($calcKey) { @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, get-index($calcKey)) + 1) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) { @content; } } } @else { @media only screen and ( min-width: (calc-breakpoint(next, $calcKey, get-index($calcKey)) + if(is-lowest-breakpoint($calcKey), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) { @content; } } } } @else if get-value(settings, grid) == "fixed" { @if is-highest-breakpoint($calcKey) { @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) { @content; } } } @else { @media only screen and ( min-width: calc-breakpoint(alias, $calcKey, get-index($calcKey)) ) and ( max-width: (calc-breakpoint(prev, $calcKey, get-index($calcKey)) - 1) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift) { @content; } } } } } // Wrap @content in media queries // ------------------------------------------------------------------------------- // @param $key [Values...] : defines how o make up media query // @param ["from $x to $y"] | ["greater than $x"] | ["less than $x"] | ["for $x $y $z"] // ------------------------------------------------------------------------------- // @output [Media Query] } @else if exists($flint, $key) and $span == NULL and $context == NULL or length($key) > 1 { // only key-x breakpoint @if length($key) == 1 { @if get-value(settings, grid) == "fluid" { @if is-highest-breakpoint($key) == true { @media only screen and ( min-width: (calc-breakpoint(next, $key, get-index($key)) + 1) ) { @content; } } @else { @media only screen and ( min-width: (calc-breakpoint(next, $key, get-index($key)) + if(is-lowest-breakpoint($key), 0, 1)) ) and ( max-width: calc-breakpoint(alias, $key, get-index($key)) ) { @content; } } } @else if get-value(settings, grid) == "fixed" { @if is-highest-breakpoint($key) == true { @media only screen and ( min-width: calc-breakpoint(alias, $key, get-index($key)) ) { @content; } } @else { @media only screen and ( min-width: calc-breakpoint(alias, $key, get-index($key)) ) and ( max-width: (calc-breakpoint(prev, $key, get-index($key)) - 1) ) { @content; } } } // from key breakpoint to infinity } @else if length($key) > 1 and nth($key, 1) == "from" and nth($key, 3) == "to" and nth($key, 4) == "infinity" { @if get-value(settings, grid) == "fluid" { @media only screen and ( min-width: (calc-breakpoint(next, nth($key, 2), get-index(nth($key, 2))) + if(is-lowest-breakpoint(nth($key, 2)), 0, 1)) ) { @content; } } @else if get-value(settings, grid) == "fixed" { @media only screen and ( min-width: calc-breakpoint(alias, nth($key, 2), get-index(nth($key, 2))) ) { @content; } } // from key-x breakpoint to key-y breakpoint } @else if length($key) > 1 and nth($key, 1) == "from" and nth($key, 3) == "to" { @if get-value(settings, grid) == "fluid" { @media only screen and ( min-width: (calc-breakpoint(next, nth($key, 2), get-index(nth($key, 2))) + if(is-lowest-breakpoint(nth($key, 2)), 0, 1)) ) and ( max-width: calc-breakpoint(alias, nth($key, 4), get-index(nth($key, 4))) ) { @content; } } @else if get-value(settings, grid) == "fixed" { @media only screen and ( min-width: calc-breakpoint(alias, nth($key, 2), get-index(nth($key, 2))) ) and ( max-width: (calc-breakpoint(prev, nth($key, 4), get-index(nth($key, 4))) - if(is-highest-breakpoint(nth($key, 4)), 0, 1)) ) { @content; } } // greater than key-x breakpoint } @else if length($key) > 1 and nth($key, 1) == "greater" and nth($key, 2) == "than" { @if get-value(settings, grid) == "fluid" { @media only screen and ( min-width: (calc-breakpoint(alias, nth($key, 3), get-index(nth($key, 3))) + 1) ) { @content; } } @else if get-value(settings, grid) == "fixed" { @media only screen and ( min-width: calc-breakpoint(prev, nth($key, 3), get-index(nth($key, 3))) ) { @content; } } // (y)px greater than key-x breakpoint } @else if length($key) > 1 and nth($key, 2) == "greater" and nth($key, 3) == "than" { @media only screen and ( min-width: (calc-breakpoint(alias, nth($key, 4), get-index(nth($key, 4))) + nth($key, 1)) ) { @content; } // less than key-x breakpoint } @else if length($key) > 1 and nth($key, 1) == "less" and nth($key, 2) == "than" { @if get-value(settings, grid) == "fluid" { @media only screen and ( max-width: calc-breakpoint(next, nth($key, 3), get-index(nth($key, 3))) ) { @content; } } @else if get-value(settings, grid) == "fixed" { @media only screen and ( max-width: (calc-breakpoint(alias, nth($key, 3), get-index(nth($key, 3))) - 1) ) { @content; } } // (y)px less than key-x breakpoint } @else if length($key) > 1 and nth($key, 2) == "less" and nth($key, 3) == "than" { @media only screen and ( max-width: (calc-breakpoint(alias, nth($key, 4), get-index(nth($key, 4))) - nth($key, 1)) ) { @content; } // for key-x key-y key-z } @else if length($key) > 1 and nth($key, 1) == "for" { @for $i from 1 through length($key) { @if exists($flint, nth($key, $i)) { @if get-value(settings, grid) == "fluid" { @if is-highest-breakpoint(nth($key, $i)) { @media only screen and ( min-width: (calc-breakpoint(next, nth($key, $i), $i) + 1) ) { @content; } } @else { @media only screen and ( min-width: (calc-breakpoint(next, nth($key, $i), $i) + if(is-lowest-breakpoint(nth($key, $i)), 0, 1)) ) and ( max-width: calc-breakpoint(alias, nth($key, $i), $i) ) { @content; } } } @else if get-value(settings, grid) == "fixed" { @if is-highest-breakpoint(nth($key, $i)) { @media only screen and ( min-width: calc-breakpoint(alias, nth($key, $i), $i) ) { @content; } } @else { @media only screen and ( min-width: calc-breakpoint(alias, nth($key, $i), $i) ) and ( max-width: (calc-breakpoint(prev, nth($key, $i), $i) - 1) ) { @content; } } } } } } } }