fix(tabs): fix android untyled android tab

ionic-team · Sep 18, 2014 · aa7e9dd · aa7e9dd
1 parent 120e145
commit aa7e9dd
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/scss/_tabs.scss b/scss/_tabs.scss
@@ -167,6 +167,17 @@
     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15);
     padding-top: $tabs-striped-border-width;
   }
+  .tab-item {
+    // default android tab style
+    &.tab-item-active,
+    &.active,
+    &.activated {
+      margin-top: -$tabs-striped-border-width;
+      border-style: solid;
+      border-width: $tabs-striped-border-width 0 0 0;
+      border-color: $dark;
+    }
+  }
   @include tabs-striped('tabs-light', $light, $dark);
   @include tabs-striped('tabs-stable', $stable, $dark);
   @include tabs-striped('tabs-positive', $positive, $light);

diff --git a/test/css/tabs-android.html b/test/css/tabs-android.html
@@ -113,6 +113,14 @@ <h1 class="title">Android Tab Bars</h1>
         <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
       </nav>
     </div>
+    <div class="view tabs-striped">
+      <nav class="tabs ">
+        <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>
+        <a class="tab-item"><i class="icon ion-locked"></i>Security</a>
+        <a class="tab-item has-badge"><i class="badge badge-assertive">3</i><i class="icon ion-leaf"></i>Light</a>
+        <a disabled class="tab-item"><i class="icon ion-close"></i>Inactive</a>
+      </nav>
+    </div>
     <div class="view tabs-stable tabs-background-balanced tabs-striped">
       <nav class="tabs">
         <a class="tab-item active" href="#"><i class="icon ion-game-controller-a"></i> Fun</a>