// Gumby Semantic Grid Mixin // // Mixin for rows @mixin row($nested: false) { @if $nested == nested { @include nestedRow(); } @else { width: 100%; max-width: $row-max-width + 40px; min-width: $min-device-width; margin: 0 auto; padding-left: 20px; padding-right: 20px; @extend %clearfix; } > *:first-child { margin-left: 0; } @include respond(all-phones) { width: auto; min-width: 0; margin-left: 0; margin-right: 0; } } // Mixin for rows that are nested within columns @mixin nestedRow() { width: auto; min-width: 0; max-width: none; padding-left: 0; padding-right: 0; @extend %clearfix; } @mixin column($columns:$columns, $alignment: false, $behavior: false, $hybrid: false) { @extend %columnconfig; @if $alignment == center { float: none; margin-left: auto !important; margin-right: auto !important; width: columns($columns, $hybrid); @include respond(all-phones) { float: left; margin-left: 0; width: 100%; } } @else if $behavior == collapse { @extend %collapse; width: columns($columns, $hybrid); @include respond(all-phones) { float: left; width: 100%; } } @else { width: columns($columns, $hybrid); @include respond(all-phones) { float: left; margin-left: 0; width: 100%; } } } @mixin hybrid($columns:$columns, $alignment: false, $behavior: false) { @include column($columns, $alignment, $behavior, true); } @mixin push($columns, $hybrid-grid: false) { @if $hybrid-grid == hybrid { margin-left: push_x($columns, false, true); &:first-child { margin-left: push_x($columns, true, true); } @include respond(all-phones) { margin-left: 0; &:first-child { margin-left: 0; } } } @else { margin-left: push_x($columns); &:first-child { margin-left: push_x($columns, true); } @include respond(all-phones) { margin-left: 0; &:first-child { margin-left: 0; } } } } @mixin pull($direction: false, $columns: 0, $width: 0, $hybrid-grid: false) { @if $direction == left { @extend %pull-left; @if ($columns > 0 and $width > 0) { @if ($hybrid-grid == hybrid) { margin-left: pull_x($columns, $width, true); &:first-child { margin-left: 0; } } @else { margin-left: pull_x($columns, $width); &:first-child { margin-left: 0; } } } } @elseif $direction == none { @extend %pull-none; } @else { @extend %pull-right; } } // Placeholders for the Semantic Grid %container { padding: 0 $gutter-in-px + px; @include respond(all-phones) { min-width: 0; margin-left: 0; margin-right: 0; } } // Clearfix placeholder %clearfix { @include clearfix(); } // Clearfix placeholder for mobile %mobilefix { @include mobilefix(); } // Row placeholders %row { @include row(); } %nestedrow { @include row(); } // Column Configuration placeholder %columnconfig { margin-left: $gutter; float: $default-float; min-height: 1px; position: relative; @include box-sizing(border-box); } %pull-right { float: right; } %pull-left { float: left; } %pull-none { float: none; } // Collapse Gutters %collapse { margin-left: 0; }