fix(cordova): fix the status bar padding with the new structure

ionic-team · Jun 17, 2016 · 15642e4 · 15642e4
1 parent 5a85d82
commit 15642e4
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 45 deletions.
diff --git a/src/platform/cordova.ios.scss b/src/platform/cordova.ios.scss
@@ -7,18 +7,16 @@
 $cordova-ios-statusbar-padding-modal-max-width:         $cordova-statusbar-padding-modal-max-width !default;
 
 
-@include navbar-section-statusbar-padding($toolbar-ios-height);
-@include navbar-section-title-statusbar-padding($toolbar-ios-height);
-
-.tab-subpage,
 ion-nav > ion-page,
+ion-nav > ion-page > ion-header,
+ion-tab > ion-page > ion-header,
 ion-menu {
   @include toolbar-statusbar-padding($toolbar-ios-height, $content-ios-padding);
   @include toolbar-title-statusbar-padding($toolbar-ios-height, $content-ios-padding);
 }
 
 @media only screen and (max-width: $cordova-ios-statusbar-padding-modal-max-width) {
-  .modal-wrapper > ion-modal-inner {
+  .modal-wrapper > ion-page > ion-header {
     @include toolbar-statusbar-padding($toolbar-ios-height, $content-ios-padding);
     @include toolbar-title-statusbar-padding($toolbar-ios-height, $content-ios-padding);
   }

diff --git a/src/platform/cordova.md.scss b/src/platform/cordova.md.scss
@@ -7,16 +7,15 @@
 $cordova-md-statusbar-padding-modal-max-width:         $cordova-statusbar-padding-modal-max-width !default;
 
 
-@include navbar-section-statusbar-padding($toolbar-md-height);
-
-.tab-subpage,
 ion-nav > ion-page,
+ion-nav > ion-page > ion-header,
+ion-tab > ion-page > ion-header,
 ion-menu {
   @include toolbar-statusbar-padding($toolbar-md-height, $content-md-padding);
 }
 
 @media only screen and (max-width: $cordova-md-statusbar-padding-modal-max-width) {
-  .modal-wrapper > ion-modal-inner {
+  .modal-wrapper > ion-page > ion-header {
     @include toolbar-statusbar-padding($toolbar-md-height, $content-md-padding);
   }
 }
diff --git a/src/platform/cordova.scss b/src/platform/cordova.scss
@@ -33,27 +33,8 @@ $cordova-statusbar-padding-modal-max-width:         767px !default;
 
 }
 
-// The navbar section should get modified height and padding-top for the status bar
-// --------------------------------------------------------------------------------
-
-@mixin navbar-section-statusbar-padding($toolbar-height) {
-
-  ion-navbar-section.statusbar-padding {
-    height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
-    min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
-  }
-
-  ion-navbar-section.statusbar-padding > .toolbar {
-    padding-top: $cordova-ios-statusbar-padding;
-
-    height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
-    min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
-  }
 
-}
-
-
-// iOS is the only mode that uses these mixins and they should be removed with #5036
+// iOS is the only mode that uses this mixins and it should be removed with #5036
 // --------------------------------------------------------------------------------
 
 @mixin toolbar-title-statusbar-padding($toolbar-height, $content-padding) {
@@ -67,15 +48,3 @@ $cordova-statusbar-padding-modal-max-width:         767px !default;
   }
 
 }
-
-@mixin navbar-section-title-statusbar-padding($toolbar-height) {
-
-  ion-navbar-section.statusbar-padding > .toolbar ion-segment,
-  ion-navbar-section.statusbar-padding > .toolbar ion-title {
-    padding-top: $cordova-ios-statusbar-padding;
-
-    height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
-    min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
-  }
-
-}
diff --git a/src/platform/cordova.wp.scss b/src/platform/cordova.wp.scss
@@ -7,16 +7,15 @@
 $cordova-wp-statusbar-padding-modal-max-width:         $cordova-statusbar-padding-modal-max-width !default;
 
 
-@include navbar-section-statusbar-padding($toolbar-wp-height);
-
-.tab-subpage,
 ion-nav > ion-page,
+ion-nav > ion-page > ion-header,
+ion-tab > ion-page > ion-header,
 ion-menu {
   @include toolbar-statusbar-padding($toolbar-wp-height, $content-wp-padding);
 }
 
 @media only screen and (max-width: $cordova-wp-statusbar-padding-modal-max-width) {
-  .modal-wrapper > ion-modal-inner {
+  .modal-wrapper > ion-page > ion-header {
     @include toolbar-statusbar-padding($toolbar-wp-height, $content-wp-padding);
   }
 }