_breakpoints.scss 1.2 KB

123456789101112131415161718192021222324252627
  1. // Breakpoints
  2. @mixin breakpoint($breakpoint, $media: all) {
  3. @if $breakpoint == large-desktop-range {
  4. @media only #{$media} and (min-width: $large-desktop-container) { @content; }
  5. }
  6. @else if $breakpoint == desktop-range {
  7. @media only #{$media} and (min-width: $desktop-container) and (max-width: $large-desktop-container - 0.062) { @content; }
  8. }
  9. @else if $breakpoint == tablet-range {
  10. @media only #{$media} and (min-width: $tablet-container) and (max-width: $desktop-container - 0.062) { @content; }
  11. }
  12. @else if $breakpoint == large-mobile-range {
  13. @media only #{$media} and (min-width: $large-mobile-container + 0.063) and (max-width: $tablet-container - 0.062) { @content; }
  14. }
  15. @else if $breakpoint == small-mobile-range {
  16. @media only #{$media} and (max-width: $large-mobile-container) { @content; }
  17. }
  18. @else if $breakpoint == no-mobile {
  19. @media only #{$media} and (min-width: $tablet-container) { @content; }
  20. }
  21. @else if $breakpoint == mobile-only {
  22. @media only #{$media} and (max-width: $tablet-container - 0.062) { @content; }
  23. }
  24. @else if $breakpoint == desktop-only {
  25. @media only #{$media} and (max-width: $desktop-container - 0.062) { @content; }
  26. }
  27. }