diff --git a/core/src/components/back-button/back-button.ios.scss b/core/src/components/back-button/back-button.ios.scss
index 4526e80027..b99a6deee5 100644
--- a/core/src/components/back-button/back-button.ios.scss
+++ b/core/src/components/back-button/back-button.ios.scss
@@ -15,6 +15,7 @@
--padding-bottom: 0;
--padding-start: 0;
--min-height: 32px;
+ --min-width: auto;
--icon-padding-top: 0;
--icon-padding-end: 0;
--icon-padding-bottom: 0;
@@ -28,7 +29,7 @@
font-size: 17px;
}
-.back-button-native {
+.button-native {
transform: translateZ(0);
overflow: visible;
diff --git a/core/src/components/back-button/back-button.md.scss b/core/src/components/back-button/back-button.md.scss
index 945f374ff4..61e3be6998 100644
--- a/core/src/components/back-button/back-button.md.scss
+++ b/core/src/components/back-button/back-button.md.scss
@@ -14,7 +14,7 @@
--padding-end: 5px;
--padding-bottom: 0;
--padding-start: 5px;
- --height: 32px;
+ --min-height: 32px;
--min-width: 44px;
--icon-padding-end: .3em;
--icon-padding-start: .3em;
@@ -31,7 +31,7 @@
text-transform: uppercase;
}
-.back-button-native {
+.button-native {
box-shadow: none;
}
diff --git a/core/src/components/back-button/back-button.scss b/core/src/components/back-button/back-button.scss
index 8a3ce70a2a..49707b9aa7 100644
--- a/core/src/components/back-button/back-button.scss
+++ b/core/src/components/back-button/back-button.scss
@@ -9,9 +9,6 @@
*
* @prop --color: Text color of the button
*
- * @prop --width: Width of the button
- * @prop --height: Height of the button
- *
* @prop --min-width: Minimum width of the button
* @prop --min-height: Minimum height of the button
*
@@ -53,6 +50,8 @@
display: none;
+ color: var(--color);
+
font-family: $font-family-base;
text-align: center;
@@ -70,7 +69,7 @@
// Back Button with Color
// --------------------------------------------------
-:host(.ion-color) .back-button-native {
+:host(.ion-color) .button-native {
color: current-color(base);
}
@@ -78,7 +77,7 @@
// Back Button States
// --------------------------------------------------
-:host(.activated) .back-button-native {
+:host(.activated) .button-native {
opacity: .4;
}
@@ -91,7 +90,7 @@
// Native Back Button
// --------------------------------------------------
-.back-button-native {
+.button-native {
@include border-radius(var(--border-radius));
@include font-smoothing();
@include margin(var(--margin-top), var(--margin-end), var(--margin-bottom), var(--margin-start));
@@ -101,10 +100,7 @@
display: block;
position: relative;
- width: var(--width);
min-width: var(--min-width);
-
- height: var(--height);
min-height: var(--min-height);
transition: var(--transition);
@@ -114,7 +110,6 @@
outline: none;
background: var(--background);
- color: var(--color);
line-height: 1;
@@ -126,7 +121,7 @@
appearance: none;
}
-.back-button-inner {
+.button-inner {
display: flex;
flex-flow: row nowrap;
diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
index 6ca8b8e195..7bceb7144a 100644
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -77,14 +77,15 @@ export class BackButton implements ComponentInterface {
return (
);
}
diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss
index f4cc3669c9..f3c81e30ae 100644
--- a/core/src/components/buttons/buttons.ios.scss
+++ b/core/src/components/buttons/buttons.ios.scss
@@ -5,7 +5,7 @@
// iOS Toolbar Default Button
// --------------------------------------------------
-::slotted(*) .button {
+::slotted(*) ion-button {
--padding-top: 0;
--padding-bottom: 0;
--padding-start: 5px;
@@ -29,14 +29,6 @@
}
-// iOS Toolbar Clear Button
-// --------------------------------------------------
-
-::slotted(*) .button-clear.activated {
- color: $toolbar-ios-button-color;
-}
-
-
// iOS Toolbar Button Solid
// --------------------------------------------------
@@ -56,7 +48,6 @@
font-size: 24px;
line-height: .67;
- pointer-events: none;
}
::slotted(*) ion-icon[slot="end"] {
@@ -66,7 +57,6 @@
font-size: 24px;
line-height: .67;
- pointer-events: none;
}
::slotted(*) ion-icon[slot="icon-only"] {
@@ -76,7 +66,6 @@
font-size: 31px;
line-height: .67;
- pointer-events: none;
}
diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss
index 04fa970117..78a6791f2c 100644
--- a/core/src/components/buttons/buttons.md.scss
+++ b/core/src/components/buttons/buttons.md.scss
@@ -4,7 +4,7 @@
// Material Design Toolbar Default Button
// --------------------------------------------------
-::slotted(*) .button {
+::slotted(*) ion-button {
--padding-top: 0;
--padding-bottom: 0;
--padding-start: 8px;
@@ -70,7 +70,6 @@
@include margin-horizontal(null, .3em);
font-size: 1.4em;
- pointer-events: none;
}
::slotted(*) ion-icon[slot="end"] {
@@ -78,7 +77,6 @@
@include margin-horizontal(.4em, null);
font-size: 1.4em;
- pointer-events: none;
}
::slotted(*) ion-icon[slot="icon-only"] {
@@ -86,7 +84,6 @@
@include margin(0);
font-size: 1.8em;
- pointer-events: none;
}
diff --git a/core/src/components/buttons/buttons.scss b/core/src/components/buttons/buttons.scss
index fef0a1d938..e5a33aa3dd 100644
--- a/core/src/components/buttons/buttons.scss
+++ b/core/src/components/buttons/buttons.scss
@@ -8,7 +8,6 @@
transform: translateZ(0);
z-index: $z-index-toolbar-buttons;
- pointer-events: none;
}
// Toolbar Buttons
@@ -26,6 +25,4 @@
--box-shadow: none;
@include margin-horizontal(2px, 2px);
-
}
-
diff --git a/core/src/components/menu-button/menu-button.ios.scss b/core/src/components/menu-button/menu-button.ios.scss
index 639ff3edfc..310e46c962 100644
--- a/core/src/components/menu-button/menu-button.ios.scss
+++ b/core/src/components/menu-button/menu-button.ios.scss
@@ -8,6 +8,10 @@
color: #{ion-color(primary, base)};
}
+:host(.activated) {
+ opacity: 0.4;
+}
+
button {
@include padding(0, 5px);
}
diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx
index e84f88c8f2..93bd909042 100644
--- a/core/src/components/menu-button/menu-button.tsx
+++ b/core/src/components/menu-button/menu-button.tsx
@@ -39,7 +39,9 @@ export class MenuButton implements ComponentInterface {
hostData() {
return {
+ 'ion-activatable': true,
class: {
+ // ion-buttons target .button
'button': true
}
};
@@ -53,6 +55,7 @@ export class MenuButton implements ComponentInterface {
+ {this.mode === 'md' && }
);
diff --git a/core/src/components/split-pane/test/basic/index.html b/core/src/components/split-pane/test/basic/index.html
index 8c3ee8311e..bf64cbb45b 100644
--- a/core/src/components/split-pane/test/basic/index.html
+++ b/core/src/components/split-pane/test/basic/index.html
@@ -86,9 +86,9 @@
console.log('Push page');
}
- function menu() {
+ async function menu() {
console.log('Disable/enable menu');
- menuCtrl.enable(!menuCtrl.isEnabled());
+ menuCtrl.enable(!await menuCtrl.isEnabled());
}