_mixins.breakpoints.scss 879 B

123456789101112131415161718192021222324252627282930
  1. // Based upon the fine work and thoughts from Bootstrap v4.
  2. // Copyright 2011-2018 The Bootstrap Authors
  3. // Copyright 2011-2018 Twitter, Inc.
  4. // Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  5. // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
  6. // Makes the @content apply to the given breakpoint and wider.
  7. @mixin media-breakpoint-up($name) {
  8. $min: breakpoint-min($name);
  9. @if $min {
  10. @media screen and (min-width: $min) {
  11. @content;
  12. }
  13. } @else {
  14. @content;
  15. }
  16. }
  17. // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
  18. // Makes the @content apply to the given breakpoint and narrower.
  19. @mixin media-breakpoint-down($name) {
  20. $max: breakpoint-max($name);
  21. @if $max {
  22. @media screen and (max-width: $max) {
  23. @content;
  24. }
  25. } @else {
  26. @content;
  27. }
  28. }