// --------------------------------------------------------------------------- // Padding Mixins // add empty colums as padding before an element. // $columns : The number of columns to prefix. // $context : [optional] The context (columns spanned by parent). // : Context is required on any nested elements. // : Context MUST NOT be declared on a root element. // $from : The start direction of your layout (e.g. 'left' for ltr languages) // $style : The container style to use. @mixin prefix( $columns, $context : $total-columns, $from : $from-direction, $style : fix-static-misalignment() ) { $from : unquote($from); padding-#{$from}: space($columns, $context, $style); } // add empty colums as padding after an element. // $columns : The number of columns to suffix. // $context : [optional] The context (columns spanned by parent). // : Context is required on any nested elements. // : Context MUST NOT be declared on a root element. // $from : The start direction of your layout (e.g. 'left' for ltr languages) // $style : The container style to use. @mixin suffix( $columns, $context : $total-columns, $from : $from-direction, $style : fix-static-misalignment() ) { $from : unquote($from); $to : opposite-position($from); padding-#{$to}: space($columns, $context, $style); } // add empty colums as padding before and after an element. // $columns : The number of columns to pad. // $context : [optional] The context (columns spanned by parent). // : Context is required on any nested elements. // : Context MUST NOT be declared on a root element. // $from : The start direction of your layout (e.g. 'left' for ltr languages) // $style : The container style to use. @mixin pad( $prefix : false, $suffix : false, $context : $total-columns, $from : $from-direction, $style : fix-static-misalignment() ) { $from : unquote($from); @if $prefix { @include prefix($prefix, $context, $from, $style); } @if $suffix { @include suffix($suffix, $context, $from, $style); } } // Bleed into colums with margin/padding on any side of an element. // $width : The side of the bleed. // : Any unit-length will be used directly. // : Any unitless number will be used as a column-count. // : Use "2 of 6" format to represent 2 cals in a 6-col nested context. // $sides : One or more sides to bleed [ top | right | bottom | left | all ]. // $style : The container style to use. @mixin bleed( $width: $grid-padding, $sides: left right, $style: fix-static-misalignment() ) { @if $border-box-sizing { @include box-sizing(content-box) } @if type-of($width) == 'list' { $width: filter($width, of); $width: space(nth($width,1), nth($width,2), $style); } @else if unitless($width) { $width: space($width, $style: $style); } @if $sides == 'all' { margin: - $width; padding: $width; } @else { @each $side in $sides { margin-#{$side}: - $width; padding-#{$side}: $width; } } }