diff --git a/js/angular/directive/headerFooterBar.js b/js/angular/directive/headerFooterBar.js index 1d7955fb249..2515ef885a5 100644 --- a/js/angular/directive/headerFooterBar.js +++ b/js/angular/directive/headerFooterBar.js @@ -124,9 +124,9 @@ function headerFooterBarDirective(isHeader) { controller: '$ionicHeaderBar', compile: function(tElement, $attr) { tElement.addClass(isHeader ? 'bar bar-header' : 'bar bar-footer'); - // android style tabs? if so, remove bottom border for seamless display + // top style tabs? if so, remove bottom border for seamless display $timeout(function() { - if ($document[0].getElementsByClassName('tabs-top').length) tElement.addClass('has-tabs-top'); + if (isHeader && $document[0].getElementsByClassName('tabs-top').length) tElement.addClass('has-tabs-top'); }); return { pre: prelink }; diff --git a/scss/_tabs.scss b/scss/_tabs.scss index da22c030e7c..4daccbbc3c7 100644 --- a/scss/_tabs.scss +++ b/scss/_tabs.scss @@ -94,10 +94,10 @@ background-color: $background; } .tab-item { - color: rgba($color, $tabs-off-opacity); + color: rgba($color, $tabs-striped-off-opacity); opacity: 1; .badge{ - opacity:$tabs-off-opacity; + opacity:$tabs-striped-off-opacity; } &.tab-item-active, &.active, @@ -166,10 +166,10 @@ @mixin tabs-striped-color($style, $color) { &.#{$style} { .tab-item { - color: rgba($color, $tabs-off-opacity); + color: rgba($color, $tabs-striped-off-opacity); opacity: 1; .badge{ - opacity:$tabs-off-opacity; + opacity:$tabs-striped-off-opacity; } &.tab-item-active, &.active, @@ -325,6 +325,8 @@ ion-tabs { top: $bar-height; padding-top: 0; background-position: bottom; + border-top-width: 0; + border-bottom-width: 1px; .tab-item { &.tab-item-active, &.active, diff --git a/scss/_variables.scss b/scss/_variables.scss index c021ee37b3d..329e504d69d 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -279,7 +279,8 @@ $tabs-default-text: $tabs-stable-text !default; $tab-item-max-width: 150px !default; -$tabs-off-opacity: 0.4; +$tabs-off-opacity: 0.4 !default; +$tabs-striped-off-opacity: $tabs-off-opacity !default; $tabs-striped-off-color: #000; $tabs-striped-border-width: 2px;