Defining linear gradients in Vaadin sass themes

Flow
1

Hi

What would be the proper syntax to define linear gradients with single line in Vaadin sass themes and especially with Valo theme. Should I define my own browser compatible linear gradient mixin or is there something premade?

Best regards,
Tommi

2

Hi,

The Bourbon mixin library is bundled with Valo, so you can use it’s gradient mixins out-of-the-box. They follow the standard CSS syntax for gradients. For a linear gradient use the following, and add as many color stops as you wish:

@include linear-gradient(to bottom, #fff 0%, #000, 100%); For a Valo specific gradient, use the following mixin (
read the documentation
, sorry for the messed up formatting). All the parameters have default values, so you can just speficy some, all or none of them:

@include valo-gradient($color: #ddd);
3

Hi

Thank you!

Br,
Tommi