// Media query helpers. These make producing IE layouts // super easy.

// The base css you write should be for mobile. You can // then add desktop styles on top. // // Usage: // // div.columns { // border: 1px solid; // // @include media(desktop){ // width: 30%; // float: left; // } // @include ie-lte(8) { // something to fix visual bugs in old IE // } // @include ie(6) { // padding: 0; // } // }

$is-ie: false !default; $mobile-ie6: true !default;

$tablet-breakpoint: 641px !default; $desktop-breakpoint: 769px !default;

@mixin media($size: false, $max-width: false, $min-width: false, $ignore-for-ie: false) {

@if $is-ie and ($ignore-for-ie == false) {
  @if $size != mobile {
    @if ($ie-version == 6 and $mobile-ie6 == false) or $ie-version > 6 {
      @content;
    }
  }
} @else {
  @if $size == desktop {
    @media (min-width: $desktop-breakpoint){
      @content;
    }
  } @else if $size == tablet {
    @media (min-width: $tablet-breakpoint){
      @content;
    }
  } @else if $size == mobile {
    @media (max-width: $tablet-breakpoint - 1px){
      @content;
    }
  } @else if $max-width != false {
    @media (max-width: $max-width){
      @content;
    }
  } @else if $min-width != false {
    @media (min-width: $min-width){
      @content;
    }
  } @else {
    @media (min-width: $size){
      @content
    }
  }
}

}

@mixin ie-lte($version) {

@if $is-ie {
  @if $ie-version <= $version {
    @content;
  }
}

}

@mixin ie($version) {

@if $is-ie {
  @if $ie-version == $version {
    @content;
  }
}

}