docs(demos): update button demo content

demos/component-docs/app.css

@@ -93,3 +93,6 @@ scroll-content {
   color: #757575;
 }
 
+#demo-hammer {
+  padding: 0 0.4em;
+}

demos/component-docs/buttons/block.html

@@ -3,6 +3,10 @@
 </ion-navbar>
 
 <ion-content padding class="has-header components-demo">
+  <p>
+    <button light block>Light</button>
+  </p>
+
   <p>
     <button block>Default</button>
   </p>
@@ -15,10 +19,6 @@
     <button danger block>Danger</button>
   </p>
 
-  <p>
-    <button light block>Light</button>
-  </p>
-
   <p>
     <button dark block>Dark</button>
   </p>

demos/component-docs/buttons/buttons.html

@@ -3,6 +3,10 @@
 </ion-navbar>
 
 <ion-content padding class="has-header components-demo">
+  <p>
+    <button light>Light</button>
+  </p>
+
   <p>
     <button>Default</button>
   </p>
@@ -15,10 +19,6 @@
     <button danger>Danger</button>
   </p>
 
-  <p>
-    <button light>Light</button>
-  </p>
-
   <p>
     <button dark>Dark</button>
   </p>

demos/component-docs/buttons/fab.html

@@ -1,12 +1,21 @@
 <ion-navbar *navbar>
-  <ion-title>Floating Action Buttons</ion-title>
+  <ion-title>FAB</ion-title>
 </ion-navbar>
 
 <ion-content class="has-header components-demo">
   <p>
-    <button fab fab-top fab-right>
+    <button fab primary fab-top fab-left>
       <icon add></icon>
     </button>
+    <button fab secondary fab-top fab-center>
+      <icon is-active="false" compass></icon>
+    </button>
+    <button fab danger fab-top fab-right>
+      <icon is-active="false" mic></icon>
+    </button>
+    <button fab dark fab-bottom fab-center>
+      <icon is-active="false" heart></icon>
+    </button>
   </p>
 </ion-content>
 

demos/component-docs/buttons/full.html

@@ -3,6 +3,10 @@
 </ion-navbar>
 
 <ion-content class="has-header components-demo">
+
+  <p>
+    <button light full>Light</button>
+  </p>
   <p>
     <button full>Default</button>
   </p>
@@ -14,11 +18,6 @@
   <p>
     <button danger full>Danger</button>
   </p>
-
-  <p>
-    <button light full>Light</button>
-  </p>
-
   <p>
     <button dark full>Dark</button>
   </p>

demos/component-docs/buttons/icons.html

@@ -4,11 +4,40 @@
 </ion-navbar>
 
 <ion-content padding class="has-header components-demo">
+
+  <p>
+    <button light>
+      <icon arrow-back></icon>
+      Back
+    </button>
+
+    <button light>
+      <icon arrow-down></icon>
+    </button>
+
+    <button light>
+      <icon arrow-up></icon>
+    </button>
+
+    <button light>
+      Next
+      <icon arrow-forward></icon>
+    </button>
+  </p>
+
   <p>
     <button>
       <icon home></icon>
       Home
     </button>
+    <button outline >
+      <icon briefcase is-active="false"></icon>
+      Work
+    </button>
+    <button clear>
+      <icon beer is-active="false"></icon>
+      Pub
+    </button>
   </p>
 
   <p>
@@ -16,24 +45,30 @@
       <icon people></icon>
       Friends
     </button>
+    <button secondary outline>
+      <icon paw is-active="false"></icon>
+      Best Friend
+    </button>
   </p>
 
   <p>
     <button danger>
       <icon close></icon>
     </button>
-  </p>
+    <button danger outline>
-
+      <icon remove-circle is-active="false"></icon>
-  <p>
+    </button>
-    <button light>
+    <button danger clear>
-      <icon arrow-back></icon>
+      <icon trash is-active="false"></icon>
-      Back
     </button>
   </p>
 
   <p>
-    <button dark>
+    <button dark round>
-      <icon hammer></icon>
+      <icon hammer id="demo-hammer"></icon>
+    </button>
+    <button dark clear>
+      <icon construct is-active="false"></icon>
     </button>
   </p>
 

demos/component-docs/buttons/outline.html

@@ -3,6 +3,11 @@
 </ion-navbar>
 
 <ion-content padding class="has-header components-demo">
+  
+  <p>
+    <button light outline>Light</button>
+  </p>
+
   <p>
     <button outline>Default</button>
   </p>
@@ -15,10 +20,6 @@
     <button danger outline>Danger</button>
   </p>
 
-  <p>
-    <button light outline>Light</button>
-  </p>
-
   <p>
     <button dark outline>Dark</button>
   </p>

demos/component-docs/buttons/round.html

@@ -3,6 +3,9 @@
 </ion-navbar>
 
 <ion-content padding class="has-header components-demo">
+  <p>
+    <button light round>Light</button>
+  </p>
   <p>
     <button round>Default</button>
   </p>
@@ -15,10 +18,6 @@
     <button danger round>Danger</button>
   </p>
 
-  <p>
-    <button light round>Light</button>
-  </p>
-
   <p>
     <button dark round>Dark</button>
   </p>

demos/component-docs/buttons/sizes.html

@@ -3,10 +3,12 @@
 </ion-navbar>
 
 <ion-content padding class="has-header components-demo">
+  <p>
+    <button light large>Light</button>
+  </p>
   <p>
     <button small>Default</button>
   </p>
-
   <p>
     <button secondary small>Secondary</button>
   </p>
@@ -14,11 +16,6 @@
   <p>
     <button danger small>Danger</button>
   </p>
-
-  <p>
-    <button light large>Light</button>
-  </p>
-
   <p>
     <button dark large>Dark</button>
   </p>

demos/component-docs/tabs/tabs.ts

@@ -13,7 +13,7 @@ class TabOneCtrl {
 }
 
 @Page({
-  templateUrl: 'tabs.html'
+  templateUrl: 'tabs/tabs.html'
 })
 export class TabsPage {
   constructor(nav: NavController, params: NavParams) {