mq

_mq.scss

// MEDIA QUERIES


$breakpoints: (
  phone:        599px,
  tablet:       600px,
  desktop:      1200px,
  big-desktop:  1800px
);

/* phone */

@mixin phone--only {
    @media (max-width: #{map-get( $breakpoints, phone )}) {
      @content;
    }
}

@mixin phone--portrait {
    @media (max-width: #{map-get( $breakpoints, phone )}) and ( orientation: portrait)  {
      @content;
    }
}

@mixin phone--landscape {
    @media (max-width: #{map-get( $breakpoints, phone )}) and ( orientation: landscape) {
      @content;
    }
}




/* tablet */

@mixin tablet--up {
    @media (min-width: #{map-get( $breakpoints, tablet )}) {
      @content;
    }
}

@mixin tablet--only {
  @media (min-width: #{map-get( $breakpoints, phone )}) and ( max-width: #{map-get( $breakpoints, desktop )}) {
    @content;
  }
}

@mixin tablet--portrait {
    @media (min-width: #{map-get( $breakpoints, tablet )}) and ( orientation: portrait)  {
      @content;
    }
}

@mixin tablet--landscape {
    @media (min-width: #{map-get( $breakpoints, tablet )}) and ( orientation: landscape) {
      @content;
    }
}


/* desktop */

@mixin desktop--up {
    @media (min-width: #{map-get( $breakpoints, desktop )}) {
      @content;
    }
}

@mixin desktop--only {
  @media (min-width: #{map-get( $breakpoints, tablet )}) and ( max-width: #{map-get( $breakpoints, big-desktop )}) {
    @content;
  }
}

@mixin desktop--portrait {
    @media (min-width: #{map-get( $breakpoints, desktop )}) and ( orientation: portrait)  {
      @content;
    }
}

@mixin desktop--landscape {
    @media (min-width: #{map-get( $breakpoints, desktop )}) and ( orientation: landscape) {
      @content;
    }
}



/* big-desktop */

@mixin big-desktop--up {
    @media (min-width: #{map-get( $breakpoints, big-desktop )}) {
      @content;
    }
}

@mixin big-desktop--portrait {
    @media (min-width: #{map-get( $breakpoints, big-desktop )}) and ( orientation: portrait)  {
      @content;
    }
}

@mixin big-desktop--landscape {
    @media (min-width: #{map-get( $breakpoints, big-desktop )}) and ( orientation: landscape) {
      @content;
    }
}