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

Change-Id: Iec61d9242be530edbb76ba952746ba0f9c9bd966

22 files changed, 175 insertions, 83 deletions

diff --git a/WebContent/VAADIN/themes/base/upload/upload.scss b/WebContent/VAADIN/themes/base/upload/upload.scss
index 933482764c..f8e707446c 100644
--- a/WebContent/VAADIN/themes/base/upload/upload.scss
+++ b/WebContent/VAADIN/themes/base/upload/upload.scss
@@ -4,11 +4,13 @@
 	white-space: nowrap;
 }
 
-
 .#{$primaryStyleName}-immediate {
 	position: relative;
 	margin: 0;
 	overflow: hidden;
+	.v-button {
+		width:100%;
+    }
 }
 
 .v-ff & .#{$primaryStyleName}-immediate,
@@ -36,4 +38,4 @@
 	text-align: left;
 }
 
-}
\ No newline at end of file
+}
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
+}
diff --git a/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss b/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss
index 346a50c9de..1065161bfc 100644
--- a/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss
+++ b/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss
@@ -3,7 +3,7 @@
  *
  * @group style
  *
- * @param {list} $border ($v-border) - CSS border value which can contain any of the color keywords
+ * @param {list} $border ($v-border) - CSS border value which can contain any of the color keywords
  * @param {color} $color ($v-background-color) - the base color to which the color keywords are applied to
  * @param {color} $context (null) - context/surrounding color where the border is expected to appear. The color of the final border is the darker of the two parameters passed to this function.
  * @param {number} $strength (1) - adjustment for the border contrast
@@ -59,7 +59,7 @@
  *
  * @group style
  *
- * @param {list} $border ($v-border) - CSS border value which can contain any of the color keywords
+ * @param {list} $border ($v-border) - CSS border value which can contain any of the color keywords
  * @param {color} $color ($v-background-color) - the base color to which the color keywords are applied to
  * @param {color} $context (null) - context/surrounding color where the border is expected to appear. The color of the final border is the darker of the two parameters passed to this function.
  * @param {number} $strength (1) - adjustment for the border contrast
@@ -88,8 +88,8 @@
  * @param {number} $bevel-depth ($v-bevel-depth) - percentage defining the depth/amount of the bevel effect. Affects the color keywords specified in the $bevel parameter.
  * @param {list} $shadow (null) - box-shadow value according to $v-shadow documentation
  * @param {number} $shadow-opacity ($v-shadow-opacity) - percentage defining the opacity/amount of the shadow effect. Affects the color keywords specified in the $shadow parameter.
- * @param {color} $background-color ($v-background-color) - the base color to which the color keywords are applied to
- * @param {list} $gradient (null) - Valo specific gradient value. See the documentation for $v-gradient. Affects the color keywords specified in the $bevel parameter.
+ * @param {color} $background-color ($v-background-color) - the base color to which the color keywords are applied to
+ * @param {list} $gradient (null) - Valo specific gradient value. See the documentation for $v-gradient. Affects the color keywords specified in the $bevel parameter.
  * @param {bool} $include-focus (false) - should the box-shadow value include $v-focus-style as well (only added if $v-focus-style is a)
  *
  * @return {list} CSS box-shadow value, combined from $bevel and $shadow with all occurences of v-tint, v-shade and v-tone color keywords replaced with the corresponding actual color
@@ -160,7 +160,7 @@
  *
  * @param {list} $list - any CSS list with possible color keywords
  * @param {color} $color - The color to which color keywords are applied to
- * @param {list} $gradient (null) - Valo specific gradient value. See the documentation for $v-gradient. Affects the replacement colors to accommodate the gradient.
+ * @param {list} $gradient (null) - Valo specific gradient value. See the documentation for $v-gradient. Affects the replacement colors to accommodate the gradient.
  *
  * @return {list} The input $list parameter with all occurences of v-tint, v-shade and v-tone color keywords replaced with the corresponding actual color
  */
diff --git a/WebContent/VAADIN/themes/valo/util/_gradient.scss b/WebContent/VAADIN/themes/valo/util/_gradient.scss
index 99490046ba..a38dca704c 100644
--- a/WebContent/VAADIN/themes/valo/util/_gradient.scss
+++ b/WebContent/VAADIN/themes/valo/util/_gradient.scss
@@ -5,7 +5,7 @@
  * 
  * @param {color} $color ($v-background-color) - The base color for the gradient color stops
  * @param {list} $gradient ($v-gradient) - Valo-specific gradient value. See the documentation for $v-gradient.
- * @param {color} $fallback (null) - A fallback color for browser which do not support linear gradients (IE8 and IE9 in particular). If null, the base $color is used instead.
+ * @param {color} $fallback (null) - A fallback color for browser which do not support linear gradients (IE8 and IE9 in particular). If null, the base $color is used instead.
  * @param {string} $direction (to bottom) - the direction of the linear gradient. The color stops are by default so that a lighter shade is at the start and a darker shade is at the end.
  */
 @mixin valo-gradient($color: $v-background-color, $gradient: $v-gradient, $fallback: null, $direction: to bottom) {
diff --git a/WebContent/VAADIN/themes/valo/util/_lists.scss b/WebContent/VAADIN/themes/valo/util/_lists.scss
index f82c4f0fe3..e21c69fd01 100644
--- a/WebContent/VAADIN/themes/valo/util/_lists.scss
+++ b/WebContent/VAADIN/themes/valo/util/_lists.scss
@@ -5,7 +5,7 @@
  * @param {value} $var - the value to search for
  * @param {bool} $recursive (false) - should any contained lists be checked for the value
  * 
- * @return {bool} true if the value is found from the list, false otherwise
+ * @return {bool} true if the value is found from the list, false otherwise
  * 
  * @group lists
  */
@@ -34,7 +34,7 @@
  * 
  * @param {list} $list - the list to check
  * 
- * @return {bool} true of the list contains other nested lists, false otherwise
+ * @return {bool} true of the list contains other nested lists, false otherwise
  * 
  * @group lists
  */
@@ -132,7 +132,7 @@
 /**
  * Flatten nested lists to one list, while maintaining the original list separators.
  * 
- * @param {list} $list - the list to flatten
+ * @param {list} $list - the list to flatten
  * 
  * @return {list} the same list with all nested lists flattened
  * 
diff --git a/WebContent/VAADIN/themes/valo/util/_util.scss b/WebContent/VAADIN/themes/valo/util/_util.scss
index 585504600d..510506805f 100644
--- a/WebContent/VAADIN/themes/valo/util/_util.scss
+++ b/WebContent/VAADIN/themes/valo/util/_util.scss
@@ -3,7 +3,7 @@
  * 
  * @param {string} $to-align (()) - The selector to match the elements which you wish to align vertically. The targeted elements should be inline or inline-block elements.
  * @param {string} $align (middle) - The vertical-align value, e.g. top, middle, bottom
- * @param {string} $pseudo-element (after) - Which pseudo element to use for the vertical align guide
+ * @param {string} $pseudo-element (after) - Which pseudo element to use for the vertical align guide
  * 
  * @group util
  */
diff --git a/WebContent/license.html b/WebContent/license.html
index 0ce22da99c..48be15b98d 100644
--- a/WebContent/license.html
+++ b/WebContent/license.html
@@ -90,6 +90,16 @@
             <td><a href="licenses/apache-license-version-2-0.txt">Apache License, Version 2.0</a></td>
           </tr>
 
+          <tr>
+            <td>Closure Stylesheets</td>
+            <td><a href="licenses/apache-license-version-2-0.txt">Apache License, Version 2.0</a></td>
+          </tr>
+
+          <tr>
+            <td>ASM</td>
+            <td><a href="licenses/ow2-asm-license.txt">ASM Project License</a></td>
+          </tr>
+
           <!-- In vaadin-shared-deps -->
           <tr>
             <td>Guava</td>
@@ -99,7 +109,7 @@
           <!-- In vaadin-shared-deps -->
           <tr>
             <td>JSON</td>
-            <td><a href="licenses/the-json-license.txt">The JSON License</a></td>
+            <td><a href="licenses/apache-license-version-2-0.txt">Apache License, Version 2.0</a></td>
           </tr>
 
           <!-- Used by vaadin-server -->
diff --git a/WebContent/licenses/ow2-asm-license.txt b/WebContent/licenses/ow2-asm-license.txt
new file mode 100644
index 0000000000..b8ed869a5c
--- /dev/null
+++ b/WebContent/licenses/ow2-asm-license.txt
@@ -0,0 +1,31 @@
+http://asm.ow2.org/license.html
+
+Copyright (c) 2000-2011 INRIA, France Telecom
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions
+are met:
+
+1. Redistributions of source code must retain the above copyright
+   notice, this list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright
+   notice, this list of conditions and the following disclaimer in the
+   documentation and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holders nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
+ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
+LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+THE POSSIBILITY OF SUCH DAMAGE.
\ No newline at end of file
diff --git a/WebContent/release-notes.html b/WebContent/release-notes.html
index 8ba85cfac1..c22f0e5ed4 100644
--- a/WebContent/release-notes.html
+++ b/WebContent/release-notes.html
@@ -497,12 +497,12 @@
         </p>
 
         <ul>
-            <li>Mozilla Firefox 18-29</li>
-            <li>Mozilla Firefox 17 ESR, 24 ESR</li>
+            <li>Mozilla Firefox 18-33</li>
+            <li>Mozilla Firefox 17 ESR, 24 ESR, 31 ESR</li>
             <li>Internet Explorer 8-11</li>
-            <li>Safari 6-7</li>
-            <li>Opera 12, 16-20</li>
-            <li>Google Chrome 23-34</li>
+            <li>Safari 6-8</li>
+            <li>Opera 12, 16-25</li>
+            <li>Google Chrome 23-38</li>
         </ul>
 
         <p>
@@ -511,7 +511,7 @@
         </p>
 
         <ul>
-            <li>iOS 5-7</li>
+            <li>iOS 5-8</li>
             <li>Android 2.3-4</li>
             <li>Windows Phone 8</li>
         </ul>