Various fixes to Valo and ValoThemeTest

Improve textfied, datefield and combobox mixins so that they can be
used with null parameter values. This makes them output less styles and
allows combining multiple styles together (e.g. small + borderless).

Let valo-button-style mixin support padding as a list instead of just a
single number.

Change default calendar event colors to hex values (Vaadin Sass
compiler doesn’t support all color keywords just yet).

Error styles for date field and combo box

Small fix to table to support all border sizes (Java code has a
hard-coded 1px border width). Remove a few unnecessary selectors.

Make tab sheet tab alignment mixin more generic (now allows both right
and center alignment).

Fix framed tab sheet style border (bottom border caused left and right
borders to have a “cropped” angle at the bottom end).

Fix selection overlay item active style color (i.e. white would produce
a pink color). Now a completely desaturated color won’t be saturated.

Change-Id: I0117e20ef0a597de982a4d0c85a3c78fff87eafc

1 files changed, 32 insertions, 14 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss
index 58c0f94345..b1f3a78af6 100644
--- a/WebContent/VAADIN/themes/valo/components/_datefield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss
@@ -6,6 +6,17 @@
     @include valo-datefield-style($primary-stylename: $primary-stylename);
   }
 
+  .#{$primary-stylename}-error {
+    .#{$primary-stylename}-textfield {
+      @include valo-textfield-error-style;
+    }
+
+    .#{$primary-stylename}-button {
+      color: $v-error-indicator-color;
+      border-color: $v-error-indicator-color;
+    }
+  }
+
   // Different widths for different resolutions
   .#{$primary-stylename}-full {
     width: round($v-font-size * 15);
@@ -73,7 +84,7 @@
   }
 
   .#{$primary-stylename}-button {
-    @include valo-datefield-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color, $border-radius: $border-radius);
+    @include valo-datefield-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color, $border-radius: $border-radius, $border: $border);
   }
 
   &.v-disabled {
@@ -106,12 +117,15 @@
 
 
 
-@mixin valo-datefield-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-border-radius) {
-  $border-width: first-number($v-textfield-border);
+@mixin valo-datefield-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-border-radius, $border: $v-textfield-border) {
+  $border-width: first-number($border) or first-number($v-textfield-border);
   @include valo-tappable;
   -webkit-appearance: none;
   background: transparent;
-  border: none;
+  @if $border {
+    // Only override border if we are actually setting some border
+    border: none;
+  }
   padding: 0;
   position: absolute;
   z-index: 10;
@@ -123,27 +137,30 @@
   text-align: center;
   cursor: pointer;
   font: inherit;
-  border-right: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5);
   outline: none;
   margin: 0;
 
+  @if type-of($background-color) == color {
+    border-right: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5);
+    color: mix($background-color, valo-font-color($background-color));
+
+    &:hover {
+      color: valo-font-color($background-color);
+    }
+  }
+
   @if $border-radius > 0 {
     $br: max(0, $border-radius - $border-width);
     border-radius: $br 0 0 $br;
   }
 
   &:before {
-    @include valo-datefield-button-icon-style($background-color);
-    color: mix($background-color, valo-font-color($background-color));
+    @include valo-datefield-button-icon-style;
     @if $v-animations-enabled {
       @include transition(color 140ms);
     }
   }
 
-  &:hover:before {
-    color: valo-font-color($background-color);
-  }
-
   &:active:after {
     content: "";
     position: absolute;
@@ -151,7 +168,9 @@
     right: 0;
     bottom: 0;
     left: 0;
-    @include valo-button-active-style($background-color);
+    @if type-of($background-color) == color {
+      @include valo-button-active-style($background-color);
+    }
     border-radius: inherit;
   }
 }
@@ -159,10 +178,9 @@
 
 
 
-@mixin valo-datefield-button-icon-style ($background-color) {
+@mixin valo-datefield-button-icon-style {
   font-family: FontAwesome;
   content: "\f073";
-  color: valo-font-color($background-color);
 }