Safe-area

Safe area SCSS mixins for "notch" support.

Example

HTML

To enable notch support on a webpage, set the viewport-fit property to cover.

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover, width=device-width">

Basic usage

div {
  @include safe-area('padding-left', 'left');
  @include safe-area('padding-right', 'right');
}

Defaults

In development, it can be useful to fake a safe-area. A $safe-area-defaults map can be set.

$safe-area-defaults: (left: 40px, right: 20px);

div {
  @include safe-area('padding-left', 'left'); //40 px
  @include safe-area('padding-right', 'right'); //20px
}