iphone-x-all.scss

/**
  * Targetting iPhone X Series of Smartphones
  *
	*/

$iphone-x-main-nav-height: 80px;
$iphone-x-main-nav-padding: calc(#{$iphone-x-main-nav-height} / 2);
$iphone-x-header-height: $header-height;
$iphone-x-height-offset: $iphone-x-main-nav-height + $iphone-x-header-height;
$iphone-x-content-area: calc(100vh - #{$iphone-x-height-offset});

/**
  * Media Query Mixin
  * Current $device's: 'iphone-x', 'iphone-xr', 'iphone-xs-max', 'iphone-x-all'
  * We can add more breakpoints by adding them to the $devices list below
  *
  * Example usage:
  * @include breakpoint(iphone-x-all) { @content }
  *
  */

$iphone-x-device-width: 375px;
$iphone-x-device-height: 812px;
$iphone-x-webkit-device-pixel-ratio: 3;

$iphone-xr-device-width: 414px;
$iphone-xr-device-height: 896px;
$iphone-xr-webkit-device-pixel-ratio: 2;

/*
 * iPhone XS matches iPhone X query
 * Ref: https://stackoverflow.com/a/52321213
 *
 */

$iphone-xs-max-device-width: 414px;
$iphone-xs-max-device-height: 896px;
$iphone-xs-max-webkit-device-pixel-ratio: 3;

@mixin breakpoint($device) {
    @if $device == iphone-x {
        @media only screen and (device-width: $iphone-x-device-width) and (device-height: $iphone-x-device-height) and (-webkit-device-pixel-ratio: $iphone-x-webkit-device-pixel-ratio) {
            @content;
        }
    }

    @if $device == iphone-xr {
        @media only screen and (device-width: $iphone-xr-device-width) and (device-height: $iphone-xr-device-height) and (-webkit-device-pixel-ratio: $iphone-xr-webkit-device-pixel-ratio) {
            @content;
        }
    }

    @if $device == iphone-xs-max {
        @media only screen and (device-width: $iphone-xs-max-device-width) and (device-height: $iphone-xs-max-device-height) and (-webkit-device-pixel-ratio: $iphone-xs-max-webkit-device-pixel-ratio) {
            @content;
        }
    }

    @if $device == iphone-x-all {
        @media only screen and (device-width: $iphone-x-device-width) and (device-height: $iphone-x-device-height) and (-webkit-device-pixel-ratio: $iphone-x-webkit-device-pixel-ratio), only screen and (device-width: $iphone-xr-device-width) and (device-height: $iphone-xr-device-height) and (-webkit-device-pixel-ratio: $iphone-xr-webkit-device-pixel-ratio), only screen and (device-width: $iphone-xs-max-device-width) and (device-height: $iphone-xs-max-device-height) and (-webkit-device-pixel-ratio: $iphone-xs-max-webkit-device-pixel-ratio) {
            @content;
        }
    }
    @else {
        // If you add more '@if else $device's be sure to update warn
        @warn "Breakpoint mixin supports: iphone-x, iphone-xr, iphone-xs-max, iphone-x-all";
    }
}