Changing the style of read only fields in Valo

Vaadin 6 / 7 / 8
1

Hi,

Our users find that the difference between an editable field and a read-only field in Valo is not obvious.
I checked on the _textfield.scss file and I found that there is a variable called:

$v-textfield-background-color–readonly

I tried to change it (for instance
$v-textfield-background-color–readonly: #ff0000;
) and recompile the theme but it seems that this change is not taken into account, the read only textfield background stays the same. If I change $v-textfield-background-color it works.

Is there something I’m missing?

Do you have any other solution to make this difference between editable and not editable fields more visible?

I’m currently using Vaadin 7.4.rc1.

Thanks,

Thomas

2

Ok apparently it works if I declare the variable $v-textfield-background-color–readonly after the @import like this:

[code]
$v-app-loading-text: “loading”;
$v-line-height: 1.2;
$v-font-size: 12px;
$v-caption-font-size: $v-font-size;
$v-focus-color: rgba(0, 121, 182, 1);
$v-font-family: Verdana, Arial, Helvetica, sans-serif;
$v-window-border-radius: 0;

@import “…/valo/valo”;

$v-textfield-background-color–readonly: #cacaca;

@mixin myTheme {

…

}
[/code]Thanks,

Thomas