linear-gradient on sass

Flow
1

Hello everybody,

I’m modifying the valo theme and to change the grid selection color I’m using this code inside the mixing:

.v-grid-row-selected > .v-grid-cell {
        background-color: #95c11e;
        background-image: -webkit-linear-gradient(bottom,#95c11e 2%, #81a61b 98%);
        background-image: linear-gradient(bottom,#95c11e 2%, #81a61b 98%);
        color: #000000;
        border-color: #95c11e;
    }

But the line of “background-image” without “webkit” is not been translated correctly, it deletes the “linear” part of the instruction. See the attachement, it is a capture of the css retriewed by the dev tools on google chrome

So I would like to know why is that happening.

I’m compiling my theme with maven and I’m currently using the vaadin version 8.0.1.

Thank you for your help!
17060372.jpg

2

Most likely due to Bourbon (a Sass tool that Valo uses).

https://www.bourbon.io/docs/4/#linear-gradient

You can try replacing linear-gradient(bottom, #95c11e 2%, #81a61b 98%); with @include linear-gradient(#95c11e 2%, #81a61b 98%);.

Or, you can try background-image: unquote("linear-gradient(#95c11e 2%, #81a61b 98%)");.