fix(app): add iOS status bar padding to each mode

fixes #5924
ionic-team · Apr 11, 2016 · 5a1c441 · 5a1c441
1 parent 0311322
commit 5a1c441
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 7 deletions.
diff --git a/ionic/components.md.scss b/ionic/components.md.scss
@@ -28,3 +28,8 @@
   "components/tabs/tabs.md",
   "components/toggle/toggle.md",
   "components/toolbar/toolbar.md";
+
+
+  // Material Design w/ iOS Platform
+  @import
+    "platform/cordova.md";
diff --git a/ionic/components.wp.scss b/ionic/components.wp.scss
@@ -28,3 +28,8 @@
   "components/tabs/tabs.wp",
   "components/toggle/toggle.wp",
   "components/toolbar/toolbar.wp";
+
+
+  // Windows w/ iOS Platform
+  @import
+    "platform/cordova.wp";
diff --git a/ionic/platform/cordova.ios.scss b/ionic/platform/cordova.ios.scss
@@ -3,19 +3,19 @@
 // iOS Cordova
 // --------------------------------------------------
 
-$cordova-ios-toolbar-padding:    20px   !default;
+$cordova-ios-statusbar-padding:    20px   !default;
 
 
 &.platform-cordova.platform-ios {
 
   ion-navbar-section {
-    height: $toolbar-ios-height + $cordova-ios-toolbar-padding;
-    min-height: $toolbar-ios-height + $cordova-ios-toolbar-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, {
-    padding-top: $cordova-ios-toolbar-padding;
+    padding-top: $cordova-ios-statusbar-padding;
   }
 
   ion-navbar,
@@ -28,10 +28,10 @@ $cordova-ios-toolbar-padding:    20px   !default;
   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: $toolbar-ios-padding + $cordova-ios-toolbar-padding;
+    padding-top: calc(#{$toolbar-ios-padding} + #{$cordova-ios-statusbar-padding});
 
-    height: $toolbar-ios-height + $cordova-ios-toolbar-padding;
-    min-height: $toolbar-ios-height + $cordova-ios-toolbar-padding;
+    height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
+    min-height: calc(#{$toolbar-ios-height} + #{$cordova-ios-statusbar-padding});
   }
 
 }
diff --git a/ionic/platform/cordova.md.scss b/ionic/platform/cordova.md.scss
@@ -0,0 +1,26 @@
+@import "../globals.core";
+
+// 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,
+  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});
+  }
+
+}
diff --git a/ionic/platform/cordova.wp.scss b/ionic/platform/cordova.wp.scss
@@ -0,0 +1,26 @@
+@import "../globals.core";
+
+// 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,
+  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});
+  }
+
+}