From 5a1c441fd6f8b3d20b67f40e3fa61119098d31eb Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Mon, 11 Apr 2016 10:01:53 -0400
Subject: [PATCH] fix(app): add iOS status bar padding to each mode

fixes #5924
---
 ionic/components.md.scss        |  5 +++++
 ionic/components.wp.scss        |  5 +++++
 ionic/platform/cordova.ios.scss | 14 +++++++-------
 ionic/platform/cordova.md.scss  | 26 ++++++++++++++++++++++++++
 ionic/platform/cordova.wp.scss  | 26 ++++++++++++++++++++++++++
 5 files changed, 69 insertions(+), 7 deletions(-)
 create mode 100644 ionic/platform/cordova.md.scss
 create mode 100644 ionic/platform/cordova.wp.scss

diff --git a/ionic/components.md.scss b/ionic/components.md.scss
index 3e3c695d29..c91ffd5bb9 100644
--- 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
index 962b6a62a5..823c026526 100644
--- 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
index f8eb9744a7..08f353a7d8 100644
--- 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
new file mode 100644
index 0000000000..1e12504b2a
--- /dev/null
+++ 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
new file mode 100644
index 0000000000..dab4c26b77
--- /dev/null
+++ 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});
+  }
+
+}