fix(tabs): improves tabs style for iOS

ionic-team · Mar 6, 2016 · b9a4628 · b9a4628
1 parent e92feef
commit b9a4628
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/ionic/components/tabs/tabs.ios.scss b/ionic/components/tabs/tabs.ios.scss
@@ -7,7 +7,7 @@
 $tabbar-ios-background:               $toolbar-ios-background !default;
 $tabbar-ios-item-padding:             0px 10px !default;
 $tabbar-ios-item-font-size:           10px !default;
-$tabbar-ios-item-icon-size:           32px !default;
+$tabbar-ios-item-icon-size:           30px !default;
 $tabbar-ios-height:                   49px !default;
 
 $tab-button-ios-min-width:            80px !default;
@@ -43,6 +43,8 @@ ion-tabs[tabbarPlacement=top] tabbar {
 .tab-button-text {
   min-height: $tabbar-ios-item-font-size + 1;
   font-size: $tabbar-ios-item-font-size;
+  margin-top: 0;
+  margin-bottom: 0;
 }
 
 .has-title-only .tab-button-text {
@@ -65,8 +67,6 @@ ion-tabs[tabbarPlacement=top] tabbar {
   .tab-button-text {
     font-size: 1.4rem;
     line-height: 1.1;
-    margin-top: 0;
-    margin-bottom: 0;
   }
 
   ion-icon {
@@ -83,6 +83,8 @@ ion-tabs[tabbarPlacement=top] tabbar {
   .tab-button-text {
     font-size: 1.4rem;
     line-height: 1.1;
+
+    margin: 2px 0px;
   }
 }
 

diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss
@@ -146,7 +146,7 @@ tab-highlight {
 
 .tab-badge {
   position: absolute;
-  top: 4%;
+  top: 6%;
   right: 4%;
   right: calc(50% - 50px);
   padding: 1px 6px;