text only tab bar

components.html

@@ -251,6 +251,40 @@ base_url: "../"
     <p class="component-note touch-only"><strong>Note:</strong> Use push.js to actually change content.</p>
   </article>
 
+  <article class="component">
+      <h3 class="component-title">Tab bar (labels only)</h3>
+
+      <div class="component-example component-example-fullbleed">
+        <nav class="bar bar-tab">
+          <a class="tab-item active" href="#">
+            <div class="tab-label">Label</div>
+          </a>
+          <a class="tab-item" href="#">
+            <div class="tab-label">Label</div>
+          </a>
+          <a class="tab-item" href="#">
+            <div class="tab-label">Label</div>
+          </a>
+        </nav>
+      </div>
+
+{% highlight html %}
+<nav class="bar bar-tab">
+  <a class="tab-item active" href="#">
+    <div class="tab-label">Label</div>
+  </a>
+  <a class="tab-item" href="#">
+    <div class="tab-label">Label</div>
+  </a>
+  <a class="tab-item" href="#">
+    <div class="tab-label">Label</div>
+  </a>
+</nav>
+{% endhighlight %}
+
+    <p class="component-note touch-only"><strong>Note:</strong> Use push.js to actually change content.</p>
+  </article>
+
   <article class="component">
       <h3 class="component-title">Standard bars</h3>
       <p class="component-description">Standard bars are basic fixed elements that can be positioned in 3 places. These can be used to house buttons or segmented controls (see following examples).</p>

dist/android-theme.css

@@ -176,7 +176,7 @@ a:active {
   border-top: 0;
 }
 .bar-tab .tab-item .icon {
-  margin-top: 0;
+  margin-top: 5px;
 }
 .bar-tab .tab-item.active .tab-label,
 .bar-tab .tab-item.active .icon, .bar-tab .tab-item:active .tab-label,

dist/ratchet.css

@@ -524,22 +524,22 @@ input[type="button"] {
   display: table-cell;
   height: 100%;
   width: 1%;
-  vertical-align: bottom;
+  vertical-align: middle;
   text-align: center;
 }
 .bar-tab .tab-item .tab-label,
 .bar-tab .tab-item .icon {
   color: #929292;
 }
-.bar-tab .tab-item .tab-label {
-  margin-top: -2px;
-  font-size: 11px;
-  font-weight: 400;
-}
 .bar-tab .tab-item .icon {
   width: 24px;
   height: 24px;
-  margin-top: 0;
+  margin-top: 5px;
+}
+.bar-tab .tab-item .icon ~ .tab-label {
+  margin-top: -2px;
+  font-size: 11px;
+  font-weight: 400;
 }
 .bar-tab .tab-item.active .tab-label,
 .bar-tab .tab-item.active .icon, .bar-tab .tab-item:active .tab-label,

docs-assets/css/docs.css

@@ -1348,7 +1348,7 @@ hr {
   border-top: 0;
 }
 .platform-android .bar-tab .tab-item .icon {
-  margin-top: 0;
+  margin-top: 5px;
 }
 .platform-android .bar-tab .tab-item.active .tab-label,
 .platform-android .bar-tab .tab-item.active .icon, .platform-android .bar-tab .tab-item:active .tab-label,

lib/sass/bars.scss

@@ -90,7 +90,7 @@
     display: table-cell;
     height: 100%;
     width: 1%;
-    vertical-align: bottom;
+    vertical-align: middle;
     text-align: center;
 
     .tab-label,
@@ -98,18 +98,18 @@
       color: #929292;
     }
 
-    // Label for tab
-    .tab-label {
-      margin-top: -2px;
-      font-size: 11px;
-      font-weight: 400;
-    }
-    
     // Tab icon
     .icon {
       width: 24px;
       height: 24px;
-      margin-top: 0;
+      margin-top: 5px;
+
+      // Make the label smaller if it's used with an icon
+      ~ .tab-label {
+        margin-top: -2px;
+        font-size: 11px;
+        font-weight: 400;
+      }
     }
 
     // Active states for the tab bar

lib/sass/theme-android.scss

@@ -259,7 +259,7 @@ a {
 
   .tab-item {
     .icon {
-      margin-top: 0;
+      margin-top: 5px;
     }
 
     // Active states for the tab bar