Merge remote-tracking branch 'origin/master' into grid

Change-Id: Iec61d9242be530edbb76ba952746ba0f9c9bd966

14 files changed, 113 insertions, 64 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_accordion.scss b/WebContent/VAADIN/themes/valo/components/_accordion.scss
index 91ce4efe33..40ab29f862 100644
--- a/WebContent/VAADIN/themes/valo/components/_accordion.scss
+++ b/WebContent/VAADIN/themes/valo/components/_accordion.scss
@@ -2,7 +2,7 @@
  * Outputs the selectors and properties for the Accordion component.
  *
  * @param {string} $primary-stylename (v-accordion) - the primary style name for the selectors
- * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
  * @group accordion
  */
 @mixin valo-accordion ($primary-stylename: v-accordion, $include-additional-styles: contains($v-included-additional-styles, accordion)) {
diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss
index eb57e20d2a..b1b16f5bde 100644
--- a/WebContent/VAADIN/themes/valo/components/_button.scss
+++ b/WebContent/VAADIN/themes/valo/components/_button.scss
@@ -2,7 +2,7 @@
  * Outputs the selectors and properties for the Button component.
  *
  * @param {string} $primary-stylename (v-button) - the primary style name for the selectors
- * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
  *
  * @group button
  */
@@ -164,7 +164,7 @@
 /**
  * Outputs the styles for a button variant.
  *
- * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds its height
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds its height
  * @param {size | list} $padding (null) - The padding of the button. Computed from other parameters by default.
  * @param {color} $font-color (null) - The font color of the button. Computed from the $background-color by default.
  * @param {number} $font-weight ($v-font-weight + 100) - The font weight of the button
@@ -349,7 +349,7 @@
  * Output styles for a borderless button. Expects that the targeted element 
  * already has both valo-button-static-style and valo-button-style included.
  * 
- * @param {color} $font-color (inherit) - The font color of the borderless button
+ * @param {color} $font-color (inherit) - The font color of the borderless button
  * 
  * @group button
  */
diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss
index 7ad08ad74d..3c418ec9b7 100644
--- a/WebContent/VAADIN/themes/valo/components/_checkbox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss
@@ -2,7 +2,7 @@
  * Outputs the selectors and properties for the CheckBox component.
  *
  * @param {string} $primary-stylename (v-checkbox) - the primary style name for the selectors
- * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
  *
  * @group checkbox
  */
@@ -43,8 +43,8 @@
  * Outputs the styles for a checkbox variant.
  * 
  * @param {color} $background-color ($v-background-color) - The background color of the checkbox
- * @param {size} $unit-size ($v-unit-size) - The sizing of the checkbox. The width and height of the checkbox will be the unit-size divided by 2.
- * @param {color} $selection-color ($v-selection-color) - The color of the checked state icon 
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the checkbox. The width and height of the checkbox will be the unit-size divided by 2.
+ * @param {color} $selection-color ($v-selection-color) - The color of the checked state icon 
  * 
  * @group checkbox
  */
diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index 79107eb0d1..f84faef603 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -2,7 +2,7 @@
  * Outputs the selectors and properties for the ComboBox component.
  *
  * @param {string} $primary-stylename (v-filterselect) - the primary style name for the selectors
- * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
  *
  * @group combobox
  */
@@ -93,7 +93,7 @@
 /**
  * Outputs the styles for a combobox variant.
  *
- * @param {size} $unit-size ($v-unit-size) - The sizing of the combobox, which corresponds its height
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the combobox, which corresponds its height
  * @param {color} $font-color (null) - The font color of the combobox. Computed from the $background-color by default.
  * @param {number} $font-weight (max(400, $v-font-weight)) - The font weight of the combobox
  * @param {size} $font-size (null) - The font size of the combobox. Inherited from the parent by default.
@@ -201,7 +201,7 @@
 /**
  * Outputs the styles for a combobox variant input element.
  * 
- * @param {size} $unit-size ($v-unit-size) - The sizing of the input (affects the padding only, width and height are 100%)
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the input (affects the padding only, width and height are 100%)
  * @param {size | list} $padding (null) - The padding of the input. Computed from other parameters by default.
  * @param {color} $font-color (null) - The font color of the input. Computed from the $background-color by default.
  * @param {number} $font-weight (null) - The font weight of the input. Inherited from the parent by default.
@@ -257,7 +257,7 @@
 /**
  * Outputs the styles for a combobox variant button element.
  * 
- * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds its width.
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds its width.
  * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
  * @param {color} $background-color ($v-textfield-background-color) - The background color of the input, which affects the font color of the button
  * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the input, which affects the border-radius of the button
diff --git a/WebContent/VAADIN/themes/valo/components/_csslayout.scss b/WebContent/VAADIN/themes/valo/components/_csslayout.scss
index 3525bcad5a..c06d3c2441 100644
--- a/WebContent/VAADIN/themes/valo/components/_csslayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_csslayout.scss
@@ -11,7 +11,7 @@ $v-component-group-spacing: null !default;
  * Outputs the additional styles for the CssLayout component. Does not produce any other output.
  * 
  * @param {string} $primary-stylename (v-csslayout) - the primary style name for the selectors
- * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
  *
  * @group csslayout
  */
diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss
index 71b50b5a77..3201288120 100644
--- a/WebContent/VAADIN/themes/valo/components/_datefield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss
@@ -2,7 +2,7 @@
  * Outputs the selectors and properties for the DateField component.
  *
  * @param {string} $primary-stylename (v-datefield) - the primary style name for the selectors
- * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
  *
  * @group datefield
  */
@@ -120,7 +120,7 @@
  *
  * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
  * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
- * @param {size} $unit-size ($v-unit-size) - The sizing of the datefield, which corresponds its height
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the datefield, which corresponds its height
  * @param {list} $border ($v-textfield-border) - The border of the datefield
  * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the datefield
  * @param {color} $background-color ($v-textfield-background-color) - The background color of the datefield
@@ -189,7 +189,7 @@
 /**
  * Outputs the styles for a date field variant button element.
  * 
- * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds its width.
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds its width.
  * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
  * @param {color} $background-color ($v-textfield-background-color) - The background color of the input, which affects the font color of the button
  * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the input, which affects the border-radius of the button
diff --git a/WebContent/VAADIN/themes/valo/components/_formlayout.scss b/WebContent/VAADIN/themes/valo/components/_formlayout.scss
index da3d0b987f..35627ebd79 100644
--- a/WebContent/VAADIN/themes/valo/components/_formlayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_formlayout.scss
@@ -2,7 +2,7 @@
  * Outputs the selectors and properties for the FormLayout component.
  *
  * @param {string} $primary-stylename (v-formlayout) - the primary style name for the selectors
- * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
  *
  * @group formlayout
  */
@@ -51,6 +51,8 @@
     > .v-label-h4 {
       position: absolute;
       left: 0;
+      right: 0;
+      width: auto !important;
       margin-top: -0.5em;
       padding-bottom: 0.5em;
       border-bottom: valo-border($color: $v-app-background-color, $strength: 0.5);
@@ -85,17 +87,17 @@
     $right: $margin;
     $bottom: $margin;
     $left: $margin;
-  } @else if length($margin) == 2 {
+  } @else if length($margin) == 2 {
     $top: nth($margin, 1);
     $right: nth($margin, 2);
     $bottom: nth($margin, 1);
     $left: nth($margin, 2);
-  } @else if length($margin) == 3 {
+  } @else if length($margin) == 3 {
     $top: nth($margin, 1);
     $right: nth($margin, 2);
     $bottom: nth($margin, 3);
     $left: nth($margin, 2);
-  } @else if length($margin) == 4 {
+  } @else if length($margin) == 4 {
     $top: nth($margin, 1);
     $right: nth($margin, 2);
     $bottom: nth($margin, 3);
@@ -114,8 +116,22 @@
     padding-left: $left;
   }
 
+  [class*="margin-left"] > tbody > [class*="row"] > [class*="contentcell"] {
+    > .v-label-h2,
+    > .v-label-h3,
+    > .v-label-h4 {
+      left: $left;
+    }
+  }
+
   [class*="margin-right"] > tbody > [class*="row"] > [class*="contentcell"] {
     padding-right: $right;
+
+    > .v-label-h2,
+    > .v-label-h3,
+    > .v-label-h4 {
+      right: $right;
+    }
   }
 }
 
@@ -141,7 +157,7 @@
 /**
  * Outputs the styles for a light style form layout. This mixin expects the target to have the normal styles of a form layout applied.
  *
- * @param {size} $row-height ($v-unit-size) - The height of an individual form layout row
+ * @param {size} $row-height ($v-unit-size) - The height of an individual form layout row
  *
  * @group formlayout
  */
@@ -150,7 +166,7 @@
     padding: 0;
   }
 
-  > table > tbody > [class*="row"] > td {
+  > table > tbody > tr > td {
     padding-top: 0;
     height: $row-height; // Effectively min-height
     border-bottom: valo-border($color: $v-app-background-color, $strength: 0.3);
@@ -160,7 +176,7 @@
     border-bottom: none;
   }
 
-  > table > tbody > [class*="row"] > [class*="captioncell"] {
+  > table > tbody > tr > [class*="captioncell"] {
     color: valo-font-color($v-background-color, .5);
     text-align: right;
     padding-left: ceil($v-unit-size/3);
@@ -168,6 +184,8 @@
   }
 
   > table > tbody > [class*="row"] > [class*="contentcell"] {
+    padding-right: 0;
+
     > .v-textfield,
     > .v-textarea,
     > .v-filterselect,
@@ -208,6 +226,8 @@
     > .v-label-h3,
     > .v-label-h4 {
       border-bottom: none;
+      left: 0;
+      right: 0;
     }
 
     > .v-label-h3,
diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss
index b59d3e0e21..cfec847271 100644
--- a/WebContent/VAADIN/themes/valo/components/_label.scss
+++ b/WebContent/VAADIN/themes/valo/components/_label.scss
@@ -101,7 +101,7 @@ $v-letter-spacing--h4: 0 !default;
  * Outputs the selectors and styles for the Label component.
  * 
  * @param {string} $primary-stylename (v-label) - the primary style name for the selectors
- * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
  *
  * @group label
  */
diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss
index d8a673294d..a70532ccfd 100644
--- a/WebContent/VAADIN/themes/valo/components/_table.scss
+++ b/WebContent/VAADIN/themes/valo/components/_table.scss
@@ -612,7 +612,7 @@ $v-table-background-color: null !default;
  * @group table
  */
 @mixin valo-table-sort-asc-icon-style {
-  content: '\f0dd';
+  content: '\f0de';
   font-family: FontAwesome;
 }
 
@@ -623,7 +623,7 @@ $v-table-background-color: null !default;
  * @group table
  */
 @mixin valo-table-sort-desc-icon-style {
-  content: '\f0de';
+  content: '\f0dd';
   font-family: FontAwesome;
 }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
index 7dafbe4624..bb3e55042a 100644
--- a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
+++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
@@ -63,7 +63,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
  * Outputs the selectors and properties for the TabSheet component.
  *
  * @param {string} $primary-stylename (v-tabsheet) - the primary style name for the selectors
- * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
  *
  * @group tabsheet
  */
@@ -208,6 +208,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
     overflow: hidden;
     text-overflow: ellipsis;
     border-bottom: max(1px, first-number($v-border))*2 solid transparent;
+    position: relative;
 
     @if $v-animations-enabled {
       @include transition(border-bottom 200ms, color 200ms);
@@ -229,7 +230,6 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
       @include opacity($v-disabled-opacity);
       cursor: default;
       color: inherit !important;
-      border-bottom: none;
     }
   }
 
@@ -251,14 +251,23 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
     color: $v-selection-color;
   }
 
+  .v-caption-closable {
+    padding-right: round($v-unit-size/10) + round($v-font-size * 1.1);
+  }
+
+  &.icons-on-top .v-caption-closable {
+    padding-right: round($v-unit-size/10);
+  }
+
   .#{$primary-stylename}-caption-close {
-    display: inline-block;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    margin: round($v-font-size / -2) 0 0;
     font-size: round($v-font-size * 1.1);
     line-height: round($v-font-size * 1.1);
     width: round($v-font-size * 1.1);
-    vertical-align: middle;
     text-align: center;
-    margin: 0 round($v-font-size/-4) 0 round($v-font-size/2);
     border-radius: round($v-border-radius/2);
     color: valo-font-color($v-app-background-color, 0.4);
 
@@ -388,7 +397,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 /**
  * Outputs the styles for the framed tabsheet style.
  * 
- * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
+ * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
  * @param {bool} $frame-inactive-tabs (true) - Should inactive tabs be framed as well (the active tab is always framed with this style)
  * @param {bool} $outer-frame (true) - Should the frame contain the whole tabsheet (i.e. tabbar and tab content). If false, works like a "borderless" style.
  * @param {size} $tab-spacing ($v-unit-size/10) - The spacing between tabs
@@ -398,9 +407,9 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 @mixin valo-tabsheet-framed-style ($primary-stylename: v-tabsheet, $frame-inactive-tabs: true, $outer-frame: true, $tab-spacing: round($v-unit-size/10)) {
   > .#{$primary-stylename}-tabcontainer {
     .v-caption {
-      position: relative;
       margin-left: $tab-spacing or first-number($v-border) * -1;
       padding: 0 $v-layout-spacing-horizontal;
+      background-color: $v-app-background-color;
       border: first-number($v-border) solid transparent;
       line-height: $v-unit-size - first-number($v-border);
       border-radius: $v-border-radius $v-border-radius 0 0;
@@ -414,6 +423,20 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
         background-color: darken($v-app-background-color, 3%);
         border-bottom-color: first-color(valo-border($color: $v-app-background-color, $strength: 0.5));
       }
+
+      &.v-disabled:hover {
+        background-color: $v-app-background-color;
+      }
+    }
+
+    .v-caption-closable {
+      padding-right: $v-layout-spacing-horizontal + round($v-font-size * 1.1);
+    }
+
+    .#{$primary-stylename}-caption-close {
+      top: round($v-font-size/4);
+      right: round($v-font-size/4);
+      margin-top: 0;
     }
 
     td:first-child .v-caption,
@@ -433,17 +456,6 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
       border-bottom: none;
       padding-bottom: first-number($v-border);
     }
-
-    .v-caption-closable {
-      padding-right: $v-layout-spacing-horizontal + round($v-font-size * 1.1);
-    }
-
-    .#{$primary-stylename}-caption-close {
-      position: absolute;
-      top: round($v-font-size/4);
-      right: round($v-font-size/4);
-      margin: 0;
-    }
   }
 
   > .#{$primary-stylename}-content {
@@ -471,8 +483,10 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
     }
   }
 
-  &.icons-on-top .v-caption-closable {
-    padding-right: $v-layout-spacing-horizontal;
+  &.icons-on-top {
+    > .#{$primary-stylename}-tabcontainer .#{$primary-stylename}-tabitem-selected .v-caption {
+      padding-bottom: round($v-unit-size/6) + first-number($v-border);
+    }
   }
 }
 
@@ -480,8 +494,8 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 /**
  * Outputs the styles for a tabsheet where the tabs are aligned to the position specified by the parameter in the tabbar.
  * 
- * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
- * @param {string} $align (center) - The alignment of the tabs inside the tabbar. Possible values: left, right, center.
+ * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
+ * @param {string} $align (center) - The alignment of the tabs inside the tabbar. Possible values: left, right, center.
  * 
  * @group tabsheet
  */
@@ -495,7 +509,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 /**
  * Outputs the styles for a tabsheet where all tabs in the tabbar have equal width and span the entire width of the tabbar.
  * 
- * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
+ * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
  * @param {bool} $flex (false) - Should the size of the tabs be proportional to their content, i.e. should the available space in the tabbar be distributed to the tabs in relation to their content sizes.
  * 
  * @group tabsheet
@@ -530,22 +544,18 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 /**
  * Outputs the styles for a tabsheet where the icons of individual tabs are on top of the tab captions.
  * 
- * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
+ * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
  *  
  * @group tabsheet
  */
 @mixin valo-tabsheet-icons-on-top-style ($primary-stylename: v-tabsheet) {
-  > div > .#{$primary-stylename}-tabs {
+  > .#{$primary-stylename}-tabcontainer {
     .v-caption {
       padding-top: round($v-unit-size/6);
       padding-bottom: round($v-unit-size/6);
       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;
 
@@ -553,6 +563,15 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
         margin-left: 0;
       }
     }
+
+    .v-caption-closable {
+      padding-right: $v-layout-spacing-horizontal;
+    }
+
+    .#{$primary-stylename}-caption-close {
+      top: round($v-font-size/4);
+      margin-top: 0;
+    }
   }
 }
 
@@ -561,7 +580,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
  * Outputs the styles for a tabsheet where only the selected tab has the close button visible. 
  * Note that the other tabs can still be closed programmatically.
  * 
- * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
+ * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
  *  
  * @group tabsheet
  */
@@ -580,7 +599,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
  * Outputs the styles for a tabsheet where the tabbar has increased padding to separate the tabs 
  * inside it from their surrounding container.
  * 
- * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
+ * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
  *  
  * @group tabsheet
  */
diff --git a/WebContent/VAADIN/themes/valo/components/_textarea.scss b/WebContent/VAADIN/themes/valo/components/_textarea.scss
index ffd5ba855a..d600bc14c2 100644
--- a/WebContent/VAADIN/themes/valo/components/_textarea.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textarea.scss
@@ -2,7 +2,7 @@
  * Outputs the selectors and properties for the TextArea component.
  *
  * @param {string} $primary-stylename (v-textarea) - the primary style name for the selectors
- * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
  *
  * @group textarea
  */
@@ -62,7 +62,7 @@
 /**
  * Outputs the styles for a text area variant.
  *
- * @param {size} $unit-size ($v-unit-size) - The sizing of the text area, which corresponds its height
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the text area, which corresponds its height
  * @param {size | list} $padding (null) - The padding of the text area. Computed from other parameters by default.
  * @param {color} $font-color (null) - The font color of the text area. Computed from the $background-color by default.
  * @param {number} $font-weight (max(400, $v-font-weight)) - The font weight of the text area
diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss
index f4ca3538bd..58f69e5e4c 100644
--- a/WebContent/VAADIN/themes/valo/components/_textfield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss
@@ -51,7 +51,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
  * Outputs the selectors and properties for the TextField component.
  *
  * @param {string} $primary-stylename (v-textfield) - the primary style name for the selectors
- * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
  *
  * @group textfield
  */
@@ -122,7 +122,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 /**
  * Outputs the styles for a text field variant.
  *
- * @param {size} $unit-size ($v-unit-size) - The sizing of the text field, which corresponds its height
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the text field, which corresponds its height
  * @param {size | list} $padding (null) - The padding of the text field. Computed from other parameters by default.
  * @param {color} $font-color (null) - The font color of the text field. Computed from the $background-color by default.
  * @param {number} $font-weight (max(400, $v-font-weight)) - The font weight of the text field
@@ -254,7 +254,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
  * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
  * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
  * @param {color} $background-color ($v-textfield-background-color) - The background color of the text field
- * @param {list} $gradient (null) - Valo specific gradient value. See the documentation for $v-gradient.
+ * @param {list} $gradient (null) - Valo specific gradient value. See the documentation for $v-gradient.
  * 
  * @group textfield
  */
@@ -341,7 +341,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
  * @param {string | list} $stylenames (inline-icon) - The additional style names which will define the inline-icon style
  * @param {string} $input-selector (null) - Additional selector for a nested input element which should be targeted
  * @param {size} $unit-size ($v-unit-size) - The unit size which the resulting style will support
- * @param {size} $font-size ($v-font-size) - The font size which the resulting style will support (needed for font icons)
+ * @param {size} $font-size ($v-font-size) - The font size which the resulting style will support (needed for font icons)
  * @param {size} $image-icon-size (16px) - The image icon height which the resulting style will support (needed to center the icon vertically inside the text field)
  * 
  * @group text field
diff --git a/WebContent/VAADIN/themes/valo/components/_treetable.scss b/WebContent/VAADIN/themes/valo/components/_treetable.scss
index e025df2bc9..60b696315b 100644
--- a/WebContent/VAADIN/themes/valo/components/_treetable.scss
+++ b/WebContent/VAADIN/themes/valo/components/_treetable.scss
@@ -14,6 +14,12 @@
       padding-left: 0;
       padding-right: 0;
     }
+    
+    [class*="caption-container"],
+    [class*="footer-container"] {
+      $vertical-padding: round(($v-table-row-height - $v-table-header-font-size)/2);
+      min-height: $v-table-row-height - $vertical-padding - ($vertical-padding - $v-table-border-width);
+    }
 
     [class*="cell-wrapper"] {
       min-height: $v-font-size;
diff --git a/WebContent/VAADIN/themes/valo/components/_upload.scss b/WebContent/VAADIN/themes/valo/components/_upload.scss
index c301be060a..07a51f03ef 100644
--- a/WebContent/VAADIN/themes/valo/components/_upload.scss
+++ b/WebContent/VAADIN/themes/valo/components/_upload.scss
@@ -1,7 +1,7 @@
 /**
  *
  *
- * @param {string} $primary-stylename (v-upload) - 
+ * @param {string} $primary-stylename (v-upload) -
  *
  * @group upload
  */
@@ -10,6 +10,10 @@
     @include valo-widget-style;
   }
 
+  .#{$primary-stylename}-immediate .v-button {
+    width: 100%;
+  }
+
   .#{$primary-stylename}-immediate input[type="file"] {
     @include opacity(0);
     z-index: 2;
@@ -20,4 +24,4 @@
     border: none;
     background: transparent;
   }
-}
\ No newline at end of file
+}