docs-v2/assets/styles/tools/media-queries.scss

25 lines
580 B
SCSS

$small-max: 600px;
$medium-min: ($small-max + 1);
$medium-max: 800px;
$large-min: ($medium-max + 1);
$large-max: 1280px;
$xlarge-min: 1290px;
@mixin media($size) {
@if $size == small {
@media (max-width: $small-max) { @content ; }
}
@else if $size == medium {
@media (max-width: $medium-max) { @content ; }
}
@else if $size == large_min {
@media (min-width: $large-min) { @content ; }
}
@else if $size == large {
@media (max-width: $large-max) { @content ; }
}
@else if $size == xlarge {
@media (min-width: $xlarge-min) { @content ; }
}
}