fix(app): fix the statusbar-padding to match new structure

ionic-team · May 2, 2018 · 6c2d539 · 6c2d539
1 parent a939fa2
commit 6c2d539
Show file tree

Hide file tree

Showing 4 changed files with 317 additions and 283 deletions.
diff --git a/core/src/components/app/app.ios.scss b/core/src/components/app/app.ios.scss
@@ -6,23 +6,22 @@
 
 .app-ios {
 
-  @include footer-safe-area(
-    $toolbar-ios-height,
-    $toolbar-ios-padding,
-    $tabbar-ios-height);
+  @include footer-safe-area($toolbar-ios-height, $toolbar-ios-padding, $tabbar-ios-height);
 
   font-family: $font-family-ios-base;
   font-size: $font-size-ios-base;
   background-color: $background-ios-color;
 
   // TODO this can be simplified
-  .ion-page,
-  .ion-page > ion-header,
-  ion-tab ion-nav .ion-page > ion-header,
-  ion-menu > .menu-inner,
-  ion-menu > .menu-inner > ion-header {
-    @include toolbar-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $app-ios-statusbar-padding);
-    @include toolbar-title-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $app-ios-statusbar-padding);
+  &.statusbar-padding {
+    .ion-page,
+    .ion-page > ion-header,
+    ion-tab ion-nav .ion-page > ion-header,
+    ion-menu > .menu-inner,
+    ion-menu > .menu-inner > ion-header {
+      @include toolbar-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $app-ios-statusbar-padding);
+      @include toolbar-title-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-ios-padding, $app-ios-statusbar-padding);
+    }
   }
 }
 

diff --git a/core/src/components/app/app.md.scss b/core/src/components/app/app.md.scss
@@ -16,12 +16,14 @@
   background-color: $background-md-color;
 
   // TODO this can be simplified
-  .ion-page,
-  .ion-page > ion-header,
-  ion-tab ion-nav .ion-page > ion-header,
-  ion-menu > .menu-inner,
-  ion-menu > .menu-inner > ion-header {
-    @include toolbar-statusbar-padding($toolbar-md-height, $toolbar-md-padding, $content-md-padding, $app-md-statusbar-padding);
+  &.statusbar-padding {
+    .ion-page,
+    .ion-page > ion-header,
+    ion-tab ion-nav .ion-page > ion-header,
+    ion-menu > .menu-inner,
+    ion-menu > .menu-inner > ion-header {
+      @include toolbar-statusbar-padding($toolbar-md-height, $toolbar-md-padding, $content-md-padding, $app-md-statusbar-padding);
+    }
   }
 }