fix(toolbar): place iOS border on ion-header/footer

Author: adamdbradley

src/components/content/content.ts

@@ -488,7 +488,7 @@ export class Content extends Ion {
       this._scrollEle.style.paddingBottom = (this._paddingBottom > 0 ? this._paddingBottom + 'px' : '');
     }
 
-    if (this._tabbarOnTop && this._tabs) {
+    if (this._tabbarOnTop !== null && this._tabs) {
       if (this._tabbarOnTop) {
         this._tabs.setTabbarPosition(this._headerHeight, -1);
 

src/components/searchbar/test/toolbar/main.html

@@ -1,7 +1,7 @@
 <ion-header>
 
   <ion-navbar>
-    <ion-title>Test</ion-title>
+    <ion-title>Searchbar Toolbars</ion-title>
   </ion-navbar>
 
 </ion-header>

src/components/toolbar/toolbar.ios.scss

@@ -37,30 +37,44 @@ $navbar-ios-height:                         $toolbar-ios-height !default;
 }
 
 
-// iOS Toolbar Background
+// iOS Header Toolbar
 // --------------------------------------------------
 
-.toolbar-background {
+ion-header {
+  border: 0;
   border-bottom-width: 1px;
   border-style: solid;
   border-color: $toolbar-ios-border-color;
-  background: $toolbar-ios-background;
 }
 
-&.hairlines .toolbar-background {
+&.hairlines ion-header {
   border-bottom-width: $hairlines-width;
 }
 
-.toolbar[position=bottom] .toolbar-background {
+
+// iOS Footer Toolbar
+// --------------------------------------------------
+
+ion-footer {
+  border: 0;
   border-top-width: 1px;
-  border-bottom-width: 0;
+  border-style: solid;
+  border-color: $toolbar-ios-border-color;
 }
 
-&.hairlines .toolbar[position=bottom] .toolbar-background {
+&.hairlines ion-footer {
   border-top-width: $hairlines-width;
 }
 
 
+// iOS Toolbar Background
+// --------------------------------------------------
+
+.toolbar-background {
+  background: $toolbar-ios-background;
+}
+
+
 // iOS Toolbar Content
 // --------------------------------------------------