tab-bar/toolbar alignment

src/components/tabs/extensions/android.scss

@@ -2,6 +2,7 @@
 // Android Toolbar
 // --------------------------------------------------
 
+$tab-bar-android-min-height:                40px !default;
 $tab-bar-android-item-padding:              4px 10px !default;
 $tab-bar-android-active-border-width:       3px !default;
 $tab-bar-android-active-border-color:       red !default;
@@ -11,6 +12,10 @@ $tab-bar-android-text-font-weight:          500 !default;
 
 .tabs-android {
 
+  .tab-bar-container {
+    min-height: $tab-bar-android-min-height;
+  }
+
   .tab-bar-item {
     padding: $tab-bar-item-padding;
     text-transform: $tab-bar-android-text-transform;

src/components/tabs/extensions/ios.scss

@@ -2,6 +2,8 @@
 // iOS Toolbar
 // --------------------------------------------------
 
+$tab-bar-ios-min-height:               52px !default;
+
 $tab-bar-ios-item-padding:             3px 10px !default;
 $tab-bar-ios-item-font-size:           1.1rem !default;
 $tab-bar-ios-item-icon-size:           2.8rem !default;
@@ -9,6 +11,10 @@ $tab-bar-ios-item-icon-size:           2.8rem !default;
 
 .tabs-ios {
 
+  .tab-bar-container {
+    min-height: $tab-bar-ios-min-height;
+  }
+
   .tab-bar-item {
     padding: $tab-bar-ios-item-padding;
   }
@@ -21,12 +27,16 @@ $tab-bar-ios-item-icon-size:           2.8rem !default;
     font-size: $tab-bar-ios-item-icon-size;
   }
 
-  > .tab-bar.toolbar-bottom {
+  &.tab-bar-bottom > .tab-bar-container {
     @include hairline(top, $toolbar-ios-border-color);
   }
 
-  > .tab-bar.toolbar-top {
+  &.tab-bar-top > .tab-bar-container {
     @include hairline(bottom, $toolbar-ios-border-color);
   }
 
+  &.tab-bar-top > .toolbar-container .toolbar {
+    @include hairline(bottom, none);
+  }
+
 }

src/components/tabs/tabs.js

@@ -12,12 +12,12 @@ import {IonicComponent} from 'ionic2/config/component'
 @Template({
   inline: `
     <header class="toolbar-container">
-      <!-- COLLECTION OF TOOLBARS FOR EACH OF ITS VIEWS WITHIN THIS NAV-VIEWPORT -->
+      <!-- COLLECTION OF TOOLBARS FOR EACH VIEW WITHIN EACH TAB-VIEWPORT -->
       <!-- TOOLBARS FOR EACH VIEW SHOULD HAVE THE SAME CONTEXT AS ITS VIEW -->
     </header>
 
-    <nav class="tab-bar">
-      <div class="tab-bar-container">
+    <nav class="tab-bar-container">
+      <div class="tab-bar">
         <a *for="#tab of tabs"
           class="tab-bar-item"
           [class.tab-active]="tab.isSelected"
@@ -47,6 +47,14 @@ export class Tabs  {
     this.domElement.classList.add('nav-pane-cover-parent')
 
     // .tab-bar-top/bottom should be added to the entire element when specified
+    // TODO: MAKE MORE GOOD!!!
+    setTimeout(() => {
+      if (this.placement == 'top') {
+        this.domElement.classList.add('tab-bar-top')
+      } else {
+        this.domElement.classList.add('tab-bar-bottom')
+      }
+    })
 
     this.config = Tabs.config.invoke(this)
     this.tabs = []

src/components/tabs/tabs.scss

@@ -16,13 +16,22 @@ $tab-bar-item-max-width:           160px !default;
   height: 100%;
 }
 
-.tab-bar {
+.tab-bar-top > .tab-bar-container {
+  @include flex-order($flex-order-tab-bar-top);
+}
+
+.tab-bar-bottom > .tab-bar-container {
+  @include flex-order($flex-order-tab-bar-bottom);
+}
+
+.tab-bar-container {
   @include flex-justify-content(center);
+  position: relative;
   min-height: $tab-bar-min-height;
   background: $tab-bar-background-color;
 }
 
-.tab-bar-container {
+.tab-bar {
   @include flex-display();
   @include flex-justify-content(center);
   height: 100%;