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