fix(toolbar): fixed the toolbar spacing for iOS with platform-cordova

Added some tests for modals with a toolbar, only target the first
toolbar in a menu or modal so the user can have multiple toolbars
without skewing them. References #469

ionic/components/modal/test/basic/e2e.ts

@@ -1,8 +1,16 @@
 
-it('should open action sheet', function() {
+it('should open modal', function() {
   element(by.css('.e2eOpenModal')).click();
 });
 
 it('should close with close button click', function() {
   element(by.css('.e2eCloseMenu')).click();
 });
+
+it('should open toolbar modal', function() {
+  element(by.css('.e2eOpenToolbarModal')).click();
+});
+
+it('should close toolbar modal', function() {
+  element(by.css('.e2eCloseToolbarModal')).click();
+});

ionic/components/modal/test/basic/index.ts

@@ -33,6 +33,10 @@ class MyAppCmp {
     this.modal.open(PlainPage);
   }
 
+  openToolbarModal() {
+    this.modal.open(ToolbarModal);
+  }
+
   openModalChildNav() {
     this.modal.open(ContactModal, {
       handle: 'my-awesome-modal'
@@ -63,6 +67,32 @@ class PlainPage {
   }
 }
 
+@Page({
+  template: `
+    <ion-toolbar>
+      <ion-title>Modals</ion-title>
+    </ion-toolbar>
+    <ion-toolbar primary>
+      <ion-title>Another toolbar</ion-title>
+    </ion-toolbar>
+
+
+    <ion-content padding>
+        <button block danger (click)="closeModal()" class="e2eCloseToolbarModal">
+          <icon close></icon>
+          Close Modal
+        </button>
+    </ion-content>
+  `
+})
+class ToolbarModal {
+  constructor(private modal: Modal) {}
+
+  closeModal() {
+    this.modal.get().close();
+  }
+}
+
 
 @Page({
   template: '<ion-nav [root]="rootView"></ion-nav>'

ionic/components/modal/test/basic/main.html

@@ -6,6 +6,9 @@
   <p>
     <button (click)="openModal()">Open plain modal</button>
   </p>
+  <p>
+    <button class="e2eOpenToolbarModal" (click)="openToolbarModal()">Open modal w/ toolbar</button>
+  </p>
   <p>
     <button (click)="openModalCustomAnimation()">Modal: Custom Animation</button>
   </p>

ionic/platform/cordova-ios.scss

@@ -9,14 +9,20 @@ $cordova-ios-toolbar-padding:    2rem   !default;
 
   ion-navbar-section,
   ion-navbar,
-  ion-menu > ion-toolbar {
+  ion-menu > ion-toolbar:first-child,
+  ion-menu > ion-toolbar:first-child ion-title,
+  ion-page.modal > ion-toolbar:first-child,
+  ion-page.modal > ion-toolbar:first-child ion-title, {
     min-height: $toolbar-ios-height + $cordova-ios-toolbar-padding;
     height: $toolbar-ios-height + $cordova-ios-toolbar-padding;
   }
 
   ion-navbar,
   ion-navbar ion-title,
-  ion-menu > ion-toolbar {
+  ion-menu > ion-toolbar:first-child,
+  ion-menu > ion-toolbar:first-child ion-title,
+  ion-page.modal > ion-toolbar:first-child,
+  ion-page.modal > ion-toolbar:first-child ion-title, {
     padding-top: $cordova-ios-toolbar-padding;
   }