Valo $v-border variable

Vaadin 6 / 7 / 8
1

Hi all,

I’m trying to use the Valo $v-border variable to add a border to items which have the “border” style name, like this:

.border {
    border: $v-border;
    border-radius: $v-border-radius;
}

However, after compiling the CSS contains

.border { border: 1px solid v-shade 0.7; border-radius: 4px; } which the browser obviously does not understand. What am I doing wrong here? How should I reuse the Valo border style in my own styles?

2

Found this one out too :slight_smile:

When I searched for references of $v-border, I initially overlooked a result: the valo-border() function in _bevel-and-shadow.scss.

So the correct use is:

.border {
        border: valo-border();
        border-radius: $v-border-radius;
    }