From 920701e3fdd7c11abcefdf1ae4fe0f8e7f201d64 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 4 Sep 2015 15:30:35 -0500
Subject: [PATCH] md tabs

---
 ionic/components/tabs/modes/material.scss     | 32 +++++++++++++++++--
 ionic/components/tabs/test/advanced/tabs.html |  6 ++--
 .../tabs/test/tab-bar-scenarios/main.html     | 29 +++++++----------
 3 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/ionic/components/tabs/modes/material.scss b/ionic/components/tabs/modes/material.scss
index e6fc58c077..5f7c2dccc7 100644
--- a/ionic/components/tabs/modes/material.scss
+++ b/ionic/components/tabs/modes/material.scss
@@ -2,9 +2,9 @@
 // Material Design Tabs
 // --------------------------------------------------
 
-$tab-bar-md-item-padding:             2px 10px !default;
+$tab-bar-md-item-padding:             12px 10px 4px 10px !default;
 $tab-bar-md-item-font-size:           1.4rem !default;
-$tab-bar-md-item-icon-size:           26px !default;
+$tab-bar-md-item-icon-size:           2.4rem !default;
 $tab-bar-md-item-height:              4.8rem !default;
 
 
@@ -17,6 +17,16 @@ $tab-bar-md-item-height:              4.8rem !default;
 
     box-shadow: none;
     border-radius: 0;
+    border-bottom: 2px solid transparent;
+  }
+
+  button.tab-button[aria-selected="true"] {
+    border-bottom-color: $tab-button-text-active;
+  }
+
+  .tab-button-text {
+    margin-top: 8px;
+    margin-bottom: 8px;
   }
 
   .tab-button-icon {
@@ -25,3 +35,21 @@ $tab-bar-md-item-height:              4.8rem !default;
   }
 
 }
+
+[mode=md][tab-bar-icons=bottom] button.tab-button {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+[mode=md][tab-bar-icons=right] button.tab-button,
+[mode=md][tab-bar-icons=left] button.tab-button {
+  padding-bottom: 10px;
+
+  icon {
+    min-width: 24px;
+  }
+}
+
+[mode=md] button.tab-button.icon-only,
+[mode=md] button.tab-button.has-title-only {
+  padding: 8px 10px;
+}
diff --git a/ionic/components/tabs/test/advanced/tabs.html b/ionic/components/tabs/test/advanced/tabs.html
index 2fc079d70e..c604bd0cc9 100644
--- a/ionic/components/tabs/test/advanced/tabs.html
+++ b/ionic/components/tabs/test/advanced/tabs.html
@@ -1,6 +1,6 @@
 
 <ion-tabs>
-  <ion-tab tab-title="Heart" tab-icon="heart" [root]="tab1Root"></ion-tab>
-  <ion-tab tab-title="Star" tab-icon="star" [root]="tab2Root"></ion-tab>
-  <ion-tab tab-title="Stopwatch" tab-icon="stopwatch" [root]="tab3Root"></ion-tab>
+  <ion-tab tab-title="Recents" tab-icon="call" [root]="tab1Root"></ion-tab>
+  <ion-tab tab-title="Favorites" tab-icon="star" [root]="tab2Root"></ion-tab>
+  <ion-tab tab-title="Settings" tab-icon="settings" [root]="tab3Root"></ion-tab>
 </ion-tabs>
diff --git a/ionic/components/tabs/test/tab-bar-scenarios/main.html b/ionic/components/tabs/test/tab-bar-scenarios/main.html
index 07a7e67408..2f06ba15d6 100644
--- a/ionic/components/tabs/test/tab-bar-scenarios/main.html
+++ b/ionic/components/tabs/test/tab-bar-scenarios/main.html
@@ -1,48 +1,42 @@
 
 <ion-tabs>
-  <ion-tab tab-title="Heart" tab-icon="heart"></ion-tab>
-  <ion-tab tab-title="Star" tab-icon="star"></ion-tab>
-  <ion-tab tab-title="Stopwatch" tab-icon="stopwatch"></ion-tab>
+  <ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
+  <ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
   <ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
 </ion-tabs>
 
 
 <ion-tabs tab-bar-icons="bottom">
-  <ion-tab tab-title="Heart" tab-icon="heart"></ion-tab>
-  <ion-tab tab-title="Star" tab-icon="star"></ion-tab>
-  <ion-tab tab-title="Stopwatch" tab-icon="stopwatch"></ion-tab>
+  <ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
+  <ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
   <ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
 </ion-tabs>
 
 
 <ion-tabs tab-bar-icons="right">
-  <ion-tab tab-title="Heart" tab-icon="heart"></ion-tab>
-  <ion-tab tab-title="Star" tab-icon="star"></ion-tab>
-  <ion-tab tab-title="Stopwatch" tab-icon="stopwatch"></ion-tab>
+  <ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
+  <ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
   <ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
 </ion-tabs>
 
 
 <ion-tabs tab-bar-icons="left">
-  <ion-tab tab-title="Heart" tab-icon="heart"></ion-tab>
-  <ion-tab tab-title="Star" tab-icon="star"></ion-tab>
-  <ion-tab tab-title="Stopwatch" tab-icon="stopwatch"></ion-tab>
+  <ion-tab tab-title="Recents" tab-icon="call"></ion-tab>
+  <ion-tab tab-title="Favorites" tab-icon="heart"></ion-tab>
   <ion-tab tab-title="Settings" tab-icon="settings"></ion-tab>
 </ion-tabs>
 
 
 <ion-tabs>
+  <ion-tab tab-icon="call"></ion-tab>
   <ion-tab tab-icon="heart"></ion-tab>
-  <ion-tab tab-icon="star"></ion-tab>
-  <ion-tab tab-icon="stopwatch"></ion-tab>
   <ion-tab tab-icon="settings"></ion-tab>
 </ion-tabs>
 
 
 <ion-tabs>
-  <ion-tab tab-title="Heart"></ion-tab>
-  <ion-tab tab-title="Star"></ion-tab>
-  <ion-tab tab-title="Stopwatch"></ion-tab>
+  <ion-tab tab-title="Recents"></ion-tab>
+  <ion-tab tab-title="Favorites"></ion-tab>
   <ion-tab tab-title="Settings"></ion-tab>
 </ion-tabs>
 
@@ -57,5 +51,6 @@
 <style>
   ion-tabs {
     height: auto;
+    margin-bottom: 24px;
   }
 </style>