@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 { $foundation: "existant" !global; } // foundation is now globally existant @if $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 type-of(nth($key, 1)) != "string" and type-of(nth($key, 2)) != "string" { // only apply display rule if the key is the default @if $key == get-value(settings, default) or $key == "container" { display: block; } @else if length($key) > 1 or type-of($key) != "string" { @for $i from 1 through length($flint__all--keys) { $calcKey: steal-key($i); @if $calcKey == get-value(settings, default) { 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 $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 #{$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 max-width is set @if get-value(settings, max-width) == true { max-width: max(get-all-breakpoints()...); } @else if type-of(get-value(settings, max-width)) == number { max-width: get-value(settings, max-width); } // check if center container is set to true @if $key == "container" { float: none; @if get-value(settings, center-container) == true { margin-right: auto; margin-left: auto; } @else { margin-right: 0; margin-left: 0; } } @else { @if $key == get-value(settings, default) { float: unquote(get-value(settings, float-style)); } @else if length($key) > 1 or type-of($key) != "string" { @for $i from 1 through length($flint__all--keys) { $calcKey: steal-key($i); @if $calcKey == get-value(settings, default) { 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 max(get-all-breakpoints()...) == get-value($calcKey, breakpoint) { @media only screen and ( min-width: calc-breakpoint(from, $calcKey, $i) ) { width: calc-width($calcKey, $calcSpan); @content; } } @else if get-value(settings, default) == $calcKey { width: calc-width($calcKey, $calcSpan); @content; } @else { @media only screen and ( min-width: calc-breakpoint(from, $calcKey, $i) ) and ( max-width: calc-breakpoint(to, $calcKey, $i) ) { 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 get-value(settings, default) == $calcKey { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i); } @else { @if is-highest-breakpoint($calcKey) == true { @media only screen and ( min-width: calc-breakpoint(from, $calcKey, $i) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i); } } @else { @media only screen and ( min-width: calc-breakpoint(from, $calcKey, $i) ) and ( max-width: calc-breakpoint(to, $calcKey, $i) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i); } } } } // 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 get-value(settings, default) == $calcKey { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i); } @else { @if is-highest-breakpoint($calcKey) == true { @media only screen and ( min-width: calc-breakpoint(from, $calcKey, $i) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i); } } @else { @media only screen and ( min-width: calc-breakpoint(from, $calcKey, $i) ) and ( max-width: calc-breakpoint(to, $calcKey, $i) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i); } } } } // 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 get-value(settings, default) == $calcKey { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i); } @else { @if is-highest-breakpoint($calcKey) == true { @media only screen and ( min-width: calc-breakpoint(from, $calcKey, $i) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i); } } @else { @media only screen and ( min-width: calc-breakpoint(from, $calcKey, $i) ) and ( max-width: calc-breakpoint(to, $calcKey, $i) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i); } } } } } } } // 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 get-value(settings, default) == $calcKey { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i); } @else { @if is-highest-breakpoint($calcKey) == true { @media only screen and ( min-width: calc-breakpoint(from, $calcKey, $i) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i); } } @else { @media only screen and ( min-width: calc-breakpoint(from, $calcKey, $i) ) and ( max-width: calc-breakpoint(to, $calcKey, $i) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i); } } } } // 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 get-value(settings, default) == $calcKey { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i); } @else { @if is-highest-breakpoint($calcKey) == true { @media only screen and ( min-width: calc-breakpoint(from, $calcKey, $i) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i); } } @else { @media only screen and ( min-width: calc-breakpoint(from, $calcKey, $i) ) and ( max-width: calc-breakpoint(to, $calcKey, $i) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift, $i); } } } } // 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 get-value(settings, default) == $calcKey { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift); } @else { @if is-highest-breakpoint($calcKey) == true { @media only screen and ( min-width: calc-breakpoint(from, $calcKey, get-index($calcKey)) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift); } } @else { @media only screen and ( min-width: calc-breakpoint(from, $calcKey, get-index($calcKey)) ) and ( max-width: calc-breakpoint(to, $calcKey, get-index($calcKey)) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift); } } } // 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 get-value(settings, default) == $calcKey { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift); } @else { @if is-highest-breakpoint($calcKey) == true { @media only screen and ( min-width: calc-breakpoint(from, $calcKey, get-index($calcKey)) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift); } } @else { @media only screen and ( min-width: calc-breakpoint(from, $calcKey, get-index($calcKey)) ) and ( max-width: calc-breakpoint(to, $calcKey, get-index($calcKey)) ) { @include calcFlint ($calcKey, $calcSpan, $calcContext, $calcGutter, $calcShift); } } } // 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 is-highest-breakpoint($key) == true { @media only screen and ( min-width: calc-breakpoint(from, $key, get-index($key)) ) { @content; } } @else { @media only screen and ( min-width: calc-breakpoint(from, $key, get-index($key)) ) and ( max-width: calc-breakpoint(to, $key, get-index($key)) ) { @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" { @media only screen and ( min-width: calc-breakpoint(from, 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" { @media only screen and ( min-width: calc-breakpoint(from, nth($key, 2), get-index(nth($key, 2))) ) and ( max-width: calc-breakpoint(to, nth($key, 4), get-index(nth($key, 4))) ) { @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(to, 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(to, 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(to, 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(to, nth($key, 3), get-index(nth($key, 3))) - 1) ) { @content; } } @else if get-value(settings, grid) == "fixed" { @media only screen and ( max-width: (calc-breakpoint(to, nth($key, 3), get-index(nth($key, 3)))) ) { @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(to, 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 is-highest-breakpoint(nth($key, $i)) == true { @media only screen and ( min-width: calc-breakpoint(from, nth($key, $i), get-index(nth($key, $i))) ) { @content; } } @else { @media only screen and ( min-width: calc-breakpoint(from, nth($key, $i), get-index(nth($key, $i))) ) and ( max-width: calc-breakpoint(to, nth($key, $i), get-index(nth($key, $i))) ) { @content; } } } } } } }