diff --git a/js/angular/directive/headerFooterBar.js b/js/angular/directive/headerFooterBar.js index 746d00b9030..201c30bedcd 100644 --- a/js/angular/directive/headerFooterBar.js +++ b/js/angular/directive/headerFooterBar.js @@ -125,7 +125,8 @@ function headerFooterBarDirective(isHeader) { restrict: 'E', compile: function($element, $attr) { $element.addClass(isHeader ? 'bar bar-header' : 'bar bar-footer'); - + var parent = $element[0].parentNode; + if(parent.querySelector('.tabs-top'))$element.addClass('has-tabs-top'); return { pre: prelink }; function prelink($scope, $element, $attr) { var hb = new ionic.views.HeaderBar({ diff --git a/scss/_bar.scss b/scss/_bar.scss index f140eb66dc2..9fc2370205f 100644 --- a/scss/_bar.scss +++ b/scss/_bar.scss @@ -312,6 +312,9 @@ top: 0; border-top-width: 0; border-bottom-width: 1px; + &.has-tabs-top{ + border-bottom-width: 0px; + } } // Footer at bottom diff --git a/scss/_tabs.scss b/scss/_tabs.scss index e7765d8fd2c..de48cae730d 100644 --- a/scss/_tabs.scss +++ b/scss/_tabs.scss @@ -88,65 +88,143 @@ @include tab-badge-style($tabs-dark-text, $tabs-dark-bg); } -@mixin tabs-striped($style, $color) { +@mixin tabs-striped($style, $color, $background) { &.#{$style} { - .tab-item.tab-item-active, - .tab-item.active, - .tab-item.activated { - margin-top: -4px; - color: $color; - border-style: solid; - border-width: $tabs-striped-border-width 0 0 0; - border-color: $color; + .tabs{ + background-color: $background; + } + .tab-item { + color: rgba($color, $tabs-striped-off-opacity); + opacity: 1; + .badge{ + opacity:$tabs-striped-off-opacity; + } + &.tab-item-active, + &.active, + &.activated { + margin-top: -$tabs-striped-border-width; + color: $color; + border-style: solid; + border-width: $tabs-striped-border-width 0 0 0; + border-color: $color; + .badge{ + top:$tabs-striped-border-width; + opacity: 1; + } + } + } + } + &.tabs-top{ + .tab-item { + &.tab-item-active, + &.active, + &.activated { + .badge { + top: 4%; + } + } } } } -.tabs-striped { +@mixin tabs-background($style, $color) { + &.#{$style} { + .tabs { + background-color: $color; + } + } +} + +@mixin tabs-color($style, $color) { + &.#{$style} { + .tab-item { + color: rgba($color, $tabs-striped-off-opacity); + opacity: 1; + .badge{ + opacity:$tabs-striped-off-opacity; + } + &.tab-item-active, + &.active, + &.activated { + margin-top: -$tabs-striped-border-width; + color: $color; + border: 0 solid $color; + border-top-width: $tabs-striped-border-width; + .badge{ + top:$tabs-striped-border-width; + opacity: 1; + } + } + } + } +} +.tabs-striped { .tabs { background-color: white; background-image: none; border: none; + box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15); + padding-top: $tabs-striped-border-width; } - - @include tabs-striped('tabs-light', $light); - @include tabs-striped('tabs-stable', $stable); - @include tabs-striped('tabs-positive', $positive); - @include tabs-striped('tabs-calm', $calm); - @include tabs-striped('tabs-assertive', $assertive); - @include tabs-striped('tabs-balanced', $balanced); - @include tabs-striped('tabs-energized', $energized); - @include tabs-striped('tabs-royal', $royal); - @include tabs-striped('tabs-dark', $dark); - - &.tabs-icon-only .icon { - } - - .tab-item { - color: $tabs-striped-off-color; - opacity: $tabs-striped-off-opacity; - } - .tab-item + .tab-item:before { - border-left: 1px solid #ccc; - display: block; - float: left; - width: 2px; - height: 26px; - margin: 11px auto; - content: " "; - } - + @include tabs-striped('tabs-light', $light, $dark); + @include tabs-striped('tabs-stable', $stable, $dark); + @include tabs-striped('tabs-positive', $positive, $light); + @include tabs-striped('tabs-calm', $calm, $light); + @include tabs-striped('tabs-assertive', $assertive, $light); + @include tabs-striped('tabs-balanced', $balanced, $light); + @include tabs-striped('tabs-energized', $energized, $light); + @include tabs-striped('tabs-royal', $royal, $light); + @include tabs-striped('tabs-dark', $dark, $light); + + + @include tabs-background('tabs-background-light', $light); + @include tabs-background('tabs-background-stable', $stable); + @include tabs-background('tabs-background-positive', $positive); + @include tabs-background('tabs-background-calm', $calm); + @include tabs-background('tabs-background-assertive', $assertive); + @include tabs-background('tabs-background-balanced', $balanced); + @include tabs-background('tabs-background-energized',$energized); + @include tabs-background('tabs-background-royal', $royal); + @include tabs-background('tabs-background-dark', $dark); + + @include tabs-color('tabs-color-light', $light); + @include tabs-color('tabs-color-stable', $stable); + @include tabs-color('tabs-color-positive', $positive); + @include tabs-color('tabs-color-calm', $calm); + @include tabs-color('tabs-color-assertive', $assertive); + @include tabs-color('tabs-color-balanced', $balanced); + @include tabs-color('tabs-color-energized',$energized); + @include tabs-color('tabs-color-royal', $royal); + @include tabs-color('tabs-color-dark', $dark); } .tabs-top { &.tabs-striped { - .tab-item.tab-item-active, - .tab-item.active, - .tab-item.activated { - margin-top: 0; - margin-bottom: -4px; - border-width: 0px 0px $tabs-striped-border-width 0px !important; + padding-bottom:0; + .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; + &.tab-item-active, + &.active, + &.activated { + margin-top: 0; + margin-bottom: -$tabs-striped-border-width; + border-width: 0px 0px $tabs-striped-border-width 0px !important; + border-style: solid; + } + .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; + } } } } @@ -157,9 +235,19 @@ .tabs.tabs-top { top: $bar-height; padding-top: 0; - padding-bottom: 2px; background-position: bottom; - + .tab-item { + &.tab-item-active, + &.active, + &.activated { + .badge { + top: 4%; + } + } + } +} +.tabs-top ~ .bar-header { + border-bottom-width: 0; } .tab-item { diff --git a/scss/_variables.scss b/scss/_variables.scss index bcf4e3df844..48fa8c02ad2 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -278,7 +278,7 @@ $tab-item-max-width: 150px !default; $tabs-striped-off-color: #000; $tabs-striped-off-opacity: 0.4; -$tabs-striped-border-width: 4px; +$tabs-striped-border-width: 2px; // Items diff --git a/test/css/headers-android.html b/test/css/headers-android.html new file mode 100644 index 00000000000..5f4440a50fb --- /dev/null +++ b/test/css/headers-android.html @@ -0,0 +1,39 @@ + + + + + + Header + + + + + + + +
+ +
+

Title!

+
+ +
+ +
+ +
+
+ +
+ + diff --git a/test/css/tabs-android.html b/test/css/tabs-android.html new file mode 100644 index 00000000000..09948681c9b --- /dev/null +++ b/test/css/tabs-android.html @@ -0,0 +1,181 @@ + + + + + + Tabs: Android Colors + + + + + + +
+

Android Tab Bars

+
+ +
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ + diff --git a/test/css/test.scenario.js b/test/css/test.scenario.js index 9e505ee72d4..8b981cf8b98 100644 --- a/test/css/test.scenario.js +++ b/test/css/test.scenario.js @@ -29,6 +29,7 @@ describe('css', function() { "form-simple", "grid", "headers", + "headers-android", "input-checkbox", "input-radio", "input-range", @@ -48,6 +49,7 @@ describe('css', function() { "search", "split-pane", "tabs-and-cards", + "tabs-android", "tabs-default", "tabs-icons-bottom", "tabs-icons-left", diff --git a/test/unit/angular/directive/headerFooterBar.unit.js b/test/unit/angular/directive/headerFooterBar.unit.js index a92cfd41e43..2a54820158d 100644 --- a/test/unit/angular/directive/headerFooterBar.unit.js +++ b/test/unit/angular/directive/headerFooterBar.unit.js @@ -97,7 +97,7 @@ describe('bar directives', function() { this.align = jasmine.createSpy('align'); }; inject(function($compile, $rootScope) { - el = angular.element('<'+data.tag+' '+(attrs||'')+'>'); + el = angular.element('<'+data.tag+' '+(attrs||'')+'>
'); el = $compile(el)($rootScope.$new()); $rootScope.$apply(); }); @@ -159,6 +159,10 @@ describe('bar directives', function() { scope.$apply('$hasTabs = false'); expect(el.hasClass('has-tabs')).toBe(false); }); + it('.has-tabs-top', function() { + var el = setup(); + expect(el.hasClass('has-tabs-top')).toBe(true); + }); } it('should compile to ' + data.className, function() {