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

9 files changed, 111 insertions, 55 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss
index edd03e7879..fa973f186b 100644
--- a/WebContent/VAADIN/themes/valo/components/_button.scss
+++ b/WebContent/VAADIN/themes/valo/components/_button.scss
@@ -94,7 +94,11 @@
   @if contains($states, normal) {
     @if $unit-size {
       height: $unit-size;
-      padding: if(type-of($padding) == number, $padding, (0 round($unit-size/2.4) + round($border-radius/3)));
+      @if type-of($padding) == number or type-of($padding) == list {
+        padding: $padding;
+      } @else {
+        padding: 0 round($unit-size/2.4) + round($border-radius/3);
+      }
     }
 
     $_font-color: $font-color or valo-font-color($background-color, 0.9);
@@ -217,13 +221,11 @@
   }
 
   &:active {
+    @include opacity(.7);
+
     &:after {
       background: transparent;
     }
-
-    @if type-of($font-color) == color {
-      color: inherit;
-    }
   }
 }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_calendar.scss b/WebContent/VAADIN/themes/valo/components/_calendar.scss
index 08114d8828..753291eea9 100644
--- a/WebContent/VAADIN/themes/valo/components/_calendar.scss
+++ b/WebContent/VAADIN/themes/valo/components/_calendar.scss
@@ -1,4 +1,4 @@
-$v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateblue !default;
+$v-calendar-event-colors: #00ace0, #2d9f19, #d18100, #ce3812, #2d55cd !default;
 
 
 @mixin valo-calendar-global ($primary-stylename: v-calendar) {
diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index 63ddbe98df..e947fc3732 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -12,6 +12,17 @@
     }
   }
 
+  .#{$primary-stylename}-error {
+    .#{$primary-stylename}-input {
+      @include valo-textfield-error-style;
+    }
+
+    .#{$primary-stylename}-button {
+      color: $v-error-indicator-color;
+      border-color: $v-error-indicator-color;
+    }
+  }
+
   .#{$primary-stylename}-suggestpopup {
     @include valo-combobox-popup-style($primary-stylename: $primary-stylename);
   }
@@ -196,10 +207,14 @@
   bottom: $border-width;
   width: $unit-size;
   cursor: pointer;
-  border-left: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5);
 
-  .v-ie8 & {
-    background-color: $background-color;
+  @if type-of($background-color) == color {
+    border-left: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5);
+    color: mix($background-color, valo-font-color($background-color));
+
+    .v-ie8 & {
+      background-color: $background-color;
+    }
   }
 
   @if $v-border-radius > 0 {
@@ -208,8 +223,8 @@
   }
 
   &:before {
-    @include valo-combobox-button-icon-style($background-color);
-    color: mix($background-color, valo-font-color($background-color));
+    @include valo-combobox-button-icon-style;
+
     @if $v-animations-enabled {
       @include transition(color 140ms);
     }
@@ -221,7 +236,7 @@
     margin-top: -.47em;
   }
 
-  @if $v-hover-styles-enabled {
+  @if $v-hover-styles-enabled and type-of($background-color) == color {
     &:hover:before {
       color: valo-font-color($background-color);
     }
@@ -235,16 +250,17 @@
     bottom: 0;
     left: 0;
     border-radius: inherit;
-    @include valo-button-active-style($background-color);
+    @if type-of($background-color) == color {
+      @include valo-button-active-style($background-color);
+    }
   }
 }
 
 
 
-@mixin valo-combobox-button-icon-style ($background-color) {
+@mixin valo-combobox-button-icon-style {
   font-family: FontAwesome;
   content: "\f078";
-  color: valo-font-color($background-color);
 }
 
 
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);
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss
index c952a4bdda..a3af2348e1 100644
--- a/WebContent/VAADIN/themes/valo/components/_table.scss
+++ b/WebContent/VAADIN/themes/valo/components/_table.scss
@@ -29,10 +29,6 @@ $v-table-background-color: null !default;
     float: right;
   }
 
-  .#{$primary-stylename}-cell-wrapper {
-    overflow: hidden;
-  }
-
   .#{$primary-stylename}-caption-container-align-center {
     text-align: center;
   }
@@ -113,6 +109,15 @@ $v-table-background-color: null !default;
 
   .#{$primary-stylename}-footer td {
     border-left: $v-table-border-width solid $border-color;
+    // Hack to overcome fixed "magic number" in VScrollTable.FooterCell (assumes 1px border)
+    @if $v-table-border-width != 1px {
+      display: inline-block;
+      margin-left: ($v-table-border-width - 1px) * -1;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
   }
 
   .#{$primary-stylename}-footer-container,
@@ -498,15 +503,13 @@ $v-table-background-color: null !default;
 
 
 @mixin valo-table-no-vertical-lines-style ($primary-stylename: v-table) {
-  .#{$primary-stylename}-cell-content,
-  [class*="row"].v-selected .#{$primary-stylename}-cell-content {
+  .#{$primary-stylename}-cell-content {
     border-left: none;
     padding-left: $v-table-border-width;
   }
 
   &.v-treetable {
-    .#{$primary-stylename}-cell-content,
-    [class*="row"].v-selected .#{$primary-stylename}-cell-content {
+    .#{$primary-stylename}-cell-content {
       padding-left: $v-table-cell-padding-horizontal + $v-table-border-width;
     }
   }
@@ -514,8 +517,7 @@ $v-table-background-color: null !default;
 
 
 @mixin valo-table-no-horizontal-lines-style ($primary-stylename: v-table) {
-  .#{$primary-stylename}-cell-content,
-  [class*="row"].v-selected .#{$primary-stylename}-cell-content {
+  .#{$primary-stylename}-cell-content {
     border-top: none;
     border-bottom: none;
   }
diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
index 32b06a06cc..3b7687bc8d 100644
--- a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
+++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
@@ -369,7 +369,8 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
     .#{$primary-stylename}-tabitem-selected .v-caption {
       background: $v-panel-background-color;
       border-color: first-color(valo-border($strength: 0.5));
-      border-bottom: first-number($v-border) solid transparent;
+      border-bottom: none;
+      padding-bottom: first-number($v-border);
     }
 
     .v-caption-closable {
@@ -422,9 +423,9 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 
 
-@mixin valo-tabsheet-centered-tabs-style ($primary-stylename: v-tabsheet) {
+@mixin valo-tabsheet-align-tabs-style ($primary-stylename: v-tabsheet, $align: center) {
   > .#{$primary-stylename}-tabcontainer {
-    text-align: center;
+    text-align: $align;
   }
 }
 
@@ -462,6 +463,10 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
       line-height: 1.2;
     }
 
+    .#{$primary-stylename}-tabitem-selected .v-caption {
+      padding-bottom: round($v-unit-size/6) + first-number($v-border);
+    }
+
     .v-icon {
       display: block;
 
diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss
index e6514f9ec6..63e924921a 100644
--- a/WebContent/VAADIN/themes/valo/components/_textfield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss
@@ -70,8 +70,11 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
       @include valo-gradient($color: $background-color, $gradient: $gradient)
     }
 
-    color: valo-font-color($background-color);
-    box-shadow: valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient);
+    @if $background-color {
+      color: valo-font-color($background-color);
+      box-shadow: valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient);
+    }
+
 
     @if $v-animations-enabled {
       @include transition(box-shadow 180ms, border 180ms);
@@ -163,6 +166,11 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
   border-radius: 0;
   background: $background-color;
   box-shadow: none;
+  @if $background-color == transparent {
+    color: inherit;
+  } @else if type-of($background-color) == color {
+    color: valo-font-color($background-color);
+  }
 
   &:focus {
     box-shadow: none;
@@ -173,7 +181,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 
 @mixin valo-textfield-error-style {
-  border-color: $v-error-indicator-color;
+  border-color: $v-error-indicator-color !important;
   $bg: scale-color($v-error-indicator-color, $lightness: 98%);
   background: $bg;
   color: valo-font-color($bg);
diff --git a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss
index 704b6c8469..4adaf9a2a9 100644
--- a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss
+++ b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss
@@ -106,7 +106,11 @@
   }
 
   .v-tabsheet-centered-tabs {
-    @include valo-tabsheet-centered-tabs-style;
+    @include valo-tabsheet-align-tabs-style($align: center);
+  }
+
+  .v-tabsheet-right-aligned-tabs {
+    @include valo-tabsheet-align-tabs-style($align: right);
   }
 
   .v-tabsheet-padded-tabbar {
@@ -148,12 +152,12 @@
   }
 
   .v-textfield-small {
-    @include valo-textfield-style($unit-size: $v-unit-size--small);
+    @include valo-textfield-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
     font-size: $v-font-size--small;
   }
 
   .v-textfield-large {
-    @include valo-textfield-style($unit-size: $v-unit-size--large);
+    @include valo-textfield-style($unit-size: $v-unit-size--large, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
     font-size: $v-font-size--large;
   }
 
@@ -162,12 +166,12 @@
   @include valo-textfield-inline-icon($stylenames: inline-icon large, $unit-size: $v-unit-size--large, $font-size: $v-font-size--large);
 
   .v-textarea-small {
-    @include valo-textarea-style($unit-size: $v-unit-size--small);
+    @include valo-textarea-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
     font-size: $v-font-size--small;
   }
 
   .v-textarea-large {
-    @include valo-textarea-style($unit-size: $v-unit-size--large);
+    @include valo-textarea-style($unit-size: $v-unit-size--large, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
     font-size: $v-font-size--large;
   }
 
@@ -186,22 +190,22 @@
   }
 
   .v-filterselect-small {
-    @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null);
+    @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null);
     font-size: $v-font-size--small;
   }
 
   .v-filterselect-large {
-    @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null);
+    @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null);
     font-size: $v-font-size--large;
   }
 
   .v-datefield-small {
-    @include valo-datefield-style($unit-size: $v-unit-size--small);
+    @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null);
     font-size: $v-font-size--small;
   }
 
   .v-datefield-large {
-    @include valo-datefield-style($unit-size: $v-unit-size--large);
+    @include valo-datefield-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $border: null, $background-color: null);
     font-size: $v-font-size--large;
   }
 
diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
index 53b7586ce4..0675b70f4e 100644
--- a/WebContent/VAADIN/themes/valo/shared/_overlay.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
@@ -162,7 +162,8 @@ $v-selection-item-selection-color: $v-selection-color !default;
     right: 0;
     bottom: 0;
     left: 0;
-    background: scale-color($v-selection-item-selection-color, $lightness: -30%, $saturation: 50%);
+    $sat: if(saturation($v-selection-item-selection-color) > 0, 50%, 0%);
+    background: scale-color($v-selection-item-selection-color, $lightness: -30%, $saturation: $sat);
     @include opacity(.15);
     pointer-events: none;
     border-radius: inherit;