1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
|
$tablet-portrait: 768px;
$tablet-landscape: 980px;
$desk-normal: 1120px;
$desk-big: 1280px;
$grid-breakpoints-immobile: (
'tablet-portrait': '(min-width: ' + $tablet-portrait + ') and (max-width: ' + $tablet-landscape + ')',
'tablet-landscape': '(min-width: ' + $tablet-landscape + ') and (max-width: ' + $desk-normal + ')',
'desk-normal': '(min-width: ' + $desk-normal + ') and (max-width: ' + $desk-big + ')',
'desk-big': '(min-width: ' + $desk-big + ')'
);
@mixin grid-media-query($media-query, $breakpointDefinitions) {
$breakpoint-found: false;
@each $breakpoint, $breakpointvalue in $breakpointDefinitions{
$name: $breakpoint;
$declaration: $breakpointvalue;
@if $media-query == $name and $declaration{
$breakpoint-found: true;
@media only screen and #{$declaration} {
@content;
}
}
}
}
@each $name in map-keys($grid-breakpoints-immobile) {
@include grid-media-query($name, $grid-breakpoints-immobile) {
body.immobile & {
margin-bottom: 0;
}
}
}
|