//  --------------------------------------------------------------
//  SASS Gridification
//  * Author:   Chris Eppstein
//  A SASS adaptation of Blueprint CSS
//  * Version:         0.7.1 (2008-02-25)
//  * Website:         http://code.google.com/p/blueprintcss/
//  Based on work by:
//  * Lorin Tackett     [lorintackett.com]
//  * Olav Bjorkoy      [bjorkoy.com]
//  * Nathan Borror     [playgroundblues.com]
//  * Jeff Croft        [jeffcroft.com]
//  * Christian Metts   [mintchaos.com]
//  * Khoi Vinh         [subtraction.com]
//  Read more about using a grid here:
//  * http://www.subtraction.com/2007/03/18/oh-yeeaahh
//  --------------------------------------------------------------

@import "compass/utilities/general/float";
@import "compass/utilities/general/clearfix";

// The number of columns in the grid.
$blueprint-grid-columns: 24 !default;

// The width of a column
$blueprint-grid-width: 30px !default;

// The amount of margin between columns
$blueprint-grid-margin: 10px !default;

// The width of a column including the margin. With default settings this is `40px`.
$blueprint-grid-outer-width: $blueprint-grid-width + $blueprint-grid-margin;

// The width of the container. With default settings this is `950px`.
$blueprint-container-size: $blueprint-grid-outer-width * $blueprint-grid-columns - $blueprint-grid-margin;

// Generates presentational class names that you can use
// in your html to layout your pages.
//
// #### Note:
// Best practices discourage using this mixin,
// but it is provided to support legacy websites
// and to test the sass port against blueprint's example pages.

@mixin blueprint-grid {
  // A container should group all your columns
  .container {
    @include container; }
  .column {
    @include column-base; }
  // The last column in a row needs this class (or mixin) or it will end up on the next row.
  .last {
    @include last; }
  // Use these classes (or mixins) to set the width of a column.
  @for $n from 1 to $blueprint-grid-columns {
    .span-#{$n} {
      @extend .column;
      width: span($n); } }
  .span-#{$blueprint-grid-columns} {
    @extend .column;
    width: span($blueprint-grid-columns);
    margin: 0; }
  input, textarea, select {
    @for $n from 1 through $blueprint-grid-columns {
      &.span-#{$n} {
        width: span($n); } } }
  // Add these to a column to append empty cols.
  @for $n from 1 to $blueprint-grid-columns {
    .append-#{$n} {
      @include append($n); } }
  // Add these to a column to prepend empty cols.
  @for $n from 1 to $blueprint-grid-columns {
    .prepend-#{$n} {
      @include prepend($n); } }
  // Use these classes on an element to push it into the
  // next column, or to pull it into the previous column.
  #{enumerate(".pull", 1, $blueprint-grid-columns)} {
    @include pull-base; }
  @for $n from 1 through $blueprint-grid-columns {
    .pull-#{$n} {
      @include pull-margins($n); } }
  #{enumerate(".push", 1, $blueprint-grid-columns)} {
    @include push-base; }
  @for $n from 1 through $blueprint-grid-columns {
    .push-#{$n} {
      @include push-margins($n); } }
  .prepend-top {
    @include prepend-top; }
  .append-bottom {
    @include append-bottom; } }

// A container for your columns.
//
// #### Note:
// If you use this mixin without the class and want to support ie6
// you must set text-align left on your container element in an IE stylesheet.
@mixin container {
  width: $blueprint-container-size;
  margin: 0 auto;
  @include clearfix; }

// The last column in a row needs this mixin or it will end up
// on the next row in some browsers.
@mixin last {
  margin-right: 0; }

// Use this mixins to set the width of n columns.
@mixin column($n, $last: false) {
  @include column-base($last);
  width: span($n); }

// Return the width in pixels of `$n` columns.
@function span($n) {
  @return $blueprint-grid-width * $n + $blueprint-grid-margin * ($n - 1);
}

// Set only the width of an element to align it with the grid.
// Most of the time you'll want to use `+column` instead.
//
// This mixin is especially useful for aligning tables to the grid.
//
// @deprecated Please use the span function with the width property instead.
@mixin span($n, $important: false) {
  @warn "The span mixin is deprecated. Please use the span function instead. E.g. width: span(#{$n})";
  @if $important {
    width: span($n) !important; }
  @else {
    width: span($n); } }

// The basic set of styles needed to make an element
// behave like a column:
//
// * floated to left
// * gutter margin on the right (unless the last column)
// * Some IE fixes
//
// #### Note:
// This mixin gets applied automatically when using `+column`
// so you probably don't need to use it directly unless
// you need to deviate from the grid or are trying
// to reduce the amount of generated CSS.
@mixin column-base($last: false) {
  @include float-left;
  @if $last {
    @include last; }
  @else {
    margin-right: $blueprint-grid-margin; }
  * html & {
    overflow-x: hidden; } }

// Mixin to a column to append n empty columns to the right
// by adding right padding to the column.
@mixin append($n) {
  padding-right: $blueprint-grid-outer-width * $n; }

// Mixin to a column to append n empty columns to the left
// by adding left padding to the column.
@mixin prepend($n) {
  padding-left: $blueprint-grid-outer-width * $n; }

// Adds trailing margin.
@mixin append-bottom($amount: 1.5em) {
  margin-bottom: $amount; }

// Adds leading margin.
@mixin prepend-top($amount: 1.5em) {
  margin-top: $amount; }

// Base styles that make it possible to pull an element to the left.
// #### Note:
// This mixin gets applied automatically when using `+pull`
// so you probably don't need to use it directly unless
// you need to deviate from the grid or are trying
// to reduce the amount of generated CSS.
@mixin pull-base {
  @include float-left;
  position: relative; }

// The amount of pulling for element to the left.
// #### Note:
// This mixin gets applied automatically when using `+pull`
// so you probably don't need to use it directly unless
// you need to deviate from the grid or are trying
// to reduce the amount of generated CSS.
@mixin pull-margins($n, $last: false) {
  @if $last {
    margin-left: -$blueprint-grid-outer-width * $n + $blueprint-grid-margin; }
  @else {
    margin-left: -$blueprint-grid-outer-width * $n; } }

// Moves a column `n` columns to the left.
//
// This mixin can also be used to change the display order of columns.
//
// If pulling past the last (visually) element in a row,
// pass `true` as the second argument so the calculations can adjust
// accordingly.

// For example:
//
// HTML:
// <pre class="source-code html">
// <div id="one">One</div>
// <div id="two">Two</div>
// </pre>
// Sass:
// <pre class="source-code sass">
// #one
//   +column(18, true)
//   +prepend(6)
// #two
//   +column(6)
//   +pull(18, true)
// </pre>
@mixin pull($n, $last: false) {
  @include pull-base;
  @include pull-margins($n, $last); }

@mixin push-base {
  @include float-left;
  position: relative; }

@mixin push-margins($n) {
  margin: 0 (-$blueprint-grid-outer-width * $n) 1.5em $blueprint-grid-outer-width * $n; }

// mixin to a column to push it n columns to the right
@mixin push($n) {
  @include push-base;
  @include push-margins($n); }

// Border on right hand side of a column.
@mixin border($border-color: $blueprint-border-color, $border-width: 1px) {
  padding-right: $blueprint-grid-margin / 2 - $border-width;
  margin-right: $blueprint-grid-margin / 2;
  border-right: #{$border-width} solid #{$border-color}; }

// Border with more whitespace, spans one column.
@mixin colborder($border-color: $blueprint-border-color, $border-width: 1px) {
  padding-right: floor(($blueprint-grid-width + 2 * $blueprint-grid-margin - $border-width) / 2);
  margin-right: ceil(($blueprint-grid-width + 2 * $blueprint-grid-margin - $border-width) / 2);
  border-right: #{$border-width} solid #{$border-color}; }

// Mixin this to an hr to make a horizontal ruler across a column.
@mixin colruler($border-color: #dddddd) {
  background: $border-color;
  color: $border-color;
  clear: both;
  float: none;
  width: 100%;
  height: 0.1em;
  margin: 0 0 1.45em;
  border: none; }

// Mixin this to an hr to make a horizontal spacer across a column.
@mixin colspacer {
  @include colruler;
  background: white;
  color: white;
  visibility: hidden; }
