// ————————————————————————— // Imports

@import “compass/utilities/general/clearfix”; @import “compass/css3/box-sizing”;

// ————————————————————————— // Border-Box Sizing

// Apply the border-box sizing model to all elements // and adjust the grid math appropriately. @mixin border-box-sizing {

$border-box-sizing: true !global;
* { @include box-sizing(border-box); }

}

// ————————————————————————— // Container

// Set the width of a container // // $columns : The number of columns in the Grid Layout. @mixin set-container-width(

$columns  : $total-columns,
$style    : $container-style,
$px-vals  : $pixel-values-only

){

$width: container-outer-width($columns);

@if $style == 'static' {
  @if $px-vals == true {
    width: round(convert-length($width, px));
  } @else {
    @include rem(width, $width);
  }
} @else {
  @if $style == 'fluid' {
    @if unit($width) == '%' {
      @if $px-vals == true {
        width: round(convert-length($width, px));
      } @else {
        @include rem(width, $width);
      }
    }
  } @else {
    @if $px-vals == true {
      max-width: round(convert-length($width, px));
    } @else {
      @include rem(max-width, $width);
    }

    @include for-legacy-browser(ie,"6") {
      @if unit($width) == 'rem' {
        _width: round(convert-length($width, px));
      } @else {
        _width: $width;
      }
    }
  }
}

}

// Set the outer grid-containing element(s). // // $columns : The number of columns in the container. @mixin apply-container(

$columns  : $total-columns,
$px-vals  : $pixel-values-only

){

@include pie-clearfix;
@include set-container-width($columns);
@if $px-vals == true {
  padding-left: round(convert-length($grid-padding, px));
  padding-right: round(convert-length($grid-padding, px));
} @else {
  @include rem(padding-left, $grid-padding);
  @include rem(padding-right, $grid-padding);
}
margin: { left: auto; right: auto; }

}

// 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-layouts...

){

$media-layouts: if(length($media-layouts) > 0, $media-layouts, $total-columns);

@each $ml in $media-layouts {
  @if is-default-layout($ml) {
    @include apply-container;
  } @else {
    @include at-breakpoint($ml) {
      @include apply-container;
    }
  }
}

}

// ————————————————————————— // 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. // $padding : [optional] Padding applied to the inside of individual grid columns. // : Padding is only output if one or two values are specified (e.g. 1em or 10px 20px) // : Padding values are applied only on the horizontal axis in from-to order // $from : The start direction of your layout (e.g. 'left' for ltr languages) // $style : The container style to use. @mixin span-columns(

$columns,
$context       : $total-columns,
$padding       : false,
$from          : $from-direction,
$style         : fix-static-misalignment()

) {

$from     : unquote($from);
$to       : opposite-position($from);
$pos      : split-columns-value($columns,position);
$cols     : split-columns-value($columns,columns);
$pad-from : if($style == static, 0 * $gutter-width, relative-width(0 * $gutter-width, $context));
$pad-to   : if($style == static, 0 * $gutter-width, relative-width(0 * $gutter-width, $context));

@if $padding != false {
  $pad-from : nth($padding, 1);

  @if length($padding) > 1 {
    $pad-to: nth($padding, 2);
  } @else {
    $pad-to: $pad-from;
  }

  $pad-from : if($style == static, $pad-from, relative-width($pad-from, $context));
  $pad-to   : if($style == static, $pad-to, relative-width($pad-to, $context));

  padding-#{$from}: $pad-from;
  padding-#{$to}: $pad-to;
}

width: columns($cols, $context, $style) - if($border-box-sizing, 0, $pad-to + $pad-from);

@if ($pos == 'omega') {
  @include omega($from);
} @else {
  float: $from;
  margin-#{$to}: gutter($context, $style);
  @include for-legacy-browser(ie, "6") {
    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

) {

$from   : unquote($from);
$to     : opposite-position($from);
$hack   : opposite-position($omega-float);

float: $omega-float;
margin-#{$to}: 0;

@include for-legacy-browser(ie, "6", "7") {
  *margin-#{$hack}: - $gutter-width;
  @include for-legacy-browser(ie, "6") {
    display: inline;
  }
}

}

// Shortcut to apply omega to a specific subset of elements. // // $n : [first | only | last | <equation>] // $selector : [child | last-child | of-type | last-of-type ] // $from : The start-direction for your document. @mixin nth-omega(

$n        : last,
$selector : child,
$from     : $from-direction

) {

$from     : unquote($from);

&:#{format-nth($n,$selector)} {
  @if $n == "first" {
    @include omega($from);
  } @else {
    @include with-browser-ranges(css-sel3) {
      @include omega($from);
    }
  }
}

}

// ————————————————————————— // Resets

// 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

) {

$from   : unquote($from);
$to     : opposite-position($from);
$hack   : opposite-position($omega-float);

float: none;
width: auto;
margin-#{$to}: auto;

@include for-legacy-browser(ie, "6", "7") {
  *margin-#{$hack}: auto;
  @include for-legacy-browser(ie, "6") {
    display: block;
  }
}

}

// Apply to elements previously set as omega. // This will return floats and margins back to non-omega settigns. // // $context : [optional] The context (columns spanned by parent). // $from : The start-direction for your document. // $style : The container style to use. @mixin remove-omega(

$context  : $total-columns,
$from     : $from-direction,
$style    : fix-static-misalignment()

) {

$from   : unquote($from);
$to     : opposite-position($from);
$hack   : opposite-position($omega-float);

float: $from;
margin-#{$to}: gutter($context, $style);

@include for-legacy-browser(ie, "6", "7") {
  *margin-#{$hack}: auto;
}

}

// Shortcut to apply remove-omega to a specific subset of elements. // // $n : [first | only | last | <equation>] // $selector : [child | last-child | of-type | last-of-type ] // $context : [optional] The context (columns spanned by parent). // $from : The start-direction for your document. // $style : The container style to use. @mixin remove-nth-omega(

$n        : last,
$selector : child,
$context  : $total-columns,
$from     : $from-direction,
$style    : fix-static-misalignment()

) {

$from     : unquote($from);

&:#{format-nth($n,$selector)} {
  @if $n == "first" {
    @include remove-omega($context, $from, $style);
  } @else {
    @include with-browser-ranges(css-sel3) {
      @include remove-omega($context, $from, $style);
    }
  }
}

}

// ————————————————————————— // Change Settings

@mixin with-grid-settings(

$columns: $total-columns,
$width: $column-width,
$gutter: $gutter-width,
$padding: $grid-padding

) {

// keep the defaults around
$default-columns: $total-columns;
$default-width: $column-width;
$default-gutter: $gutter-width;
$default-padding: $grid-padding;

// use the new settings
$total-columns: $columns !global;
$column-width: $width !global;
$gutter-width: $gutter !global;
$grid-padding: $padding !global;

// apply to contents
@content;

// re-instate the defaults
$total-columns: $default-columns !global;
$column-width: $default-width !global;
$gutter-width: $default-gutter !global;
$grid-padding: $default-padding !global;

}