diff --git a/ionic/components/app/app.ts b/ionic/components/app/app.ts
index bd168b0360..4d27e136bd 100644
--- a/ionic/components/app/app.ts
+++ b/ionic/components/app/app.ts
@@ -111,7 +111,6 @@ export class IonicApp {
* @return {bool}
*/
isTransitioning() {
- console.debug('isTransitioning', (this._trnsTime > Date.now()), this._trnsTime, Date.now())
return (this._trnsTime > Date.now());
}
diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss
index 8bd47a16de..b7f61e98f5 100644
--- a/ionic/components/app/structure.scss
+++ b/ionic/components/app/structure.scss
@@ -13,6 +13,7 @@ $z-index-navbar-container: 10;
$z-index-content: 5;
$z-index-toolbar: 10;
+$z-index-toolbar-background: -1;
$z-index-toolbar-border: 20;
$z-index-list-border: 50;
@@ -139,7 +140,7 @@ ion-view {
height: 100%;
flex-direction: column;
- background-color: white;
+ background-color: $background-color;
transform: translateZ(0px);
}
diff --git a/ionic/components/app/typography.scss b/ionic/components/app/typography.scss
index e42e5377ff..ad115b472a 100644
--- a/ionic/components/app/typography.scss
+++ b/ionic/components/app/typography.scss
@@ -35,7 +35,7 @@ a {
background-color: transparent;
}
.enable-hover a:hover {
- color: $link-hover-color;
+ opacity: 0.7;
}
h1, h2, h3, h4, h5, h6 {
diff --git a/ionic/components/menu/menu-types.scss b/ionic/components/menu/menu-types.scss
index 6348c40b5f..ddc992395a 100644
--- a/ionic/components/menu/menu-types.scss
+++ b/ionic/components/menu/menu-types.scss
@@ -28,8 +28,8 @@ ion-menu[type=overlay] {
display: block;
transform: translate3d(-9999px, 0px, 0px);
opacity: 0.01;
- left: -1000px;
- width: 4000px;
+ left: -3000px;
+ width: 6000px;
&.show-backdrop {
transform: translate3d(0px, 0px, 0px);
diff --git a/ionic/components/nav-bar/nav-bar.scss b/ionic/components/nav-bar/nav-bar.scss
index eef5e1074d..42eb78acce 100644
--- a/ionic/components/nav-bar/nav-bar.scss
+++ b/ionic/components/nav-bar/nav-bar.scss
@@ -29,7 +29,3 @@ ion-navbar {
display: flex;
align-items: center;
}
-
-.transparent-navbar {
- background-color: transparent !important;
-}
diff --git a/ionic/components/nav-bar/nav-bar.ts b/ionic/components/nav-bar/nav-bar.ts
index d21368c0a1..1cd3aad2d7 100644
--- a/ionic/components/nav-bar/nav-bar.ts
+++ b/ionic/components/nav-bar/nav-bar.ts
@@ -67,7 +67,8 @@ class BackButtonText extends Ion {
'' +
'' +
'' +
- '',
+ '' +
+ '
',
directives: [BackButton, BackButtonText]
})
export class Navbar extends ToolbarBase {
diff --git a/ionic/components/nav/view-controller.ts b/ionic/components/nav/view-controller.ts
index a6fae1471c..ea13d2cd2d 100644
--- a/ionic/components/nav/view-controller.ts
+++ b/ionic/components/nav/view-controller.ts
@@ -325,6 +325,17 @@ export class ViewController {
}
}
+ /**
+ * TODO
+ * @returns {TODO} TODO
+ */
+ navbarBackgroundRef() {
+ let navbarView = this.navbarView();
+ if (navbarView) {
+ return navbarView.getNativeElement().querySelector('.toolbar-background');
+ }
+ }
+
/**
* TODO
* @returns {TODO} TODO
diff --git a/ionic/components/toolbar/modes/ios.scss b/ionic/components/toolbar/modes/ios.scss
index ffb070d458..5a3257f1d3 100644
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -17,8 +17,6 @@ $toolbar-ios-title-font-size: 1.7rem !default;
.toolbar {
- border-bottom-width: 1px;
- border-bottom-style: solid;
min-height: $toolbar-ios-height;
[menu-toggle] {
@@ -66,6 +64,11 @@ $toolbar-ios-title-font-size: 1.7rem !default;
}
+.toolbar .toolbar-background {
+ border-bottom-width: 1px;
+ border-bottom-style: solid;
+}
+
ion-title {
position: absolute;
top: 0;
@@ -93,6 +96,6 @@ ion-nav-items[secondary] {
order: map-get($toolbar-order-ios, secondary);
}
-&.hairlines .toolbar {
+&.hairlines .toolbar .toolbar-background {
border-bottom-width: 0.55px;
}
diff --git a/ionic/components/toolbar/toolbar.scss b/ionic/components/toolbar/toolbar.scss
index 8dd473f512..e499d42cf8 100644
--- a/ionic/components/toolbar/toolbar.scss
+++ b/ionic/components/toolbar/toolbar.scss
@@ -28,10 +28,6 @@ $toolbar-order: (
padding: $toolbar-padding;
width: 100%;
- border: 0;
- border-color: $toolbar-border-color;
- background-color: $toolbar-background-color;
-
button,
[button] {
background-color: transparent;
@@ -40,6 +36,21 @@ $toolbar-order: (
}
}
+.toolbar .toolbar-background {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ z-index: $z-index-toolbar-background;
+
+ border: 0;
+ border-color: $toolbar-border-color;
+ background-color: $toolbar-background-color;
+
+ pointer-events: none;
+}
+
.enable-hover .toolbar button:hover,
.enable-hover .toolbar [button]:hover,
.toolbar button.activated,
@@ -120,8 +131,11 @@ ion-nav-items div {
@each $color-name, $color-value in $colors {
.toolbar[#{$color-name}] {
- background-color: $color-value;
- border-color: darken($color-value, 10%);
+
+ .toolbar-background {
+ background-color: $color-value;
+ border-color: darken($color-value, 10%);
+ }
.toolbar-title,
button,
diff --git a/ionic/components/toolbar/toolbar.ts b/ionic/components/toolbar/toolbar.ts
index beb1fbf988..18d6802f89 100644
--- a/ionic/components/toolbar/toolbar.ts
+++ b/ionic/components/toolbar/toolbar.ts
@@ -69,7 +69,8 @@ export class ToolbarBase extends Ion {
'' +
'' +
'' +
- ''
+ '' +
+ ''
})
export class Toolbar extends ToolbarBase {
constructor(
diff --git a/ionic/themes/dark.scss b/ionic/themes/dark.scss
index 2f7d14f2dd..734e934503 100644
--- a/ionic/themes/dark.scss
+++ b/ionic/themes/dark.scss
@@ -21,7 +21,6 @@ $list-background-color: $background-color !default;
$list-border-color: #666 !default;
$link-color: map-get($colors, primary) !default;
-$link-hover-color: lighten($link-color, 15%) !default;
$toolbar-background-color: #111 !default;
$toolbar-border-color: #000 !default;
diff --git a/ionic/themes/default.scss b/ionic/themes/default.scss
index 00f2b44658..733be5a230 100644
--- a/ionic/themes/default.scss
+++ b/ionic/themes/default.scss
@@ -22,7 +22,6 @@ $list-background-color: $background-color !default;
$list-border-color: #c8c7cc !default;
$link-color: map-get($colors, primary) !default;
-$link-hover-color: darken($link-color, 15%) !default;
$toolbar-background-color: #f8f8f8 !default;
$toolbar-border-color: #b2b2b2 !default;
diff --git a/ionic/transitions/ios-transition.ts b/ionic/transitions/ios-transition.ts
index 3fa991c6db..d4ce5c24c1 100644
--- a/ionic/transitions/ios-transition.ts
+++ b/ionic/transitions/ios-transition.ts
@@ -32,6 +32,9 @@ class IOSTransition extends Transition {
.fadeIn()
.to(TRANSLATEX, CENTER);
+ this.enteringNavbarBackground
+ .to(TRANSLATEX, CENTER);
+
// leaving view moves off screen
this.leavingView
.from(TRANSLATEX, CENTER)
@@ -42,6 +45,9 @@ class IOSTransition extends Transition {
.from(TRANSLATEX, CENTER)
.from(OPACITY, 1);
+ this.leavingNavbarBackground
+ .from(TRANSLATEX, CENTER);
+
// set properties depending on direction
if (opts.direction === 'back') {
// back direction
@@ -53,9 +59,8 @@ class IOSTransition extends Transition {
this.enteringTitle
.from(TRANSLATEX, OFF_LEFT);
- this.leavingNavbar
- .before.addClass('transparent-navbar')
- .after.removeClass('transparent-navbar');
+ this.enteringNavbarBackground
+ .from(TRANSLATEX, OFF_LEFT);
this.leavingView
.to(TRANSLATEX, '100%')
@@ -65,6 +70,9 @@ class IOSTransition extends Transition {
.to(TRANSLATEX, '100%')
.to(OPACITY, 0);
+ this.leavingNavbarBackground
+ .to(TRANSLATEX, '100%');
+
if (this.leaving.enableBack() && this.viewWidth() > 200) {
let leavingBackButtonText = new Animation(this.leaving.backBtnTextRef());
leavingBackButtonText.fromTo(TRANSLATEX, CENTER, (this.viewWidth() / 2) + 'px');
@@ -77,13 +85,12 @@ class IOSTransition extends Transition {
.from(TRANSLATEX, '99.5%')
.from(OPACITY, 1);
- this.enteringNavbar
- .before.addClass('transparent-navbar')
- .after.removeClass('transparent-navbar');
-
this.enteringTitle
.from(TRANSLATEX, '99.5%');
+ this.enteringNavbarBackground
+ .from(TRANSLATEX, '99.5%');
+
this.leavingView
.to(TRANSLATEX, OFF_LEFT)
.to(OPACITY, OFF_OPACITY);
@@ -92,6 +99,9 @@ class IOSTransition extends Transition {
.to(TRANSLATEX, OFF_LEFT)
.to(OPACITY, 0);
+ this.leavingNavbarBackground
+ .to(TRANSLATEX, OFF_LEFT);
+
if (this.entering.enableBack() && this.viewWidth() > 200) {
let enteringBackButtonText = new Animation(this.entering.backBtnTextRef());
enteringBackButtonText.fromTo(TRANSLATEX, (this.viewWidth() / 2) + 'px', CENTER);
diff --git a/ionic/transitions/transition.ts b/ionic/transitions/transition.ts
index 9d86c8d136..0dcbfb468e 100644
--- a/ionic/transitions/transition.ts
+++ b/ionic/transitions/transition.ts
@@ -46,8 +46,10 @@ export class Transition extends Animation {
this.add(enteringNavbar);
this.enteringNavbarItems = new Animation(enteringView.navbarItemRefs());
- this.enteringNavbarItems.fadeIn();
- enteringNavbar.add(this.enteringNavbarItems);
+ enteringNavbar.add(this.enteringNavbarItems.fadeIn());
+
+ this.enteringNavbarBackground = new Animation(enteringView.navbarBackgroundRef());
+ enteringNavbar.add(this.enteringNavbarBackground);
}
@@ -69,8 +71,10 @@ export class Transition extends Animation {
leavingNavbar.add(this.leavingTitle);
this.leavingNavbarItems = new Animation(leavingView.navbarItemRefs());
- this.leavingNavbarItems.fadeOut();
- leavingNavbar.add(this.leavingNavbarItems);
+ leavingNavbar.add(this.leavingNavbarItems.fadeOut());
+
+ this.leavingNavbarBackground = new Animation(leavingView.navbarBackgroundRef());
+ leavingNavbar.add(this.leavingNavbarBackground);
this.add(this.leavingView, leavingNavbar);
}