From 4a1437278d74ab38268ddf4f9070861533fdabb6 Mon Sep 17 00:00:00 2001
From: Drew Rygh <drew.rygh@gmail.com>
Date: Thu, 19 Nov 2015 15:50:35 -0600
Subject: [PATCH] docs(demos): custom styles for tabbars

---
 demos/component-docs/app.scss                 |  5 +++++
 .../component-docs/popups/basic/template.html |  3 +--
 demos/component-docs/tabs/basic/pages.ts      |  2 +-
 demos/component-docs/tabs/basic/styles.scss   | 14 ++++++++++++
 demos/component-docs/tabs/icon-text/pages.ts  |  2 +-
 .../component-docs/tabs/icon-text/styles.scss | 22 +++++++++++++++++++
 demos/component-docs/tabs/icon/pages.ts       |  2 +-
 demos/component-docs/tabs/icon/styles.scss    | 22 +++++++++++++++++++
 8 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 demos/component-docs/tabs/basic/styles.scss
 create mode 100644 demos/component-docs/tabs/icon-text/styles.scss
 create mode 100644 demos/component-docs/tabs/icon/styles.scss

diff --git a/demos/component-docs/app.scss b/demos/component-docs/app.scss
index ff81c955f8..5f219ab970 100644
--- a/demos/component-docs/app.scss
+++ b/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";
+
+
 
 
 //////////////////////////////////
diff --git a/demos/component-docs/popups/basic/template.html b/demos/component-docs/popups/basic/template.html
index ad0b4b13a5..771bec071d 100644
--- a/demos/component-docs/popups/basic/template.html
+++ b/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>
-
diff --git a/demos/component-docs/tabs/basic/pages.ts b/demos/component-docs/tabs/basic/pages.ts
index 1154657ec0..aa39afc401 100644
--- a/demos/component-docs/tabs/basic/pages.ts
+++ b/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>' +
diff --git a/demos/component-docs/tabs/basic/styles.scss b/demos/component-docs/tabs/basic/styles.scss
new file mode 100644
index 0000000000..a12aca2931
--- /dev/null
+++ b/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;
+  }
+}
\ No newline at end of file
diff --git a/demos/component-docs/tabs/icon-text/pages.ts b/demos/component-docs/tabs/icon-text/pages.ts
index 1d19314bb8..3eccbbc546 100644
--- a/demos/component-docs/tabs/icon-text/pages.ts
+++ b/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>' +
diff --git a/demos/component-docs/tabs/icon-text/styles.scss b/demos/component-docs/tabs/icon-text/styles.scss
new file mode 100644
index 0000000000..438f52204c
--- /dev/null
+++ b/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;
+    }
+  }
+}
\ No newline at end of file
diff --git a/demos/component-docs/tabs/icon/pages.ts b/demos/component-docs/tabs/icon/pages.ts
index 9aa4aa0f53..ee4948312c 100644
--- a/demos/component-docs/tabs/icon/pages.ts
+++ b/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>' +
diff --git a/demos/component-docs/tabs/icon/styles.scss b/demos/component-docs/tabs/icon/styles.scss
new file mode 100644
index 0000000000..0ac6c92344
--- /dev/null
+++ b/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;
+    }
+  }
+}
\ No newline at end of file