dashy/src/styles/media-queries.scss

/* Widths in px */
$tiny: 600px;
$small: 780px;
$medium: 1150px;
$large: 1780px;
$extra-large: 2800px;

/* Usage @include tablet { ... } */

@mixin phone {
  @media (max-width: #{$tiny - 1px}) {
    @content;
  }
}

@mixin tablet {
  @media (min-width: #{$tiny}) and (max-width: #{$small - 1px}) {
    @content;
  }
}

@mixin laptop {
  @media (min-width: #{$small}) and (max-width: #{$medium - 1px}) {
    @content;
  }
}

@mixin monitor {
  @media (min-width: #{$medium}) and (max-width: #{$large - 1px}) {
    @content;
  }
}

@mixin big-screen {
  @media (min-width: #{$large}) {
    @content;
  }
}

@mixin tablet-up {
  @media (min-width: #{$small}) {
    @content;
  }
}
@mixin laptop-up {
  @media (min-width: #{$medium}) {
    @content;
  }
}
@mixin monitor-up {
  @media (min-width: #{$large}) {
    @content;
  }
}
@mixin big-screen-up {
  @media (min-width: #{$extra-large}) {
    @content;
  }
}