javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(tabs): Tab icon align within nested tabs, closes #1093

Browse Source
This commit is contained in:
Adam Bradley
2014-04-17 22:40:01 -05:00
parent b57b89321f
commit 2a6f702980
2 changed files with 38 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
scss/_tabs.scss
View File

@@ -129,8 +129,8 @@
display: none;
}
.tabs-icon-top .tab-item,
.tabs-icon-bottom .tab-item {
.tabs-icon-top > .tabs .tab-item,
.tabs-icon-bottom > .tabs .tab-item {
font-size: $tabs-text-font-size-side-icon;
line-height: $tabs-text-font-size;
}
@@ -142,8 +142,8 @@
font-size: $tabs-icon-size;
}
.tabs-icon-left .tab-item,
.tabs-icon-right .tab-item {
.tabs-icon-left > .tabs .tab-item,
.tabs-icon-right > .tabs .tab-item {
font-size: $tabs-text-font-size-side-icon;
.icon {

36
test/css/tab-bars-icons-bottom.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="../../dist/css/ionic.css" rel="stylesheet">
</head>
<body>
<body class="tabs-icon-bottom">
<header class="bar bar-header bar-dark">
<h1 class="title">Tab Bars</h1>
@@ -24,8 +24,40 @@
<li><a href="./">Homepage</a></li>
</ul>
<div class="list card tabs-icon-left">
<div class="item item-avatar">
<img src="http://ionicframework.com/img/docs/mcfly.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-body">
<p>
This is a crude example of the parent tabs having .tabs-icon-bottom set,
while a nested tabs has .tabs-icon-left set.
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
</main>
<nav id="tab-bar" class="tabs tabs-icon-bottom tabs-positive">
<a class="tab-item" href="#">
Fun