Contents

a {
  color: red;
}

$breakpoints: (
  s-handset-p:  0px,
  m-handset-p:  360px,
  l-handset-p:  400px,
  xl-handset-p: 480px,
  s-tablet-p:   600px,
  m-tablet-p:   720px,
  l-tablet-p:   840px,
  s-handset-l:  480px,
  m-handset-l:  600px,
  l-handset-l:  720px,
  xl-handset-l: 840px,
  s-tablet-l:   960px,
  m-tablet-l:  1024px,
  l-tablet-l:  1280px,
  s-desktop:   1440px,
  m-desktop:   1600px,
  l-desktop:   1920px
);

@mixin handset {
  @media screen and (max-width: #{map-get($breakpoints, xl-handset-l)}) {
    @content;
  }
}

@mixin larger-than-handset-l {
  @media screen and (min-width: #{map-get($breakpoints, xl-handset-l)}) {
    @content;
  }
}

@mixin larger-than-handset-p {
  @media screen and (min-width: #{map-get($breakpoints, xl-handset-p)}) {
    @content;
  }
}

@mixin tablet-up {
  @media screen and (min-width: #{map-get($breakpoints, xl-handset-p) + 1}) {
    @content;
  }
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
jobshop-0.0.131	app/assets/stylesheets/jobshop/breakpoints.scss
jobshop-0.0.127	app/assets/stylesheets/jobshop/breakpoints.scss