// --------------------------------------------------------------------------- // Imports @import "compass/utilities/general/clearfix"; // --------------------------------------------------------------------------- // Container // Set the width of a container @mixin set-container-width(){ $width: if($container-width, $container-width, columns-width()); @if $container-style == 'static' { width: $width; } @else { @if $container-style == 'fluid' { width: if(unit($width) == '%', $width, auto); } @else { max-width: $width; @if $legacy-support-for-ie6 { _width: $width; } } } } // Set the outer grid-containing element(s). @mixin apply-container(){ @include pie-clearfix; @include set-container-width; margin: { left: auto; right: auto; } padding: { left: $grid-padding; right: $grid-padding; } } // Set one or more layouts on a grid-containing element at any number of media-query breakpoints. // // $media-layout-1 : [default:$total-columns] A list of values including - // : One unitless number (representing columns in a layout) // : Two optional lengths (representing min and max-width media-query breakpoints). // $media-layout-2 ...-10 : [optional] Same as $media-layout-1 @mixin container( $media-layout-1 : $total-columns, $media-layout-2 : false, $media-layout-3 : false, $media-layout-4 : false, $media-layout-5 : false, $media-layout-6 : false, $media-layout-7 : false, $media-layout-8 : false, $media-layout-9 : false, $media-layout-10 : false ){ $media-layouts : compact($media-layout-2,$media-layout-3,$media-layout-4,$media-layout-5,$media-layout-6,$media-layout-7,$media-layout-8,$media-layout-9,$media-layout-10); @if is-default-layout($media-layout-1) { @include apply-container(); } @else { @include at-breakpoint($media-layout-1) { @include apply-container(); } } @each $ml in $media-layouts { @if $ml { @include at-breakpoint($ml) { @include set-container-width; } } } } // --------------------------------------------------------------------------- // Columns // Create a grid element spanning any number of 'columns' in a grid 'context'. // $columns : The number of columns to span. // $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) @mixin span-columns( $columns, $context : $total-columns, $from : $from-direction ) { $to : opposite-position($from); $pos : split-columns-value($columns,position); $cols : split-columns-value($columns,columns); width: columns($cols, $context); @if ($pos == 'omega') { @include omega($from); } @else { float: $from; margin-#{$to}: gutter($context); } @if $legacy-support-for-ie6 { display: inline; } } // Apply to elements spanning the last column, to account for the page edge. // Only needed as an override. Normally 'omega' can just be called by `columns`. // // $from : The start-direction for your document. @mixin omega( $from : $from-direction ) { $to : opposite-position($from); $hack : opposite-position($omega-float); float: $omega-float; margin-#{$to}: 0; @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { #margin-#{$hack}: - $gutter-width; @if $legacy-support-for-ie6 { display: inline; } } } // --------------------------------------------------------------------------- // Reset Columns // Reset a '+columns' grid element to default block behavior // // $from : The start direction of your layout (e.g. 'left' for ltr languages) @mixin reset-columns( $from: $from-direction ) { $to : opposite-position($from); $hack : opposite-position($omega-float); float: none; width: auto; margin-#{$to}: auto; @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { #margin-#{$hack}: auto; @if $legacy-support-for-ie6 { display: block; } } }