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

fix(ripple): button-effect css works

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-01-16 23:55:30 +01:00
parent dcbd474c0a
commit 19cf8afcc1
3 changed files with 12 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/core/src/components/button-effect/button-effect.scss
View File

@ -1,15 +1,20 @@
@import "../../themes/ionic.globals"; @import "../../themes/ionic.globals";
// Material Design Ripple Effect
// --------------------------------------------------
// Only Material uses the button effect, so by default
// it's display none, and .md sets to display block.
/// @prop - Background color of the ripple on the button /// @prop - Background color of the ripple on the button
$button-effect-ripple-background-color: #000 !default; $button-effect-ripple-background-color: #000 !default;
ion-button-effect { ion-button-effect {
@include position(0); @include position(0, 0, 0, 0);
position: absolute; position: absolute;
} }
ion-button-effect > .ripple { .button-effect {
@include border-radius(50%); @include border-radius(50%);
position: absolute; position: absolute;

9
packages/core/src/components/button-effect/button-effect.tsx
View File

@ -31,17 +31,18 @@ export class ButtonEffect {
private addRipple(pageX: number, pageY: number) { private addRipple(pageX: number, pageY: number) {
const rect = this.el.getBoundingClientRect(); const rect = this.el.getBoundingClientRect();
const width = rect.width;
const size = Math.hypot(rect.width, rect.height) * 2; const height = rect.height;
const size = Math.sqrt(width * width + height * height) * 2;
const x = pageX - rect.left - size / 2; const x = pageX - rect.left - size / 2;
const y = pageY - rect.top - size / 2; const y = pageY - rect.top - size / 2;
this.schedule({x, y, size}); this.schedule({x, y, size});
} }
schedule({x, y, size}: Ripple) { private schedule({x, y, size}: Ripple) {
const div = document.createElement('div'); const div = document.createElement('div');
div.classList.add('ripple'); div.classList.add('button-effect');
const style = div.style; const style = div.style;
const duration = Math.max(800 * Math.sqrt(size / TOUCH_DOWN_ACCEL) + 0.5, 260); const duration = Math.max(800 * Math.sqrt(size / TOUCH_DOWN_ACCEL) + 0.5, 260);
style.top = y + 'px'; style.top = y + 'px';

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

@ -250,39 +250,6 @@
} }
// Material Design Ripple Effect
// --------------------------------------------------
// Only Material uses the button effect, so by default
// it's display none, and .md sets to display block.
.button-effect {
@include border-radius(50%);
@include transform-origin(center, center);
position: absolute;
z-index: 0;
display: none;
background-color: $button-md-ripple-background-color;
opacity: .2;
transition-timing-function: ease-in-out;
pointer-events: none;
@include multi-dir() {
// scss-lint:disable PropertySpelling
top: 0;
left: 0;
}
}
.md .button-effect {
display: block;
}
// Generate Material Design Button Colors // Generate Material Design Button Colors
// -------------------------------------------------- // --------------------------------------------------