ionic-angular/platform/cordova.scss

@import "../themes/ionic.globals";

// Cordova Status Bar Padding iOS Platform
// --------------------------------------------------------------------------------

/// @prop - The breakpoint when a modal becomes inset
$cordova-statusbar-padding-modal-max-width:         767px !default;


@mixin statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding, $modal-max-width, $style-title: false) {

  ion-nav > .ion-page,
  ion-nav > .ion-page > ion-header,
  ion-tab > .ion-page,
  ion-tab > .ion-page > ion-header,
  ion-tabs > .ion-page.tab-subpage > ion-header,
  ion-menu > .menu-inner,
  ion-menu > .menu-inner > ion-header {

    @include toolbar-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding);

    // If we should style the title elements in the toolbar
    @if ($style-title) {
      @include toolbar-title-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding);
    }
  }

  @media only screen and (max-width: $modal-max-width) {
    .modal-wrapper > .ion-page > ion-header {
      @include toolbar-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding);

      // If we should style the title elements in the toolbar
      @if ($style-title) {
        @include toolbar-title-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding);
      }
    }
  }

}

// The first-child should get modified padding-top for the status bar
// --------------------------------------------------------------------------------

@mixin toolbar-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding) {


  > .toolbar.statusbar-padding:first-child {
    @include padding(calc(#{$cordova-statusbar-padding} + #{$toolbar-padding}), null, null, null);
    @include padding(calc(constant(safe-area-inset-top) + #{$toolbar-padding}), null, null, null);
    @include padding(calc(env(safe-area-inset-top) + #{$toolbar-padding}), null, null, null);

    min-height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});
    min-height: calc(#{$toolbar-height} + constant(safe-area-inset-top));
    min-height: calc(#{$toolbar-height} + env(safe-area-inset-top));
  }

  > ion-content.statusbar-padding:first-child .scroll-content {
    @include padding($cordova-statusbar-padding, null, null, null);
    @include padding(constant(safe-area-inset-top), null, null, null);
    @include padding(env(safe-area-inset-top), null, null, null);
  }

  > ion-content.statusbar-padding:first-child[padding] .scroll-content,
  > ion-content.statusbar-padding:first-child[padding-top] .scroll-content {
    @include padding(calc(#{$content-padding} + #{$cordova-statusbar-padding}), null, null, null);
    @include padding(constant(safe-area-inset-top), null, null, null);
    @include padding(env(safe-area-inset-top), null, null, null);
  }

}


// iOS is the only mode that uses this mixin and it should be removed with #5036
// --------------------------------------------------------------------------------

@mixin toolbar-title-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $cordova-statusbar-padding) {

  > .toolbar.statusbar-padding:first-child ion-segment,
  > .toolbar.statusbar-padding:first-child ion-title {
    @include padding($cordova-statusbar-padding, null, null, null);
    @include padding(constant(safe-area-inset-top), null, null, null);
    @include padding(env(safe-area-inset-top), null, null, null);

    height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});
    height: calc(#{$toolbar-height} + constant(safe-area-inset-top));
    height: calc(#{$toolbar-height} + env(safe-area-inset-top));

    min-height: calc(#{$toolbar-height} + #{$cordova-statusbar-padding});
    min-height: calc(#{$toolbar-height} + constant(safe-area-inset-top));
    min-height: calc(#{$toolbar-height} + env(safe-area-inset-top));
  }

}


@mixin footer-safe-area($toolbar-height, $toolbar-padding) {
  .tabs:not(.tabs-ios[tabsPlacement=top]) .tabbar {
    @include padding(null, null, constant(safe-area-inset-bottom), null);
    @include padding(null, null, env(safe-area-inset-bottom), null);
  }

  ion-footer .toolbar:last-child {
    @include padding(null, null, calc(constant(safe-area-inset-bottom) + #{$toolbar-padding}), null);
    @include padding(null, null, calc(env(safe-area-inset-bottom) + #{$toolbar-padding}), null);
    min-height: calc(#{$toolbar-height} + constant(safe-area-inset-bottom));
    min-height: calc(#{$toolbar-height} + env(safe-area-inset-bottom));
  }

  .tabs:not(.tabs-ios[tabsPlacement='top']) ion-footer .toolbar:last-child {
    @include padding(null, null, $toolbar-padding, null);
    min-height: $toolbar-height;
  }
}