You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

37 lines
734 B

  1. // Media query
  2. // Media query mixin
  3. // Usage:
  4. // @include mq(md) {
  5. // ..medium and up styles
  6. // }
  7. @mixin mq($name) {
  8. // Retrieves the value from the key
  9. $value: map-get($media-queries, $name);
  10. // If the key exists in the map
  11. @if $value != null {
  12. // Prints a media query based on the value
  13. @media (min-width: rem($value)) {
  14. @content;
  15. }
  16. }
  17. @else {
  18. @warn "No value could be retrieved from `#{$media-query}`. "
  19. + "Please make sure it is defined in `$media-queries` map.";
  20. }
  21. }
  22. // Responsive container
  23. @mixin container {
  24. padding-right: $gutter-spacing-sm;
  25. padding-left: $gutter-spacing-sm;
  26. @include mq(md) {
  27. padding-right: $gutter-spacing;
  28. padding-left: $gutter-spacing;
  29. }
  30. }