diff --git a/ionic/components/app/test/cordova/index.ts b/ionic/components/app/test/cordova/index.ts index 34e42cab57..0363ce009e 100644 --- a/ionic/components/app/test/cordova/index.ts +++ b/ionic/components/app/test/cordova/index.ts @@ -77,11 +77,36 @@ class Page3 { } +@Page({ + template: ` + + This is a tab page + + + + + + +

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}); + } }