docs(demos): custom styles for tabbars

demos/component-docs/app.scss

@@ -29,6 +29,11 @@ $font-path: '../../dist/fonts';
 @import "lists/thumbnail/styles";
 @import "menus/basic/styles";
 @import "slides/basic/styles";
+@import "tabs/basic/styles";
+@import "tabs/icon/styles";
+@import "tabs/icon-text/styles";
+
+
 
 
 //////////////////////////////////

demos/component-docs/popups/basic/template.html

@@ -3,9 +3,8 @@
   <ion-title>Popups</ion-title>
 </ion-navbar>
 
-<ion-content padding class="has-header">
+<ion-content padding>
   <button dark (click)="doAlert()">Alert</button>
   <button light (click)="doPrompt()">Prompt</button>
   <button primary (click)="doConfirm()">Confirm</button>
 </ion-content>
-

demos/component-docs/tabs/basic/pages.ts

@@ -20,7 +20,7 @@ class TabTextPage {
 
 @Page({
   template: 
-    '<ion-tabs>' +
+    '<ion-tabs class="tabs-basic">' +
       '<ion-tab tab-title="Music" [root]="tabOne"></ion-tab>' +
       '<ion-tab tab-title="Movies" [root]="tabTwo"></ion-tab>' +
       '<ion-tab tab-title="Games" [root]="tabThree"></ion-tab>' +

demos/component-docs/tabs/basic/styles.scss

@@ -0,0 +1,14 @@
+body.md {
+  
+  .tabs-basic tabbar {
+    background-color: #387EF5;
+
+    a {
+      color: #fff !important;
+    }
+  }
+  .tabs-basic tab-highlight {
+    color: #fff;
+    background-color: #fff;
+  }
+}

demos/component-docs/tabs/icon-text/pages.ts

@@ -20,7 +20,7 @@ class TabIconTextPage {
 
 @Page({
   template:
-  '<ion-tabs>' +
+  '<ion-tabs class="tabs-icon-text">' +
   '<ion-tab tab-icon="water" tab-title="Water" [root]="tabOne"></ion-tab>' +
   '<ion-tab tab-icon="leaf" tab-title="Life" [root]="tabTwo"></ion-tab>' +
   '<ion-tab tab-icon="flame" tab-title="Fire" [root]="tabThree"></ion-tab>' +

demos/component-docs/tabs/icon-text/styles.scss

@@ -0,0 +1,22 @@
+body.md {
+  
+  .tabs-icon-text tabbar {
+    background-color: #7e60ff;
+
+    a {
+      color: #fff !important;
+    }
+  }
+  .tabs-icon-text tab-highlight {
+    color: #fff;
+    background-color: #fff;
+  }
+}
+
+body.ios {
+  .tabs-icon-text tabbar {
+    a {
+      color: #7e60ff;
+    }
+  }
+}

demos/component-docs/tabs/icon/pages.ts

@@ -20,7 +20,7 @@ class TabIconPage {
 
 @Page({
   template:
-  '<ion-tabs>' +
+  '<ion-tabs class="tabs-icon">' +
   '<ion-tab tab-icon="contact" [root]="tabOne"></ion-tab>' +
   '<ion-tab tab-icon="compass" [root]="tabTwo"></ion-tab>' +
   '<ion-tab tab-icon="analytics" [root]="tabThree"></ion-tab>' +

demos/component-docs/tabs/icon/styles.scss

@@ -0,0 +1,22 @@
+body.md {
+  
+  .tabs-icon tabbar {
+    background-color: #f53d3d;
+
+    a {
+      color: #fff;
+    }
+  }
+  .tabs-icon tab-highlight {
+    color: #fff;
+    background-color: #fff;
+  }
+}
+
+body.ios {
+  .tabs-icon tabbar {
+    a {
+      color: #f53d3d;
+    }
+  }
+}