tab structure updates

src/components/app/scaffolding.scss

@@ -14,7 +14,7 @@ html {
   padding: 0;
 
   .nav-viewport {
-    // container of many nav-views, which each contain one view
+    // container of many .nav-views, each .nav-view contains one view
     position: absolute;
     top: 0;
     right: 0;
@@ -22,18 +22,9 @@ html {
     left: 0;
     width: 100%;
     height: 100%;
-    height: 100vh;
 
-    display: flex;
+    @include flex-display();
-    flex-direction: column;
+    @include flex-direction(column);
-  }
-
-  .toolbar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    min-height: 50px;
   }
 
   .toolbar-container {
@@ -43,21 +34,42 @@ html {
     min-height: 50px;
   }
 
+  .toolbar {
+    // one view's toolbar, sibling to many view toolbars insde of .toolbar-container
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
   .nav-pane-container {
     // container of many .nav-pane's, each one containing one view
     position: relative;
+    @include flex(1);
+  }
+
+  .tab-pane-container {
+    // container of each content for each tab component within a tabs component
+    position: relative;
     width: 100%;
     height: 100%;
   }
 
   .nav-pane {
-    // container of one view
+    // container of one .pane,
     position: absolute;
     width: 100%;
     height: 100%;
     background: white;
   }
 
+  .nav-pane-cover-parent {
+    // .nav-pane that should completely cover siblings and parent
+    top: -50px;
+    height: 100vh;
+  }
+
   .pane {
     // user created view, contained by .nav-pane
     position: absolute;

src/components/tabs/tab.js

@@ -21,23 +21,11 @@ import {IonicComponent} from 'ionic2/config/component'
 })
 @Template({
   inline: `
-
-  <header class="toolbar-container">
-    <!-- COLLECTION OF TOOLBARS FOR EACH OF ITS VIEWS WITHIN THIS NAV-VIEWPORT -->
-    <!-- TOOLBARS FOR EACH VIEW SHOULD HAVE THE SAME CONTEXT AS ITS VIEW -->
-  </header>
-
-  <nav class="nav-tab-bar">
-    <!-- SHARED TAB BAR FOR EACH TAB CONTAINER -->
-
-  </nav>
-
     <div class="nav-pane-container">
       <!-- COLLECTION OF PANES WITHIN THIS NAV-VIEWPORT, EACH PANE AS ONE VIEW -->
       <!-- EACH VIEW HAS A TOOLBAR WHICH NEEDS TO HAVE THE SAME CONTEXT -->
       <section class="nav-pane" *for="#item of getRawNavStack()" [item]="item"></section>
     </div>
-
   `,
   directives: [For, NavPane]
 })

src/components/tabs/tabs.js

@@ -11,9 +11,12 @@ import {IonicComponent} from 'ionic2/config/component'
 })
 @Template({
   inline: `
-    <div class="tab-bar"
+    <header class="toolbar-container">
-         [class.tab-bar-top]="placement=='top'"
+      <!-- COLLECTION OF TOOLBARS FOR EACH OF ITS VIEWS WITHIN THIS NAV-VIEWPORT -->
-         [class.tab-bar-bottom]="placement=='bottom'">
+      <!-- TOOLBARS FOR EACH VIEW SHOULD HAVE THE SAME CONTEXT AS ITS VIEW -->
+    </header>
+
+    <nav class="tab-bar">
       <div class="tab-bar-container">
         <a *for="#tab of tabs"
           class="tab-bar-item"
@@ -26,8 +29,11 @@ import {IonicComponent} from 'ionic2/config/component'
             <span class="tab-bar-item-text" [hidden]="tabBarText=='none'">{{tab.title}}</span>
         </a>
       </div>
-    </div>
+    </nav>
+
+    <section class="tab-pane-container">
       <content></content>
+    </section>
   `,
   directives: [For]
 })
@@ -36,7 +42,11 @@ export class Tabs  {
     @NgElement() ngElement: NgElement
   ) {
     this.domElement = ngElement.domElement
-    this.domElement.classList.add('pane')
+
+    // should be used to cover up sibling .nav-pane's and it's parent
+    this.domElement.classList.add('nav-pane-cover-parent')
+
+    // .tab-bar-top/bottom should be added to the entire element when specified
 
     this.config = Tabs.config.invoke(this)
     this.tabs = []

src/components/tabs/tabs.scss

@@ -2,12 +2,22 @@
 // Tabs
 // --------------------------------------------------
 
+$tab-bar-min-height:               66px !default;
+$tab-bar-background-color:         #f7f7f8 !default;
 $tab-bar-item-padding:             10px !default;
 $tab-bar-item-min-width:           100px !default;
 
 
-.toolbar.tab-bar {
+.tabs {
+  @include flex-display();
+  @include flex-direction(column);
+  height: 100%;
+}
+
+.tab-bar {
   @include flex-justify-content(center);
+  min-height: $tab-bar-min-height;
+  background: $tab-bar-background-color;
 }
 
 .tab-bar-container {

src/components/toolbar/toolbar.js

@@ -30,7 +30,7 @@ export let ToolbarConfig = new ComponentConfig('toolbar')
         <content select="ion-nav-items[side=secondary]"></content>
       </div>
     </div>
-    <div class="shared-toolbar"></div>`,
+  `,
   directives: [BackButton]
 })
 export class Toolbar {

src/components/toolbar/toolbar.scss

@@ -71,11 +71,3 @@ $toolbar-background:              #f7f7f8 !default;
   @include flex-order(4);
 }
 
-
-
-.shared-toolbar {
-  display: none;
-  width: 100%;
-  height: 44px;
-  background: red;
-}