Created
August 1, 2014 03:30
-
-
Save ezekg/0a6c4f2235569b4a77ec to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.4.0.rc.2) | |
| // Compass (v1.0.0.alpha.21) | |
| // Flint (v1.7.2) | |
| // ---- | |
| @import "flint"; | |
| // Main API | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [string | number | list] : key of breakpoint [shorthand: span] | |
| // @param $span [string | number | list] : value of span of column [shorthand: context] | |
| // @param $context [number | list] : value of context of span | |
| // @param $gutter [string | list] : alias for gutter modifier | |
| // @param $shift [number | list] : value to shift column | |
| // ------------------------------------------------------------------------------- | |
| // @output foundation styles | container styles | calculated styles | |
| @mixin _( | |
| $key: null, | |
| $span: null, | |
| $context: null, | |
| $gutter: null, | |
| $shift: null | |
| ) { | |
| // Initial check to see what type of instance this is | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [string | number | list] : checks type of instance | |
| // ------------------------------------------------------------------------------- | |
| // @output foundation styles | container styles | calculated styles | |
| // Foundation | |
| // ---- | |
| @if $key == "foundation" { | |
| // Apply global border-box-sizing if set to true | |
| @if flint-get-value("settings", "border-box-sizing") { | |
| $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; | |
| } | |
| } | |
| // Clearfix | |
| // ---- | |
| } @else if $key == "clear" { | |
| @include flint-clearfix(); | |
| // Instance | |
| // ---- | |
| } @else { | |
| @if $key == "container" | |
| or flint-exists($flint, $key) and $span != null | |
| or flint-types-in-list($span, "number") or type-of($span) == "number" | |
| or flint-types-in-list($key, "number") or type-of($key) == "number" | |
| { | |
| // Only apply display rule if the key is either default or container | |
| @if flint-is-default($key) or $key == "container" { | |
| display: block; | |
| // Only apply display rule to default breakpoint | |
| } @else if length($key) > 1 or flint-is-not-string($key) { | |
| // Loop over all keys, set to default | |
| @for $i from 1 through length($flint__all__keys) { | |
| $calc-key: flint-steal-key($i); | |
| @if flint-is-default($calc-key) { | |
| display: block; | |
| } | |
| } | |
| } | |
| // Apply individually if foundation is not set globally, but is set to true in config | |
| @if flint-get-value("settings", "border-box-sizing") 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 _(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; | |
| } | |
| } | |
| // Container | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [string] : container instance | |
| // ------------------------------------------------------------------------------- | |
| // @output container styles | |
| @if $key == "container" { | |
| float: none; | |
| // Output container for each breakpoint if fixed grid | |
| // ---- | |
| @if flint-get-value("settings", "grid") == "fixed" { | |
| @for $i from 1 through length($flint__all__keys) { | |
| // Set up variables | |
| $calc-key: flint-steal-key($i); | |
| $calcContainer: $key; | |
| // Key is default, no media queries | |
| @if flint-is-default($calc-key) { | |
| width: flint-calc-width($calc-key, $calcContainer); | |
| @content; | |
| // Not default, wrap in media queries | |
| } @else { | |
| // Highest breakpoint? No max-width | |
| @if flint-is-highest-breakpoint($calc-key) { | |
| @media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) { | |
| width: flint-calc-width($calc-key, $calcContainer); | |
| @content; | |
| } | |
| } @else { | |
| @media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, $i) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) { | |
| width: flint-calc-width($calc-key, $calcContainer); | |
| @content; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| // Check if max-width is set | |
| // ---- | |
| @if flint-get-value("settings", "max-width") { | |
| // Check if it's an number | |
| @if flint-is-number(flint-get-value("settings", "max-width")) { | |
| max-width: flint-get-value("settings", "max-width"); | |
| // Then use highest breakpoint | |
| } @else { | |
| max-width: max(flint-get-all-breakpoints()...); | |
| } | |
| } | |
| // Center container is set to true? | |
| // ---- | |
| @if flint-get-value("settings", "center-container") { | |
| margin-right: auto; | |
| margin-left: auto; | |
| } @else { | |
| margin-right: 0; | |
| margin-left: 0; | |
| } | |
| // Not container | |
| // ---- | |
| } @else { | |
| // Make sure it's the default, output float | |
| @if flint-is-default($key) { | |
| float: unquote(flint-get-value("settings", "float-style")); | |
| } @else if flint-is-list($key) or flint-is-not-string($key) { | |
| @for $i from 1 through length($flint__all__keys) { | |
| $calc-key: flint-steal-key($i); | |
| @if flint-is-default($calc-key) { | |
| float: unquote(flint-get-value("settings", "float-style")); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| // Recursive shorthand without context | |
| // ------------------------------------------------------------------------------- | |
| // @param $span [number] : span value | |
| // @param $span [null] : null context value | |
| // ------------------------------------------------------------------------------- | |
| // @output calculated styles | |
| @if flint-is-number($key) and length($key) == 1 { | |
| @if $span == null { | |
| @for $i from 1 through length($flint__all__keys) { | |
| $calc-key: flint-steal-key($i); | |
| $calc-span: $key; | |
| $calc-context: $span; | |
| $calc-gutter: $gutter; | |
| $calc-shift: $shift; | |
| @if flint-is-default($calc-key) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } @else { | |
| @if flint-get-value("settings", "grid") == "fluid" { | |
| @if flint-is-highest-breakpoint($calc-key) { | |
| @media ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } | |
| } @else { | |
| @media ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-is-lowest-breakpoint($calc-key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", $calc-key, $i) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } | |
| } | |
| } @else if flint-get-value("settings", "grid") == "fixed" { | |
| @if flint-is-highest-breakpoint($calc-key) { | |
| @media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } | |
| } @else { | |
| @media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, $i) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } | |
| } | |
| } @else { | |
| @warn "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid | fixed"; | |
| } | |
| } | |
| } | |
| // Recursive shorthand with identical context | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [number] : span value | |
| // @param $span [number] : context value of span | |
| // ------------------------------------------------------------------------------- | |
| // @output calculated styles | |
| } @else if length($span) == 1 and flint-is-number($span) or $span == "auto" { | |
| @for $i from 1 through length($flint__all__keys) { | |
| $calc-key: flint-steal-key($i); | |
| $calc-span: $key; | |
| $calc-context: $span; | |
| $calc-gutter: $gutter; | |
| $calc-shift: $shift; | |
| @if flint-is-default($calc-key) { | |
| @include flint-calculate ($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } @else { | |
| @if flint-get-value("settings", "grid") == "fluid" { | |
| @if flint-is-highest-breakpoint($calc-key) { | |
| @media ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } | |
| } @else { | |
| @media ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-is-lowest-breakpoint($calc-key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", $calc-key, $i) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } | |
| } | |
| } @else if flint-get-value("settings", "grid") == "fixed" { | |
| @if flint-is-highest-breakpoint($calc-key) { | |
| @media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } | |
| } @else { | |
| @media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, $i) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } | |
| } | |
| } @else { | |
| @warn "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid | fixed"; | |
| } | |
| } | |
| } | |
| // Recursive shorthand with differing context | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [number] : span value | |
| // @param $span [list] : context value of span for each breakpoint | |
| // ------------------------------------------------------------------------------- | |
| // @throw [warning] : if length does not match number of breakpoints | |
| // ------------------------------------------------------------------------------- | |
| // @output calculated styles | |
| } @else if flint-types-in-list($span, "number") or $span == "auto" { | |
| @if length($span) != length($flint__all__keys) and $span != "auto" { | |
| @warn "Invalid argument length for context: #{length($span)} of #{length($flint__all__keys)}. Please provide an argument for each breakpoint in your config. Your argument was: #{$span}"; | |
| } @else { | |
| @for $i from 1 through length($flint__all__keys) { | |
| $calc-key: flint-steal-key($i); | |
| $calc-span: $key; | |
| $calc-context: $span; | |
| $calc-gutter: $gutter; | |
| $calc-shift: $shift; | |
| @if flint-is-default($calc-key) { | |
| @include flint-calculate ($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } @else { | |
| @if flint-get-value("settings", "grid") == "fluid" { | |
| @if flint-is-highest-breakpoint($calc-key) { | |
| @media ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } | |
| } @else { | |
| @media ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-is-lowest-breakpoint($calc-key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", $calc-key, $i) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } | |
| } | |
| } @else if flint-get-value("settings", "grid") == "fixed" { | |
| @if flint-is-highest-breakpoint($calc-key) { | |
| @media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } | |
| } @else { | |
| @media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, $i) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } | |
| } | |
| } @else { | |
| @warn "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid | fixed"; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| // Variable shorthand | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [list] : span value for each breakpoint | |
| // @param $span [null] : null context value | |
| // ------------------------------------------------------------------------------- | |
| // @throw [warning] : if length does not match number of breakpoints | |
| // ------------------------------------------------------------------------------- | |
| // @output calculated styles | |
| } @else if flint-types-in-list($key, "number") and $span == null { | |
| @if length($key) != length($flint__all__keys) { | |
| @warn "Invalid argument length for column: #{length($key)} of #{length($flint__all__keys)}. Please provide an argument for each breakpoint in your config. Your argument was: #{$key}"; | |
| } @else { | |
| @for $i from 1 through length($flint__all__keys) { | |
| $calc-key: flint-steal-key($i); | |
| $calc-span: $key; | |
| $calc-context: $context; | |
| $calc-gutter: $gutter; | |
| $calc-shift: $shift; | |
| @if flint-is-default($calc-key) { | |
| @include flint-calculate ($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } @else { | |
| @if flint-get-value("settings", "grid") == "fluid" { | |
| @if flint-is-highest-breakpoint($calc-key) { | |
| @media ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } | |
| } @else { | |
| @media ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-is-lowest-breakpoint($calc-key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", $calc-key, $i) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } | |
| } | |
| } @else if flint-get-value("settings", "grid") == "fixed" { | |
| @if flint-is-highest-breakpoint($calc-key) { | |
| @media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } | |
| } @else { | |
| @media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, $i) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } | |
| } | |
| } @else { | |
| @warn "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid | fixed"; | |
| } | |
| } | |
| } | |
| } | |
| // Variable shorthand with context | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [list] : span value for each breakpoint | |
| // @param $span [list] : context value for each breakpoint | |
| // ------------------------------------------------------------------------------- | |
| // @throw [warning] : if lengths do not match number of breakpoints | |
| // ------------------------------------------------------------------------------- | |
| // @output calculated styles | |
| } @else if flint-types-in-list($key, "number") and flint-types-in-list($span, "number") or $span == "auto" { | |
| @if length($key) != length($flint__all__keys) { | |
| @warn "Invalid argument length for column: #{length($key)} of #{length($flint__all__keys)}. Please provide an argument for each breakpoint in your config. Your argument was: #{$key}"; | |
| } @else if length($span) != length($flint__all__keys) and $span != "auto" { | |
| @warn "Invalid argument length for context: #{length($span)} of #{length($flint__all__keys)}. Please provide an argument for each breakpoint in your config. Your argument was: #{$span}"; | |
| } @else { | |
| @for $i from 1 through length($flint__all__keys) { | |
| $calc-key: flint-steal-key($i); | |
| $calc-span: $key; | |
| $calc-context: $span; | |
| $calc-gutter: $gutter; | |
| $calc-shift: $shift; | |
| @if flint-is-default($calc-key) { | |
| @include flint-calculate ($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } @else { | |
| @if flint-get-value("settings", "grid") == "fluid" { | |
| @if flint-is-highest-breakpoint($calc-key) { | |
| @media ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } | |
| } @else { | |
| @media ( min-width: (flint-calc-breakpoint("next", $calc-key, $i) + if(flint-is-lowest-breakpoint($calc-key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", $calc-key, $i) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } | |
| } | |
| } @else if flint-get-value("settings", "grid") == "fixed" { | |
| @if flint-is-highest-breakpoint($calc-key) { | |
| @media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } | |
| } @else { | |
| @media ( min-width: flint-calc-breakpoint("alias", $calc-key, $i) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, $i) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift, $i) { | |
| @content; | |
| } | |
| } | |
| } | |
| } @else { | |
| @warn "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid | fixed"; | |
| } | |
| } | |
| } | |
| } | |
| // Call by alias | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [string] : breakpoint alias | |
| // @param $span [number] : span value | |
| // ------------------------------------------------------------------------------- | |
| // @output calculated styles | |
| } @else if flint-exists($flint, $key) and flint-is-number($span) and $context == null { | |
| $calc-key: $key; | |
| $calc-span: $span; | |
| $calc-context: $context; | |
| $calc-gutter: $gutter; | |
| $calc-shift: $shift; | |
| @if flint-is-default($calc-key) { | |
| @include flint-calculate ($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift) { | |
| @content; | |
| } | |
| } @else { | |
| @if flint-get-value("settings", "grid") == "fluid" { | |
| @if flint-is-highest-breakpoint($calc-key) { | |
| @media ( min-width: (flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift) { | |
| @content; | |
| } | |
| } | |
| } @else { | |
| @media ( min-width: (flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + if(flint-is-lowest-breakpoint($calc-key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift) { | |
| @content; | |
| } | |
| } | |
| } | |
| } @else if flint-get-value("settings", "grid") == "fixed" { | |
| @if flint-is-highest-breakpoint($calc-key) { | |
| @media ( min-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift) { | |
| @content; | |
| } | |
| } | |
| } @else { | |
| @media ( min-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, flint-get-index($calc-key)) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift) { | |
| @content; | |
| } | |
| } | |
| } | |
| } @else { | |
| @warn "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid | fixed"; | |
| } | |
| } | |
| // Call by alias with context | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [string] : breakpoint alias | |
| // @param $span [number] : span value | |
| // @param $context [number] : context value of span | |
| // ------------------------------------------------------------------------------- | |
| // @output calculated styles | |
| } @else if flint-exists($flint, $key) and flint-is-number($span) and flint-is-number($context) or $context == "auto" { | |
| $calc-key: $key; | |
| $calc-span: $span; | |
| $calc-context: $context; | |
| $calc-gutter: $gutter; | |
| $calc-shift: $shift; | |
| @if flint-is-default($calc-key) { | |
| @include flint-calculate ($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift) { | |
| @content; | |
| } | |
| } @else { | |
| @if flint-get-value("settings", "grid") == "fluid" { | |
| @if flint-is-highest-breakpoint($calc-key) { | |
| @media ( min-width: (flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift) { | |
| @content; | |
| } | |
| } | |
| } @else { | |
| @media ( min-width: (flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + if(flint-is-lowest-breakpoint($calc-key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift) { | |
| @content; | |
| } | |
| } | |
| } | |
| } @else if flint-get-value("settings", "grid") == "fixed" { | |
| @if flint-is-highest-breakpoint($calc-key) { | |
| @media ( min-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift) { | |
| @content; | |
| } | |
| } | |
| } @else { | |
| @media ( min-width: flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key)) ) and ( max-width: (flint-calc-breakpoint("prev", $calc-key, flint-get-index($calc-key)) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) { | |
| @include flint-calculate($calc-key, $calc-span, $calc-context, $calc-gutter, $calc-shift) { | |
| @content; | |
| } | |
| } | |
| } | |
| } @else { | |
| @warn "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid | fixed"; | |
| } | |
| } | |
| // Wrap @content in media queries | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [list] : defines how to make up media query | |
| // ------------------------------------------------------------------------------- | |
| // @output styles wrapped in media query | |
| } @else if flint-exists($flint, $key) or flint-is-list($key) and $span == null and $context == null { | |
| // Call $key breakpoint by alias | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [string] : only for $key breakpoint | |
| // ------------------------------------------------------------------------------- | |
| @if length($key) == 1 { | |
| @if flint-get-value("settings", "grid") == "fluid" { | |
| @if flint-is-highest-breakpoint($key) { | |
| @media ( min-width: (flint-calc-breakpoint("next", $key, flint-get-index($key)) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) { | |
| @content; | |
| } | |
| } @else { | |
| @media ( min-width: (flint-calc-breakpoint("next", $key, flint-get-index($key)) + if(flint-is-lowest-breakpoint($key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) { | |
| @content; | |
| } | |
| } | |
| } @else if flint-get-value("settings", "grid") == "fixed" { | |
| @if flint-is-highest-breakpoint($key) { | |
| @media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) { | |
| @content; | |
| } | |
| } @else { | |
| @media ( min-width: flint-calc-breakpoint("alias", $key, flint-get-index($key)) ) and ( max-width: (flint-calc-breakpoint("prev", $key, flint-get-index($key)) - 1) ) { | |
| @content; | |
| } | |
| } | |
| } @else { | |
| @warn "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid | fixed"; | |
| } | |
| // From $key breakpoint to infinity | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [from key to infinity] : min-width from $key breakpoint | |
| // ------------------------------------------------------------------------------- | |
| } @else if flint-types-in-list($key, "string", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" and nth($key, 4) == "infinity" { | |
| @if flint-get-value("settings", "grid") == "fluid" { | |
| @media ( min-width: (flint-calc-breakpoint("next", nth($key, 2), flint-get-index(nth($key, 2))) + if(flint-is-lowest-breakpoint(nth($key, 2)), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) { | |
| @content; | |
| } | |
| } @else if flint-get-value("settings", "grid") == "fixed" { | |
| @media ( min-width: flint-calc-breakpoint("alias", nth($key, 2), flint-get-index(nth($key, 2))) ) { | |
| @content; | |
| } | |
| } @else { | |
| @warn "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid | fixed"; | |
| } | |
| // From $key-x breakpoint to $key-y breakpoint | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [from key-x to key-y] : from $key-x breakpoint to $key-y | |
| // ------------------------------------------------------------------------------- | |
| } @else if flint-types-in-list($key, "string", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" { | |
| @if flint-get-value("settings", "grid") == "fluid" { | |
| @media ( min-width: (flint-calc-breakpoint("next", nth($key, 2), flint-get-index(nth($key, 2))) + if(flint-is-lowest-breakpoint(nth($key, 2)), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) and ( max-width: flint-calc-breakpoint("alias", nth($key, 4), flint-get-index(nth($key, 4))) ) { | |
| @content; | |
| } | |
| } @else if flint-get-value("settings", "grid") == "fixed" { | |
| @media ( min-width: flint-calc-breakpoint("alias", nth($key, 2), flint-get-index(nth($key, 2))) ) and ( max-width: (flint-calc-breakpoint("prev", nth($key, 4), flint-get-index(nth($key, 4))) - if(flint-is-highest-breakpoint(nth($key, 4)), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1))) ) { | |
| @content; | |
| } | |
| } @else { | |
| @warn "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid | fixed"; | |
| } | |
| // From $num-x to $num-y | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [from number to number] : arbitrary media query | |
| // ------------------------------------------------------------------------------- | |
| } @else if flint-types-in-list($key, "string" "number" "string" "number", 4) and nth($key, 1) == "from" and nth($key, 3) == "to" { | |
| // Make sure passed units match units used in config | |
| @if flint-get-config-unit() == unit(nth($key, 2)) and flint-get-config-unit() == unit(nth($key, 4)) { | |
| @media ( min-width: nth($key, 2) ) and ( max-width: nth($key, 4) ) { | |
| @content; | |
| } | |
| // Throw error | |
| } @else { | |
| @warn "Passed units [#{unit(nth($key, 2))}, #{unit(nth($key, 4))}] do not match the unit used in your config map: #{flint-get-config-unit()}"; | |
| } | |
| // Greater than $key breakpoint | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [greater than key] : anything above $key breakpoint | |
| // ------------------------------------------------------------------------------- | |
| } @else if flint-types-in-list($key, "string", 3) and nth($key, 1) == "greater" and nth($key, 2) == "than" { | |
| @if flint-get-value("settings", "grid") == "fluid" { | |
| @media ( min-width: (flint-calc-breakpoint("alias", nth($key, 3), flint-get-index(nth($key, 3))) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) { | |
| @content; | |
| } | |
| } @else if flint-get-value("settings", "grid") == "fixed" { | |
| @media ( min-width: flint-calc-breakpoint("prev", nth($key, 3), flint-get-index(nth($key, 3))) ) { | |
| @content; | |
| } | |
| } @else { | |
| @warn "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid | fixed"; | |
| } | |
| // Greater than number | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [greater than number] : anything above number | |
| // ------------------------------------------------------------------------------- | |
| } @else if flint-types-in-list($key, "string" "string" "number", 3) and nth($key, 1) == "greater" and nth($key, 2) == "than" { | |
| @if flint-get-config-unit() == unit(nth($key, 3)) { | |
| @media ( min-width: nth($key, 3) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1) ) { | |
| @content; | |
| } | |
| } @else { | |
| @warn "Passed units [#{unit(nth($key, 3))}] do not match the unit used in your config map: #{flint-get-config-unit()}"; | |
| } | |
| // Number greater than $key breakpoint | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [number greater than key] : unit value greater than $key breakpoint | |
| // ------------------------------------------------------------------------------- | |
| } @else if flint-types-in-list($key, "number" "string" "string" "string", 4) and nth($key, 2) == "greater" and nth($key, 3) == "than" { | |
| @if flint-get-config-unit() == unit(nth($key, 1)) { | |
| @media ( min-width: (flint-calc-breakpoint("alias", nth($key, 4), flint-get-index(nth($key, 4))) + nth($key, 1)) ) { | |
| @content; | |
| } | |
| } @else { | |
| @warn "Passed units [#{unit(nth($key, 1))}] do not match the unit used in your config map: #{flint-get-config-unit()}"; | |
| } | |
| // Less than $key breakpoint | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [less than key] : anything below $key breakpoint | |
| // ------------------------------------------------------------------------------- | |
| } @else if flint-types-in-list($key, "string", 3) and nth($key, 1) == "less" and nth($key, 2) == "than" { | |
| @if flint-get-value("settings", "grid") == "fluid" { | |
| @media ( max-width: flint-calc-breakpoint("next", nth($key, 3), flint-get-index(nth($key, 3))) ) { | |
| @content; | |
| } | |
| } @else if flint-get-value("settings", "grid") == "fixed" { | |
| @media ( max-width: (flint-calc-breakpoint("alias", nth($key, 3), flint-get-index(nth($key, 3))) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1)) ) { | |
| @content; | |
| } | |
| } @else { | |
| @warn "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid | fixed"; | |
| } | |
| // Less than number | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [less than number] : anything below number | |
| // ------------------------------------------------------------------------------- | |
| } @else if flint-types-in-list($key, "string" "string" "number", 3) and nth($key, 1) == "less" and nth($key, 2) == "than" { | |
| @if flint-get-config-unit() == unit(nth($key, 3)) { | |
| @media ( max-width: nth($key, 3) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1) ) { | |
| @content; | |
| } | |
| } @else { | |
| @warn "Passed units [#{unit(nth($key, 3))}] do not match the unit used in your config map: #{flint-get-config-unit()}"; | |
| } | |
| // Number less than $key breakpoint | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [number less than key] : unit value less than $key breakpoint | |
| // ------------------------------------------------------------------------------- | |
| } @else if flint-types-in-list($key, "number" "string" "string" "string", 4) and nth($key, 2) == "less" and nth($key, 3) == "than" { | |
| @if flint-get-config-unit() == unit(nth($key, 1)) { | |
| @media ( max-width: (flint-calc-breakpoint("alias", nth($key, 4), flint-get-index(nth($key, 4))) - nth($key, 1)) ) { | |
| @content; | |
| } | |
| } @else { | |
| @warn "Passed units [#{unit(nth($key, 1))}] do not match the unit used in your config map: #{flint-get-config-unit()}"; | |
| } | |
| // For $key-x $key-y $key-z | |
| // ------------------------------------------------------------------------------- | |
| // @param $key [for list of strings] : will duplicate styles for each passed $key breakpoint | |
| // ------------------------------------------------------------------------------- | |
| } @else if flint-types-in-list($key, "string") and nth($key, 1) == "for" { | |
| // Define empty query list | |
| $query: (); | |
| // Build out comma delimited query list for each breakpoint | |
| @for $i from 1 through length($key) { | |
| $calc-key: nth($key, $i); | |
| @if flint-exists($flint, $calc-key) { | |
| @if flint-get-value("settings", "grid") == "fluid" { | |
| @if flint-is-highest-breakpoint($calc-key) { | |
| $query: append($query, '( min-width: #{(flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + if(flint-get-config-unit() == "em", flint-to-em(1px), 1))} )', "comma"); | |
| } @else { | |
| $query: append($query, '( min-width: #{(flint-calc-breakpoint("next", $calc-key, flint-get-index($calc-key)) + if(flint-is-lowest-breakpoint($calc-key), 0, if(flint-get-config-unit() == "em", flint-to-em(1px), 1)))} ) and ( max-width: #{flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key))} )', "comma"); | |
| } | |
| } @else if flint-get-value("settings", "grid") == "fixed" { | |
| @if flint-is-highest-breakpoint($calc-key) { | |
| $query: append($query, '( min-width: #{flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key))} )', "comma"); | |
| } @else { | |
| $query: append($query, '( min-width: #{flint-calc-breakpoint("alias", $calc-key, flint-get-index($calc-key))} ) and ( max-width: #{(flint-calc-breakpoint("prev", $calc-key, flint-get-index($calc-key)) - if(flint-get-config-unit() == "em", flint-to-em(1px), 1))} )', "comma"); | |
| } | |
| } @else { | |
| @warn "Invalid gutter settings in config map: #{flint-get-value('settings', 'grid')}. Valid arguments: fluid | fixed"; | |
| } | |
| } | |
| } | |
| @media #{$query} { | |
| @content; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| test { | |
| @include _(for tablet desktop laptop) { | |
| color: blue; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media (min-width: 20.0625em) and (max-width: 40em), (min-width: 60.0625em), (min-width: 40.0625em) and (max-width: 60em) { | |
| test { | |
| color: blue; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment