fix(toolbar): fix margin and width on toolbar buttons

references #689

ionic/components/toolbar/modes/ios.scss

@@ -85,7 +85,7 @@ ion-title {
       background-color: $color-value;
       border-color: darken($color-value, 10%);
     }
-    
+
     .toolbar-title,
     .bar-button-default {
       color: inverse($color-value);
@@ -232,7 +232,6 @@ ion-buttons[right] {
 }
 
 .bar-button-icon-right icon {
-  margin-right: -0.2em;
   padding-left: 0.4em;
   font-size: 1.4em;
   line-height: 0.67;

ionic/components/toolbar/modes/md.scss

@@ -111,6 +111,8 @@ ion-buttons[right] {
 .bar-button {
   margin-top: 0;
   margin-bottom: 0;
+  margin-left: 0.2rem;
+  margin-right: 0.2rem;  
   padding: 0 5px;
   min-height: 32px;
   border: 0;
@@ -221,7 +223,6 @@ ion-buttons[right] {
 }
 
 .bar-button-icon-right icon {
-  margin-right: -0.2em;
   padding-left: 0.4em;
   font-size: 1.4em;
   line-height: 0.67;
@@ -230,12 +231,12 @@ ion-buttons[right] {
 
 .bar-button-icon-only {
   padding: 0;
-  min-width: 0.9em;
 
   icon {
     padding: 0 0.1em;
     font-size: 1.8em;
     line-height: 0.67;
+    min-width: 28px;
     pointer-events: none;
   }
 }

ionic/components/toolbar/test/scenarios/main.html

@@ -40,44 +40,6 @@
 </ion-toolbar>
 
 
-<ion-toolbar>
-  <ion-buttons start>
-    <button outline>
-      <icon contact></icon>
-    </button>
-    <button outline>
-      <icon star></icon>
-      Star
-    </button>
-  </ion-buttons>
-  <ion-buttons end>
-    <button secondary outline>
-      <icon contact></icon>
-    </button>
-  </ion-buttons>
-  <ion-title>Outline</ion-title>
-</ion-toolbar>
-
-
-<ion-toolbar>
-  <ion-buttons start>
-    <button outline class="activated">
-      <icon contact></icon>
-    </button>
-    <button outline class="activated">
-      <icon star></icon>
-      Star
-    </button>
-  </ion-buttons>
-  <ion-buttons end>
-    <button secondary outline class="activated">
-      <icon contact></icon>
-    </button>
-  </ion-buttons>
-  <ion-title>Outline.activated</ion-title>
-</ion-toolbar>
-
-
 <ion-toolbar>
   <ion-buttons start>
     <button solid>
@@ -118,6 +80,44 @@
 </ion-toolbar>
 
 
+<ion-toolbar>
+  <ion-buttons start>
+    <button outline>
+      <icon contact></icon>
+    </button>
+    <button outline>
+      <icon star></icon>
+      Star
+    </button>
+  </ion-buttons>
+  <ion-buttons end>
+    <button secondary outline>
+      <icon contact></icon>
+    </button>
+  </ion-buttons>
+  <ion-title>Outline</ion-title>
+</ion-toolbar>
+
+
+<ion-toolbar>
+  <ion-buttons start>
+    <button outline class="activated">
+      <icon contact></icon>
+    </button>
+    <button outline class="activated">
+      <icon star></icon>
+      Star
+    </button>
+  </ion-buttons>
+  <ion-buttons end>
+    <button secondary outline class="activated">
+      <icon contact></icon>
+    </button>
+  </ion-buttons>
+  <ion-title>Outline.activated</ion-title>
+</ion-toolbar>
+
+
 <ion-toolbar>
   <ion-buttons start>
     <button>