From 2c925b721f10736dc6fbdc752d4caffe4cb231d1 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.mtza@gmail.com>
Date: Tue, 7 Aug 2018 18:40:40 +0200
Subject: [PATCH] fix(app): fix statusbarPadding

fixes #15073
---
 core/src/components/app/app.ios.scss   |  5 ----
 core/src/components/app/app.md.scss    |  6 -----
 core/src/components/app/app.scss       | 34 +++++++++++++++++---------
 core/src/components/app/app.tsx        | 12 ++-------
 core/src/components/header/header.scss |  2 +-
 5 files changed, 26 insertions(+), 33 deletions(-)
 delete mode 100644 core/src/components/app/app.ios.scss
 delete mode 100644 core/src/components/app/app.md.scss

diff --git a/core/src/components/app/app.ios.scss b/core/src/components/app/app.ios.scss
deleted file mode 100644
index c70cbeaed1..0000000000
--- a/core/src/components/app/app.ios.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import "./app";
-
-.app-ios.statusbar-padding {
-  --ion-statusbar-padding: 20px;
-}
diff --git a/core/src/components/app/app.md.scss b/core/src/components/app/app.md.scss
deleted file mode 100644
index 2c5e22458c..0000000000
--- a/core/src/components/app/app.md.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@import "./app";
-
-.app-md.statusbar-padding {
-  --ion-statusbar-padding: 20px;
-}
-
diff --git a/core/src/components/app/app.scss b/core/src/components/app/app.scss
index 8665be0f8d..3fb77ba650 100644
--- a/core/src/components/app/app.scss
+++ b/core/src/components/app/app.scss
@@ -1,6 +1,26 @@
 @import "../../themes/ionic.globals";
 @import "../../themes/ionic.mixins";
 
+ion-app.is-device {
+  user-select: none;
+}
+
+ion-app.statusbar-padding {
+  --ion-statusbar-padding: 20px;
+}
+
+@supports (padding-top: constant(safe-area-inset-top)) {
+  ion-app.statusbar-padding {
+    --ion-statusbar-padding: constant(safe-area-inset-top);
+  }
+}
+
+@supports (padding-top: env(safe-area-inset-top)) {
+  ion-app.statusbar-padding {
+    --ion-statusbar-padding: env(safe-area-inset-top);
+  }
+}
+
 // Page Container Structure
 // --------------------------------------------------
 
@@ -31,16 +51,6 @@ ion-app,
   opacity: 0;
 }
 
-.ion-page-hidden {
-  /* stylelint-disable-next-line declaration-no-important */
-  display: none !important;
-}
-
-ion-app.is-device {
-  user-select: none;
-}
-
-
 // Misc
 // --------------------------------------------------
 
@@ -55,6 +65,8 @@ ion-alert-controller,
 ion-loading-controller,
 ion-modal-controller,
 ion-picker-controller,
-ion-toast-controller {
+ion-toast-controller,
+.ion-page-hidden {
+  /* stylelint-disable-next-line declaration-no-important */
   display: none;
 }
diff --git a/core/src/components/app/app.tsx b/core/src/components/app/app.tsx
index 89d2e8fced..e0161e9a70 100644
--- a/core/src/components/app/app.tsx
+++ b/core/src/components/app/app.tsx
@@ -1,22 +1,16 @@
 import { Component, Element, Prop, QueueApi } from '@stencil/core';
 
-import { Config, Mode } from '../../interface';
+import { Config } from '../../interface';
 import { isDevice, isHybrid, isStandaloneMode, needInputShims } from '../../utils/platform';
-import { createThemedClasses } from '../../utils/theme';
 
 @Component({
   tag: 'ion-app',
-  styleUrls: {
-    ios: 'app.ios.scss',
-    md: 'app.md.scss'
-  }
+  styleUrl: 'app.scss'
 })
 export class App {
 
   private isDevice = false;
 
-  mode!: Mode;
-
   @Element() el!: HTMLElement;
 
   @Prop({ context: 'window' }) win!: Window;
@@ -40,8 +34,6 @@ export class App {
 
     return {
       class: {
-        ...createThemedClasses(this.mode, 'app'),
-
         'is-device': this.isDevice,
         'is-hydrid': hybrid,
         'is-standalone': isStandalone,
diff --git a/core/src/components/header/header.scss b/core/src/components/header/header.scss
index c9e408dd1c..ddd8bbb728 100644
--- a/core/src/components/header/header.scss
+++ b/core/src/components/header/header.scss
@@ -21,6 +21,6 @@ ion-header ion-toolbar:first-child {
 @supports (padding-top: env(safe-area-inset-top)) {
   ion-header ion-toolbar:first-child {
     /* stylelint-disable-next-line length-zero-no-unit */
-    padding-top: calc(env(safe-area-inset-top) + var(--ion-statusbar-padding, 0px));
+    padding-top: var(--ion-statusbar-padding, 0px);
   }
 }