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

ionic-team · Jun 18, 2016 · 48c1ffd · 48c1ffd
1 parent 8be0a9f
commit 48c1ffd
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 9 deletions.
diff --git a/src/components/content/content.ts b/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);
 

diff --git a/src/components/searchbar/test/toolbar/main.html b/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>

diff --git a/src/components/toolbar/toolbar.ios.scss b/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
 // --------------------------------------------------