learn_h5/www/lib/ionic/scss/_platform.scss

/**
 * Platform
 * --------------------------------------------------
 * Platform specific tweaks
 */

.platform-ios.platform-cordova {
  // iOS has a status bar which sits on top of the header.
  // Bump down everything to make room for it. However, if
  // if its in Cordova, and set to fullscreen, then disregard the bump.
  &:not(.fullscreen) {
    .bar-header:not(.bar-subheader) {
      height: $bar-height + $ios-statusbar-height;
      height: calc(constant(safe-area-inset-top) + #{$bar-height});
      height: calc(env(safe-area-inset-top) + #{$bar-height});

      &.item-input-inset .item-input-wrapper {
        margin-top: 19px !important;
      }

      > * {
        margin-top: $ios-statusbar-height;
        margin-top: constant(safe-area-inset-top);
        margin-top: env(safe-area-inset-top);
      }
    }
    .bar-header {
      padding-left: calc(
        constant(safe-area-inset-left) + #{$bar-padding-portrait}
      );
      padding-left: calc(env(safe-area-inset-left) + #{$bar-padding-portrait});
      padding-right: calc(
        constant(safe-area-inset-right) + #{$bar-padding-portrait}
      );
      padding-right: calc(
        env(safe-area-inset-right) + #{$bar-padding-portrait}
      );

      .buttons:last-child {
        right: calc(constant(safe-area-inset-right) + #{$bar-padding-portrait});
        right: calc(env(safe-area-inset-right) + #{$bar-padding-portrait});
      }
    }

    .has-tabs, .bar-footer.has-tabs {
      bottom : calc(constant(safe-area-inset-bottom) + #{$tabs-height});
      bottom : calc(env(safe-area-inset-bottom) + #{$tabs-height});
    }

    .tabs-top > .tabs, .tabs.tabs-top {
      top: $bar-height + $ios-statusbar-height;
    }

    .tabs {
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      height: calc(constant(safe-area-inset-bottom) + 49px);
      height: calc(env(safe-area-inset-bottom) + 49px);
    }
    .has-header, .bar-subheader {
      top: $bar-height + $ios-statusbar-height;
      top: calc(constant(safe-area-inset-top) + #{$bar-height});
      top: calc(env(safe-area-inset-top) + #{$bar-height});
    }
    .has-subheader {
      top: $bar-height + $bar-subheader-height + $ios-statusbar-height;

      top: calc(constant(safe-area-inset-top) + #{$bar-height + $bar-subheader-height});
      top: calc(env(safe-area-inset-top) + #{$bar-height + $bar-subheader-height});
    }
    .has-header.has-tabs-top {
      top: $bar-height + $tabs-height + $ios-statusbar-height;

      top: calc(#{$bar-height + $tabs-height} + constant(safe-area-inset-top));
      top: calc(#{$bar-height + $tabs-height} + env(safe-area-inset-top));
    }
    .has-header.has-subheader.has-tabs-top {
      top: $bar-height + $bar-subheader-height + $tabs-height + $ios-statusbar-height;

      top: calc(#{$bar-height + $bar-subheader-height + $tabs-height} + constant(safe-area-inset-right);
      top: calc(#{$bar-height + $bar-subheader-height + $tabs-height} + env(safe-area-inset-right);
    }
  }
  .popover {
    .bar-header:not(.bar-subheader) {
      height: $bar-height;
      &.item-input-inset .item-input-wrapper {
        margin-top: -1px;
      }
      > * {
        margin-top: 0;
      }
    }
    .has-header, .bar-subheader {
      top: $bar-height;
    }
    .has-subheader {
      top: $bar-height + $bar-subheader-height;
    }
  }
  &.status-bar-hide {
    // Cordova doesn't adjust the body height correctly, this makes up for it
    margin-bottom: 20px;
  }
}

@media (orientation: landscape) {
  .item {
    padding: $item-padding calc(constant(safe-area-inset-right) + #{$item-padding});

    .badge {
      right: calc(constant(safe-area-inset-right) + 32px)
    }
  }
  .item-icon-left {
    padding-left: calc(constant(safe-area-inset-left) + 54px);

    .icon {
      left: calc(constant(safe-area-inset-left) + 11px);
    }
  }
  .item-icon-right {
    padding-right: calc(constant(safe-area-inset-right) + 54px);
    .icon {
      right: calc(constant(safe-area-inset-right) + 11px);
    }
  }

  .item-complex, a.item.item-complex, button.item.item-complex {
    padding: 0;

    .item-content {
      padding: $item-padding
        calc(constant(safe-area-inset-right) + #{(ceil( ($item-padding * 3) + ($item-padding / 3)) - 5)})
        $item-padding
        calc(constant(safe-area-inset-left) + #{$item-padding});
    }
  }

  .item-left-edit.visible.active {
    @include translate3d(calc(constant(safe-area-inset-left) + 8px), 0, 0);
  }
  .list-left-editing .item-left-editable .item-content,
  .item-left-editing.item-left-editable .item-content {
    @include translate3d(calc(constant(safe-area-inset-left) + 50px), 0, 0);
  }

  .item-right-edit{
    right: constant(safe-area-inset-right);
    right: env(safe-area-inset-right)
  }


  .platform-ios.platform-browser.platform-ipad {
    position: fixed; // required for iPad 7 Safari
  }
}

.platform-c:not(.enable-transitions) * {
  // disable transitions on grade-c devices (Android 2)
  -webkit-transition: none !important;
  transition: none !important;
}