Make read only textfield visually different from normal text fields

If the background color of the app is the same as the textfield
background color, make the textfield background color slightly darker.

Change-Id: I4870c3e396cdd8c586bfd3f0e812cf1f5ebab1eb

diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss
index dc516048e7c656bc8315c2e55e66b0a29920d7a9..0b4fa50fb26fd5962dc0c24b159588a99b72a40c 100644 (file)
--- a/WebContent/VAADIN/themes/valo/components/_textfield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss
@@ -1,5 +1,5 @@
 $v-textfield-background-color: if(is-dark-color($v-app-background-color), darken($v-app-background-color, 4%), lighten($v-app-background-color, 8%)) !default;
-$v-textfield-background-color--readonly: $v-app-background-color;
+$v-textfield-background-color--readonly: darkest-color($v-app-background-color, darken($v-textfield-background-color, 2%));
 $v-textfield-bevel: inset 0 1px 0 v-shade !default;
 $v-textfield-shadow: 0 1px 0 (v-tint 2) !default;
 $v-textfield-font-weight: 400 !default;