mail/src/sass/mixins/_responsive.scss

25 lines
948 B
SCSS
Executable File

// Actual media queries
$mediaqueries: (
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})",
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})",
smaller-md: "(max-width: #{$screen-sm-max})",
smaller-lg: "(max-width: #{$screen-md-max})",
);
// 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.";
}
}