fix(badge): Update badge alignment in tab items, closes #694

Author: Adam Bradley

scss/_tabs.scss

@@ -89,7 +89,7 @@
   @include flex(1);
   display: block;
   overflow: hidden;
-  
+
   max-width: $tab-item-max-width;
   height: 100%;
 
@@ -157,8 +157,9 @@
 .tab-item .badge {
   position: absolute;
   padding: $tabs-badge-padding;
-  top: 2%;
-  right: 10%;
+  top: 4%;
+  right: 33%; // fallback
+  right: calc(50% - 26px);
   font-size: $tabs-badge-font-size;
   height: auto;
   line-height: $tabs-badge-font-size + 4;
@@ -167,7 +168,7 @@
 /* Navigational tab */
 
 /* Active state for tab */
-.tab-item.active, 
+.tab-item.active,
 .tab-item:active {
   opacity: 1;
 

scss/_variables.scss

@@ -231,7 +231,7 @@ $tabs-height:                      49px !default;
 $tabs-text-font-size:              14px !default;
 $tabs-text-font-size-side-icon:    12px !default;
 $tabs-icon-size:                   32px !default;
-$tabs-badge-padding:               2px 6px !default;
+$tabs-badge-padding:               1px 6px !default;
 $tabs-badge-font-size:             12px !default;
 $tabs-text-font-size:              14px !default;
 

test/html/tab-bars.html

@@ -25,7 +25,7 @@ <h1>Icons On Top Of Text</h1>
       </ul>
 
     </main>
-    
+
     <nav id="tab-bar" class="tabs tabs-icon-top">
       <a class="tab-item" href="#">
         <i class="icon ion-game-controller-a"></i>
@@ -40,7 +40,7 @@ <h1>Icons On Top Of Text</h1>
         Simple
       </a>
       <a class="tab-item has-badge">
-        <i class="badge">3</i>
+        <i class="badge badge-assertive">3</i>
         <i class="icon ion-leaf"></i>
         Light
       </a>