From ded469311d7a0901fec79b98a87823b74c55b987 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adamdbradley@gmail.com>
Date: Tue, 18 Mar 2014 15:55:03 -0500
Subject: [PATCH] fix(badge): Badge horizontal alignment over item right side
 buttons, closes #826

---
 scss/_badge.scss     |  1 +
 scss/_items.scss     | 54 ++++++++++++++++++++++----------------------
 scss/_variables.scss |  1 +
 test/html/lists.html | 10 ++++++++
 4 files changed, 39 insertions(+), 27 deletions(-)

diff --git a/scss/_badge.scss b/scss/_badge.scss
index acc6f2ebbc..37298be21b 100644
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -6,6 +6,7 @@
 
 .badge {
   @include badge-style($badge-default-bg, $badge-default-text);
+  z-index: $z-index-badge;
   display: inline-block;
   padding: 3px 8px;
   min-width: 10px;
diff --git a/scss/_items.scss b/scss/_items.scss
index e5b24f86d4..8d125a7da2 100644
--- a/scss/_items.scss
+++ b/scss/_items.scss
@@ -56,6 +56,9 @@
     top: $item-padding;
     right: ($item-padding * 2) + 5;
   }
+  &.item-button-right .badge {
+    right: ($item-padding * 2) + 35;
+  }
   &.item-divider .badge {
     top: $item-padding / 2;
   }
@@ -382,41 +385,38 @@ button.item.item-button-right {
 
 a.item,
 button.item,
-.item a[href].item-content,
-.item[ng-click] a.item-content {
+.item[href] .item-content,
+.item[ng-click] .item-content {
   padding-right: (($item-padding * 3) - 5);
-}
 
-a.item:after,
-button.item:after,
-.item a[href].item-content:after,
-.item[ng-click] a.item-content:after {
-  /* By default, both <a> and <button> have right side arrow icons */
-  @include display-flex();
-  @include align-items(center);
-  @include font-smoothing(antialiased);
-  position: absolute;
-  top: 0;
-  right: $item-padding - 4;
-  height: 100%;
-  color: #ccc;
-  content: "\f125"; // ion-chevron-right
-  text-transform: none;
-  font-weight: normal;
-  font-style: normal;
-  font-variant: normal;
-  font-size: 16px;
-  font-family: 'Ionicons';
-  line-height: 1;
-  speak: none;
+  &:after {
+    // By default, both <a> and <button> have right side arrow icons
+    @include display-flex();
+    @include align-items(center);
+    @include font-smoothing(antialiased);
+    position: absolute;
+    top: 0;
+    right: $item-padding - 4;
+    height: 100%;
+    color: #ccc;
+    content: "\f125"; // ion-chevron-right
+    text-transform: none;
+    font-weight: normal;
+    font-style: normal;
+    font-variant: normal;
+    font-size: 16px;
+    font-family: 'Ionicons';
+    line-height: 1;
+    speak: none;
+  }
 }
 
 .grade-b,
 .grade-c {
   a.item:after,
   button.item:after,
-  .item a[href].item-content:after,
-  .item[ng-click] a.item-content:after {
+  .item[href] .item-content:after,
+  .item[ng-click] .item-content:after {
     // override Ionicon arrow with boring character for low end devices
     @include font-smoothing(none);
     content: '>';
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 3f35c95953..abc980d318 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -611,6 +611,7 @@ $badge-default-text:              #AAAAAA !default;
 // -------------------------------
 
 $z-index-action-sheet:            11 !default;
+$z-index-badge:                   1 !default;
 $z-index-bar:                     10 !default;
 $z-index-bar-title:               0 !default;
 $z-index-bar-button:              1 !default;
diff --git a/test/html/lists.html b/test/html/lists.html
index cc81e519fe..281793fff3 100644
--- a/test/html/lists.html
+++ b/test/html/lists.html
@@ -197,6 +197,16 @@
             <span class="badge badge-assertive">999</span>
           </div>
 
+          <div class="item item-button-right">
+            Badge with right button: Friends asdfasdf asdfasd fasdfasdf asdf asdfasd fasdf asdf asd
+            asdfasdfasdf asdfasdfasdf asdf asdf asdfasdfasd fasdfa sdfasdf asdf asdf
+            asdfa sdf asdfasdfa sdf asdf asdfasdfasdf asdf asdf asdf
+            <span class="badge badge-royal">999</span>
+            <button class="button button-calm">
+              <i class="icon ion-ios7-telephone"></i>
+            </button>
+          </div>
+
           <a href="#" class="item item-complex">
             <div class="item-content slide-right">
               Auto Right side arrow cuz its a link