Merge pull request #265 from medokin/master

Added badge to tab-item

dist/css/ratchet.css

@@ -563,6 +563,7 @@ input[type="button"] {
   border-bottom: 0;
 }
 .bar-tab .tab-item {
+  position: relative;
   display: table-cell;
   width: 1%;
   height: 50px;
@@ -573,6 +574,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;

docs/components.html

@@ -211,6 +211,7 @@ title: Components · 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>

docs/dist/css/ratchet.css

@@ -563,6 +563,7 @@ input[type="button"] {
   border-bottom: 0;
 }
 .bar-tab .tab-item {
+  position: relative;
   display: table-cell;
   width: 1%;
   height: 50px;
@@ -573,6 +574,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;

sass/bars.scss

@@ -91,6 +91,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;
@@ -104,6 +105,14 @@
       color: $primary-color;
     }
 
+    // Activity badge on an icon
+    .badge {
+      vertical-align: top;
+      position: absolute;
+      top: 3px;
+      left: 50%;
+    }
+
     // Tab icon
     .icon {
       top: 3px;