Browse Source

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

pull/245/head
connors 11 years ago
parent
commit
431276b3f5
  1. 16
      dist/ratchet.css
  2. 48
      index.html
  3. 15
      lib/sass/bars.scss

16
dist/ratchet.css vendored

@ -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 {

48
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="#">
<a class="tab-item active" href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<a class="tab-item" href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<a class="tab-item" href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<a class="tab-item" href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<a class="tab-item" href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
</ul>
</nav>
</div>
{% highlight html %}
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<a href="#">
<a class="tab-item active" href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<a class="tab-item" href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<a class="tab-item" href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<a class="tab-item" href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<a class="tab-item" href="#">
<span class="icon icon-share"></span>
<div class="tab-label">Label</div>
</a>
</li>
</ul>
</nav>
{% endhighlight %}

15
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 {

Loading…
Cancel
Save