tab-bar/toolbar alignment

src/components/app/flex-order.scss

@@ -0,0 +1,15 @@
+
+// Flex Order
+// --------------------------------------------------
+
+
+// the rock that everything orders around
+$flex-order-view-content:        40 !default;
+
+
+$flex-order-toolbar-top:         20 !default;
+$flex-order-toolbar-bottom:      60 !default;
+
+
+$flex-order-tab-bar-top:         30 !default;
+$flex-order-tab-bar-bottom:      50 !default;

src/components/app/mixins/util.scss

@@ -70,39 +70,50 @@
 // --------------------------------------------------
 
 @mixin hairline($placement, $line-color, $z-index: 999) {
+  // use $line-color: none to override existing hairline settings
 
   @if $placement == top {
 
     &:before {
-      position: absolute;
+      @if $line-color == none {
-      top: 0;
+        background-color: inherit;
-      right: auto;
+
-      bottom: auto;
+      } @else {
-      left: 0;
+        position: absolute;
-      z-index: $z-index;
+        top: 0;
-      display: block;
+        right: auto;
-      width: 100%;
+        bottom: auto;
-      height: 1px;
+        left: 0;
-      @include transform-origin(50%, 0%);
+        z-index: $z-index;
-      background-color: $line-color;
+        display: block;
-      content: '';
+        width: 100%;
+        height: 1px;
+        @include transform-origin(50%, 0%);
+        background-color: $line-color;
+        content: '';
+      }
     }
 
   } @else if $placement == bottom {
 
     &:after {
-      position: absolute;
+      @if $line-color == none {
-      top: auto;
+        background-color: inherit;
-      right: auto;
+
-      bottom: 0;
+      } @else {
-      left: 0;
+        position: absolute;
-      z-index: $z-index;
+        top: auto;
-      display: block;
+        right: auto;
-      width: 100%;
+        bottom: 0;
-      height: 1px;
+        left: 0;
-      @include transform-origin(50%, 0%);
+        z-index: $z-index;
-      background-color: $line-color;
+        display: block;
-      content: '';
+        width: 100%;
+        height: 1px;
+        @include transform-origin(50%, 0%);
+        background-color: $line-color;
+        content: '';
+      }
     }
 
   }

src/components/app/scaffolding.scss

@@ -47,6 +47,7 @@ html {
     // container of many .nav-pane's, each one containing one view
     position: relative;
     @include flex(1);
+    @include flex-order($flex-order-view-content);
   }
 
   .tab-pane-container {
@@ -54,6 +55,7 @@ html {
     position: relative;
     width: 100%;
     height: 100%;
+    @include flex-order($flex-order-view-content);
   }
 
   .nav-pane {

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">
+    <nav class="tab-bar-container">
-      <div 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%;

src/components/toolbar/toolbar.scss

@@ -14,11 +14,11 @@ $toolbar-background:              #f7f7f8 !default;
 }
 
 .toolbar-top {
-  @include flex-order(20);
+  @include flex-order($flex-order-toolbar-top);
 }
 
 .toolbar-bottom {
-  @include flex-order(80);
+  @include flex-order($flex-order-toolbar-bottom);
 }
 
 .toolbar-items {

src/ionic.scss

@@ -12,6 +12,7 @@
 // Globals
 @import
   "components/app/z-index",
+  "components/app/flex-order",
   "components/app/normalize",
   "components/app/globals",
   "components/app/colors",
@@ -69,12 +70,12 @@
   "components/toolbar/extensions/android";
 
 
+// Icons
+@import
+  "components/icon/icon";
+
+
 // Web View Adaptors
 @import
   "webview/cordova/cordova",
   "webview/node-webkit/node-webkit";
-
-
-// Icons
-@import
-  "components/icon/icon";