javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(buttons): fix activated, position, animation

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-09-25 18:35:19 +02:00
parent 633360fcba
commit 9d6169acdd
10 changed files with 25 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
core/src/components/back-button/back-button.ios.scss
View File

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

4
core/src/components/back-button/back-button.md.scss
View File

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

17
core/src/components/back-button/back-button.scss
View File

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

7
core/src/components/back-button/back-button.tsx
View File

@ -77,14 +77,15 @@ export class BackButton implements ComponentInterface {
return (
<button
type="button"
class="back-button-native"
class="button-native"
onClick={ev => this.onClick(ev)}
>
<span class="back-button-inner">
<span class="button-inner">
{backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}></ion-icon>}
{backButtonText && <span class="back-button-text">{backButtonText}</span>}
{backButtonText && <span class="button-text">{backButtonText}</span>}
{this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
</span>
{this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
</button>
);
}

13
core/src/components/buttons/buttons.ios.scss
View File

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

5
core/src/components/buttons/buttons.md.scss
View File

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

3
core/src/components/buttons/buttons.scss
View File

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

4
core/src/components/menu-button/menu-button.ios.scss
View File

@ -8,6 +8,10 @@
color: #{ion-color(primary, base)};
}
:host(.activated) {
opacity: 0.4;
}
button {
@include padding(0, 5px);
}

3
core/src/components/menu-button/menu-button.tsx
View File

@ -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 {
<slot>
<ion-icon icon={menuIcon} mode={this.mode} color={this.color} lazy={false} />
</slot>
{this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
</button>
</ion-menu-toggle>
);

4
core/src/components/split-pane/test/basic/index.html
View File

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