Skip to content

Commit bf40b22

Browse files
committed
fix(tabs): correct border visibility with android style tabs
1 parent 7d181d2 commit bf40b22

File tree

3 files changed

+19
-13
lines changed

3 files changed

+19
-13
lines changed

Diff for: scss/_bar.scss

+4
Original file line numberDiff line numberDiff line change
@@ -326,6 +326,10 @@
326326
background-image: none;
327327
}
328328
}
329+
.tabs-top .bar-header{
330+
border-bottom-width: 0px;
331+
background-image: none;
332+
}
329333

330334
// Footer at bottom
331335
.bar-footer {

Diff for: scss/_tabs.scss

+14-12
Original file line numberDiff line numberDiff line change
@@ -295,25 +295,27 @@ ion-tabs {
295295
.tab-item{
296296
background: transparent;
297297
// animate the top bar, leave bottom for platform consistency
298-
-webkit-transition: all .1s ease;
299-
-moz-transition: all .1s ease;
300-
-ms-transition: all .1s ease;
301-
-o-transition: all .1s ease;
302-
transition: all .1s ease;
298+
-webkit-transition: color .1s ease;
299+
-moz-transition: color .1s ease;
300+
-ms-transition: color .1s ease;
301+
-o-transition: color .1s ease;
302+
transition: color .1s ease;
303303
&.tab-item-active,
304304
&.active,
305305
&.activated {
306-
margin-top: 0;
307-
margin-bottom: -$tabs-striped-border-width;
306+
margin-top: $tabs-striped-border-width - 1px;
308307
border-width: 0px 0px $tabs-striped-border-width 0px !important;
309308
border-style: solid;
309+
> .badge, > i{
310+
margin-top: -$tabs-striped-border-width + 1px;
311+
}
310312
}
311313
.badge{
312-
-webkit-transition: all .2s ease;
313-
-moz-transition: all .2s ease;
314-
-ms-transition: all .2s ease;
315-
-o-transition: all .2s ease;
316-
transition: all .2s ease;
314+
-webkit-transition: color .2s ease;
315+
-moz-transition: color .2s ease;
316+
-ms-transition: color .2s ease;
317+
-o-transition: color .2s ease;
318+
transition: color .2s ease;
317319
}
318320
}
319321
}

Diff for: test/html/tabs.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ <h1 class="title">Tasks</h1>
7474
<header class="bar bar-header bar-positive">
7575
<h1 class="title">Deadlines</h1>
7676
</header>
77-
<ion-content clsas="has-header" padding="true">
77+
<ion-content class="has-header" padding="true">
7878
<h1>Deadlines</h1>
7979
</ion-content>
8080
</ion-tab>

0 commit comments

Comments
 (0)