_breakpoints.scss 1.4 KB

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