+ The toolbar should have status bar padding.
+
+ `
+})
+class TabPage1 {
+ constructor(private nav: NavController) {
+
+ }
+}
+
+
@Page({
templateUrl: 'tabs.html'
})
class TabsPage {
- tab1Root = Page1;
+ tab1Root = TabPage1;
tab2Root = Page2;
tab3Root = Page3;
diff --git a/ionic/platform/cordova.ios.scss b/ionic/platform/cordova.ios.scss
index 08f353a7d8..20755a3186 100644
--- a/ionic/platform/cordova.ios.scss
+++ b/ionic/platform/cordova.ios.scss
@@ -1,4 +1,4 @@
-@import "../globals.core";
+@import "../globals.ios";
// iOS Cordova
// --------------------------------------------------
@@ -6,32 +6,35 @@
$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 {
+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-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});
}
-
}
diff --git a/ionic/platform/cordova.md.scss b/ionic/platform/cordova.md.scss
index 1e12504b2a..c4bcfd0452 100644
--- a/ionic/platform/cordova.md.scss
+++ b/ionic/platform/cordova.md.scss
@@ -1,4 +1,4 @@
-@import "../globals.core";
+@import "../globals.md";
// iOS Cordova
// --------------------------------------------------
@@ -6,21 +6,31 @@
$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,
- 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-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-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-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});
+ }
}
diff --git a/ionic/platform/cordova.wp.scss b/ionic/platform/cordova.wp.scss
index dab4c26b77..0e60eb45c6 100644
--- a/ionic/platform/cordova.wp.scss
+++ b/ionic/platform/cordova.wp.scss
@@ -1,4 +1,4 @@
-@import "../globals.core";
+@import "../globals.wp";
// iOS Cordova
// --------------------------------------------------
@@ -6,21 +6,31 @@
$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,
- 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-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-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-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});
+ }
}