From 3b5af7321c527a6e3d3556861b18dec84cd79258 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Fri, 4 Sep 2015 17:17:46 -0500
Subject: [PATCH] tab buttons

---
 ionic/components/tabs/modes/ios.scss          | 39 ++++++++-
 ionic/components/tabs/modes/material.scss     | 25 +++---
 ionic/components/tabs/tabs.scss               | 15 ++--
 ionic/components/tabs/tabs.ts                 |  8 +-
 .../tabs/test/tab-bar-scenarios/main.html     | 81 ++++++++++---------
 5 files changed, 108 insertions(+), 60 deletions(-)

diff --git a/ionic/components/tabs/modes/ios.scss b/ionic/components/tabs/modes/ios.scss
index 9fd02afd8f..39fc940ad3 100644
--- a/ionic/components/tabs/modes/ios.scss
+++ b/ionic/components/tabs/modes/ios.scss
@@ -4,14 +4,13 @@
 
 $tab-bar-ios-item-padding:             0px 10px !default;
 $tab-bar-ios-item-font-size:           10px !default;
-$tab-bar-ios-item-icon-size:           30px !default;
-$tab-bar-ios-height:                   50px !default;
+$tab-bar-ios-item-icon-size:           32px !default;
+$tab-bar-ios-height:                   49px !default;
 
 
 .tabs[mode=ios] {
 
   .tab-bar {
-    min-height: $tab-bar-ios-height;
     border-top: 1px solid $toolbar-ios-border-color;
   }
 
@@ -22,11 +21,13 @@ $tab-bar-ios-height:                   50px !default;
 
   .tab-button {
     padding: $tab-bar-ios-item-padding;
+    min-height: $tab-bar-ios-height;
   }
 
   .tab-button-text {
-    font-size: $tab-bar-ios-item-font-size;
+    margin-bottom: 0;
     min-height: $tab-bar-ios-item-font-size + 1;
+    font-size: $tab-bar-ios-item-font-size;
   }
 
   .has-title-only .tab-button-text {
@@ -45,6 +46,36 @@ $tab-bar-ios-height:                   50px !default;
 
 }
 
+[mode=ios][tab-bar-icons=right] .tab-button,
+[mode=ios][tab-bar-icons=left] .tab-button {
+
+  .tab-button-text {
+    font-size: 1.4rem;
+    line-height: 1.1;
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  icon {
+    min-width: 24px;
+    height: 26px;
+    font-size: 24px;
+  }
+}
+
+[mode=ios] .tab-button.has-title-only {
+  min-height: $tab-bar-ios-height - 8;
+
+  .tab-button-text {
+    font-size: 1.4rem;
+    line-height: 1.1;
+  }
+}
+
+[mode=ios] .tab-button.icon-only {
+  min-height: $tab-bar-ios-height - 8;
+}
+
 .hairlines .tabs[mode=ios] {
 
   .tab-bar {
diff --git a/ionic/components/tabs/modes/material.scss b/ionic/components/tabs/modes/material.scss
index 5f7c2dccc7..f61ee35d08 100644
--- a/ionic/components/tabs/modes/material.scss
+++ b/ionic/components/tabs/modes/material.scss
@@ -2,31 +2,34 @@
 // Material Design Tabs
 // --------------------------------------------------
 
-$tab-bar-md-item-padding:             12px 10px 4px 10px !default;
+$tab-bar-md-item-padding:             12px 10px 5px 10px !default;
 $tab-bar-md-item-font-size:           1.4rem !default;
+$tab-bar-md-item-font-weight:         500 !default;
 $tab-bar-md-item-icon-size:           2.4rem !default;
 $tab-bar-md-item-height:              4.8rem !default;
 
 
 .tabs[mode=md] {
 
-  button.tab-button {
+  .tab-button {
     padding: $tab-bar-md-item-padding;
     min-height: $tab-bar-md-item-height;
     font-size: $tab-bar-md-item-font-size;
+    font-weight: $tab-bar-md-item-font-weight;
 
     box-shadow: none;
     border-radius: 0;
     border-bottom: 2px solid transparent;
   }
 
-  button.tab-button[aria-selected="true"] {
+  .tab-button[aria-selected="true"] {
     border-bottom-color: $tab-button-text-active;
   }
 
   .tab-button-text {
-    margin-top: 8px;
-    margin-bottom: 8px;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    text-transform: uppercase;
   }
 
   .tab-button-icon {
@@ -36,12 +39,12 @@ $tab-bar-md-item-height:              4.8rem !default;
 
 }
 
-[mode=md][tab-bar-icons=bottom] button.tab-button {
+[mode=md][tab-bar-icons=bottom] .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 {
+[mode=md][tab-bar-icons=right] .tab-button,
+[mode=md][tab-bar-icons=left] .tab-button {
   padding-bottom: 10px;
 
   icon {
@@ -49,7 +52,7 @@ $tab-bar-md-item-height:              4.8rem !default;
   }
 }
 
-[mode=md] button.tab-button.icon-only,
-[mode=md] button.tab-button.has-title-only {
-  padding: 8px 10px;
+[mode=md] .tab-button.icon-only,
+[mode=md] .tab-button.has-title-only {
+  padding: 6px 10px 6px 10px;
 }
diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss
index 66b97baf06..6b3ac0a7bf 100644
--- a/ionic/components/tabs/tabs.scss
+++ b/ionic/components/tabs/tabs.scss
@@ -57,7 +57,7 @@ ion-tab {
   background: $tab-bar-background-color;
 }
 
-button.tab-button {
+.tab-button {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -78,15 +78,20 @@ button.tab-button {
   border: 0;
   border-radius: 0;
   background: none;
+
+  &:hover,
+  &.hover {
+    color: $tab-button-text-inactive;
+  }
 }
 
-[tab-bar-icons="bottom"] button.tab-button {
+[tab-bar-icons="bottom"] .tab-button {
   .tab-button-icon {
     order: 10;
   }
 }
 
-[tab-bar-icons="left"] button.tab-button {
+[tab-bar-icons="left"] .tab-button {
   flex-direction: row;
 
   .tab-button-icon {
@@ -95,7 +100,7 @@ button.tab-button {
   }
 }
 
-[tab-bar-icons="right"] button.tab-button {
+[tab-bar-icons="right"] .tab-button {
   flex-direction: row;
 
   .tab-button-icon {
@@ -133,6 +138,6 @@ button.tab-button {
   white-space: normal;
 }
 
-button.tab-button[aria-selected="true"] {
+.tab-button[aria-selected="true"] {
   color: $toolbar-active-color;
 }
diff --git a/ionic/components/tabs/tabs.ts b/ionic/components/tabs/tabs.ts
index 3a0d21944d..51c937d0db 100644
--- a/ionic/components/tabs/tabs.ts
+++ b/ionic/components/tabs/tabs.ts
@@ -26,7 +26,7 @@ import {IonicComponent, IonicView} from '../../config/annotations';
    * ```
    *
    */
- 
+
 @IonicComponent({
   selector: 'ion-tabs',
   defaultProperties: {
@@ -38,10 +38,10 @@ import {IonicComponent, IonicView} from '../../config/annotations';
   template: '' +
     '<nav class="tab-bar-container">' +
       '<div class="tab-bar" role="tablist">' +
-        '<button *ng-for="#t of tabs" [tab]="t" class="tab-button" role="tab">' +
+        '<a *ng-for="#t of tabs" [tab]="t" class="tab-button" role="tab">' +
           '<icon [name]="t.tabIcon" [is-active]="t.isSelected" class="tab-button-icon"></icon>' +
           '<span class="tab-button-text">{{t.tabTitle}}</span>' +
-        '</button>' +
+        '</a>' +
       '</div>' +
     '</nav>' +
     '<section class="content-container">' +
@@ -149,7 +149,7 @@ export class Tabs extends ViewController {
  * TODO
  */
 @Directive({
-  selector: 'button.tab-button',
+  selector: '.tab-button',
   properties: ['tab'],
   host: {
     '[attr.id]': 'btnId',
diff --git a/ionic/components/tabs/test/tab-bar-scenarios/main.html b/ionic/components/tabs/test/tab-bar-scenarios/main.html
index 2f06ba15d6..2392fc6555 100644
--- a/ionic/components/tabs/test/tab-bar-scenarios/main.html
+++ b/ionic/components/tabs/test/tab-bar-scenarios/main.html
@@ -1,39 +1,5 @@
 
-<ion-tabs>
-  <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="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="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="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="settings"></ion-tab>
-</ion-tabs>
-
-
+<!-- Text -->
 <ion-tabs>
   <ion-tab tab-title="Recents"></ion-tab>
   <ion-tab tab-title="Favorites"></ion-tab>
@@ -41,6 +7,47 @@
 </ion-tabs>
 
 
+<!-- Icons -->
+<ion-tabs>
+  <ion-tab tab-icon="call"></ion-tab>
+  <ion-tab tab-icon="heart"></ion-tab>
+  <ion-tab tab-icon="settings"></ion-tab>
+</ion-tabs>
+
+
+<!-- Icons on top of text -->
+<ion-tabs>
+  <ion-tab tab-title="Location" tab-icon="navigate"></ion-tab>
+  <ion-tab tab-title="Favorites" tab-icon="star"></ion-tab>
+  <ion-tab tab-title="Radio" tab-icon="musical-notes"></ion-tab>
+</ion-tabs>
+
+
+<!-- Icons below text -->
+<ion-tabs tab-bar-icons="bottom">
+  <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>
+
+
+<!-- Icons right of text -->
+<ion-tabs tab-bar-icons="right">
+  <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>
+
+
+<!-- Icons left of text -->
+<ion-tabs tab-bar-icons="left">
+  <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>
+
+
+<!-- No overflow text -->
 <ion-tabs>
   <ion-tab tab-title="Indiana Jones and the Raiders of the Lost Ark"></ion-tab>
   <ion-tab tab-title="Indiana Jones and the Temple of Doom"></ion-tab>
@@ -51,6 +58,8 @@
 <style>
   ion-tabs {
     height: auto;
-    margin-bottom: 24px;
+  }
+  ion-tabs[mode=md] {
+    border-bottom: 1px solid gray;
   }
 </style>