fix(): back button and transitions

packages/core/src/components/back-button/back-button.ios.scss

@@ -4,7 +4,7 @@
 // iOS Back Button
 // --------------------------------------------------
 
-.back-button-ios .back-button-inner-default {
+.back-button-ios .back-button-inner {
   @include padding(0);
   @include margin(0);
 
@@ -16,7 +16,6 @@
   border: 0;
   font-size: 17px;
   line-height: 1;
-  color: $back-button-ios-button-color;
   background-color: transparent;
   transform: translateZ(0);
 
@@ -40,6 +39,3 @@
   letter-spacing: .01em;
 }
 
-.enable-hover .back-button-ios:hover {
-  color: $back-button-ios-button-color;
-}

packages/core/src/components/back-button/back-button.ios.vars.scss

@@ -1,6 +1,5 @@
 @import "../../themes/ionic.globals.ios";
 
-$back-button-ios-button-color:    ion-color($colors-ios, primary, base, ios) !default;
 
 $back-button-ios-button-z-index:  $z-index-toolbar-buttons !default;
 

packages/core/src/components/back-button/back-button.md.scss

@@ -1,9 +1,8 @@
 @import "./back-button";
-@import "./back-button.md.vars";
 
 // MD Back Button
 // --------------------------------------------------
-.back-button-md .back-button-inner-default {
+.back-button-md .back-button-inner {
   @include margin(0, 6px, 0, 0);
   @include padding(0, 5px);
 
@@ -13,7 +12,6 @@
   font-size: 14px;
   font-weight: 500;
   text-transform: uppercase;
-  color: $back-button-md-button-color;
   background-color: transparent;
   box-shadow: none;
 
@@ -24,20 +22,11 @@
 
 .back-button-md ion-icon {
   @include padding-horizontal(null, 0.3em);
-
   @include margin(0);
   @include padding(0, 6px);
   @include text-align(start);
-
   font-size: 24px;
   font-weight: normal;
-
-
   line-height: 0.67;
-
   pointer-events: none;
 }
-
-.enable-hover .back-button-md:hover {
-  color: $back-button-md-button-color;
-}

packages/core/src/components/back-button/back-button.md.vars.scss

@@ -1,4 +0,0 @@
-@import "../../themes/ionic.globals.md";
-
-$back-button-md-button-color: $toolbar-md-text-color !default;
-

packages/core/src/components/back-button/back-button.tsx

@@ -50,7 +50,7 @@ export class BackButton {
     } else {
       return (
         <ion-nav-pop>
-          <button class='back-button-inner-default'>
+          <button class='back-button-inner'>
             <span class='button-inner'>
               <ion-icon name={backButtonIcon} slot='start' />
               <span class='button-text'>{backButtonText}</span>

packages/core/src/components/back-button/test/basic/index.html

@@ -48,7 +48,7 @@
     secondPage.classList.add('second-page');
     secondPage.innerHTML = `
       <ion-header>
-        <ion-toolbar>
+        <ion-toolbar color="secondary">
           <ion-buttons slot="start">
             <ion-back-button></ion-back-button>
           </ion-buttons>
@@ -80,7 +80,8 @@
           <ion-buttons slot="start">
             <ion-back-button>
             <ion-button color="danger">
-              <ion-icon name="add" slot="icon-only"></ion-icon>
+              <ion-icon name="add" slot="start"></ion-icon>
+              Text!
             </ion-button>
             </ion-back-button>
           </ion-buttons>
@@ -97,4 +98,4 @@
     await nav.push(thirdPage);
   }
 </script>
-</html>
+</html>

packages/core/src/components/nav/transitions/transition.ios.ts

@@ -105,7 +105,7 @@ export function buildIOSTransition(rootTransition: Transition, enteringView: Vie
 
         enteringToolBarBg
           .beforeClearStyles([OPACITY])
-          .fromTo(TRANSLATEX, OFF_RIGHT, CENTER, true);
+          .fromTo(OPACITY, 0.01, 1, true);
 
         if (canNavGoBack(enteringView.nav, enteringView)) {
 
@@ -187,7 +187,7 @@ export function buildIOSTransition(rootTransition: Transition, enteringView: Vie
         // should just slide out, no fading out
         leavingToolBarBg
           .beforeClearStyles([OPACITY])
-          .fromTo(TRANSLATEX, CENTER, (isRTL ? '-100%' : '100%'));
+          .fromTo(OPACITY, 1, 0.01, true);
 
         const leavingBackBtnText = rootTransition.create();
         leavingBackBtnText.addElement(leavingToolBarEle.querySelector('.back-button .button-text'));

packages/core/src/components/toolbar/toolbar.ios.scss

@@ -94,6 +94,7 @@
     }
 
     .bar-button-clear-ios,
+    .back-button-ios .back-button-inner,
     .bar-button-default-ios {
       color: $color-contrast;
     }

packages/core/src/components/toolbar/toolbar.md.scss

@@ -84,6 +84,7 @@
     }
 
     .bar-button-clear-md,
+    .back-button-md .back-button-inner,
     .bar-button-default-md,
     .bar-button-outline-md,
     .toolbar-title-md {
@@ -91,6 +92,7 @@
     }
 
     .bar-button-clear-md,
+    .back-button-md .back-button-inner,
     .bar-button-default-md,
     .bar-button-outline-md {
       .ripple-effect {