Files
vinlottis/frontend/styles/media-queries.scss

40 lines
519 B
SCSS

$mobile-width: 768px;
$tablet-max: 1200px;
$desktop-max: 2004px;
@mixin mobile {
@media (max-width: #{$mobile-width}) {
@content;
}
}
@mixin tablet {
@media (min-width: #{$mobile-width + 1px}) {
@content;
}
}
@mixin desktop {
@media (min-width: #{$tablet-max + 1px}) {
@content;
}
}
@mixin widescreen {
@media (min-width: #{$desktop-max + 1px}){
@content;
}
}
.desktop-only {
@include mobile {
display: none;
}
}
.mobile-only {
@include tablet {
display: none;
}
}