Merge pull request #265 from medokin/master

Added badge to tab-item
twbs · Feb 9, 2015 · 12a1561 · 12a1561
2 parents c24c4cc + 1ac5d96
commit 12a1561
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 0 deletions.
diff --git 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
@@ -211,6 +211,7 @@ <h3 class="component-title">Tab bar</h3>
     <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
@@ -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
@@ -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;