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

adamdbradley · adamdbradley · commit 2a6f70298055 · 2014-04-17T22:40:02.000-05:00
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

Original file line number	Diff line number	Diff line change
`@@ -129,8 +129,8 @@`
`129`	`129`	`display: none;`
`130`	`130`	`}`
`131`	`131`
`132`		`-.tabs-icon-top .tab-item,`
`133`		`-.tabs-icon-bottom .tab-item {`
	`132`	`+.tabs-icon-top > .tabs .tab-item,`
	`133`	`+.tabs-icon-bottom > .tabs .tab-item {`
`134`	`134`	`font-size: $tabs-text-font-size-side-icon;`
`135`	`135`	`line-height: $tabs-text-font-size;`
`136`	`136`	`}`
`@@ -142,8 +142,8 @@`
`142`	`142`	`font-size: $tabs-icon-size;`
`143`	`143`	`}`
`144`	`144`
`145`		`-.tabs-icon-left .tab-item,`
`146`		`-.tabs-icon-right .tab-item {`
	`145`	`+.tabs-icon-left > .tabs .tab-item,`
	`146`	`+.tabs-icon-right > .tabs .tab-item {`
`147`	`147`	`font-size: $tabs-text-font-size-side-icon;`
`148`	`148`
`149`	`149`	`.icon {`