fix: support --ripple-color

varletjs · Feb 21, 2022 · c5ded77 · c5ded77
1 parent c9d10e3
commit c5ded77
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 1 deletion.
diff --git a/packages/varlet-ui/src/ripple/docs/en-US.md b/packages/varlet-ui/src/ripple/docs/en-US.md
@@ -45,4 +45,5 @@ Here are the CSS variables used by the component, Styles can be customized using
 | Variable | Default |
 | --- | --- |
 | `--ripple-cubic-bezier` | `cubic-bezier(0.68, 0.01, 0.62, 0.6)` |
+| `--ripple-color` | `currentColor` |
 
diff --git a/packages/varlet-ui/src/ripple/docs/zh-CN.md b/packages/varlet-ui/src/ripple/docs/zh-CN.md
@@ -45,3 +45,4 @@ createApp().use(Ripple)
 | 变量名 | 默认值 |
 | --- | --- |
 | `--ripple-cubic-bezier` | `cubic-bezier(0.68, 0.01, 0.62, 0.6)` |
+| `--ripple-color` | `currentColor` |
diff --git a/packages/varlet-ui/src/ripple/index.ts b/packages/varlet-ui/src/ripple/index.ts
@@ -73,7 +73,7 @@ function createRipple(this: RippleHTMLElement, event: TouchEvent) {
     ripple.style.transform = `translate(${x}px, ${y}px) scale3d(.3, .3, .3)`
     ripple.style.width = `${size}px`
     ripple.style.height = `${size}px`
-    ripple.style.backgroundColor = _ripple.color ?? 'currentColor'
+    _ripple.color && (ripple.style.backgroundColor = _ripple.color)
     ripple.dataset.createdAt = String(performance.now())
 
     setStyles(this)

diff --git a/packages/varlet-ui/src/ripple/ripple.less b/packages/varlet-ui/src/ripple/ripple.less
@@ -1,7 +1,9 @@
 @ripple-cubic-bezier: cubic-bezier(0.68, 0.01, 0.62, 0.6);
+@ripple-color: currentColor;
 
 :root {
   --ripple-cubic-bezier: @ripple-cubic-bezier;
+  --ripple-color: @ripple-color;
 }
 
 .var-ripple {
@@ -14,4 +16,5 @@
   will-change: transform, opacity;
   pointer-events: none;
   z-index: 100;
+  background-color: var(--ripple-color);
 }