seasoned/src/scss/media-queries.scss

// Media queries settings

$phone-xs-width: 480px;
$tablet-p-width: 768px;
$tablet-l-width: 1024px;
$desktop-width: 1200px;
$desktop-l-width: 1600px;
$mobile-width: 768px;

@mixin desktop {
	@media (min-width: #{$mobile-width + 1px}) {
		@content;
	}
}

@mixin mobile {
	@media (max-width: #{$mobile-width}) {
		@content;
	}
}

.desktop-only {
	@include mobile {
		display: none !important;
	}
}

.mobile-only {
	@include desktop {
		display: none !important;
	}
}

// Media
@mixin mobile-only {
	@media (max-width: #{$tablet-p-width - 1px}) {
		@content;
	}
}
@mixin mobile-ls-min {
	@media (min-width: #{$phone-xs-width}) {
		@content;
	}
}
@mixin tablet-only {
	@media (min-width: #{$tablet-p-width}) and (max-width: #{$desktop-width - 1px}) {
		@content;
	}
}
@mixin tablet-min {
	@media (min-width: #{$tablet-p-width}) {
		@content;
	}
}
@mixin tablet-portrait-only {
	@media (min-width: #{$tablet-p-width}) and (max-width: #{$tablet-l-width - 1px}) {
		@content;
	}
}
@mixin tablet-landscape-min {
	@media (min-width: #{$tablet-l-width}) {
		@content;
	}
}
@mixin desktop-min {
	@media (min-width: #{$desktop-width}) {
		@content;
	}
}
@mixin desktop-lg-min {
	@media (min-width: #{$desktop-l-width}) {
		@content;
	}
}
@mixin retina {
	@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
		@content;
	}
}