text only tab bar
This commit is contained in:
Родитель
ca9a3d717e
Коммит
6a2daea33a
|
@ -251,6 +251,40 @@ base_url: "../"
|
||||||
<p class="component-note touch-only"><strong>Note:</strong> Use push.js to actually change content.</p>
|
<p class="component-note touch-only"><strong>Note:</strong> Use push.js to actually change content.</p>
|
||||||
</article>
|
</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">
|
<article class="component">
|
||||||
<h3 class="component-title">Standard bars</h3>
|
<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>
|
<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>
|
||||||
|
|
|
@ -176,7 +176,7 @@ a:active {
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
}
|
}
|
||||||
.bar-tab .tab-item .icon {
|
.bar-tab .tab-item .icon {
|
||||||
margin-top: 0;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
.bar-tab .tab-item.active .tab-label,
|
.bar-tab .tab-item.active .tab-label,
|
||||||
.bar-tab .tab-item.active .icon, .bar-tab .tab-item:active .tab-label,
|
.bar-tab .tab-item.active .icon, .bar-tab .tab-item:active .tab-label,
|
||||||
|
|
|
@ -524,22 +524,22 @@ input[type="button"] {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 1%;
|
width: 1%;
|
||||||
vertical-align: bottom;
|
vertical-align: middle;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.bar-tab .tab-item .tab-label,
|
.bar-tab .tab-item .tab-label,
|
||||||
.bar-tab .tab-item .icon {
|
.bar-tab .tab-item .icon {
|
||||||
color: #929292;
|
color: #929292;
|
||||||
}
|
}
|
||||||
.bar-tab .tab-item .tab-label {
|
|
||||||
margin-top: -2px;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.bar-tab .tab-item .icon {
|
.bar-tab .tab-item .icon {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 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 .tab-label,
|
||||||
.bar-tab .tab-item.active .icon, .bar-tab .tab-item:active .tab-label,
|
.bar-tab .tab-item.active .icon, .bar-tab .tab-item:active .tab-label,
|
||||||
|
|
|
@ -1348,7 +1348,7 @@ hr {
|
||||||
border-top: 0;
|
border-top: 0;
|
||||||
}
|
}
|
||||||
.platform-android .bar-tab .tab-item .icon {
|
.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 .tab-label,
|
||||||
.platform-android .bar-tab .tab-item.active .icon, .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,
|
||||||
|
|
|
@ -90,7 +90,7 @@
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 1%;
|
width: 1%;
|
||||||
vertical-align: bottom;
|
vertical-align: middle;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.tab-label,
|
.tab-label,
|
||||||
|
@ -98,18 +98,18 @@
|
||||||
color: #929292;
|
color: #929292;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Label for tab
|
|
||||||
.tab-label {
|
|
||||||
margin-top: -2px;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tab icon
|
// Tab icon
|
||||||
.icon {
|
.icon {
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 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
|
// Active states for the tab bar
|
||||||
|
|
|
@ -259,7 +259,7 @@ a {
|
||||||
|
|
||||||
.tab-item {
|
.tab-item {
|
||||||
.icon {
|
.icon {
|
||||||
margin-top: 0;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Active states for the tab bar
|
// Active states for the tab bar
|
||||||
|
|
Загрузка…
Ссылка в новой задаче