fix(tabs): correct border visibility with android style tabs

ionic-team · Jan 15, 2015 · bf40b22 · bf40b22
1 parent 7d181d2
commit bf40b22
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/scss/_bar.scss b/scss/_bar.scss
@@ -326,6 +326,10 @@
     background-image: none;
   }
 }
+.tabs-top .bar-header{
+  border-bottom-width: 0px;
+  background-image: none;
+}
 
 // Footer at bottom
 .bar-footer {

diff --git a/scss/_tabs.scss b/scss/_tabs.scss
@@ -295,25 +295,27 @@ ion-tabs {
     .tab-item{
       background: transparent;
       // animate the top bar, leave bottom for platform consistency
-      -webkit-transition: all .1s ease;
-      -moz-transition: all .1s ease;
-      -ms-transition: all .1s ease;
-      -o-transition: all .1s ease;
-      transition: all .1s ease;
+      -webkit-transition: color .1s ease;
+      -moz-transition: color .1s ease;
+      -ms-transition: color .1s ease;
+      -o-transition: color .1s ease;
+      transition: color .1s ease;
       &.tab-item-active,
       &.active,
       &.activated {
-        margin-top: 0;
-        margin-bottom: -$tabs-striped-border-width;
+        margin-top: $tabs-striped-border-width - 1px;
         border-width: 0px 0px $tabs-striped-border-width 0px !important;
         border-style: solid;
+        > .badge, > i{
+          margin-top: -$tabs-striped-border-width + 1px;
+        }
       }
       .badge{
-        -webkit-transition: all .2s ease;
-        -moz-transition: all .2s ease;
-        -ms-transition: all .2s ease;
-        -o-transition: all .2s ease;
-        transition: all .2s ease;
+        -webkit-transition: color .2s ease;
+        -moz-transition: color .2s ease;
+        -ms-transition: color .2s ease;
+        -o-transition: color .2s ease;
+        transition: color .2s ease;
       }
     }
   }

diff --git a/test/html/tabs.html b/test/html/tabs.html
@@ -74,7 +74,7 @@ <h1 class="title">Tasks</h1>
         <header class="bar bar-header bar-positive">
           <h1 class="title">Deadlines</h1>
         </header>
-        <ion-content clsas="has-header" padding="true">
+        <ion-content class="has-header" padding="true">
           <h1>Deadlines</h1>
         </ion-content>
       </ion-tab>