fix tab icon alignments, closes #493

Adam Bradley · Adam Bradley · commit 4d26f730bcf0 · 2014-01-30T22:16:27.000-06:00
diff --git a/dist/css/ionic.css b/dist/css/ionic.css
@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /*!
  * Copyright 2014 Drifty Co.
  * http://drifty.com/
@@ -3575,7 +3574,7 @@ a.subdued {
   font-size: 12px;
   line-height: 14px; }
 
-.tab-item .icon:before {
+.tab-item .icon {
   display: block;
   margin: 0 auto;
   height: 32px;
@@ -3584,20 +3583,22 @@ a.subdued {
 .tabs-icon-left .tab-item,
 .tabs-icon-right .tab-item {
   font-size: 12px; }
-  .tabs-icon-left .tab-item .icon:before,
-  .tabs-icon-right .tab-item .icon:before {
+  .tabs-icon-left .tab-item .icon,
+  .tabs-icon-right .tab-item .icon {
     display: inline-block;
-    vertical-align: top;
-    font-size: 24px;
-    line-height: 49px; }
+    vertical-align: top; }
+    .tabs-icon-left .tab-item .icon:before,
+    .tabs-icon-right .tab-item .icon:before {
+      font-size: 24px;
+      line-height: 49px; }
 
-.tabs-icon-left .tab-item .icon:before {
+.tabs-icon-left .tab-item .icon {
   padding-right: 3px; }
 
-.tabs-icon-right .tab-item .icon:before {
+.tabs-icon-right .tab-item .icon {
   padding-left: 3px; }
 
-.tabs-icon-only .icon:before {
+.tabs-icon-only .icon {
   line-height: inherit; }
 
 /* Navigational tab */
diff --git a/dist/css/ionic.min.css b/dist/css/ionic.min.css
diff --git a/scss/_tabs.scss b/scss/_tabs.scss
@@ -101,7 +101,7 @@
   line-height: $tabs-text-font-size;
 }
 
-.tab-item .icon:before {
+.tab-item .icon {
   display: block;
   margin: 0 auto;
   height: $tabs-icon-size;
@@ -112,23 +112,26 @@
 .tabs-icon-right .tab-item {
   font-size: $tabs-text-font-size-side-icon;
 
-  .icon:before {
+  .icon {
     display: inline-block;
     vertical-align: top;
+
+    &:before {
     font-size: $tabs-icon-size - 8;
     line-height: $tabs-height;
+    }
   }
 }
 
-.tabs-icon-left .tab-item .icon:before {
+.tabs-icon-left .tab-item .icon {
   padding-right: 3px;
 }
 
-.tabs-icon-right .tab-item .icon:before {
+.tabs-icon-right .tab-item .icon {
   padding-left: 3px;
 }
 
-.tabs-icon-only .icon:before {
+.tabs-icon-only .icon {
   line-height: inherit;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -101,7 +101,7 @@`
`101`	`101`	`line-height: $tabs-text-font-size;`
`102`	`102`	`}`
`103`	`103`
`104`		`-.tab-item .icon:before {`
	`104`	`+.tab-item .icon {`
`105`	`105`	`display: block;`
`106`	`106`	`margin: 0 auto;`
`107`	`107`	`height: $tabs-icon-size;`
`@@ -112,23 +112,26 @@`
`112`	`112`	`.tabs-icon-right .tab-item {`
`113`	`113`	`font-size: $tabs-text-font-size-side-icon;`
`114`	`114`
`115`		`- .icon:before {`
	`115`	`+ .icon {`
`116`	`116`	`display: inline-block;`
`117`	`117`	`vertical-align: top;`
	`118`	`+`
	`119`	`+ &:before {`
`118`	`120`	`font-size: $tabs-icon-size - 8;`
`119`	`121`	`line-height: $tabs-height;`
	`122`	`+ }`
`120`	`123`	`}`
`121`	`124`	`}`
`122`	`125`
`123`		`-.tabs-icon-left .tab-item .icon:before {`
	`126`	`+.tabs-icon-left .tab-item .icon {`
`124`	`127`	`padding-right: 3px;`
`125`	`128`	`}`
`126`	`129`
`127`		`-.tabs-icon-right .tab-item .icon:before {`
	`130`	`+.tabs-icon-right .tab-item .icon {`
`128`	`131`	`padding-left: 3px;`
`129`	`132`	`}`
`130`	`133`
`131`		`-.tabs-icon-only .icon:before {`
	`134`	`+.tabs-icon-only .icon {`
`132`	`135`	`line-height: inherit;`
`133`	`136`	`}`
`134`	`137`