Merge pull request #265 from medokin/master

Added badge to tab-item

4 files changed, 24 insertions, 0 deletions

diff --git a/dist/css/ratchet.css b/dist/css/ratchet.css
index 47b20b7..ac3891e 100644
--- a/dist/css/ratchet.css
+++ b/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;
diff --git a/docs/components.html b/docs/components.html
index 458810e..8ae2b77 100644
--- a/docs/components.html
+++ b/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>
diff --git a/docs/dist/css/ratchet.css b/docs/dist/css/ratchet.css
index 47b20b7..ac3891e 100644
--- a/docs/dist/css/ratchet.css
+++ b/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;
diff --git a/sass/bars.scss b/sass/bars.scss
index d3e59dc..15f208f 100644
--- a/sass/bars.scss
+++ b/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;