Change ripple color

[spectrolite]

If you want to change the ripple color of components, you can:

<style scoped lang="stylus">
  .q-ripple-animation
    background red
</style>

scope makes the color change local to this .vue file only, removing scope applies everywhere.

[rstoenescu]

Please note that the ripple takes the color of the text of element you apply it to.

[spectrolite]

@rstoenescu Thanks for the precision. It looks great in most cases, but it’s good to be able to change it to suit special cases.
Btw is there a way to disable the ripple entirely on a q-btn ?
I ask this because it seems the ripple is somehow affecting its environment: I have a Modal with layout and a few buttons in the footer toolbar, and whenever I click one of those buttons, the content of the modal gets a scrollbar for a fraction of a second. And since it contains a full width google map, it reacts to the resize and I end up with the map having a grey border on right, the size of what used to be a scrollbar. I can refresh the map somehow, but there’s still a flicker visible. Maybe fixing Ripple would be a better idea, but I could not find where the problem comes from. In the meantime, it would be great if I could disable ripple locally (I really dont wanna use plain old buttons, q-btn is too good of a component).

[rstoenescu]

I’ll see what I can do when I get back from vacation. Please remind me then as I might forget.

[spectrolite]

I’ll log an issue with a cut-n-paste from here so you find it when you get back. Now go, issues can wait .

[spectrolite]

https://github.com/quasarframework/quasar/issues/696