tabs / hairlines

src/components/tabs/extensions/android.scss

@@ -0,0 +1,14 @@
+
+// Android Toolbar
+// --------------------------------------------------
+
+$tab-bar-android-item-padding:             4px 10px !default;
+
+
+.tabs-android {
+
+  .tab-bar-item {
+    padding: $tab-bar-item-padding;
+  }
+
+}

src/components/tabs/extensions/ios.scss

@@ -0,0 +1,28 @@
+
+// iOS Toolbar
+// --------------------------------------------------
+
+$tab-bar-ios-item-padding:             3px 10px !default;
+$tab-bar-ios-item-font-size:           11px !default;
+$tab-bar-ios-item-icon-size:           28px !default;
+
+
+.tabs-ios {
+
+  .tab-bar-item {
+    padding: $tab-bar-ios-item-padding;
+  }
+
+  .tab-bar-item-text {
+    font-size: $tab-bar-ios-item-font-size;
+  }
+
+  .tab-bar-item-icon {
+    font-size: $tab-bar-ios-item-icon-size;
+  }
+
+  > .tab-bar.toolbar-bottom {
+    @include hairline(top, $toolbar-ios-border-color);
+  }
+
+}

src/components/tabs/tabs.js

@@ -9,7 +9,9 @@ import {IonicComponent} from 'ionic2/config/component'
 })
 @Template({
   inline: `
-    <div class="toolbar tab-bar toolbar-ios toolbar-bottom">
+    <div class="toolbar tab-bar"
+         [class.toolbar-top]="placement=='top'"
+         [class.toolbar-bottom]="placement=='bottom'">
       <div class="tab-bar-container">
         <a *for="#tab of tabs"
           class="tab-bar-item"