mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
fix(ripple): outline colors
This commit is contained in:
@ -60,6 +60,10 @@ button,
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
md-ripple {
|
||||
background: rgba( red($button-color), green($button-color), blue($button-color), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&[round] {
|
||||
@ -104,15 +108,16 @@ button,
|
||||
|
||||
&[outline] {
|
||||
|
||||
md-ripple {
|
||||
background: rgba( red($color-value), green($color-value), blue($color-value), 0.2);
|
||||
}
|
||||
|
||||
&.activated {
|
||||
|
||||
@if lightness(get-color($color-name, base)) > 90 {
|
||||
$fg-color: get-color($color-name, inverse);
|
||||
} @else {
|
||||
$fg-color: get-color($color-name, base);
|
||||
}
|
||||
|
||||
opacity: 1;
|
||||
|
||||
md-ripple {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -25,7 +25,6 @@ popup-wrapper {
|
||||
|
||||
.button {
|
||||
min-height: 42px;
|
||||
color: get-color('primary', base);
|
||||
font-size: 14px;
|
||||
|
||||
&:last-child {
|
||||
|
@ -11,18 +11,14 @@
|
||||
|
||||
transition: 100ms all linear;
|
||||
|
||||
color: get-color(primary, base);
|
||||
|
||||
min-height: 3.3rem;
|
||||
line-height: 3.3rem;
|
||||
|
||||
&.active {
|
||||
background-color: get-color(primary, base);
|
||||
color: white;
|
||||
}
|
||||
|
||||
border-style: solid;
|
||||
border-color: get-color(primary, base);
|
||||
|
||||
&:first-of-type {
|
||||
border-right-width: 0px;
|
||||
|
@ -62,22 +62,14 @@ export class RippleActivator extends Activator {
|
||||
this.next();
|
||||
}
|
||||
|
||||
upAction() {
|
||||
upAction(forceFadeOut) {
|
||||
this.deactivate();
|
||||
|
||||
let ripple;
|
||||
for (let rippleId in this.ripples) {
|
||||
ripple = this.ripples[rippleId];
|
||||
if(ripple.expand) {
|
||||
let currentTime = ripple.expand.getCurrentTime();
|
||||
|
||||
// How much more time do we need to finish the radius animation?
|
||||
// Math: (radius/second) * ((total_radius_time) - current_time)
|
||||
ripple.expand.remainingTime = (ripple.radius / ripple.duration) *
|
||||
((ripple.duration / EXPAND_DOWN_PLAYBACK_RATE) - (currentTime));
|
||||
}
|
||||
|
||||
if (!ripple.fade) {
|
||||
if (!ripple.fade || forceFadeOut) {
|
||||
// ripple has not been let up yet
|
||||
// speed up the rate if the animation is still going
|
||||
setTimeout(() => {
|
||||
@ -85,7 +77,7 @@ export class RippleActivator extends Activator {
|
||||
ripple.fade = new Animation(ripple.ele);
|
||||
ripple.fade
|
||||
.fadeOut()
|
||||
.duration(ripple.epxand && ripple.expand.remainingTime || OPACITY_OUT_DURATION)
|
||||
.duration(OPACITY_OUT_DURATION)
|
||||
.playbackRate(1)
|
||||
.onFinish(() => {
|
||||
ripple.fade && ripple.fade.dispose();
|
||||
|
@ -16,7 +16,7 @@ export class TapClick {
|
||||
self.lastTouch = 0;
|
||||
self.lastActivated = 0;
|
||||
self.disableClick = 0;
|
||||
self.disableClickLimit = 2500;
|
||||
self.disableClickLimit = 1500;
|
||||
|
||||
self.tapPolyfill = (config.setting('tapPolyfill') !== false);
|
||||
|
||||
|
@ -2,10 +2,6 @@
|
||||
// Color Functions
|
||||
// --------------------------------------------------
|
||||
|
||||
@function get-color($color, $tone: base) {
|
||||
@return red;
|
||||
}
|
||||
|
||||
@function inverse($color-value) {
|
||||
@if (lightness($color-value) > 70) {
|
||||
@return #000;
|
||||
|
Reference in New Issue
Block a user