Common components inside Table cells render better (Valo)

Add a new size variant “compact” for Textfield, DateField and ComboBox.
Makes the field fit inside the default row height of the table, but
keeps the font size the same as for a normal field. Borderless fields
also now respect the font color of the container (e.g. a selected table
row).

Update test to include common components inside a table.

Change-Id: I88f4d917579c937536dc4c886dc2b7825db01818

1 files changed, 9 insertions, 0 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index 538a5e2694..93cb5393ee 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -67,6 +67,11 @@
       }
       .#{$primary-stylename}-button {
         border: none;
+        color: inherit;
+        @include opacity(.5);
+      }
+      &.#{$primary-stylename}-prompt .#{$primary-stylename}-input {
+        @include valo-textfield-prompt-style(transparent);
       }
     }
 
@@ -83,8 +88,12 @@
       font-size: $v-font-size--tiny;
     }
 
+    .#{$primary-stylename}-compact,
     .#{$primary-stylename}-small {
       @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
+    }
+
+    .#{$primary-stylename}-small {
       font-size: $v-font-size--small;
     }