2014-09-23 09:41:37 -04:00
|
|
|
|
|
|
|
// Actual media queries
|
|
|
|
$mediaqueries: (
|
2014-11-05 10:03:48 -05:00
|
|
|
xs-only: "(max-width: #{$screen-xs-max})",
|
|
|
|
sm: "(min-width: #{$screen-sm-min})",
|
|
|
|
sm-only: "(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})",
|
2014-09-23 09:41:37 -04:00
|
|
|
md: "(min-width: #{$screen-md-min})",
|
|
|
|
md-only: "(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})",
|
|
|
|
lg: "(min-width: #{$screen-lg-min})",
|
2014-11-29 04:07:09 -05:00
|
|
|
smaller-md: "(max-width: #{$screen-sm-max})",
|
|
|
|
smaller-lg: "(max-width: #{$screen-md-max})",
|
2014-09-23 09:41:37 -04:00
|
|
|
);
|
|
|
|
|
|
|
|
// Central Media Query Mixin
|
|
|
|
@mixin respond-to($query) {
|
|
|
|
@if map-has-key($mediaqueries, $query) {
|
|
|
|
@media #{map-get($mediaqueries, $query)} {
|
|
|
|
@content;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@else {
|
|
|
|
@warn "Unfortunately, no value could be retrieved from `#{$query}`. "
|
|
|
|
+ "Please make sure it is defined in `$mediaqueries` map.";
|
|
|
|
}
|
|
|
|
}
|