refactoring the tab bar. holy crap what were we thinking?

dist/ratchet.css

@@ -342,29 +342,19 @@ strong {
 }
 
 .bar-tab {
+  display: table;
   bottom: 0;
   height: 50px;
   padding: 0;
   border-top: 1px solid #dddddd;
 }
 
-.tab-inner {
-  display: -webkit-box;
-  display: box;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  -webkit-box-orient: horizontal;
-  box-orient: horizontal;
-}
-
 .tab-item {
+  display: table-cell;
   height: 100%;
+  width: 1%;
   padding-top: 9px;
   text-align: center;
-  -webkit-box-flex: 1;
-  box-flex: 1;
 }
 .tab-item .tab-label,
 .tab-item .icon {

index.html

@@ -151,7 +151,7 @@ layout: default
             <a class="button pull-right">
               Right
             </a>
-            <ul class="segmented-controller segmented-controller-primary">
+            <ul class="segmented-controller">
               <li class="selected">
                 <a>One</a>
               </li>
@@ -173,7 +173,7 @@ layout: default
   <a class="button pull-right">
     Right
   </a>
-  <ul class="segmented-controller segmented-controller-primary">
+  <ul class="segmented-controller">
     <li class="selected">
       <a>One</a>
     </li>
@@ -195,75 +195,51 @@ layout: default
 
         <div class="component-example component-example-fullbleed">
           <nav class="bar-tab">
-            <ul class="tab-inner">
-              <li class="tab-item active">
-                <a href="#">
-                  <span class="icon icon-share"></span>
-                  <div class="tab-label">Label</div>
-                </a>
-              </li>
-              <li class="tab-item">
-                <a href="#">
-                  <span class="icon icon-share"></span>
-                  <div class="tab-label">Label</div>
-                </a>
-              </li>
-              <li class="tab-item">
-                <a href="#">
-                  <span class="icon icon-share"></span>
-                  <div class="tab-label">Label</div>
-                </a>
-              </li>
-              <li class="tab-item">
-                <a href="#">
-                  <span class="icon icon-share"></span>
-                  <div class="tab-label">Label</div>
-                </a>
-              </li>
-              <li class="tab-item">
-                <a href="#">
-                  <span class="icon icon-share"></span>
-                  <div class="tab-label">Label</div>
-                </a>
-              </li>
-            </ul>
+            <a class="tab-item active" href="#">
+              <span class="icon icon-share"></span>
+              <div class="tab-label">Label</div>
+            </a>
+            <a class="tab-item" href="#">
+              <span class="icon icon-share"></span>
+              <div class="tab-label">Label</div>
+            </a>
+            <a class="tab-item" href="#">
+              <span class="icon icon-share"></span>
+              <div class="tab-label">Label</div>
+            </a>
+            <a class="tab-item" href="#">
+              <span class="icon icon-share"></span>
+              <div class="tab-label">Label</div>
+            </a>
+            <a class="tab-item" href="#">
+              <span class="icon icon-share"></span>
+              <div class="tab-label">Label</div>
+            </a>
           </nav>
         </div>
 
 {% highlight html %}
 <nav class="bar-tab">
-  <ul class="tab-inner">
-    <li class="tab-item active">
-      <a href="#">
-        <span class="icon icon-share"></span>
-        <div class="tab-label">Label</div>
-      </a>
-    </li>
-    <li class="tab-item">
-      <a href="#">
-        <span class="icon icon-share"></span>
-        <div class="tab-label">Label</div>
-      </a>
-    </li>
-    <li class="tab-item">
-      <a href="#">
-        <span class="icon icon-share"></span>
-        <div class="tab-label">Label</div>
-      </a>
-    </li>
-    <li class="tab-item">
-      <a href="#">
-        <span class="icon icon-share"></span>
-        <div class="tab-label">Label</div>
-      </a>
-    </li>
-    <li class="tab-item">
-      <a href="#">
-        <span class="icon icon-share"></span>
-        <div class="tab-label">Label</div>
-      </a>
-    </li>
-  </ul>
+  <a class="tab-item active" href="#">
+    <span class="icon icon-share"></span>
+    <div class="tab-label">Label</div>
+  </a>
+  <a class="tab-item" href="#">
+    <span class="icon icon-share"></span>
+    <div class="tab-label">Label</div>
+  </a>
+  <a class="tab-item" href="#">
+    <span class="icon icon-share"></span>
+    <div class="tab-label">Label</div>
+  </a>
+  <a class="tab-item" href="#">
+    <span class="icon icon-share"></span>
+    <div class="tab-label">Label</div>
+  </a>
+  <a class="tab-item" href="#">
+    <span class="icon icon-share"></span>
+    <div class="tab-label">Label</div>
+  </a>
 </nav>
 {% endhighlight %}
 

lib/sass/bars.scss

@@ -79,29 +79,20 @@
 
 // Bar docked to bottom used for primary app navigation
 .bar-tab {
+  display: table;
   bottom: 0;
   height: $bar-tab-height;
   padding: 0;
   border-top: $border-default;
 }
 
-// Wrapper for individual tab
-.tab-inner {
-  display: -webkit-box;
-  display: box;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  @include box-orient(horizontal);
-}
-
 // Navigational tab
 .tab-item {
+  display: table-cell;
   height: 100%;
+  width: 1%;
   padding-top: 9px;
   text-align: center;
-  @include box-flex(1);
 
   .tab-label,
   .icon {