fix(back-button): fix menu and back button alignment (#14268)

* fix(): fix menu and back button alignment

* fix(button): remove button-text span

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

@@ -19,7 +19,7 @@
 
   position: relative;
   z-index: 0;
-  display: flex;
+  display: inline-flex;
 
   flex-flow: row nowrap;
   flex-shrink: 0;

core/src/components/button/button.tsx

@@ -154,7 +154,7 @@ export class Button {
           <span class='button-inner'>
             <slot name='icon-only'></slot>
             <slot name='start'></slot>
-            <span class='button-text'><slot></slot></span>
+            <slot></slot>
             <slot name='end'></slot>
           </span>
           { this.mode === 'md' && <ion-ripple-effect useTapClick={true}/> }

core/src/components/menu-button/menu-button.ios.scss

@@ -0,0 +1,39 @@
+@import "./menu-button";
+@import "./menu-button.ios.vars";
+
+// iOS Menu Button
+// --------------------------------------------------
+
+.menu-button-ios .menu-button-inner {
+  @include padding(0);
+  @include margin(2px, 0, 0, 0);
+
+  z-index: $menu-button-ios-button-z-index;
+  overflow: visible;
+
+  min-height: 32px;
+
+  border: 0;
+  font-size: 17px;
+  line-height: 1;
+
+  color: $menu-button-ios-color;
+  background-color: transparent;
+
+  transform: translateZ(0);
+
+  &.activated {
+    opacity: .4;
+  }
+}
+
+.menu-button-ios ion-icon {
+  @include padding(0);
+  @include margin(0, -3px, 0, 0);
+
+  display: inherit;
+
+  font-size: 1.75em;
+
+  pointer-events: none;
+}

core/src/components/menu-button/menu-button.ios.vars.scss

@@ -0,0 +1,10 @@
+@import "../../themes/ionic.globals.ios";
+
+// iOS Menu Button
+// --------------------------------------------------
+
+/// @prop - Z index of the Menu button
+$menu-button-ios-button-z-index:      $z-index-toolbar-buttons !default;
+
+/// @prop - Text color of the Menu button
+$menu-button-ios-color:               ion-color($colors-ios, primary, base, ios) !default;

core/src/components/menu-button/menu-button.md.scss

@@ -0,0 +1,38 @@
+@import "./menu-button";
+@import "./menu-button.md.vars";
+
+// MD Menu Button
+// --------------------------------------------------
+
+.menu-button-md .menu-button-inner {
+  @include margin(2px, 6px, 0, 0);
+  @include padding(0, 5px);
+
+  min-width: 44px;
+  height: 32px;
+  border: 0;
+  font-size: 14px;
+  font-weight: 500;
+  text-transform: uppercase;
+
+  color: $menu-button-md-color;
+  background-color: transparent;
+
+  box-shadow: none;
+
+  &.activated {
+    opacity: 0.4;
+  }
+}
+
+.menu-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;
+}

core/src/components/menu-button/menu-button.md.vars.scss

@@ -0,0 +1,7 @@
+@import "../../themes/ionic.globals.md";
+
+// Material Design Menu Button
+// --------------------------------------------------
+
+/// @prop - Text color of the Menu button
+$menu-button-md-color:               $toolbar-md-text-color !default;

core/src/components/menu-button/menu-button.scss

@@ -0,0 +1,36 @@
+@import "../../themes/ionic.globals";
+
+// Menu Button
+// --------------------------------------------------
+
+.menu-button button {
+  @include font-smoothing();
+  @include text-align(center);
+  @include appearance(none);
+
+  position: relative;
+  z-index: 0;
+  display: inline-flex;
+  flex-flow: row nowrap;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  outline: none;
+
+  line-height: 1;
+
+  text-decoration: none;
+  text-overflow: ellipsis;
+  text-transform: none;
+
+  white-space: nowrap;
+  cursor: pointer;
+  vertical-align: top; // the better option for most scenarios
+  vertical-align: -webkit-baseline-middle; // the best for those that support it
+
+  transition: background-color, opacity 100ms linear;
+
+  font-kerning: none;
+  user-select: none;
+}