From 996fae5b6c6a28b7305e0a05266d7b92fdc45f7d Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 21 Jul 2015 21:12:37 -0500
Subject: [PATCH] tabs redo

---
 ionic/components/tabs/extensions/ios.scss     | 13 +++++-------
 .../components/tabs/extensions/material.scss  | 16 ++-------------
 ionic/components/tabs/tabs.scss               | 20 +++++++++----------
 3 files changed, 16 insertions(+), 33 deletions(-)

diff --git a/ionic/components/tabs/extensions/ios.scss b/ionic/components/tabs/extensions/ios.scss
index 18439a1335..8c8a199573 100644
--- a/ionic/components/tabs/extensions/ios.scss
+++ b/ionic/components/tabs/extensions/ios.scss
@@ -11,9 +11,7 @@ $tab-bar-ios-height:                   50px !default;
 .tabs[mode="ios"] {
 
   .tab-bar {
-    // iOS's UITabBar is at most 49px high
-    max-height: $tab-bar-ios-height;
-    height: $tab-bar-ios-height;
+    min-height: $tab-bar-ios-height;
   }
 
   .tab-button {
@@ -32,23 +30,22 @@ $tab-bar-ios-height:                   50px !default;
   .tab-button-icon {
     font-size: $tab-bar-ios-item-icon-size;
     height: $tab-bar-ios-item-icon-size;
-    min-width: $tab-bar-ios-item-icon-size;
-    margin-bottom: 2px;
+    min-width: $tab-bar-ios-item-icon-size + 5;
 
     &:before {
       vertical-align: top;
     }
   }
 
-  &[tab-bar-placement="bottom"] > .tab-bar-container {
+  &[tab-bar-placement="bottom"] .tab-bar-container {
     @include hairline(top, $toolbar-ios-border-color);
   }
 
-  &[tab-bar-placement="top"] > .tab-bar-container {
+  &[tab-bar-placement="top"] .tab-bar-container {
     @include hairline(bottom, $toolbar-ios-border-color);
   }
 
-  &[tab-bar-placement="top"] > .toolbar-container .toolbar {
+  &[tab-bar-placement="top"] .toolbar-container .toolbar {
     @include hairline(bottom, none);
   }
 
diff --git a/ionic/components/tabs/extensions/material.scss b/ionic/components/tabs/extensions/material.scss
index d5ecf4f6d1..d2dea68d3b 100644
--- a/ionic/components/tabs/extensions/material.scss
+++ b/ionic/components/tabs/extensions/material.scss
@@ -2,7 +2,7 @@
 // Material Design Tabs
 // --------------------------------------------------
 
-$tab-bar-md-item-padding:             0 10px !default;
+$tab-bar-md-item-padding:             2px 10px !default;
 $tab-bar-md-item-font-size:           1.4rem !default;
 $tab-bar-md-item-icon-size:           26px !default;
 $tab-bar-md-item-height:              4.8rem !default;
@@ -21,19 +21,7 @@ $tab-bar-md-item-height:              4.8rem !default;
 
   .tab-button-icon {
     font-size: $tab-bar-md-item-icon-size;
-  }
-
-  .has-title.has-icon {
-
-    .tab-button-icon {
-      padding-top: 10px;
-      padding-bottom: 6px;
-    }
-
-    .tab-button-text {
-      padding-bottom: 15px;
-    }
-
+    min-width: $tab-bar-md-item-icon-size + 5;
   }
 
 }
diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss
index bae7f59865..789651f966 100644
--- a/ionic/components/tabs/tabs.scss
+++ b/ionic/components/tabs/tabs.scss
@@ -46,7 +46,7 @@ ion-tab {
   order: $flex-order-tab-bar-bottom;
 }
 
-[tab-bar-placement="top"] > .tab-bar-container {
+[tab-bar-placement="top"] .tab-bar-container {
   order: $flex-order-tab-bar-top;
 }
 
@@ -74,25 +74,19 @@ button.tab-button {
   cursor: pointer;
   user-select: none;
 
-
   color: $tab-button-text-inactive;
   border: 0;
   border-radius: 0;
   background: none;
 }
 
-[tab-bar-icons="bottom"] > .tab-bar-container button.tab-button {
+[tab-bar-icons="bottom"] button.tab-button {
   .tab-button-icon {
     order: 10;
   }
-
-  .tab-button-icon {
-    margin-top: 2px;
-    margin-bottom: 0;
-  }
 }
 
-[tab-bar-icons="left"] > .tab-bar-container button.tab-button {
+[tab-bar-icons="left"] button.tab-button {
   flex-direction: row;
 
   .tab-button-icon {
@@ -101,7 +95,7 @@ button.tab-button {
   }
 }
 
-[tab-bar-icons="right"] > .tab-bar-container button.tab-button {
+[tab-bar-icons="right"] button.tab-button {
   flex-direction: row;
 
   .tab-button-icon {
@@ -111,6 +105,11 @@ button.tab-button {
   }
 }
 
+.tab-button-text {
+  margin-top: 3px;
+  margin-bottom: 2px;
+}
+
 .tab-button-text,
 .tab-button-icon {
   align-self: center;
@@ -130,7 +129,6 @@ button.tab-button {
   display: block;
 }
 
-.has-title-only,
 .has-title-only .tab-button-text {
   white-space: normal;
 }