back button component

src/components/toolbar/back-button.js

@@ -0,0 +1,27 @@
+import {NgElement, Component, Template} from 'angular2/angular2'
+import {ComponentConfig} from 'ionic2/config/component-config'
+
+export let BackButtonConfig = new ComponentConfig('back-button')
+
+@Component({
+  selector: '.back-button',
+  services: [BackButtonConfig]
+})
+@Template({
+  inline: `
+    <icon class="back-button-icon ion-ios-arrow-back"></icon>
+    <div class="back-button-text">
+      <div class="back-default">Back</div>
+      <div class="back-title"></div>
+    </div>`
+})
+export class BackButton {
+  constructor(@NgElement() ngEle:NgElement, configFactory: BackButtonConfig) {
+    this.domElement = ngEle.domElement
+    this.config = configFactory.create(this);
+
+
+  }
+
+}
+

src/components/toolbar/extensions/android.scss

@@ -5,8 +5,8 @@
 $toolbar-android-height:                  6.4rem !default;
 $toolbar-android-background:              #f7f7f8 !default;
 
-$toolbar-android-title-font-size:         1.7rem !default;
-$toolbar-android-button-font-size:        1.7rem !default;
+$toolbar-android-title-font-size:         2rem !default;
+$toolbar-android-button-font-size:        2rem !default;
 $toolbar-android-button-text-color:       #007aff !default;
 
 
@@ -14,6 +14,10 @@ $toolbar-android-button-text-color:       #007aff !default;
   height: $toolbar-android-height;
   background: $toolbar-android-background;
 
+  .bar-inner-title {
+    font-size: $toolbar-android-title-font-size;
+  }
+
   .button {
     font-size: $toolbar-android-button-font-size;
     color: $toolbar-android-button-text-color;

src/components/toolbar/extensions/ios.scss

@@ -8,7 +8,7 @@ $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-text-color:             #007aff !default;
 $toolbar-ios-button-background-color:       transparent !default;
 
 
@@ -64,9 +64,4 @@ $toolbar-ios-button-background-color:       transparent !default;
     background: $toolbar-ios-button-background-color;
   }
 
-  .back-button-icon {
-    margin-right: 5px;
-    min-width: 12px;
-  }
-
 }

src/components/toolbar/toolbar.js

@@ -1,4 +1,5 @@
 import {NgElement, Component, Template} from 'angular2/angular2'
+import {BackButton} from 'ionic2/components/toolbar/back-button'
 import {ComponentConfig} from 'ionic2/config/component-config'
 
 export let ToolbarConfig = new ComponentConfig('toolbar')
@@ -13,13 +14,7 @@ export let ToolbarConfig = new ComponentConfig('toolbar')
 @Template({
   inline: `
     <div class="bar-items">
-      <button class="button back-button bar-item">
-        <icon class="back-button-icon ion-ios-arrow-back"></icon>
-        <div class="back-button-text">
-          <div class="back-default">Back</div>
-          <div class="back-title"></div>
-        </div>
-      </button>
+      <button class="button back-button bar-item"></button>
       <div class="bar-title">
         <div class="bar-inner-title">
           {{ title }}
@@ -33,7 +28,8 @@ export let ToolbarConfig = new ComponentConfig('toolbar')
       <div class="bar-item bar-secondary-item">
         <content select="ion-nav-items[side=secondary]"></content>
       </div>
-    </div>`
+    </div>`,
+  directives: [BackButton]
 })
 export class Toolbar {
   constructor(@NgElement() ngEle:NgElement, configFactory: ToolbarConfig) {

src/components/toolbar/toolbar.scss

@@ -54,9 +54,11 @@ $toolbar-background:              #f7f7f8 !default;
 
 .back-button {
   @include flex-display();
+}
 
-  .back-button-icon {
-  }
+.back-button-icon {
+  margin-right: 5px;
+  min-width: 12px;
 }
 
 .toolbar .button {