customize ripple/click effect on mobile #1555
-
Current Behaviori want to customise ripple effect/click effect on items like tabs in mobile view, currently on mobile devices it displays a black transparent box when clicked on the tab(light theme). i need it to be rounded , and change the color to match my theme, is there any way to achieve this?
Reproduction / Steps To Reproduce
Anything else?No response |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
@Darkwebplayer This fits better within our Discussions > Q&A section rather than a bug issue, so I've moved this accordingly. Unfortunately we don't really support ripple effects as a standard feature of Skeleton. That's more of an opinionated design choice of Material Design, which we are not and are not trying to emulate. I might recommend one of the various Material Design UI libraries if this is more of the aesthetic you're after: That aside, we are looking to expand the ability to customize transition animations in our components per this on-going task: This will provide you the ability to custom the transition used - either via a canned Svelte transition, or provide your own custom transition. A ripple like effect might be possible using this method, but I'm not sure. Per the click state you're seeing when tapping the element - that's native browser functionality. Touch browsers have a visual indicator of where you clicked for accessibility purposes. We keep that on very intentionally given our a11y focus. For webkit-based browsers (mobile safari, mobile chrome) we only customize the color from blue to a neutral grey-ish tone: html {
-webkit-tap-highlight-color: rgba(128, 128, 128, 0.5);
}You can learn how this works here: My advice would be to keep this, but customize the color to something that works well with your theme color values. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you ❤✨️ |
Beta Was this translation helpful? Give feedback.
@Darkwebplayer This fits better within our Discussions > Q&A section rather than a bug issue, so I've moved this accordingly.
Unfortunately we don't really support ripple effects as a standard feature of Skeleton. That's more of an opinionated design choice of Material Design, which we are not and are not trying to emulate. I might recommend one of the various Material Design UI libraries if this is more of the aesthetic you're after:
That aside, we are looking to expand the ability to customize transition animations in our components per this on-going task:
This will provide you the ability to custom the trans…