embd/bower_components/gumby/sass/functions/_semantic-grid.scss

// Gumby Semantic Grid Mixin //


// Mixin for rows

@mixin row($nested: false) {
  @if $nested == nested {
    @include nestedRow();
  }
  @else {
    width: 100%;
    max-width: $row-max-width + 40px;
    min-width: $min-device-width;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    @extend %clearfix;
  }
  > *:first-child {
    margin-left: 0;
  }
  @include respond(all-phones) {
    width: auto;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }
}

// Mixin for rows that are nested within columns

@mixin nestedRow() {
  width: auto;
  min-width: 0;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  @extend %clearfix;
}


@mixin column($columns:$columns, $alignment: false, $behavior: false, $hybrid: false) {
  @extend %columnconfig;
  @if $alignment == center   {
    float: none;
    margin-left: auto !important;
    margin-right: auto !important;
    width: columns($columns, $hybrid);
    @include respond(all-phones) {
      float: left;
      margin-left: 0;
      width: 100%;
    }
  }
  @else if $behavior == collapse {
    @extend %collapse;
    width: columns($columns, $hybrid);
    @include respond(all-phones) {
      float: left;
      width: 100%;
    }
  }
  @else {
    width: columns($columns, $hybrid);
    @include respond(all-phones) {
      float: left;
      margin-left: 0;
      width: 100%;
    }
  }
}

@mixin hybrid($columns:$columns, $alignment: false, $behavior: false) {
  @include column($columns, $alignment, $behavior, true);
}

@mixin push($columns, $hybrid-grid: false) {
  @if $hybrid-grid == hybrid {
    margin-left: push_x($columns, false, true);
    &:first-child {
      margin-left: push_x($columns, true, true);
    }
    @include respond(all-phones) {
      margin-left: 0;
      &:first-child {
        margin-left: 0;
      }
    }
  }
  @else {
    margin-left: push_x($columns);
    &:first-child {
      margin-left: push_x($columns, true);
    }
    @include respond(all-phones) {
      margin-left: 0;
      &:first-child {
        margin-left: 0;
      }
    }
  }
}

@mixin pull($direction: false, $columns: 0, $width: 0, $hybrid-grid: false) {
  @if $direction == left {
    @extend %pull-left;
    @if ($columns > 0 and $width > 0) {
      @if ($hybrid-grid == hybrid) {
        margin-left: pull_x($columns, $width, true);
        &:first-child {
          margin-left: 0;
        }
      }
      @else {
        margin-left: pull_x($columns, $width);
        &:first-child {
          margin-left: 0;
        }
      }
    }
  }
  @elseif $direction == none {
    @extend %pull-none;
  }
  @else {
    @extend %pull-right;
  }
}


// Placeholders for the Semantic Grid

%container {
  padding: 0 $gutter-in-px + px;
  @include respond(all-phones) {
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }
}

// Clearfix placeholder
%clearfix { @include clearfix(); }

// Clearfix placeholder for mobile
%mobilefix { @include mobilefix(); }

// Row placeholders
%row { @include row(); }
%nestedrow { @include row(); }

// Column Configuration placeholder
%columnconfig {
  margin-left: $gutter;
  float: $default-float;
  min-height: 1px;
  position: relative;
  @include box-sizing(border-box);
}

%pull-right { float: right; }
%pull-left { float: left; }
%pull-none { float: none; }

// Collapse Gutters
%collapse {
  margin-left: 0;
}