Files
hff-entry-forms/web/src/styles/forSize.mixin.scss

21 lines
786 B
SCSS

$maxMobileWidth: 640px;
$maxTabletWidth: 1079px;
$ultrawideMinWidth: 1600px;
// --- mobMaxW --- tabMaxW --------------- ultrawideMinW
// mobile | tablet | desktop | ultrawide
@mixin forSize($size) {
@if $size == mobile {
@media screen and (max-width: $maxMobileWidth) { @content; } }
@else if $size == tablet {
@media screen and (min-width: $maxMobileWidth + 1) and (max-width: $maxTabletWidth) { @content; } }
@else if $size == desktop {
@media screen and (min-width: $maxTabletWidth + 1) and (max-width: $ultrawideMinWidth - 1) { @content; } }
@else if $size == ultrawide {
@media screen and (min-width: $ultrawideMinWidth) { @content; } }
@else if $size == notMobile {
@media screen and (min-width: $maxMobileWidth + 1) { @content; } }
}