fix(cordova): add status bar padding for content for all modes

closes #5934

Author: brandyscarney

ionic/components/app/test/cordova/index.ts

@@ -77,11 +77,36 @@ class Page3 {
 }
 
 
+@Page({
+  template: `
+  <ion-navbar *navbar>
+    <ion-title>This is a tab page</ion-title>
+    <button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-buttons end>
+      <button>
+        <ion-icon name="funnel"></ion-icon>
+      </button>
+    </ion-buttons>
+  </ion-navbar>
+  <ion-content padding>
+    <p>The toolbar should have status bar padding.</p>
+  </ion-content>
+  `
+})
+class TabPage1 {
+  constructor(private nav: NavController) {
+
+  }
+}
+
+
 @Page({
   templateUrl: 'tabs.html'
 })
 class TabsPage {
-  tab1Root = Page1;
+  tab1Root = TabPage1;
   tab2Root = Page2;
   tab3Root = Page3;
 

ionic/platform/cordova.ios.scss

@@ -1,37 +1,40 @@
-@import "../globals.core";
+@import "../globals.ios";
 
 // iOS Cordova
 // --------------------------------------------------
 
 $cordova-ios-statusbar-padding:    20px   !default;
 
 
-&.platform-cordova.platform-ios {
+ion-navbar-section {
+  height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
+  min-height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
+}
+
+ion-navbar-section > .toolbar ion-segment,
+ion-navbar-section > .toolbar ion-title,
+ion-navbar-section > .toolbar {
+  padding-top: $cordova-ios-statusbar-padding;
+  height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
+  min-height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
+}
 
-  ion-navbar-section {
+ion-nav > ion-page,
+ion-menu {
+  > .toolbar.statusbar-padding:first-child ion-segment,
+  > .toolbar.statusbar-padding:first-child ion-title,
+  > .toolbar.statusbar-padding:first-child {
+    padding-top: $cordova-ios-statusbar-padding;
     height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
     min-height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
   }
 
-  ion-navbar ion-title,
-  ion-navbar ion-segment, {
+  > ion-content.statusbar-padding:first-child scroll-content {
     padding-top: $cordova-ios-statusbar-padding;
   }
 
-  ion-navbar,
-  ion-app > ion-toolbar:first-child,
-  ion-app > ion-toolbar:first-child ion-title,
-  ion-app > ion-toolbar:first-child ion-segment,
-  ion-menu > ion-toolbar:first-child,
-  ion-menu > ion-toolbar:first-child ion-title,
-  ion-menu > ion-toolbar:first-child ion-segment,
-  ion-page.modal > ion-toolbar:first-child,
-  ion-page.modal > ion-toolbar:first-child ion-title,
-  ion-page.modal > ion-toolbar:first-child ion-segment, {
-    padding-top: calc(#{$toolbar-ios-padding} + #{$cordova-ios-statusbar-padding});
-
-    height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
-    min-height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
+  > ion-content.statusbar-padding:first-child[padding] scroll-content,
+  > ion-content.statusbar-padding:first-child[padding-top] scroll-content {
+    padding-top: calc(#{$content-ios-padding} + #{$cordova-ios-statusbar-padding});
   }
-
 }

ionic/platform/cordova.md.scss

@@ -1,26 +1,36 @@
-@import "../globals.core";
+@import "../globals.md";
 
 // iOS Cordova
 // --------------------------------------------------
 
 $cordova-ios-statusbar-padding:    20px   !default;
 
 
-&.platform-cordova.platform-ios {
+ion-navbar-section {
+  height: calc(#{$toolbar-md-height} + #{$cordova-ios-statusbar-padding});
+  min-height: calc(#{$toolbar-md-height} + #{$cordova-ios-statusbar-padding});
+}
+
+ion-navbar-section > .toolbar {
+  padding-top: $cordova-ios-statusbar-padding;
+  height: calc(#{$toolbar-md-height} + #{$cordova-ios-statusbar-padding});
+  min-height: calc(#{$toolbar-md-height} + #{$cordova-ios-statusbar-padding});
+}
 
-  ion-navbar-section {
+ion-nav > ion-page,
+ion-menu {
+  > .toolbar.statusbar-padding:first-child {
+    padding-top: $cordova-ios-statusbar-padding;
     height: calc(#{$toolbar-md-height} + #{$cordova-ios-statusbar-padding});
     min-height: calc(#{$toolbar-md-height} + #{$cordova-ios-statusbar-padding});
   }
 
-  ion-navbar,
-  ion-app > ion-toolbar:first-child,
-  ion-menu > ion-toolbar:first-child,
-  ion-page.modal > ion-toolbar:first-child {
-    padding-top: calc(#{$toolbar-md-padding} + #{$cordova-ios-statusbar-padding});
-
-    height: calc(#{$toolbar-md-height} + #{$cordova-ios-statusbar-padding});
-    min-height: calc(#{$toolbar-md-height} + #{$cordova-ios-statusbar-padding});
+  > ion-content.statusbar-padding:first-child scroll-content {
+    padding-top: $cordova-ios-statusbar-padding;
   }
 
+  > ion-content.statusbar-padding:first-child[padding] scroll-content,
+  > ion-content.statusbar-padding:first-child[padding-top] scroll-content {
+    padding-top: calc(#{$content-md-padding} + #{$cordova-ios-statusbar-padding});
+  }
 }

ionic/platform/cordova.wp.scss

@@ -1,26 +1,36 @@
-@import "../globals.core";
+@import "../globals.wp";
 
 // iOS Cordova
 // --------------------------------------------------
 
 $cordova-ios-statusbar-padding:    20px   !default;
 
 
-&.platform-cordova.platform-ios {
+ion-navbar-section {
+  height: calc(#{$toolbar-wp-height} + #{$cordova-ios-statusbar-padding});
+  min-height: calc(#{$toolbar-wp-height} + #{$cordova-ios-statusbar-padding});
+}
+
+ion-navbar-section > .toolbar {
+  padding-top: $cordova-ios-statusbar-padding;
+  height: calc(#{$toolbar-wp-height} + #{$cordova-ios-statusbar-padding});
+  min-height: calc(#{$toolbar-wp-height} + #{$cordova-ios-statusbar-padding});
+}
 
-  ion-navbar-section {
+ion-nav > ion-page,
+ion-menu {
+  > .toolbar.statusbar-padding:first-child {
+    padding-top: $cordova-ios-statusbar-padding;
     height: calc(#{$toolbar-wp-height} + #{$cordova-ios-statusbar-padding});
     min-height: calc(#{$toolbar-wp-height} + #{$cordova-ios-statusbar-padding});
   }
 
-  ion-navbar,
-  ion-app > ion-toolbar:first-child,
-  ion-menu > ion-toolbar:first-child,
-  ion-page.modal > ion-toolbar:first-child {
-    padding-top: calc(#{$toolbar-wp-padding} + #{$cordova-ios-statusbar-padding});
-
-    height: calc(#{$toolbar-wp-height} + #{$cordova-ios-statusbar-padding});
-    min-height: calc(#{$toolbar-wp-height} + #{$cordova-ios-statusbar-padding});
+  > ion-content.statusbar-padding:first-child scroll-content {
+    padding-top: $cordova-ios-statusbar-padding;
   }
 
+  > ion-content.statusbar-padding:first-child[padding] scroll-content,
+  > ion-content.statusbar-padding:first-child[padding-top] scroll-content {
+    padding-top: calc(#{$content-wp-padding} + #{$cordova-ios-statusbar-padding});
+  }
 }