// ============== // EDGE TILE // ============== $max-tiles : 12 !default; $tile-gutter : 20px !default; // ------------------------------ // BASE TILE // - Styling for base framework // ------------------------------ @mixin base-tile( $size : 0, $gutter : 0, $collapse : false, $for-base : false, $clear : false) { @if $for-base { display: block; @include clearfix; } // Collapse, reduce all margin and padding to 0 @if $collapse { margin-right: 0; margin-left: 0; } @if $gutter > 0 { margin-right: -($gutter / 2); margin-left: -($gutter / 2); } > h-ti { @if $for-base { display: block; float: $default-float; } @if $collapse { padding: 0; } @if $gutter > 0 { padding-right: ($gutter / 2); padding-left: ($gutter / 2); } // Number of tiles per row @if $size > 0 { width: 100% / $size; // clear floating @if $clear { &:nth-of-type(n) { clear: none; } } } @if $size > 1 { &:nth-of-type(#{$size}n+1) { clear: both; } } } } // ----------------------------------- // TILE // - Styling for external mixin call // ----------------------------------- @mixin tile ( $size : 0, $small : 0, $mini : 0, $gutter : 0, $collapse : false) { @include base-tile( $size: $size, $gutter: $gutter, $collapse: $collapse, $clear: $in-media ); @if $small > 0 { @include below(small) { @include base-tile($small, $clear:true); } } @if $mini > 0 { @include below(mini) { @include base-tile($mini, $clear:true); } } } @if $include-tile and not $user-mode { /* -------------- EDGE Tile -------------- */ h-tile { @include base-tile($gutter:$tile-gutter, $for-base:true); &.collapse { @include base-tile($collapse:true); } } @for $i from 1 through $max-tiles { .block-#{$i} { @include base-tile($i); } } @include below(small) { // Make large-tile 100% width [class^="block-"] { @include base-tile(1, $clear:true); } @for $i from 1 through $max-tiles { .small-block-#{$i} { @include base-tile($i); } } } } // include-block-grid