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

ionic-team · Apr 18, 2014 · 2a6f702 · 2a6f702
1 parent b57b893
commit 2a6f702
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 6 deletions.
diff --git a/scss/_tabs.scss b/scss/_tabs.scss
@@ -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 {

diff --git a/test/css/tab-bars-icons-bottom.html b/test/css/tab-bars-icons-bottom.html
@@ -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 @@ <h1>Icons On Bottom Of Text</h1>
         <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