From 65449552e7d8f8a8d825c7593966f13540b38f25 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Thu, 23 Jul 2015 22:12:44 -0500
Subject: [PATCH] toolbar button updates

---
 .../toolbar/test/scenarios/main.html          | 38 +++++++++++++------
 ionic/components/toolbar/toolbar-buttons.scss | 23 +++++++++--
 2 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/ionic/components/toolbar/test/scenarios/main.html b/ionic/components/toolbar/test/scenarios/main.html
index 42bd11d348..d574ad3f59 100644
--- a/ionic/components/toolbar/test/scenarios/main.html
+++ b/ionic/components/toolbar/test/scenarios/main.html
@@ -1,34 +1,50 @@
 
-<ion-toolbar><ion-title>Title Only</ion-title></ion-toolbar>
-
-
 <ion-toolbar><ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title></ion-toolbar>
 
 
-<ion-toolbar><ion-nav-items primary><button>Pri. Item</button></ion-nav-items><ion-title>Primary Only</ion-title></ion-toolbar>
+<ion-toolbar><ion-nav-items primary><button><icon name="ion-navicon"></icon></button><button><icon name="ion-heart"></icon></button></ion-nav-items><ion-nav-items secondary><button><icon name="ion-more"></icon></button></ion-nav-items><ion-title>Defaults</ion-title></ion-toolbar>
 
 
-<ion-toolbar><ion-nav-items secondary><button>Sec. Item</button></ion-nav-items><ion-title>Secondary Only</ion-title></ion-toolbar>
+<ion-toolbar><ion-nav-items primary><button class="hover"><icon name="ion-navicon"></icon></button><button class="hover"><icon name="ion-heart"></icon></button></ion-nav-items><ion-nav-items secondary><button class="hover"><icon name="ion-more"></icon></button></ion-nav-items><ion-title>Defaults.hover</ion-title></ion-toolbar>
 
 
-<ion-toolbar><ion-nav-items primary><button><icon name="ion-navicon"></icon></button><button><icon name="ion-heart"></icon></button></ion-nav-items><ion-nav-items secondary><button><icon name="ion-ionic"></icon></button></ion-nav-items><ion-title>Defaults</ion-title></ion-toolbar>
+<ion-toolbar><ion-nav-items primary><button class="activated"><icon name="ion-navicon"></icon></button><button class="activated"><icon name="ion-heart"></icon></button></ion-nav-items><ion-nav-items secondary><button class="activated"><icon name="ion-more"></icon></button></ion-nav-items><ion-title>Defaults.activated</ion-title></ion-toolbar>
 
 
-<ion-toolbar><ion-nav-items primary><button clear primary><icon name="ion-navicon"></icon>Menu</button></ion-nav-items><ion-title>Button Clear</ion-title><ion-nav-items secondary><button clear secondary><icon name="ion-help-circled"></icon>Help</button></ion-nav-items></ion-toolbar>
+<ion-toolbar><ion-nav-items primary><button clear primary><icon name="ion-flag"></icon></button><button clear primary><icon name="ion-navicon"></icon>Menu</button></ion-nav-items><ion-title>Clear</ion-title><ion-nav-items secondary><button clear secondary>Help<icon name="ion-help-circled"></icon></button></ion-nav-items></ion-toolbar>
 
 
-<ion-toolbar><ion-nav-items primary><button primary outline><icon name="ion-navicon"></icon></button primary><button primary outline><icon name="ion-star"></icon></button></ion-nav-items><ion-nav-items secondary><button secondary outline><icon name="ion-flag"></icon></button></ion-nav-items><ion-title>Button Outline</ion-title></ion-toolbar>
+<ion-toolbar><ion-nav-items primary><button clear primary class="hover"><icon name="ion-flag"></icon></button><button clear primary class="hover"><icon name="ion-navicon"></icon>Menu</button></ion-nav-items><ion-title>Clear</ion-title><ion-nav-items secondary><button clear secondary class="hover">Help<icon name="ion-help-circled"></icon></button></ion-nav-items></ion-toolbar>
 
 
-<ion-toolbar><ion-nav-items primary><button primary>Btn</button></ion-nav-items><ion-nav-items secondary><button secondary>Btn</button></ion-nav-items><ion-title>Added Color Attr</ion-title></ion-toolbar>
+<ion-toolbar><ion-nav-items primary><button clear primary class="activated"><icon name="ion-flag"></icon></button><button clear primary class="activated"><icon name="ion-navicon"></icon>Menu</button></ion-nav-items><ion-title>Clear</ion-title><ion-nav-items secondary><button clear secondary class="activated">Help<icon name="ion-help-circled"></icon></button></ion-nav-items></ion-toolbar>
 
 
-<ion-toolbar><ion-nav-items primary><button primary><icon name="ion-navicon"></icon>Menu</button></ion-nav-items><ion-nav-items secondary><button primary><icon name="ion-help-circled"></icon>Help</button></ion-nav-items><ion-title>Icon/Color Attr</ion-title></ion-toolbar>
+<ion-toolbar><ion-nav-items primary><button primary outline><icon name="ion-navicon"></icon></button primary><button primary outline><icon name="ion-star"></icon>Star</button></ion-nav-items><ion-nav-items secondary><button secondary outline><icon name="ion-flag"></icon></button></ion-nav-items><ion-title>Outline</ion-title></ion-toolbar>
+
+
+<ion-toolbar><ion-nav-items primary><button primary outline class="hover"><icon name="ion-navicon"></icon></button primary><button primary outline class="hover"><icon name="ion-star"></icon>Star</button></ion-nav-items><ion-nav-items secondary><button secondary outline class="hover"><icon name="ion-flag"></icon></button></ion-nav-items><ion-title>Outline.hover</ion-title></ion-toolbar>
+
+
+<ion-toolbar><ion-nav-items primary><button primary outline class="activated"><icon name="ion-navicon"></icon></button primary><button primary outline class="activated"><icon name="ion-star"></icon>Star</button></ion-nav-items><ion-nav-items secondary><button secondary outline class="activated"><icon name="ion-flag"></icon></button></ion-nav-items><ion-title>Outline.activated</ion-title></ion-toolbar>
+
+
+<ion-toolbar><ion-nav-items primary><button primary>Btn</button></ion-nav-items><ion-nav-items secondary><button secondary>Btn</button></ion-nav-items><ion-title>ColorAttr</ion-title></ion-toolbar>
+
+
+<ion-toolbar><ion-nav-items primary><button primary class="hover">Btn</button></ion-nav-items><ion-nav-items secondary><button secondary class="hover">Btn</button></ion-nav-items><ion-title>ColorAttr.hover</ion-title></ion-toolbar>
+
+
+<ion-toolbar><ion-nav-items primary><button primary class="activated">Btn</button></ion-nav-items><ion-nav-items secondary><button secondary class="activated">Btn</button></ion-nav-items><ion-title>ColorAttr.activated</ion-title></ion-toolbar>
+
+
+<ion-toolbar><ion-nav-items primary><button primary><icon name="ion-navicon"></icon>Menu</button></ion-nav-items><ion-nav-items secondary><button primary>Edit<icon name="ion-edit"></icon></button></ion-nav-items><ion-title>Icon/Color Attr</ion-title></ion-toolbar>
 
 
 
 <style>
-  ion-toolbar {
+  .toolbar {
     border-bottom: 1px solid black;
+    background: #eee !important;
   }
 </style>
diff --git a/ionic/components/toolbar/toolbar-buttons.scss b/ionic/components/toolbar/toolbar-buttons.scss
index 47a519b9b2..d5d01f23ad 100644
--- a/ionic/components/toolbar/toolbar-buttons.scss
+++ b/ionic/components/toolbar/toolbar-buttons.scss
@@ -16,14 +16,29 @@
 
     box-shadow: none;
 
+    &.icon-only icon {
+      padding: 0 0.4rem;
+    }
+
+    &.icon-left icon {
+      margin-left: -0.2rem;
+    }
+
+    &.icon-right icon {
+      margin-right: -0.2rem;
+    }
+
     &[clear] {
-      padding: 0;
+      padding: 0 3px;
+
+      icon {
+        margin-right: 0;
+        margin-left: 0;
+      }
     }
   }
 
   icon {
-    font-size: 2.4rem;
-    padding: 0 4px;
+    font-size: 2.2rem;
   }
 }
-