javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(tapclick): adds tap-click

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-01-20 01:08:35 +01:00
parent 808aff3ebc
commit e5be888c90
25 changed files with 487 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/core/src/components/button/button.ios.scss
View File

@@ -30,7 +30,7 @@
background-color: $button-ios-background-color-focused;
}
.button-ios:hover:not(.disable-hover) {
.enable-hover .button-ios:hover {
opacity: $button-ios-opacity-hover;
}
@@ -169,7 +169,7 @@
background-color: $button-ios-clear-background-color-focused;
}
.button-clear-ios:hover:not(.disable-hover) {
.enable-hover .button-clear-ios:hover {
color: $button-ios-clear-text-color-hover;
opacity: $button-ios-clear-opacity-hover;
}
@@ -196,7 +196,7 @@
background-color: $bg-color-focused;
}
.button-clear-ios-#{$color-name}:hover:not(.disable-hover) {
.enable-hover .button-clear-ios-#{$color-name}:hover {
color: $fg-color;
}
}

12
packages/core/src/components/button/button.md.scss
View File

@@ -29,7 +29,7 @@
color $button-md-transition-duration $button-md-transition-timing-function;
}
.button-md:hover:not(.disable-hover) {
.enable-hover .button-md:hover {
background-color: $button-md-background-color-hover;
}
@@ -61,7 +61,7 @@
background-color: $bg-color;
}
.button-md-#{$color-name}:hover:not(.disable-hover) {
.enable-hover .button-md-#{$color-name}:hover {
background-color: $bg-color;
}
@@ -129,7 +129,7 @@
box-shadow: $button-md-outline-box-shadow;
}
.button-outline-md:hover:not(.disable-hover) {
.enable-hover .button-outline-md:hover {
background-color: $button-md-outline-background-color-hover;
}
@@ -161,7 +161,7 @@
background-color: $button-md-outline-background-color;
}
.button-outline-md-#{$color-name}:hover:not(.disable-hover) {
.enable-hover .button-outline-md-#{$color-name}:hover {
background-color: $button-md-outline-background-color-hover;
}
@@ -199,7 +199,7 @@
background-color: $button-md-clear-background-color-focused;
}
.button-clear-md:hover:not(.disable-hover) {
.enable-hover .button-clear-md:hover {
background-color: $button-md-clear-background-color-hover;
}
@@ -230,7 +230,7 @@
background-color: $bg-color-focused;
}
.button-clear-md-#{$color-name}:hover:not(.disable-hover) {
.enable-hover .button-clear-md-#{$color-name}:hover {
color: $fg-color;
}
}

20
packages/core/src/components/button/button.tsx
View File

@@ -111,18 +111,16 @@ export class Button {
strong
} = this;
const elementClasses: string[] = []
.concat(
getButtonClassList(buttonType, mode),
getClassList(buttonType, expand, mode),
getClassList(buttonType, size, mode),
getClassList(buttonType, round ? 'round' : null, mode),
getClassList(buttonType, strong ? 'strong' : null, mode),
getColorClassList(buttonType, color, fill, mode),
);
const elementClasses = [
...getButtonClassList(buttonType, mode),
...getClassList(buttonType, expand, mode),
...getClassList(buttonType, size, mode),
...getClassList(buttonType, round ? 'round' : null, mode),
...getClassList(buttonType, strong ? 'strong' : null, mode),
...getColorClassList(buttonType, color, fill, mode),
];
const TagType = this.href ? 'a' : 'button';
const buttonClasses = {
...getElementClassObject(this.el.classList),
...getElementClassObject(elementClasses),
@@ -143,7 +141,7 @@ export class Button {
<slot></slot>
<slot name='end'></slot>
</span>
{ this.mode === 'md' && <ion-ripple-effect /> }
{ this.mode === 'md' && <ion-ripple-effect useTapClick={true} /> }
</TagType>
);
}