@if $border-box-sizing == true { * { @include box-sizing(border-box); } } $fg-column: $column; $fg-gutter: $gutter; $fg-max-columns: $grid-columns; $fg-max-width: $max-width; // outer wrapper center container @mixin outer-container() { @include clearfix; max-width: $fg-max-width; margin: { left: auto; right: auto; } } // Grid span columns @mixin span-columns($span: $columns of $container-columns, $display: block) { $columns: nth($span, 1); $container-columns: container-span($span); @if $container-columns != $grid-columns { $parent-columns: $container-columns; } @else { $parent-columns: $grid-columns; } @if $display == table { display: table-cell; padding-right: flex-gutter($container-columns); width: flex-grid($columns, $container-columns) + flex-gutter($container-columns); &:last-child { padding-right: 0; } } @else if $display == inline-block { @include inline-block; margin-right: flex-gutter($container-columns); width: flex-grid($columns, $container-columns); &:last-child { margin-right: 0; } } @else { display: block; float: left; margin-right: flex-gutter($container-columns); width: flex-grid($columns, $container-columns); &:last-child { margin-right: 0; } } } // Clearfix / row container @mixin row($display: block) { @include clearfix; @if $display == table { display: table; } @else { display: block; } } // Shift @mixin shift($n-columns: 1) { margin-left: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns); } // Pad @mixin pad($padding: flex-gutter()) { padding: $padding; } // Remove element gutter @mixin omega($display: block, $direction: right) { @if $display == table { padding-#{$direction}: 0; } @else { margin-#{$direction}: 0; } } @mixin nth-omega($nth, $display: block, $direction: right) { @if $display == table { &:nth-child(#{$nth}) { padding-#{$direction}: 0; } } @else { &:nth-child(#{$nth}) { margin-#{$direction}: 0; } } } // Fill 100% of parent @mixin fill-parent() { width: 100%; @if $border-box-sizing == false { @include box-sizing(border-box); } } // Media Queries @mixin media($query:$feature $value $columns, $total-columns: $grid-columns) { @if length($query) == 1 { @media screen and ($default-feature: nth($query, 1)) { $default-grid-columns: $grid-columns; $grid-columns: $total-columns; @content; $grid-columns: $default-grid-columns; } } @else if length($query) == 2 { @media screen and (nth($query, 1): nth($query, 2)) { $default-grid-columns: $grid-columns; $grid-columns: $total-columns; @content; $grid-columns: $default-grid-columns; } } @else if length($query) == 3 { @media screen and (nth($query, 1): nth($query, 2)) { $default-grid-columns: $grid-columns; $grid-columns: nth($query, 3); @content; $grid-columns: $default-grid-columns; } } @else if length($query) == 4 { @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { $default-grid-columns: $grid-columns; $grid-columns: $total-columns; @content; $grid-columns: $default-grid-columns; } } @else if length($query) == 5 { @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { $default-grid-columns: $grid-columns; $grid-columns: nth($query, 5); @content; $grid-columns: $default-grid-columns; } } @else { @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details."; } } // Legacy Mixins @mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) { @warn "The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump."; @if length($query) == 1 { @media screen and ($default-feature: nth($query, 1)) { $default-grid-columns: $grid-columns; $grid-columns: $total-columns; @content; $grid-columns: $default-grid-columns; } } @else if length($query) == 2 { @media screen and (nth($query, 1): nth($query, 2)) { $default-grid-columns: $grid-columns; $grid-columns: $total-columns; @content; $grid-columns: $default-grid-columns; } } @else if length($query) == 3 { @media screen and (nth($query, 1): nth($query, 2)) { $default-grid-columns: $grid-columns; $grid-columns: nth($query, 3); @content; $grid-columns: $default-grid-columns; } } @else if length($query) == 4 { @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { $default-grid-columns: $grid-columns; $grid-columns: $total-columns; @content; $grid-columns: $default-grid-columns; } } @else if length($query) == 5 { @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { $default-grid-columns: $grid-columns; $grid-columns: nth($query, 5); @content; $grid-columns: $default-grid-columns; } } @else { @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details."; } }