From 1ac5d960779063c623c86fdc20a076c3154439ed Mon Sep 17 00:00:00 2001
From: Nikodem Jaworski <nikodemjaworski@gmail.com>
Date: Tue, 25 Feb 2014 23:01:20 +0100
Subject: Added badge to tab-items

---
 dist/css/ratchet.css      | 7 +++++++
 docs/components.html      | 1 +
 docs/dist/css/ratchet.css | 7 +++++++
 sass/bars.scss            | 9 +++++++++
 4 files changed, 24 insertions(+)

diff --git a/dist/css/ratchet.css b/dist/css/ratchet.css
index a873e99..d75eeaa 100644
--- a/dist/css/ratchet.css
+++ b/dist/css/ratchet.css
@@ -552,6 +552,7 @@ input[type="button"] {
   border-bottom: 0;
 }
 .bar-tab .tab-item {
+  position: relative;
   display: table-cell;
   width: 1%;
   height: 50px;
@@ -562,6 +563,12 @@ input[type="button"] {
 .bar-tab .tab-item.active, .bar-tab .tab-item:active {
   color: #428bca;
 }
+.bar-tab .tab-item .badge {
+  vertical-align: top;
+  position: absolute;
+  top: 3px;
+  left: 50%;
+}
 .bar-tab .tab-item .icon {
   top: 3px;
   width: 24px;
diff --git a/docs/components.html b/docs/components.html
index e05da8a..ee31e4f 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -211,6 +211,7 @@ title: Components &middot; Ratchet
     <span class="tab-label">Home</span>
   </a>
   <a class="tab-item" href="#">
+    <div class="badge badge-negative badge-filled">3</div>
     <span class="icon icon-person"></span>
     <span class="tab-label">Profile</span>
   </a>
diff --git a/docs/dist/css/ratchet.css b/docs/dist/css/ratchet.css
index a873e99..d75eeaa 100644
--- a/docs/dist/css/ratchet.css
+++ b/docs/dist/css/ratchet.css
@@ -552,6 +552,7 @@ input[type="button"] {
   border-bottom: 0;
 }
 .bar-tab .tab-item {
+  position: relative;
   display: table-cell;
   width: 1%;
   height: 50px;
@@ -562,6 +563,12 @@ input[type="button"] {
 .bar-tab .tab-item.active, .bar-tab .tab-item:active {
   color: #428bca;
 }
+.bar-tab .tab-item .badge {
+  vertical-align: top;
+  position: absolute;
+  top: 3px;
+  left: 50%;
+}
 .bar-tab .tab-item .icon {
   top: 3px;
   width: 24px;
diff --git a/sass/bars.scss b/sass/bars.scss
index 6fb3904..3d3b108 100644
--- a/sass/bars.scss
+++ b/sass/bars.scss
@@ -89,6 +89,7 @@
 
   // Navigational tab (Nested to be more specific for the icons in tab-items)
   .tab-item {
+    position: relative;
     display: table-cell;
     width: 1%;
     height: $bar-tab-height;
@@ -102,6 +103,14 @@
       color: $primary-color;
     }
 
+    // Activity badge on an icon
+    .badge {
+      vertical-align: top;
+      position: absolute;
+      top: 3px;
+      left: 50%;
+    }
+
     // Tab icon
     .icon {
       top: 3px;
-- 
cgit v1.2.3