mixins.scss 574 B

1234567891011121314151617181920212223242526
  1. @mixin flexCenter {
  2. display: flex;
  3. justify-content: center;
  4. align-items: center;
  5. }
  6. @mixin screen($breakpoint) {
  7. @if $breakpoint == desktop {
  8. @media only screen and (width >= 768px) {
  9. @content;
  10. }
  11. }
  12. // tablet will also apply to mobile as there is no cut-off for min-width, however changing this now could break CSS all over the site.
  13. @if $breakpoint == tablet {
  14. @media only screen and (width <= 768px) {
  15. @content;
  16. }
  17. }
  18. @if $breakpoint == mobile {
  19. @media only screen and (width <= 481px) {
  20. @content;
  21. }
  22. }
  23. }