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
Right
-
+
-
One
@@ -173,7 +173,7 @@ layout: default
Right
-
+
-
One
@@ -195,75 +195,51 @@ layout: default
{% highlight html %}
{% 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 {