Update textfield readonly style (Valo)

Make readonly textfields show better inside panels for instance (so
that they look different from normal textfields).

Change-Id: If2b9b810a5bf0d7388563ea1d7560bbf1b9f149a

1 files changed, 5 insertions, 3 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss
index c314a0c855..39dfa3420e 100644
--- a/WebContent/VAADIN/themes/valo/components/_textfield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss
@@ -1,4 +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-bevel: inset 0 1px 0 v-shade !default;
 $v-textfield-shadow: 0 1px 0 (v-tint 2) !default;
 $v-textfield-font-weight: 400 !default;
@@ -12,7 +13,6 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 
 
-
 @mixin valo-textfield-style (
     $unit-size        : $v-unit-size,
     $padding          : null, // Computed by default
@@ -134,10 +134,12 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 
 @mixin valo-textfield-readonly-style {
-  background: transparent;
+  background: $v-textfield-background-color--readonly;
+  color: valo-font-color($v-textfield-background-color--readonly)
   @include box-shadow(none);
   &:focus {
-    @include valo-focus-style($include-box-shadow: true);
+    box-shadow: none;
+    border-color: first-color(valo-border($v-textfield-border, $v-textfield-background-color--readonly));
   }
 }