fix(badge): Badge horizontal alignment over item right side buttons, closes #826

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;

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: '>';

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;

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