Various fixes to Valo

Add a small API for checkbox, radio button and option group.

Fix border radius for ComboBox (no-text-input + small/large style).

Add better support for form layout section captions (now supports h2,
h3 and h4 labels instead of just h4).

Add “align-right” and “align-center” utility style names for label.

Fix black line artifacts in iOS for panel, window and tabsheet (visible
at certain zoom levels).

Refactor tab sheet styles to be more modular (so you can combine framed
with icons-on-top for instance).

Fix tab sheet loading indicator reserving unnecessary space in parent
layout.

Readonly style for richtextarea.

Fix slider handle focus border color.

Fix #14058: Valo causes Table headers to be overly long
- Table now reserves as little space as necessary
- TreeTable works slightly differently, causing it to reserve more
space in some situations

Rename table mixins to follow naming convention (mixins that do not
output top-level selectors should be suffixed with “-style”, others
not).

Fix TreeTable treespacer style so that it works correctly with row
captions/icons.

Prevent text size adjust on iOS.

Refine default overlay shadow.

Change-Id: I31fa8905c5aa34ab810c3d1c7ac35c3f572c8c04

17 files changed, 389 insertions, 196 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss
index 619e799bc7..9dfe2984a0 100644
--- a/WebContent/VAADIN/themes/valo/components/_checkbox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss
@@ -1,7 +1,6 @@
 @mixin valo-checkbox ($primary-stylename: v-checkbox) {
 
-  .#{$primary-stylename},
-  .v-radiobutton {
+  .#{$primary-stylename} {
     @include valo-checkbox-style;
   }
 
@@ -14,10 +13,10 @@
 }
 
 
-@mixin valo-checkbox-style ($background-color: $v-background-color, $size: $v-unit-size, $selection-color: $v-selection-color) {
+@mixin valo-checkbox-style ($background-color: $v-background-color, $unit-size: $v-unit-size, $selection-color: $v-selection-color) {
 
   // So that we can use the same 'unit-size' for all component sizes
-  $size: $size/2;
+  $size: $unit-size/2;
 
   position: relative;
   line-height: round($size);
diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index 9fc1f7fe9d..63ddbe98df 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -20,6 +20,10 @@
     cursor: pointer;
     text-shadow: valo-text-shadow();
 
+    @if $v-border-radius != $v-textfield-border-radius {
+      border-radius: $v-border-radius;
+    }
+
     .#{$primary-stylename}-input {
       @include user-select(none);
       @include valo-gradient;
@@ -28,9 +32,7 @@
       @include valo-border-with-gradient($border: $v-border, $color: $v-background-color, $gradient: $v-gradient);
       text-shadow: inherit;
       text-overflow: ellipsis;
-      @if $v-border-radius != $v-textfield-border-radius {
-        border-radius: $v-border-radius;
-      }
+      border-radius: inherit;
 
       &:focus {
         @include valo-textfield-focus-style($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $background-color: $v-background-color);
@@ -104,6 +106,8 @@
   span.v-icon {
     color: valo-font-color($background-color);
     width: $unit-size;
+    line-height: 1;
+    padding-top: .12em;
   }
 
   &.#{$primary-stylename}-prompt > .#{$primary-stylename}-input {
diff --git a/WebContent/VAADIN/themes/valo/components/_formlayout.scss b/WebContent/VAADIN/themes/valo/components/_formlayout.scss
index ceaa732f3f..c73fff9b9a 100644
--- a/WebContent/VAADIN/themes/valo/components/_formlayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_formlayout.scss
@@ -25,6 +25,12 @@
     .v-caption {
       padding-bottom: 0;
     }
+
+    .v-caption-h2,
+    .v-caption-h3,
+    .v-caption-h4 {
+      height: 3em;
+    }
   }
 
   .#{$primary-stylename}-contentcell {
@@ -33,13 +39,14 @@
       font-weight: $v-font-weight + 100;
     }
 
+    > .h2,
+    > .h3,
     > .h4 {
       position: absolute;
       left: 0;
       margin-top: -0.5em;
       padding-bottom: 0.5em;
       border-bottom: valo-border($color: $v-app-background-color, $strength: 0.5);
-      color: valo-font-color($v-app-background-color, .5);
     }
   }
 
@@ -138,7 +145,8 @@
     > .v-textfield,
     > .v-textarea,
     > .v-filterselect input,
-    > .v-datefield input {
+    > .v-datefield input,
+    > .v-richtextarea {
       @include valo-textfield-style($unit-size: $row-height, $border-radius: 0, $border: null, $bevel: none, $shadow: none, $background-color: null);
       background: transparent;
       border: none;
@@ -152,7 +160,8 @@
       @include valo-textfield-prompt-style;
     }
 
-    > .v-textarea {
+    > .v-textarea,
+    > .v-richtextarea {
       height: auto;
     }
   }
@@ -179,9 +188,17 @@
     margin-left: ceil($v-unit-size/6);
   }
 
-  > table > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-contentcell > .h4 {
-    border-bottom: none;
-    color: $v-selection-color;
-    margin-top: -0.2em;
+  > table > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-contentcell {
+    > .h2,
+    > .h3,
+    > .h4 {
+      border-bottom: none;
+      color: $v-selection-color;
+    }
+
+    > .h3,
+    > .h4 {
+      margin-top: 0;
+    }
   }
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss
index b254f097c5..b1365e0011 100644
--- a/WebContent/VAADIN/themes/valo/components/_label.scss
+++ b/WebContent/VAADIN/themes/valo/components/_label.scss
@@ -120,4 +120,12 @@ $v-letter-spacing--h4:    0               !default;
     }
   }
 
+  .#{$primary-stylename}-align-right {
+    text-align: right;
+  }
+
+  .#{$primary-stylename}-align-center {
+    text-align: center;
+  }
+
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_optiongroup.scss b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss
index bd6029700e..71c67cd9d8 100644
--- a/WebContent/VAADIN/themes/valo/components/_optiongroup.scss
+++ b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss
@@ -1,47 +1,68 @@
 @mixin valo-optiongroup ($primary-stylename: v-optiongroup) {
 
   .v-radiobutton {
-    :root & > input {
-      &:checked ~ label:after {
-        $size: ceil($v-unit-size/6);
-        $offset: round($v-unit-size/6);
-        width: $size;
-        height: $size;
-        top: $offset;
-        left: $offset;
-        background: $v-selection-color;
-      }
-
-      & ~ label:before,
-      & ~ label:after {
-        border-radius: 50%;
-        content: "";
-      }
-    }
+    @include valo-radiobutton-style;
   }
 
   .v-select-optiongroup {
+    @include valo-optiongroup-style;
+  }
 
-    .v-radiobutton,
-    .v-checkbox {
-      display: block;
-      margin: round($v-unit-size/4) $v-font-size 0 0;
+}
+
+
+@mixin valo-radiobutton-style ($background-color: $v-background-color, $unit-size: $v-unit-size, $selection-color: $v-selection-color) {
+  @include valo-checkbox-style($background-color: $background-color, $unit-size: $unit-size, $selection-color: $selection-color);
+
+  :root & > input {
+    &:checked ~ label:after {
+      $size: ceil($unit-size/6);
+      $offset: round($unit-size/6);
+      width: $size;
+      height: $size;
+      top: $offset;
+      left: $offset;
+      background: $selection-color;
+    }
+
+    & ~ label:before,
+    & ~ label:after {
+      border-radius: 50%;
+      content: "";
+    }
+  }
+}
 
-      &:first-child {
-        margin-top: round($v-unit-size/6);
-      }
 
-      &:last-child {
-        margin-bottom: round($v-unit-size/6);
-      }
+
+@mixin valo-optiongroup-style ($unit-size: $v-unit-size, $font-size: $v-font-size) {
+
+  @if $unit-size != $v-unit-size {
+    .v-checkbox {
+      @include valo-checkbox-style($unit-size: $unit-size);
     }
+    .v-radiobutton {
+      @include valo-radiobutton-style($unit-size: $unit-size);
+    }
+  }
+
+  .v-radiobutton,
+  .v-checkbox {
+    display: block;
+    margin: round($unit-size/4) $font-size 0 0;
 
-    &.v-has-width label {
-      white-space: normal;
+    &:first-child {
+      margin-top: round($unit-size/6);
     }
 
+    &:last-child {
+      margin-bottom: round($unit-size/6);
+    }
   }
 
+  &.v-has-width label {
+    white-space: normal;
+  }
 }
 
 
@@ -55,7 +76,7 @@
 
   &.v-has-width {
     white-space: normal;
-    
+
     label {
       white-space: nowrap;
     }
diff --git a/WebContent/VAADIN/themes/valo/components/_panel.scss b/WebContent/VAADIN/themes/valo/components/_panel.scss
index 437706ee86..cb344b6404 100644
--- a/WebContent/VAADIN/themes/valo/components/_panel.scss
+++ b/WebContent/VAADIN/themes/valo/components/_panel.scss
@@ -106,8 +106,8 @@ $v-panel-border: $v-border !default;
       bottom: -$border-width;
       right: 0;
       left: 0;
-      height: $border-width;
-      background: first-color(valo-border($color: $v-app-background-color, $strength: 0.5));
+      height: 0;
+      border-top: $border-width solid first-color(valo-border($color: $v-app-background-color, $strength: 0.5));
     }
   }
 
@@ -117,8 +117,8 @@ $v-panel-border: $v-border !default;
       position: absolute;
       z-index: 2;
       top: 0;
-      height: $border-width;
-      background: $v-app-background-color;
+      height: 0;
+      border-top: $border-width solid $v-app-background-color;
       left: 0;
       right: 0;
     }
diff --git a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss
index 9e7a90fb0a..5807e16aa7 100644
--- a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss
+++ b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss
@@ -88,4 +88,9 @@ $valo-richtextarea-use-font-awesome: true !default;
     display: block;
   }
 
+  .#{$primary-stylename}-readonly {
+    padding: ceil($v-unit-size/9) ceil($v-unit-size/6);
+    background: transparent;
+  }
+
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_slider.scss b/WebContent/VAADIN/themes/valo/components/_slider.scss
index 856e6eb08c..b4785a8471 100644
--- a/WebContent/VAADIN/themes/valo/components/_slider.scss
+++ b/WebContent/VAADIN/themes/valo/components/_slider.scss
@@ -86,7 +86,7 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
 
     &:after {
       border: valo-border();
-      @include valo-button-focus-style();
+      @include valo-button-focus-style($border-fallback: null);
       opacity: 0;
       @if $v-animations-enabled {
         @include transition(opacity 200ms);
@@ -229,7 +229,7 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
 
     &:after {
       border: valo-border($color: $background-color);
-      @include valo-button-focus-style($background-color: $background-color);
+      @include valo-button-focus-style($background-color: $background-color, $border-fallback: null);
     }
   }
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss
index 7aa2d127da..c952a4bdda 100644
--- a/WebContent/VAADIN/themes/valo/components/_table.scss
+++ b/WebContent/VAADIN/themes/valo/components/_table.scss
@@ -33,6 +33,10 @@ $v-table-background-color: null !default;
     overflow: hidden;
   }
 
+  .#{$primary-stylename}-caption-container-align-center {
+    text-align: center;
+  }
+
   .#{$primary-stylename}-caption-container-align-right {
     text-align: right;
   }
@@ -89,7 +93,7 @@ $v-table-background-color: null !default;
     @include valo-gradient($v-background-color);
     white-space: nowrap;
     font-size: $v-table-header-font-size;
-    text-shadow: valo-text-shadow;
+    text-shadow: valo-text-shadow();
   }
 
   .#{$primary-stylename}-header-wrap {
@@ -115,49 +119,48 @@ $v-table-background-color: null !default;
   .#{$primary-stylename}-caption-container {
     overflow: hidden;
     line-height: 1;
+    @include box-sizing(border-box);
   }
 
   .#{$primary-stylename}-footer-container {
     $vertical-padding: round(($v-table-row-height - $v-table-header-font-size)/2);
-    padding-top: $vertical-padding - $v-table-border-width;
-    padding-bottom: $vertical-padding;
+    padding: $vertical-padding - $v-table-border-width $v-table-cell-padding-horizontal $vertical-padding;
     float: right;
-    padding-right: $v-table-cell-padding-horizontal + $v-table-border-width;
   }
 
   [class^="#{$primary-stylename}-header-cell"] {
     position: relative;
-    display: inline-block;
   }
 
   .#{$primary-stylename}-caption-container,
   .#{$primary-stylename}-header-drag {
     $vertical-padding: round(($v-table-row-height - $v-table-header-font-size)/2);
-    padding-top: $vertical-padding;
-    padding-bottom: $vertical-padding - $v-table-border-width;
-    padding-left: $v-table-cell-padding-horizontal;
-    padding-right: $v-table-cell-padding-horizontal;
+    padding: $vertical-padding $v-table-cell-padding-horizontal $vertical-padding - $v-table-border-width;
     border-left: $v-table-border-width solid $border-color;
   }
 
+  .#{$primary-stylename}-caption-container-align-right {
+    padding-right: $v-table-cell-padding-horizontal - $v-table-resizer-width;
+  }
+
   .#{$primary-stylename}-resizer {
     height: $v-table-row-height;
-    background: transparent;
     width: $v-table-resizer-width;
     cursor: e-resize;
     cursor: col-resize;
     position: absolute;
+    top: 0;
     right: 0;
     z-index: 1;
   }
 
   .#{$primary-stylename}-cell-content {
     border-left: $v-table-border-width solid $border-color;
-    padding: 0 $v-table-cell-padding-horizontal;
+    overflow: hidden;
 
     &:first-child {
       border-left: none;
-      padding-left: $v-table-cell-padding-horizontal + $v-table-border-width;
+      padding-left: $v-table-border-width;
     }
   }
 
@@ -168,10 +171,11 @@ $v-table-background-color: null !default;
 
 
   .#{$primary-stylename}-cell-wrapper {
-    white-space: nowrap;
     line-height: 1;
     $vertical-padding: round(($v-table-row-height - $v-font-size)/2);
-    padding: $vertical-padding 0;
+    padding: $vertical-padding $v-table-cell-padding-horizontal;
+    @include box-sizing(border-box);
+    margin-right: 0 !important;
   }
 
   .#{$primary-stylename}-body {
@@ -180,6 +184,7 @@ $v-table-background-color: null !default;
 
   .#{$primary-stylename}-table {
     background-color: $background-color;
+    white-space: nowrap;
   }
 
   .#{$primary-stylename}-table td {
@@ -234,10 +239,6 @@ $v-table-background-color: null !default;
     line-height: $v-table-row-height;
     position: absolute;
     right: 0;
-
-    + .#{$primary-stylename}-caption-container {
-      padding-right: $v-table-sort-indicator-width;
-    }
   }
 
   .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator:before,
@@ -256,9 +257,14 @@ $v-table-background-color: null !default;
   }
 
 
+  [class*="rowheader"] span.v-icon {
+    min-width: 1em;
+  }
+
+
   .#{$primary-stylename}-focus {
     $outline-width: max($v-table-border-width, 1px);
-    outline: $outline-width solid valo-focus-color();
+    outline: $outline-width solid $v-focus-color;
     outline-offset: -$outline-width;
   }
 
@@ -276,11 +282,11 @@ $v-table-background-color: null !default;
   }
 
   .#{$primary-stylename}-focus-slot-right {
-    border-right: 2px solid rgba(valo-focus-color(), .5);
+    border-right: 2px solid rgba($v-focus-color, .5);
   }
 
   .#{$primary-stylename}-focus-slot-left {
-    border-left: 2px solid rgba(valo-focus-color(), .5);
+    border-left: 2px solid rgba($v-focus-color, .5);
     left: 0;
     right: auto;
     margin-left: 0 !important;
@@ -399,14 +405,14 @@ $v-table-background-color: null !default;
   // Drag'n'drop styles
 
   .#{$primary-stylename}-drag .#{$primary-stylename}-body {
-    box-shadow: 0 0 0 2px rgba(valo-focus-color(), .5);
+    box-shadow: 0 0 0 2px rgba($v-focus-color, .5);
 
-    @if color-luminance(valo-focus-color()) + 50 < color-luminance($background-color) {
-      border-color: valo-focus-color();
+    @if color-luminance($v-focus-color) + 50 < color-luminance($background-color) {
+      border-color: $v-focus-color;
     }
 
     .v-ie8 & {
-      border-color: valo-focus-color();
+      border-color: $v-focus-color;
     }
 
     .#{$primary-stylename}-focus {
@@ -421,7 +427,7 @@ $v-table-background-color: null !default;
     height: $v-table-row-height + $v-table-border-width;
     left: 0;
     right: 0;
-    background: valo-focus-color();
+    background: $v-focus-color;
     @include opacity(.2);
   }
 
@@ -433,10 +439,10 @@ $v-table-background-color: null !default;
     height: 2px;
     left: 0;
     right: 0;
-    background: valo-focus-color();
+    background: $v-focus-color;
     font-size: $v-font-size * 2;
     line-height: 2px;
-    color: valo-focus-color();
+    color: $v-focus-color;
     text-indent: round($v-font-size/-4);
     text-shadow: 0 0 1px $background-color, 0 0 1px $background-color;
   }
@@ -483,7 +489,7 @@ $v-table-background-color: null !default;
 
 
 
-@mixin valo-table-no-stripes ($primary-stylename: v-table) {
+@mixin valo-table-no-stripes-style ($primary-stylename: v-table) {
   .#{$primary-stylename}-row,
   .#{$primary-stylename}-row-odd {
     background: transparent;
@@ -491,19 +497,23 @@ $v-table-background-color: null !default;
 }
 
 
-
-
-@mixin valo-table-no-vertical-lines ($primary-stylename: v-table) {
+@mixin valo-table-no-vertical-lines-style ($primary-stylename: v-table) {
   .#{$primary-stylename}-cell-content,
   [class*="row"].v-selected .#{$primary-stylename}-cell-content {
     border-left: none;
-    border-right: none;
-    padding-left: $v-table-cell-padding-horizontal + $v-table-border-width;
-    padding-right: $v-table-cell-padding-horizontal + $v-table-border-width;
+    padding-left: $v-table-border-width;
+  }
+
+  &.v-treetable {
+    .#{$primary-stylename}-cell-content,
+    [class*="row"].v-selected .#{$primary-stylename}-cell-content {
+      padding-left: $v-table-cell-padding-horizontal + $v-table-border-width;
+    }
   }
 }
 
-@mixin valo-table-no-horizontal-lines ($primary-stylename: v-table) {
+
+@mixin valo-table-no-horizontal-lines-style ($primary-stylename: v-table) {
   .#{$primary-stylename}-cell-content,
   [class*="row"].v-selected .#{$primary-stylename}-cell-content {
     border-top: none;
@@ -511,13 +521,15 @@ $v-table-background-color: null !default;
   }
 }
 
-@mixin valo-table-no-header ($primary-stylename: v-table) {
+
+@mixin valo-table-no-header-style ($primary-stylename: v-table) {
   .#{$primary-stylename}-header-wrap {
     display: none;
   }
 }
 
-@mixin valo-table-borderless ($primary-stylename: v-table) {
+
+@mixin valo-table-borderless-style ($primary-stylename: v-table) {
   .#{$primary-stylename}-header-wrap,
   .#{$primary-stylename}-footer-wrap,
   .#{$primary-stylename}-header-drag,
@@ -538,13 +550,16 @@ $v-table-background-color: null !default;
   }
 }
 
-@mixin valo-table-compact-style (
+
+@mixin valo-table-spacing-style (
     $primary-stylename: v-table,
     $row-height: $v-table-row-height,
     $header-font-size: $v-table-header-font-size,
     $cell-padding-horizontal: $v-table-cell-padding-horizontal
   ) {
 
+  $vertical-padding: round(($row-height - $header-font-size)/2);
+
   .#{$primary-stylename}-header-wrap,
   .#{$primary-stylename}-footer-wrap,
   .#{$primary-stylename}-header-drag {
@@ -552,36 +567,27 @@ $v-table-background-color: null !default;
   }
 
   .#{$primary-stylename}-footer-container {
-    $vertical-padding: round(($row-height - $header-font-size)/2);
-    padding-top: $vertical-padding - $v-table-border-width;
-    padding-bottom: $vertical-padding;
-    padding-right: $cell-padding-horizontal + $v-table-border-width;
+    padding: $vertical-padding - $v-table-border-width $cell-padding-horizontal + $v-table-border-width $vertical-padding;
   }
 
   .#{$primary-stylename}-caption-container,
   .#{$primary-stylename}-header-drag {
-    $vertical-padding: round(($row-height - $header-font-size)/2);
     padding-top: $vertical-padding;
     padding-bottom: $vertical-padding - $v-table-border-width;
     padding-left: $cell-padding-horizontal;
     padding-right: $cell-padding-horizontal;
   }
 
+  .#{$primary-stylename}-caption-container-align-right {
+    padding-right: max(0, $cell-padding-horizontal - $v-table-resizer-width);
+  }
+
   .#{$primary-stylename}-resizer {
     height: $row-height;
   }
 
   .#{$primary-stylename}-cell-wrapper {
-    $vertical-padding: round(($row-height - $v-font-size)/2);
-    padding: $vertical-padding 0;
-  }
-
-  .#{$primary-stylename}-cell-content {
-    padding: 0 $cell-padding-horizontal;
-
-    &:first-child {
-      padding-left: $cell-padding-horizontal + $v-table-border-width;
-    }
+    padding: $vertical-padding $cell-padding-horizontal;
   }
 
   .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator,
@@ -597,4 +603,25 @@ $v-table-background-color: null !default;
   .#{$primary-stylename}-row-drag-middle td:first-child:before {
     height: $row-height + $v-table-border-width;
   }
+
+  &.v-treetable {
+    .#{$primary-stylename}-cell-wrapper {
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    .#{$primary-stylename}-cell-content {
+      padding-left: $cell-padding-horizontal;
+      padding-right: $cell-padding-horizontal;
+
+      &:first-child {
+        padding-left: $cell-padding-horizontal + $v-table-border-width;
+      }
+    }
+
+    .#{$primary-stylename}-footer-container {
+      padding-left: $cell-padding-horizontal;
+      padding-right: $cell-padding-horizontal;
+    }
+  }
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
index bb79f0b6a7..32b06a06cc 100644
--- a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
+++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
@@ -80,22 +80,42 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
       @include valo-anim-fade-in(300ms);
     }
 
+    $spinner-size: round($v-unit-size/2);
+    $spinner-size: $spinner-size + $spinner-size % 2;
+
     .#{$primary-stylename}-deco {
-      @include valo-spinner($size: $v-unit-size/2);
+      @include valo-spinner($size: $spinner-size);
+      height: 0 !important;
+      border-style: none;
       display: block;
       position: absolute;
       z-index: -1;
       bottom: 50%;
-      margin-bottom: round($v-unit-size/2 + $v-unit-size/4) * -1;
+      margin-bottom: round($v-unit-size/-2) - $spinner-size/2;
       left: 50%;
-      margin-left: round($v-unit-size/-4);
+      margin-left: $spinner-size/-2;
       opacity: 0;
+
+      .v-ie8 & {
+        min-height: 0;
+      }
     }
 
     .#{$primary-stylename}-loading .#{$primary-stylename}-deco {
       @include transition(opacity 200ms 200ms);
       opacity: 1;
       z-index: 1;
+      height: $spinner-size !important;
+      border-style: solid;
+
+      .v-ie8 &,
+      .v-ie9 & {
+        border-style: none;
+      }
+
+      .v-ie8 & {
+        min-height: 30px;
+      }
     }
   }
 
@@ -110,21 +130,22 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
   &:before {
     content: "";
     position: absolute;
-    height: max(1px, first-number($v-border));
-    background: first-color(valo-border($strength: 0.5));
+    height: 0;
+    // iOS panics with background color, creating black line artifacts
+    border-top: max(1px, first-number($v-border)) solid first-color(valo-border($strength: 0.5));
     bottom: 0;
     left: 0;
     right: 0;
   }
 
   .#{$primary-stylename}-tabs {
-    height: $v-unit-size;
     position: relative;
   }
 }
 
 
 @mixin valo-tabsheet-tabitemcell-style ($primary-stylename: v-tabsheet) {
+  vertical-align: bottom;
 
   .#{$primary-stylename}-tabitem {
     line-height: 0;
@@ -132,7 +153,6 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
   }
 
   .v-caption {
-    height: $v-unit-size;
     margin-left: round($v-unit-size/2);
     padding: 0 round($v-unit-size/10);
     @include box-sizing(border-box);
@@ -144,11 +164,17 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
     color: valo-font-color($v-app-background-color, 0.58);
     width: auto !important;
     overflow: hidden;
+    text-overflow: ellipsis;
+    border-bottom: max(1px, first-number($v-border))*2 solid transparent;
 
     @if $v-animations-enabled {
       @include transition(border-bottom 200ms, color 200ms);
     }
 
+    .v-captiontext {
+      display: inline;
+    }
+
     .v-icon + .v-captiontext {
       margin-left: round($v-unit-size/4);
     }
@@ -175,12 +201,11 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
     .v-caption {
       color: $v-selection-color;
-      border-bottom: max(1px, first-number($v-border)) solid $v-selection-color;
     }
   }
 
   .#{$primary-stylename}-tabitem-selected .v-caption.v-caption {
-    border-bottom: max(1px, first-number($v-border))*2 solid $v-selection-color;
+    border-bottom-color: $v-selection-color;
     color: $v-selection-color;
   }
 
@@ -212,12 +237,12 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
   $border-color: first-color(valo-border($strength: 0.5));
 
   position: absolute;
+  top: 0;
   right: 0;
   bottom: 0;
   padding-left: round($v-unit-size/2);
   @include linear-gradient(to left, $v-background-color 70%, rgba($v-background-color, 0) 100%, $fallback: transparent);
   pointer-events: none;
-  line-height: $v-unit-size;
 
   &:after {
     content: "";
@@ -245,8 +270,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
     background: transparent;
     font: inherit;
     color: inherit;
-    height: $v-unit-size;
-    line-height: $v-unit-size;
+    height: 100%;
     margin: 0;
     padding: 0 round($v-unit-size/4);
     outline: none;
@@ -310,11 +334,11 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 
 
-@mixin valo-tabsheet-framed-style ($primary-stylename: v-tabsheet) {
+@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: first-number($v-border) * 2;
+      margin-left: $tab-spacing or first-number($v-border) * -1;
       padding: 0 $v-layout-spacing-horizontal;
       border: first-number($v-border) solid transparent;
       line-height: $v-unit-size - first-number($v-border);
@@ -336,10 +360,16 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
       margin-left: 0;
     }
 
+    @if $frame-inactive-tabs {
+      .#{$primary-stylename}-tabitem .v-caption {
+        border-color: first-color(valo-border($strength: 0.5));
+      }
+    }
+
     .#{$primary-stylename}-tabitem-selected .v-caption {
       background: $v-panel-background-color;
       border-color: first-color(valo-border($strength: 0.5));
-      border-bottom: none;
+      border-bottom: first-number($v-border) solid transparent;
     }
 
     .v-caption-closable {
@@ -355,15 +385,25 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
   }
 
   > .#{$primary-stylename}-content {
-    background: $v-panel-background-color;
-    border: valo-border($strength: 0.5);
-    border-top: none;
+    // iOS panics with black line artifacts,
+    // moving the background color to an inner element fixes it
+    > div {
+      background: $v-panel-background-color;
+    }
+
+    @if $outer-frame {
+      border: valo-border($strength: 0.5);
+      border-top: none;
+    }
   }
 
   &.padded-tabbar {
     > .#{$primary-stylename}-tabcontainer {
-      border: valo-border($strength: 0.5);
-      border-bottom: none;
+      @if $outer-frame {
+        border: valo-border($strength: 0.5);
+        border-bottom: none;
+      }
+
       background: $v-background-color;
       padding-top: round($v-unit-size/6);
     }
@@ -416,38 +456,20 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 @mixin valo-tabsheet-icons-on-top-style ($primary-stylename: v-tabsheet) {
   > div > .#{$primary-stylename}-tabs {
-    height: $v-unit-size * 2;
-
     .v-caption {
-      height: $v-unit-size * 2;
-      padding-top: $v-unit-size;
+      padding-top: round($v-unit-size/6);
+      padding-bottom: round($v-unit-size/6);
+      line-height: 1.2;
     }
 
     .v-icon {
       display: block;
-      font-size: $v-font-size * 2;
-      $_offset: round($v-unit-size/4);
-      margin: -($v-unit-size - $_offset) auto #{-$_offset};
-      min-height: $v-unit-size;
 
       + .v-captiontext.v-captiontext {
         margin-left: 0;
       }
     }
   }
-
-  .#{$primary-stylename}-scroller {
-    line-height: $v-unit-size*2;
-
-    button[class] {
-      padding: 0 round($v-unit-size/4);
-      display: block;
-    }
-  }
-
-  > .#{$primary-stylename}-deco {
-    margin-bottom: -$v-unit-size - round($v-unit-size/4);
-  }
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss
index 3ed553b1fa..e6514f9ec6 100644
--- a/WebContent/VAADIN/themes/valo/components/_textfield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss
@@ -118,7 +118,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
     @include transition(none);
   }
 
-  $focus-color: valo-focus-color();
+  $focus-color: $v-focus-color;
 
   @if color-luminance($focus-color) + 50 < color-luminance($v-background-color) {
     border-color: $focus-color;
@@ -181,15 +181,30 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 
 
-@mixin valo-textfield-inline-icon($primary-stylename: v-textfield, $stylename: inline-icon, $unit-size: $v-unit-size, $font-size: $v-font-size, $image-icon-size: 16px) {
-  .v-slot-#{$stylename} {
+
+
+
+
+@mixin valo-textfield-inline-icon($primary-stylename: v-textfield, $stylenames: inline-icon, $input-selector: null, $unit-size: $v-unit-size, $font-size: $v-font-size, $image-icon-size: 16px) {
+  $slot-selector: "";
+  $caption-selector: "";
+  $text-input-selector: "";
+
+  @each $style in $stylenames {
+    $slot-selector: $slot-selector + ".v-slot-" + $style;
+    $caption-selector: $caption-selector + ".v-caption-" + $style;
+    $text-input-selector: $text-input-selector + "." + $primary-stylename + "-" + $style;
+  }
+
+  #{$slot-selector} {
     position: relative;
   }
 
-  .v-caption-#{$stylename} {
+  #{$caption-selector} {
     padding: 0;
 
     .v-captiontext {
+      // Need to include to get the default padding back
       @include valo-caption-style;
       margin: 0;
     }
@@ -217,8 +232,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
     }
   }
 
-  .#{$primary-stylename}-#{$stylename},
-  .v-textarea-#{$stylename} {
+  #{$text-input-selector} #{$input-selector} {
     padding-left: $unit-size;
   }
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_treetable.scss b/WebContent/VAADIN/themes/valo/components/_treetable.scss
index e8cd22fa9a..0423b37ab1 100644
--- a/WebContent/VAADIN/themes/valo/components/_treetable.scss
+++ b/WebContent/VAADIN/themes/valo/components/_treetable.scss
@@ -1,20 +1,41 @@
 @mixin valo-treetable ($primary-stylename: v-treetable) {
-  .v-table-cell-wrapper {
-    //position: relative;
+  .#{$primary-stylename} {
+    [class*="caption-container"],
+    [class*="footer-container"],
+    [class*="cell-wrapper"] {
+      @include box-sizing(content-box);
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    [class*="caption-container"] {
+      padding-left: $v-table-cell-padding-horizontal;
+    }
+
+    [class*="caption-container-align-right"] {
+      padding-left: $v-table-cell-padding-horizontal + $v-table-resizer-width;
+    }
+
+    [class*="footer-container"] {
+      padding-right: $v-table-cell-padding-horizontal;
+    }
+
+    [class*="cell-content"] {
+      padding-left: $v-table-cell-padding-horizontal;
+      padding-right: $v-table-cell-padding-horizontal;
+
+      &:first-child {
+        padding-left: $v-table-cell-padding-horizontal + $v-table-border-width;
+      }
+    }
   }
 
   .#{$primary-stylename}-treespacer {
     display: inline-block;
-    background: transparent;
-    width: round($v-unit-size/2);
-    //left: round($v-unit-size/-8);
-    left: 0;
     position: absolute;
-    text-align: right;
-
-    &:before {
-      
-    }
+    width: round($v-unit-size/2);
+    margin-left: round($v-unit-size/-2) - round($v-table-cell-padding-horizontal/2);
+    text-align: center;
   }
 
   .#{$primary-stylename}-node-closed:before {
@@ -24,4 +45,4 @@
   .#{$primary-stylename}-node-open:before {
     @include valo-tree-expanded-icon-style($force: true);
   }
-}
\ No newline at end of file
+}
diff --git a/WebContent/VAADIN/themes/valo/components/_window.scss b/WebContent/VAADIN/themes/valo/components/_window.scss
index 64ded990c2..79fb500804 100644
--- a/WebContent/VAADIN/themes/valo/components/_window.scss
+++ b/WebContent/VAADIN/themes/valo/components/_window.scss
@@ -93,9 +93,9 @@ $v-window-modality-curtain-background-color: #222 !default;
       bottom: -$scroll-divider-width;
       right: 0;
       left: 0;
-      height: $scroll-divider-width;
+      height: 0;
       $_bg: $v-window-background-color;
-      background: first-color(valo-border($strength: 0.5));
+      border-top: $scroll-divider-width solid first-color(valo-border($strength: 0.5));
     }
   }
 
@@ -133,10 +133,6 @@ $v-window-modality-curtain-background-color: #222 !default;
       @include transition(color 140ms);
     }
 
-    @if $v-window-border-radius > 0 {
-      border-radius: 0 0 0 $v-window-border-radius;
-    }
-
     &:focus {
       outline: none;
     }
@@ -154,6 +150,10 @@ $v-window-modality-curtain-background-color: #222 !default;
   .#{$primary-stylename}-closebox {
     padding-right: round($v-unit-size/9);
     @include valo-window-close-icon-style;
+
+    @if $v-window-border-radius > 0 {
+      border-radius: 0 $v-window-border-radius 0 $v-window-border-radius;
+    }
   }
 
   .#{$primary-stylename}-maximizebox,
@@ -161,8 +161,12 @@ $v-window-modality-curtain-background-color: #222 !default;
     right: $v-unit-size - round($v-unit-size/9);
     padding-left: round($v-unit-size/9);
 
-    + .#{$primary-stylename}-closebox {
-      border-bottom-left-radius: 0;
+    @if $v-window-border-radius > 0 {
+      border-radius: 0 0 0 $v-window-border-radius;
+
+      + .#{$primary-stylename}-closebox {
+        border-bottom-left-radius: 0;
+      }
     }
   }
 
@@ -215,18 +219,18 @@ $v-window-modality-curtain-background-color: #222 !default;
         position: absolute;
         z-index: 2;
         top: 0;
-        height: $scroll-divider-width;
-        background: $v-window-background-color;
+        height: 0;
+        border-top: $scroll-divider-width solid $v-window-background-color;
         left: 0;
         right: 0;
       }
 
       .v-panel-captionwrap:after {
-        background: first-color(valo-border($strength: 0.5));
+        border-color: first-color(valo-border($strength: 0.5));
       }
 
       .v-panel-content:before {
-        background: $v-window-background-color;
+        border-color: $v-window-background-color;
       }
     }
   }
diff --git a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss
index f4157d954f..704b6c8469 100644
--- a/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss
+++ b/WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss
@@ -1,5 +1,5 @@
 // Common styles for components
-// About 50KB of CSS output
+// About 90KB of CSS output
 
 @import "valo-menu";
 
@@ -79,6 +79,14 @@
     &.v-button-small {
       width: $v-unit-size--small;
     }
+
+    &.v-button-large {
+      width: $v-unit-size--large;
+    }
+
+    .v-button-caption {
+      display: none;
+    }
   }
 
   .v-link-small {
@@ -89,6 +97,10 @@
     font-size: $v-font-size--large;
   }
 
+  .v-tabsheet-equal-width-tabs {
+    @include valo-tabsheet-equal-width-tabs-style($flex: false);
+  }
+
   .v-tabsheet-framed {
     @include valo-tabsheet-framed-style;
   }
@@ -97,10 +109,6 @@
     @include valo-tabsheet-centered-tabs-style;
   }
 
-  .v-tabsheet-equal-width-tabs {
-    @include valo-tabsheet-equal-width-tabs-style($flex: false);
-  }
-
   .v-tabsheet-padded-tabbar {
     @include valo-tabsheet-padded-tabbar-style;
   }
@@ -109,6 +117,12 @@
     @include valo-tabsheet-icons-on-top-style;
   }
 
+  .v-tabsheet-compact-tabbar {
+    > .v-tabsheet-tabcontainer-compact-tabbar .v-caption {
+      line-height: 1.8;
+    }
+  }
+
   .v-tabsheet-only-selected-closable {
     @include valo-tabsheet-only-selected-closable-style;
   }
@@ -122,10 +136,17 @@
   }
 
   .v-textfield-borderless,
-  .v-textarea-borderless {
+  .v-textarea-borderless,
+  .v-datefield-borderless .v-datefield-textfield,
+  .v-filterselect-borderless .v-filterselect-input {
     @include valo-textfield-borderless-style;
   }
 
+  .v-datefield-borderless .v-datefield-button,
+  .v-filterselect-borderless .v-filterselect-button {
+    border: none;
+  }
+
   .v-textfield-small {
     @include valo-textfield-style($unit-size: $v-unit-size--small);
     font-size: $v-font-size--small;
@@ -136,7 +157,9 @@
     font-size: $v-font-size--large;
   }
 
-  @include valo-textfield-inline-icon($stylename: inline-icon);
+  @include valo-textfield-inline-icon($stylenames: inline-icon);
+  @include valo-textfield-inline-icon($stylenames: inline-icon small, $unit-size: $v-unit-size--small, $font-size: $v-font-size--small);
+  @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);
@@ -149,12 +172,16 @@
   }
 
   .v-textfield-align-right,
-  .v-textarea-align-right {
+  .v-textarea-align-right,
+  .v-datefield-align-right input,
+  .v-filterselect-align-right input {
     text-align: right;
   }
 
   .v-textfield-align-center,
-  .v-textarea-align-center {
+  .v-textarea-align-center,
+  .v-datefield-align-center input,
+  .v-filterselect-align-center input {
     text-align: center;
   }
 
@@ -179,12 +206,22 @@
   }
 
   .v-checkbox-small {
-    @include valo-checkbox-style($size: $v-unit-size--small);
+    @include valo-checkbox-style($unit-size: $v-unit-size--small);
     font-size: $v-font-size--small;
   }
 
   .v-checkbox-large {
-    @include valo-checkbox-style($size: $v-unit-size--large);
+    @include valo-checkbox-style($unit-size: $v-unit-size--large);
+    font-size: $v-font-size--large;
+  }
+
+  .v-select-optiongroup-small {
+    @include valo-optiongroup-style($unit-size: $v-unit-size--small);
+    font-size: $v-font-size--small;
+  }
+
+  .v-select-optiongroup-large {
+    @include valo-optiongroup-style($unit-size: $v-unit-size--large);
     font-size: $v-font-size--large;
   }
 
@@ -204,12 +241,16 @@
     @include valo-panel-scroll-divider-style;
   }
 
-  .v-csslayout-well {
+  .v-csslayout-well,
+  .v-verticallayout-well,
+  .v-horizontallayout-well {
     @include valo-panel-well-style;
     @include valo-panel-adjust-content-margins;
   }
 
-  .v-csslayout-card {
+  .v-csslayout-card,
+  .v-verticallayout-card,
+  .v-horizontallayout-card {
     @include valo-panel-style;
     @include valo-panel-adjust-content-margins;
   }
@@ -347,28 +388,28 @@
 
 
   .v-table-no-stripes {
-    @include valo-table-no-stripes;
+    @include valo-table-no-stripes-style;
   }
 
   .v-table-no-vertical-lines {
-    @include valo-table-no-vertical-lines;
+    @include valo-table-no-vertical-lines-style;
   }
 
   .v-table-no-horizontal-lines {
-    @include valo-table-no-horizontal-lines;
+    @include valo-table-no-horizontal-lines-style;
   }
 
   .v-table-no-header {
-    @include valo-table-no-header;
+    @include valo-table-no-header-style;
   }
 
   .v-table-borderless {
-    @include valo-table-borderless;
+    @include valo-table-borderless-style;
   }
 
   .v-table-compact,
   .v-table-small {
-    @include valo-table-compact-style($row-height: round($v-table-row-height * $v-scaling-factor--small), $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2));
+    @include valo-table-spacing-style($row-height: round($v-table-row-height * $v-scaling-factor--small), $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2));
   }
 
   .v-table-small {
@@ -386,6 +427,10 @@
     }
   }
 
+  .v-slider-no-indicator {
+    @include valo-slider-no-indicator;
+  }
+
 
 	@include valo-menu;
 
diff --git a/WebContent/VAADIN/themes/valo/shared/_global.scss b/WebContent/VAADIN/themes/valo/shared/_global.scss
index 1aca0dd117..0e55402449 100644
--- a/WebContent/VAADIN/themes/valo/shared/_global.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_global.scss
@@ -28,6 +28,11 @@ $valo-global-included: false !default;
       height: 100%;
       // Cancel tap highlight from all elements inside the app
       -webkit-tap-highlight-color: rgba(0,0,0,0);
+
+      // Prevent iOS text size adjust after orientation change, without disabling user zoom
+      -webkit-text-size-adjust: 100%;
+      -ms-text-size-adjust: 100%;
+      -webkit-text-size-adjust: 100%;
     }
 
     .v-ui {
diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
index 5d92f4c974..53b7586ce4 100644
--- a/WebContent/VAADIN/themes/valo/shared/_overlay.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
@@ -17,7 +17,7 @@ $v-overlay-padding: round($v-unit-size/9) !default;
 $v-overlay-padding-vertical: $v-overlay-padding !default;
 $v-overlay-padding-horizontal: $v-overlay-padding !default;
 
-$v-overlay-shadow: 0 2px 4px 0 v-shade, 0 3px 5px 0 v-shade, 0 0 0 $v-overlay-border-width (v-shade (2.5 - color-luminance($v-background-color)/255 + $v-bevel-depth/100%)) !default;
+$v-overlay-shadow: 0 4px 10px 0 (v-shade 2), 0 3px 5px 0 v-shade, 0 0 0 $v-overlay-border-width (v-shade (2.5 - color-luminance($v-background-color)/255 + $v-bevel-depth/100%)) !default;
 
 $v-selection-overlay-background-color: $v-overlay-background-color !default;
 $v-selection-overlay-padding: $v-overlay-padding !default;
diff --git a/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss b/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss
index 270be09b4f..bf5b9b78bd 100644
--- a/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss
+++ b/WebContent/VAADIN/themes/valo/util/_bevel-and-shadow.scss
@@ -220,10 +220,11 @@
 
   $color: $background-color;
   @each $b in $bevel {
+    $strength: 1;
     @if type-of($b) == list {
       $strength: first-number($b);
-      $color: if($needle==v-tint, rgba(#fff, $v-shadow-opacity/100%*$strength), rgba(#000, $v-shadow-opacity/100%*$strength));
     }
+    $color: if($needle==v-tint, rgba(#fff, $v-shadow-opacity/100%*$strength), rgba(#000, $v-shadow-opacity/100%*$strength));
   }
 
   @return 0 if($needle==v-tint, $offset, $offset*-1) 0 $color;