_mixins.breakpoints.scss 935 B

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