From 431276b3f5f88a455814f33ce0f545aabfd0f531 Mon Sep 17 00:00:00 2001
From: connors <connor.sears@github.com>
Date: Sat, 21 Dec 2013 13:28:11 -0800
Subject: [PATCH] refactoring the tab bar. holy crap what were we thinking?

---
 dist/ratchet.css   |  16 ++-----
 index.html         | 108 ++++++++++++++++++---------------------------
 lib/sass/bars.scss |  15 ++-----
 3 files changed, 48 insertions(+), 91 deletions(-)

diff --git a/dist/ratchet.css b/dist/ratchet.css
index 32aa3c6..b765b46 100644
--- a/dist/ratchet.css
+++ b/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 {
diff --git a/index.html b/index.html
index ecfcbb4..c296849 100644
--- a/index.html
+++ b/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 %}
 
diff --git a/lib/sass/bars.scss b/lib/sass/bars.scss
index b59d0c8..cfb98ed 100644
--- a/lib/sass/bars.scss
+++ b/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 {