that whole nav overhaul thing again

ionic/components/app/flex-order.scss

@@ -4,11 +4,11 @@
 
 
 // the rock that everything orders around
-$flex-order-view-content:        40 !default;
+$flex-order-view-content:        0 !default;
 
 
-$flex-order-toolbar-top:         20 !default;
-$flex-order-toolbar-bottom:      60 !default;
+$flex-order-toolbar-top:         -10 !default;
+$flex-order-toolbar-bottom:      10 !default;
 
 
 $flex-order-tab-bar-top:         30 !default;

ionic/components/app/structure.scss

@@ -33,6 +33,32 @@ ion-nav {
   width: 100%;
   height: 100%;
   overflow: hidden;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.navbar-container {
+  position: relative;
+  min-height: 4.4rem;
+}
+
+.content-container {
+  position: relative;
+  flex: 1;
+}
+
+ion-navbar {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  min-height: 4.4rem;
+  order: $flex-order-toolbar-top;
+
+  display: none;
+  &.show-navbar {
+    display: flex;
+  }
 }
 
 ion-view {
@@ -55,15 +81,7 @@ ion-view {
 ion-toolbar {
   display: flex;
   min-height: 4.4rem;
-  order: $flex-order-toolbar-top;
-}
-
-.stage-off {
-  transform: translateX(9999px);
-}
-
-ion-toolbar[footer] {
-  order: $flex-order-toolbar-bottom;
+  background: white;
 }
 
 ion-content {

ionic/components/nav-bar/extensions/ios.scss

@@ -0,0 +1,70 @@
+
+// iOS Navbar
+// --------------------------------------------------
+
+$navbar-order-ios: (
+  back-button: 10,
+  primary: 20,
+  title: 30,
+  secondary: 40
+);
+
+$navbar-ios-height:                        4.4rem !default;
+$navbar-ios-background:                    #f7f7f8 !default;
+$navbar-ios-border-color:                  #c4c4c4 !default;
+
+$navbar-ios-title-font-size:               1.7rem !default;
+$navbar-ios-button-font-size:              1.7rem !default;
+$navbar-ios-button-text-color:             #007aff !default;
+$navbar-ios-button-background-color:       transparent !default;
+
+
+.nav-ios .navbar-container {
+
+  height: $navbar-ios-height;
+  background: $navbar-ios-background;
+
+  // navbar on top, border on bottom (default)
+  @include hairline(bottom, $navbar-ios-border-color);
+
+  // navbar on bottom, border on top
+  &.navbar-bottom:after {
+    top: 0;
+    bottom: auto;
+  }
+
+  .navbar [side="primary"] {
+    order: map-get($navbar-order-ios, 'primary');
+  }
+
+  .navbar [side="secondary"] {
+    order: map-get($navbar-order-ios, 'secondary');
+  }
+
+  ion-title {
+    order: map-get($navbar-order-ios, 'title');
+    text-align: center;
+    font-size: $navbar-ios-title-font-size;
+    font-weight: 500;
+  }
+
+  .navbar-back-button {
+    order: map-get($navbar-order-ios, 'back-button');
+  }
+
+  .button {
+    font-size: $navbar-ios-button-font-size;
+    color: $navbar-ios-button-text-color;
+    border: none;
+    padding: 0;
+    margin: 0 10px;
+    min-height: $navbar-ios-height;
+    min-width: 0;
+    background: $navbar-ios-button-background-color;
+  }
+
+  .back-button-icon {
+    padding-right: 6px;
+  }
+
+}

ionic/components/nav-bar/extensions/material.scss

@@ -0,0 +1,33 @@
+
+// Material Design Navbar
+// --------------------------------------------------
+
+$navbar-material-height:                  6.4rem !default;
+$navbar-material-background:              #f7f7f8 !default;
+
+$navbar-material-title-font-size:         2rem !default;
+$navbar-material-button-font-size:        2rem !default;
+$navbar-material-button-text-color:       #007aff !default;
+
+
+.navbar-md {
+  height: $navbar-material-height;
+  background: $navbar-material-background;
+
+  .navbar-title {
+    font-size: $navbar-material-title-font-size;
+  }
+
+  .button {
+    font-size: $navbar-material-button-font-size;
+    color: $navbar-material-button-text-color;
+    border: none;
+
+    padding: 0;
+    margin: 0 10px;
+
+    min-height: $navbar-material-height;
+    min-width: 0;
+  }
+
+}

ionic/components/nav-bar/nav-bar.js

@@ -3,58 +3,55 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 import {ElementRef} from 'angular2/src/core/compiler/element_ref';
 import {ProtoViewRef} from 'angular2/src/core/compiler/view_ref';
 
-import * as dom from 'ionic/util/dom';
-import {IonicComponent} from 'ionic/config/component';
-import {NavItem} from 'ionic/ionic';
+import * as dom from '../../util/dom';
 import {Platform} from 'ionic/platform/platform';
+import {NavItem} from '../nav/nav-item';
 import {BackButton} from './back-button';
 
 
 @Component({
-  selector: 'ion-toolbar'
+  selector: 'ion-navbar'
 })
 @View({
   template: `
-    <div class="toolbar-inner">
-      <back-button class="button toolbar-item" [hidden]="!navItem.enableBack"></back-button>
-      <div class="toolbar-title">
-        <div class="toolbar-inner-title toolbar-title-hide">
+    <div class="navbar-inner">
+      <back-button class="button navbar-item" [hidden]="!navItem.enableBack"></back-button>
+      <div class="navbar-title">
+        <div class="navbar-inner-title navbar-title-hide">
           <content select="ion-title"></content>
         </div>
       </div>
-      <!--<div class="toolbar-item toolbar-primary-item">
+      <div class="navbar-item navbar-primary-item">
         <content select=".primary"></content>
       </div>
-      <div class="toolbar-item toolbar-secondary-item">
+      <div class="navbar-item navbar-secondary-item">
         <content select=".secondary"></content>
-      </div>-->
+      </div>
     </div>
   `,
   directives: [BackButton]
 })
-export class Toolbar {
+export class Navbar {
   constructor(navItem: NavItem, elementRef: ElementRef) {
     this.navItem = navItem;
     this.domElement = elementRef.domElement;
-    this.config = Toolbar.config.invoke(this);
 
     // http://davidwalsh.name/detect-node-insertion
     dom.animationStart(this.domElement, 'nodeInserted').then(() => {
       this.alignTitle();
     });
-
   }
 
   alignTitle() {
-    const toolbarEle = this.domElement;
-    const innerTitleEle = this._innerTitleEle || (this._innerTitleEle = toolbarEle.querySelector('.toolbar-inner-title'));
+    const navbarEle = this.domElement;
+    const innerTitleEle = this._innerTitleEle || (this._innerTitleEle = navbarEle.querySelector('.navbar-inner-title'));
     const titleEle = this._titleEle || (this._titleEle = innerTitleEle.querySelector('ion-title'));
     const style = this._style || (this._style = window.getComputedStyle(titleEle));
 
     const titleOffsetWidth = titleEle.offsetWidth;
     const titleOffsetLeft = titleEle.offsetLeft;
     const titleScrollWidth = titleEle.scrollWidth;
-    const toolbarOffsetWidth = toolbarEle.offsetWidth;
+    const navbarOffsetWidth = navbarEle.offsetWidth;
 
     // TODO!!! When an element is being reused by angular2, it'll sometimes keep the
     // styles from the original element's use, causing these calculations to be wrong
@@ -68,7 +65,7 @@ export class Toolbar {
       this._showTitle();
 
     } else {
-      let rightMargin = toolbarOffsetWidth - (titleOffsetLeft + titleOffsetWidth);
+      let rightMargin = navbarOffsetWidth - (titleOffsetLeft + titleOffsetWidth);
       let centerMargin = titleOffsetLeft - rightMargin;
 
       innerTitleEle.style.margin = `0 ${centerMargin}px 0 0`;
@@ -87,10 +84,23 @@ export class Toolbar {
   _showTitle() {
     if (!this._shown) {
       this._shown = true;
-      this._innerTitleEle.classList.remove('toolbar-title-hide');
+      this._innerTitleEle.classList.remove('navbar-title-hide');
     }
   }
 
-
 }
-new IonicComponent(Toolbar, {});
+
+
+/*
+  Used to find and register headers in a view, and this directive's
+  content will be moved up to the common navbar location, and created
+  using the same context as the view's content area.
+*/
+@Directive({
+  selector: 'template[navbar]'
+})
+export class NavbarTemplate {
+  constructor(navItem: NavItem, protoViewRef: ProtoViewRef) {
+    navItem.navbarProto(protoViewRef);
+  }
+}

ionic/components/nav-bar/nav-bar.scss

@@ -1,10 +1,8 @@
 
-// Toolbar
+// Navbar
 // --------------------------------------------------
 
-$toolbar-background-color:    #fff !default;
-
-$toolbar-order: (
+$navbar-order: (
   back-button: 10,
   title: 20,
   primary: 30,
@@ -12,25 +10,24 @@ $toolbar-order: (
 );
 
 
-ion-toolbar {
-  background: $toolbar-background-color;
+ion-navbar {
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
 }
 
-.toolbar-inner {
+.navbar-inner {
   display: flex;
   width: 100%;
 }
 
-ion-toolbar back-button.toolbar-item {
-  order: map-get($toolbar-order, 'back-button');
+ion-navbar back-button.navbar-item {
+  order: map-get($navbar-order, 'back-button');
 }
 
-.toolbar-title {
+.navbar-title {
   flex: 1;
-  order: map-get($toolbar-order, 'title');
+  order: map-get($navbar-order, 'title');
 
   display: flex;
   align-items: center;
@@ -38,13 +35,13 @@ ion-toolbar back-button.toolbar-item {
 }
 
 // buttons are primary by default
-ion-toolbar .button,
-ion-toolbar [side="primary"] {
-  order: map-get($toolbar-order, 'primary');
+ion-navbar .button,
+ion-navbar [side="primary"] {
+  order: map-get($navbar-order, 'primary');
 }
 
-ion-toolbar [side="secondary"] {
-  order: map-get($toolbar-order, 'secondary');
+ion-navbar [side="secondary"] {
+  order: map-get($navbar-order, 'secondary');
 }
 
 ion-title {
@@ -56,18 +53,18 @@ ion-title {
   animation-name: nodeInserted;
 }
 
-.toolbar-inner-title {
+.navbar-inner-title {
   width: 100%;
   padding: 0 15px;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 
-.toolbar .button {
+.navbar .button {
   background: transparent;
   border: none;
 }
 
-.toolbar-title-hide {
+.navbar-title-hide {
   opacity: 0;
 }

ionic/components/nav/nav-item.js

@@ -3,9 +3,6 @@ import {bind} from 'angular2/di';
 
 import * as util from 'ionic/util';
 import {NavController} from './nav-controller';
-import {NavView} from './nav-view';
-
-const SHOW_VIEW_CSS = 'show-view';
 
 
 export class NavItem {
@@ -15,9 +12,11 @@ export class NavItem {
     this.Component = Component;
     this.params = params;
     this.id = util.nextUid();
-    this.headerProtos = [];
-    this.toolbarViews = [];
+    this._navbarProto = null;
+    this._navbarView = null;
     this._titleEle = undefined;
+    this._backBtn = undefined;
+    this.disposals = [];
 
     // if it's possible to go back from this nav item
     this.enableBack = false;
@@ -27,16 +26,12 @@ export class NavItem {
     // update if it's possible to go back from this nav item
     this.enableBack = !!this.nav.getPrevious(this);
 
-    return this.create().then(() => {
-      return new Promise(resolve => {
-        this.viewEle && this.viewEle.classList.add(SHOW_VIEW_CSS);
-        resolve();
-      });
-    });
+    return this.render();;
   }
 
-  create() {
+  render() {
     if (this.created) {
+      console.log('showed existing view', this.id);
       return Promise.resolve();
     }
 
@@ -51,41 +46,80 @@ export class NavItem {
       bind(NavItem).toValue(this)
     ]);
 
-    this.nav.loader.loadNextToExistingLocation(this.Component, this.nav.viewElementRef, injector).then((componentRef) => {
+    this.nav.loader.loadNextToExistingLocation(this.Component, this.nav.contentElementRef, injector).then((componentRef) => {
 
-      // content
-      this.component = componentRef;
+      let navbarContainer = this.nav.navbarContainerRef;
 
-      this.viewEle = componentRef.location.domElement;
-      this.viewEle.setAttribute('id', 'view-' + this.id);
+      if (componentRef && componentRef.dispose && navbarContainer) {
+        this.disposals.push(componentRef.dispose);
 
-      if (componentRef && componentRef.dispose) {
-        this._dispose = componentRef.dispose;
+        this.viewEle = componentRef.location.domElement;
+
+        let context = {
+          boundElementIndex: 0,
+          parentView: {
+            _view: componentRef.location.parentView._view.componentChildViews[0]
+          }
+        };
+
+        let atIndex = -1;
+
+        this._navbarView = navbarContainer.create(this._navbarProto, atIndex, context, injector);
+
+        if (this._navbarView) {
+          this.disposals.push(() => {
+            navbarContainer.remove( navbarContainer.indexOf(this._navbarView) );
+          });
+        }
       }
 
+      console.log('created view', this.id);
       resolve();
     });
 
     return promise;
   }
 
+  cache() {
+    console.log('cached view', this.id);
+  }
+
+  destroy() {
+    console.log('destroyed view', this.id);
+
+    for (let i = 0; i < this.disposals.length; i++) {
+      this.disposals[i]();
+    }
+
+    // just to help prevent any possible memory leaks
+    for (let name in this) {
+      if (this.hasOwnProperty(name)) {
+        this[name] = null;
+      }
+    }
+  }
+
+  navbarProto(navbarProtoView) {
+    this._navbarProto = navbarProtoView;
+  }
+
   viewElement() {
     return this.viewEle;
   }
 
+  navbarElement() {
+    return this._navbarView._view.render._view.rootNodes[0];
+  }
+
   contentElement() {
     return this.viewEle.querySelector('ion-content');
   }
 
-  toolbarElements() {
-    return this.viewEle.querySelectorAll('ion-toolbar');
-  }
-
   titleElement() {
     if (this._titleEle === undefined) {
-      let toolbarElements = this.toolbarElements();
-      for (let i = 0; i < toolbarElements.length; i++) {
-        var titleEle = toolbarElements[i].querySelector('ion-title');
+      let navbarElement = this.navbarElement();
+      if (navbarElement) {
+        let titleEle = navbarElement.querySelector('ion-title');
         if (titleEle) {
           this._titleEle = titleEle;
           return this._titleEle;
@@ -98,9 +132,9 @@ export class NavItem {
 
   backButtonElement() {
     if (this._backBtn === undefined) {
-      let toolbarElements = this.toolbarElements();
-      for (let i = 0; i < toolbarElements.length; i++) {
-        var backBtn = toolbarElements[i].querySelector('back-button');
+      let navbarElement = this.navbarElement();
+      if (navbarElement) {
+        let backBtn = navbarElement.querySelector('back-button');
         if (backBtn) {
           this._backBtn = backBtn;
           return this._backBtn;
@@ -111,21 +145,6 @@ export class NavItem {
     return this._backBtn;
   }
 
-  cache() {
-    this.viewEle.classList.remove(SHOW_VIEW_CSS);
-  }
-
-  destroy() {
-    this._dispose && this._dispose();
-
-    // just to help prevent any possible memory leaks
-    for (let name in this) {
-      if (this.hasOwnProperty(name)) {
-        this[name] = null;
-      }
-    }
-  }
-
 }
 
 export class NavParams {

ionic/components/nav/nav.js

@@ -7,7 +7,7 @@ import {Injector} from 'angular2/di';
 import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 
 import {NavBase} from './nav-base';
-import {ToolbarContainer} from '../toolbar/toolbar-container';
+import {IonicComponent} from 'ionic/config/component'
 
 
 @Component({
@@ -17,26 +17,45 @@ import {ToolbarContainer} from '../toolbar/toolbar-container';
   }
 })
 @View({
-  template: `<template view-anchor></template>`,
-  directives: [ViewAnchor]
+  template: `
+    <header class="navbar-container">
+      <template navbar-anchor></template>
+    </header>
+    <section class="content-container">
+      <template content-anchor></template>
+    </section>
+  `,
+  directives: [NavbarAnchor, ContentAnchor]
 })
 export class Nav extends NavBase {
   constructor(elementRef: ElementRef, loader: DynamicComponentLoader, injector: Injector) {
     super(loader, injector);
     this.domElement = elementRef.domElement;
+    this.config = Nav.config.invoke(this);
   }
 
   width() {
     return this.domElement.offsetWidth;
   }
 }
+new IonicComponent(Nav, {});
 
 
 @Directive({
-  selector: '[view-anchor]'
+  selector: '[navbar-anchor]'
 })
-class ViewAnchor {
-  constructor(@Ancestor() nav: Nav, elementRef: ElementRef) {
-    nav.viewElementRef = elementRef;
+class NavbarAnchor {
+  constructor(@Ancestor() nav: Nav, viewContainerRef: ViewContainerRef) {
+    nav.navbarContainerRef = viewContainerRef;
+  }
+}
+
+
+@Directive({
+  selector: '[content-anchor]'
+})
+class ContentAnchor {
+  constructor(@Ancestor() nav: Nav, elementRef: ElementRef) {
+    nav.contentElementRef = elementRef;
   }
 }

ionic/components/nav/test/basic/main.html

@@ -1,14 +1,2 @@
-<ion-nav [initial]="initial">
-</ion-nav>
 
-<style>
-
-  ion-nav {
-    background: black;
-  }
-
-  .nav-item {
-    background: white;
-  }
-
-</style>
+<ion-nav [initial]="initial"></ion-nav>

ionic/components/nav/test/basic/pages/first-page.html

@@ -1,5 +1,9 @@
 
-<ion-toolbar><ion-title>First Page: {{ val }}</ion-title></ion-toolbar>
+<ion-navbar *navbar><ion-title>First Page Header: {{ val }}</ion-title></ion-navbar>
+
+<!-- <ion-toolbar>
+  First Page Sub Header: {{ val }}
+</ion-toolbar> -->
 
 <ion-content class="padding">
 

ionic/components/nav/test/basic/pages/first-page.js

@@ -1,14 +1,14 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NavController, Toolbar, Content} from 'ionic/ionic';
+import {NavController, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
 import {SecondPage} from './second-page';
 
 
 @Component({selector: 'ion-view'})
 @View({
   templateUrl: 'pages/first-page.html',
-  directives: [Toolbar, Content]
+  directives: [NavbarTemplate, Navbar, Content]
 })
 export class FirstPage {
   constructor(

ionic/components/nav/test/basic/pages/second-page.html

@@ -1,6 +1,13 @@
 
-<ion-toolbar><ion-title>Second Page</ion-title></ion-toolbar>
+<ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
 
+<!-- <ion-toolbar>
+  Second Page Sub Header
+</ion-toolbar>
+
+<ion-toolbar>
+  Second Page Sub Sub Header
+</ion-toolbar> -->
 
 <ion-content class="padding">
 
@@ -13,3 +20,12 @@
   </p>
 
 </ion-content>
+
+<!-- <ion-toolbar>
+  Second Page Sub Footer
+</ion-toolbar>
+
+<ion-toolbar>
+  Second Page Footer
+</ion-toolbar>
+ -->

ionic/components/nav/test/basic/pages/second-page.js

@@ -1,14 +1,14 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NavController, NavParams, Toolbar, Content} from 'ionic/ionic';
+import {NavController, NavParams, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
 import {ThirdPage} from './third-page';
 
 
 @Component({selector: 'ion-view'})
 @View({
   templateUrl: 'pages/second-page.html',
-  directives: [Toolbar, Content]
+  directives: [NavbarTemplate, Navbar, Content]
 })
 export class SecondPage {
   constructor(

ionic/components/nav/test/basic/pages/third-page.html

@@ -1,6 +1,9 @@
 
-<ion-toolbar><ion-title>Third Page</ion-title></ion-toolbar>
+<ion-navbar *navbar><ion-title>Third Page Header</ion-title></ion-navbar>
 
+<!-- <ion-toolbar>
+  Third Page Footer
+</ion-toolbar> -->
 
 <ion-content class="padding">
 

ionic/components/nav/test/basic/pages/third-page.js

@@ -1,13 +1,13 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NavController, Toolbar, Content} from 'ionic/ionic';
+import {NavController, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
 
 
 @Component({selector: 'ion-view'})
 @View({
   templateUrl: 'pages/third-page.html',
-  directives: [Toolbar, Content]
+  directives: [NavbarTemplate, Navbar, Content]
 })
 export class ThirdPage {
   constructor(

ionic/components/tabs/extensions/ios.scss

@@ -1,5 +1,5 @@
 
-// iOS Toolbar
+// iOS Tab Bar
 // --------------------------------------------------
 
 $tab-bar-ios-item-padding:             3px 10px !default;
@@ -22,14 +22,14 @@ $tab-bar-ios-item-icon-size:           2.8rem !default;
   }
 
   &[tab-bar-placement="bottom"] > .tab-bar-container {
-    @include hairline(top, $toolbar-ios-border-color);
+    @include hairline(top, $navbar-ios-border-color);
   }
 
   &[tab-bar-placement="top"] > .tab-bar-container {
-    @include hairline(bottom, $toolbar-ios-border-color);
+    @include hairline(bottom, $navbar-ios-border-color);
   }
 
-  &[tab-bar-placement="top"] > .toolbar-container .toolbar {
+  &[tab-bar-placement="top"] > .navbar-container .navbar {
     @include hairline(bottom, none);
   }
 

ionic/components/toolbar/extensions/ios.scss

@@ -1,73 +0,0 @@
-
-// iOS Toolbar
-// --------------------------------------------------
-
-$toolbar-order-ios: (
-  back-button: 10,
-  primary: 20,
-  title: 30,
-  secondary: 40
-);
-
-$toolbar-ios-height:                        4.4rem !default;
-$toolbar-ios-background:                    #f7f7f8 !default;
-$toolbar-ios-border-color:                  #c4c4c4 !default;
-
-$toolbar-ios-title-font-size:               1.7rem !default;
-$toolbar-ios-button-font-size:              1.7rem !default;
-$toolbar-ios-button-text-color:             #007aff !default;
-$toolbar-ios-button-background-color:       transparent !default;
-
-
-.toolbar-container-ios {
-  height: $toolbar-ios-height;
-  background: $toolbar-ios-background;
-
-  // toolbar on top, border on bottom (default)
-  @include hairline(bottom, $toolbar-ios-border-color);
-
-  // toolbar on bottom, border on top
-  &.toolbar-bottom:after {
-    top: 0;
-    bottom: auto;
-  }
-}
-
-
-.toolbar-ios {
-
-  .toolbar [side="primary"] {
-    order: map-get($toolbar-order-ios, 'primary');
-  }
-
-  .toolbar [side="secondary"] {
-    order: map-get($toolbar-order-ios, 'secondary');
-  }
-
-  ion-title {
-    order: map-get($toolbar-order-ios, 'title');
-    text-align: center;
-    font-size: $toolbar-ios-title-font-size;
-    font-weight: 500;
-  }
-
-  .toolbar-back-button {
-    order: map-get($toolbar-order-ios, 'back-button');
-  }
-
-  .button {
-    font-size: $toolbar-ios-button-font-size;
-    color: $toolbar-ios-button-text-color;
-    border: none;
-    padding: 0;
-    margin: 0 10px;
-    min-height: $toolbar-ios-height;
-    min-width: 0;
-    background: $toolbar-ios-button-background-color;
-  }
-
-  .back-button-icon {
-    padding-right: 6px;
-  }
-
-}

ionic/components/toolbar/extensions/material.scss

@@ -1,33 +0,0 @@
-
-// Material Design Toolbar
-// --------------------------------------------------
-
-$toolbar-material-height:                  6.4rem !default;
-$toolbar-material-background:              #f7f7f8 !default;
-
-$toolbar-material-title-font-size:         2rem !default;
-$toolbar-material-button-font-size:        2rem !default;
-$toolbar-material-button-text-color:       #007aff !default;
-
-
-.toolbar-md {
-  height: $toolbar-material-height;
-  background: $toolbar-material-background;
-
-  .toolbar-title {
-    font-size: $toolbar-material-title-font-size;
-  }
-
-  .button {
-    font-size: $toolbar-material-button-font-size;
-    color: $toolbar-material-button-text-color;
-    border: none;
-
-    padding: 0;
-    margin: 0 10px;
-
-    min-height: $toolbar-material-height;
-    min-width: 0;
-  }
-
-}

ionic/components/toolbar/toolbar-container.js

@@ -1,18 +0,0 @@
-import {ElementRef} from 'angular2/angular2'
-import {Directive} from 'angular2/src/core/annotations_impl/annotations';
-
-import {IonicComponent} from 'ionic/config/component'
-
-
-@Directive({
-  selector: '.toolbar-container'
-})
-export class ToolbarContainer {
-  constructor(elementRef: ElementRef) {
-    this.domElement = elementRef.domElement;
-    this.config = ToolbarContainer.config.invoke(this);
-  }
-}
-
-
-new IonicComponent(ToolbarContainer, {})