refactor(navbar): improved navbar transitions

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());
   }
 

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);
 }

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 {

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);

ionic/components/nav-bar/nav-bar.scss

@@ -29,7 +29,3 @@ ion-navbar {
   display: flex;
   align-items: center;
 }
-
-.transparent-navbar {
-  background-color: transparent !important;
-}

ionic/components/nav-bar/nav-bar.ts

@@ -67,7 +67,8 @@ class BackButtonText extends Ion {
       '<ng-content select="ion-title"></ng-content>' +
       '<ng-content select="ion-nav-items[primary]"></ng-content>' +
       '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
-    '</div>',
+    '</div>' +
+    '<div class="toolbar-background"></div>',
   directives: [BackButton, BackButtonText]
 })
 export class Navbar extends ToolbarBase {

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

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;
 }

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,

ionic/components/toolbar/toolbar.ts

@@ -69,7 +69,8 @@ export class ToolbarBase extends Ion  {
       '<ng-content select="ion-title"></ng-content>' +
       '<ng-content select="ion-nav-items[primary]"></ng-content>' +
       '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
-    '</div>'
+    '</div>' +
+    '<div class="toolbar-background"></div>'
 })
 export class Toolbar extends ToolbarBase {
   constructor(