Multiple fixes to Valo theme

- Added initial Sass API for Accordion and TabSheet (previously only
one mixin)

- Renamed ‘darker-of’ function to ‘darkest-color’, which now supports
more than two colors

- Refactored notifications to use the new position classes as well as
the new animation-in/out functionality

- Refactored overlay styles to use animation-in/out functionality

- Fixed all unwanted white-space and scrollbar issues in all browsers
(font-size:0 or line-height:0 no longer necessary), and fixes vertical
centering in horizontal layout (#13671)

- Fixed borderless menubar clicking bug (Firefox and Opera)

- Fixed table column selector, which no longer produces scrollbars if
placed directly inside a scrollable area in full size

- Fixed table outline overflow in Opera (now using box-shadow instead
in all other browsers except IE8)

- Added toolbar support for windows (header and footer)

- Moved optional notification styles to common-stylenames.scss

-Various other small tweaks

Change-Id: I42343199be12f6d909b9584b7dce3e258846da81

17 files changed, 436 insertions, 327 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_accordion.scss b/WebContent/VAADIN/themes/valo/components/_accordion.scss
index dbddbc3295..93f5e08ef1 100644
--- a/WebContent/VAADIN/themes/valo/components/_accordion.scss
+++ b/WebContent/VAADIN/themes/valo/components/_accordion.scss
@@ -1,40 +1,74 @@
-$v-accordion-content-shadow: join(inset, $v-shadow) !default;
-$v-accordion-content-shadow-opacity: $v-shadow-opacity/2 !default;
-
-
 @mixin valo-accordion ($primary-stylename: v-accordion) {
   .#{$primary-stylename} {
-    @include valo-panel-style;
-    $grad-style: valo-gradient-style($v-gradient);
-    $grad-opacity: valo-gradient-opacity($v-gradient);
-    @include valo-gradient($color: $v-background-color, $gradient: ($grad-style $grad-opacity/2));
-    overflow: hidden;
+    @include valo-accordion-style;
   }
 
   .#{$primary-stylename}-item {
-    position: relative;
-    overflow: hidden;
+    @include valo-accordion-item-style;
+  }
+
+  .#{$primary-stylename}-item-caption {
+    @include valo-accordion-item-caption-style;
+  }
+
+  .#{$primary-stylename}-item-content {
+    @include valo-accordion-item-content-style;
+  }
+}
+
 
-    @if $v-border-radius > 0 {
-      $_br: $v-border-radius - first-number($v-border);
-      &:first-child {
-        border-radius: $_br $_br 0 0;
 
-        .#{$primary-stylename}-item-caption {
-          border-radius: inherit;
-        }
+@mixin valo-accordion-style {
+  @include valo-panel-style;
+  $grad-style: valo-gradient-style($v-gradient);
+  $grad-opacity: valo-gradient-opacity($v-gradient);
+  @include valo-gradient($color: $v-background-color, $gradient: ($grad-style $grad-opacity/2));
+  overflow: hidden;
+}
+
+
+@mixin valo-accordion-item-style {
+  position: relative;
+  overflow: hidden;
+
+  @if $v-border-radius > 0 {
+    $_br: $v-border-radius - first-number($v-border);
+
+    &:first-child {
+      border-radius: $_br $_br 0 0;
+
+      .v-caption {
+        border-radius: inherit;
       }
-      &:last-child {
-        border-radius: 0 0 $_br $_br;
+    }
+
+    &:last-child {
+      border-radius: 0 0 $_br $_br;
+
+      .v-caption {
+        border-radius: 0;
       }
     }
   }
 
-  .#{$primary-stylename}-item-caption .v-caption {
-    @include valo-panel-caption-style;
-    border-radius: inherit;
+  &:last-child:not([class*="item-open"]) .v-caption {
+    border-bottom: none;
+  }
+
+  &[class*="item-open"] + [class*="item"] {
+    border-top: valo-border($color: $v-panel-background-color, $strength: 0.7);
+  }
+}
+
+
+
+@mixin valo-accordion-item-caption-style ($background-color: null) {
+  .v-caption {
+    @include valo-panel-caption-style($background-color: $background-color or $v-background-color);
     display: block;
-    background: transparent;
+    @if $background-color == null {
+      background: transparent;
+    }
     border-bottom-color: first-color(valo-border($color: $v-panel-background-color));
     cursor: pointer;
     @include user-select(none);;
@@ -60,23 +94,16 @@ $v-accordion-content-shadow-opacity: $v-shadow-opacity/2 !default;
       @include valo-button-active-style;
     }
   }
+}
 
-  .#{$primary-stylename}-item:last-child:not(.#{$primary-stylename}-item-open) .v-caption {
-    border-bottom: none;
-  }
 
-  .#{$primary-stylename}-item-content {
-    position: absolute;
-    width: 100%;
-    bottom: 0;
-    right: 0;
-    box-shadow: valo-bevel-and-shadow($shadow: $v-accordion-content-shadow, $shadow-opacity: $v-accordion-content-shadow-opacity);
-    background-color: $v-panel-background-color;
-    @include box-sizing(border-box);
-    @include valo-panel-adjust-content-margins;
-  }
-
-  .#{$primary-stylename}-item-open + .#{$primary-stylename}-item {
-    border-top: valo-border($color: $v-panel-background-color, $strength: 0.7);
-  }
+@mixin valo-accordion-item-content-style {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  right: 0;
+  box-shadow: valo-bevel-and-shadow($shadow: join(inset, $v-shadow), $shadow-opacity: $v-shadow-opacity/2);
+  background-color: $v-panel-background-color;
+  @include box-sizing(border-box);
+  @include valo-panel-adjust-content-margins;
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_all.scss b/WebContent/VAADIN/themes/valo/components/_all.scss
index 1509724f04..f20e8326bf 100644
--- a/WebContent/VAADIN/themes/valo/components/_all.scss
+++ b/WebContent/VAADIN/themes/valo/components/_all.scss
@@ -38,7 +38,6 @@
 @import "upload";
 @import "widget";
 @import "window";
-@import "dragwrapper";
 
 
 @mixin valo-components {
@@ -100,10 +99,6 @@
     @include valo-inline-datefield;
   }
 
-  @if v-is-included(orderedlayout) {
-    @include valo-orderedlayout;
-  }
-
   @if v-is-included(gridlayout) {
     @include valo-gridlayout;
   }
diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss
index 5d61d37bd0..cf65bac2ec 100644
--- a/WebContent/VAADIN/themes/valo/components/_button.scss
+++ b/WebContent/VAADIN/themes/valo/components/_button.scss
@@ -106,7 +106,7 @@
     border-radius: $border-radius;
 
     @if type-of($background-color) == color {
-      @include valo-border-with-gradient($border: $border, $color: darker-of($background-color, $v-background-color), $gradient: $gradient);
+      @include valo-border-with-gradient($border: $border, $color: darkest-color($background-color, $v-background-color), $gradient: $gradient);
       @include valo-gradient($background-color, $gradient);
       box-shadow: valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient);
     }
diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index 976dd7e1d4..a8756a50e4 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -13,7 +13,7 @@
   }
 
   .#{$primary-stylename}-suggestpopup {
-    @include valo-combobox-popup-style;
+    @include valo-combobox-popup-style($primary-stylename: $primary-stylename);
   }
 
   .#{$primary-stylename}-no-input {
@@ -143,17 +143,6 @@
 
 
 
-
-@include keyframes(valo-combobox-show-status) {
-  0% {
-    opacity: 0;
-    @include transform( translatey(-100%) );
-  }
-}
-
-
-
-
 @mixin valo-combobox-input-style (
     $unit-size: $v-unit-size,
     $padding: null, // Computed by default
@@ -257,9 +246,22 @@
 
 
 
-@mixin valo-combobox-popup-style {
+@mixin valo-combobox-popup-style ($primary-stylename: v-filterselect) {
+
+  @if $v-animations-enabled {
+    @if $v-overlay-animate-in {
+      &[class*="animate-in"] {
+        @include animation($v-overlay-animate-in);
+      }
+    }
+    @if $v-overlay-animate-out {
+      &[class*="animate-out"] {
+        @include animation($v-overlay-animate-out);
+      }
+    }
+  }
 
-  .v-filterselect-suggestmenu {
+  .#{$primary-stylename}-suggestmenu {
     @include valo-selection-overlay-style;
     box-sizing: border-box;
     position: relative;
@@ -283,7 +285,7 @@
     @include valo-selection-item-selected-style;
   }
 
-  .v-filterselect-status {
+  .#{$primary-stylename}-status {
     position: absolute;
     right: $v-border-radius;
     $bg: scale-color($v-background-color, $lightness: -15%);
@@ -299,7 +301,7 @@
     pointer-events: none;
 
     @if $v-animations-enabled {
-       @include animation(valo-combobox-show-status 200ms 80ms backwards);
+       @include animation(valo-anim-slide-in-down 200ms 80ms backwards);
     }
 
     > * {
diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss
index eafd1c0428..58c0f94345 100644
--- a/WebContent/VAADIN/themes/valo/components/_datefield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss
@@ -274,7 +274,7 @@
       &:hover {
         @include opacity(1);
         &:before {
-          color: valo-link-font-color();
+          color: $v-focus-color;
         }
       }
     }
diff --git a/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss b/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss
index 3bc5e21f8d..549c06358c 100644
--- a/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss
+++ b/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss
@@ -6,9 +6,8 @@
     @include user-select(none);
   }
 
-  .v-active-drag-source {
-    // Can't hide since it will hide Tables and Trees as well
-    //@include opacity(0);
+  .#{$primary-stylename}.v-active-drag-source {
+    visibility: hidden;
   }
 
   .#{$primary-stylename} {
@@ -24,6 +23,7 @@
     right: -1px;
     bottom: -1px;
     left: -1px;
+    border: 0 solid $v-focus-color;
   }
 
   .#{$primary-stylename}-over-top:before {
diff --git a/WebContent/VAADIN/themes/valo/components/_gridlayout.scss b/WebContent/VAADIN/themes/valo/components/_gridlayout.scss
index c8c67b363c..738b86c9e2 100644
--- a/WebContent/VAADIN/themes/valo/components/_gridlayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_gridlayout.scss
@@ -1,7 +1,6 @@
 @mixin valo-gridlayout-global ($primary-stylename: v-gridlayout) {
   .#{$primary-stylename} {
     position: relative;
-    line-height: 0;
   }
   .#{$primary-stylename}-slot {
     position: absolute;
diff --git a/WebContent/VAADIN/themes/valo/components/_link.scss b/WebContent/VAADIN/themes/valo/components/_link.scss
index 73e2cb114a..129ffcca2f 100644
--- a/WebContent/VAADIN/themes/valo/components/_link.scss
+++ b/WebContent/VAADIN/themes/valo/components/_link.scss
@@ -1,4 +1,4 @@
-$v-link-font-color: null !default;
+$v-link-font-color: $v-focus-color !default;
 $v-link-text-decoration: underline !default;
 $v-link-cursor: pointer !default;
 
@@ -25,7 +25,7 @@ $v-link-cursor: pointer !default;
 
 @mixin valo-link-style {
   cursor: $v-link-cursor;
-  color: valo-link-font-color();
+  color: $v-link-font-color;
   text-decoration: $v-link-text-decoration;
   font-weight: inherit;
 
@@ -34,13 +34,6 @@ $v-link-cursor: pointer !default;
   }
 
   &:hover {
-    color: lighten(valo-link-font-color(), 10%);
+    color: lighten($v-link-font-color, 10%);
   }
 }
-
-
-
-@function valo-link-font-color ($color: null, $context: null) {
-  $link-color: $color or $v-link-font-color or valo-focus-color($color: $color, $context: $context);
-  @return $link-color;
-}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss
index d8d48d7f8c..473617e981 100644
--- a/WebContent/VAADIN/themes/valo/components/_menubar.scss
+++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss
@@ -64,6 +64,10 @@
 
   .#{$primary-stylename}-popup {
     @include valo-menubar-popup-style($primary-stylename);
+
+    &.#{$primary-stylename}-popup-animate-out {
+      @include animation(none);
+    }
   }
 
 }
@@ -77,13 +81,14 @@
   z-index: 1;
   display: inline-block;
   @include box-sizing(border-box);
-  @include valo-button-style($border-radius: 0, $shadow: null, $font-color: inherit, $cursor: pointer);
+  @include valo-button-style($states: normal, $border-radius: 0, $shadow: null, $font-color: inherit, $cursor: pointer);
   background: transparent;
   border-width: 0 $border-width 0 0;
   height: 100%;
   vertical-align: top;
   line-height: $v-unit-size - $border-width*2 - 1px;
   text-align: center;
+
   @if $border-width == 0 {
     margin-right: 1px;
   }
@@ -115,9 +120,16 @@
     border-radius: inherit;
   }
 
-  &:hover:before {
-    @include valo-button-hover-style;
-    border: none;
+  @if $v-hover-styles-enabled {
+    &:hover {
+      // IE needs some nudging to show the :before element
+      zoom: 1;
+
+      &:before {
+        @include valo-button-hover-style;
+        border: none;
+      }
+    }
   }
 
   &:active:before {
@@ -144,11 +156,7 @@
 
 
 
-@mixin valo-menubar-popup-style ($primary-stylename: v-menubar, $context: $v-background-color) {
-
-  $copy: $v-background-color;
-  $v-background-color: $context;
-
+@mixin valo-menubar-popup-style ($primary-stylename: v-menubar) {
   @include valo-selection-overlay-style;
 
   margin: ceil($v-unit-size/8) 0 0 1px !important;
@@ -203,8 +211,6 @@
   [class*="disabled"] {
     cursor: default;
   }
-
-  $v-background-color: $copy;
 }
 
 
@@ -241,6 +247,7 @@
 
   .#{$primary-stylename}-menuitem {
     line-height: $unit-size - first-number($v-border)*2;
+    padding: 0 round($unit-size/2.5);
 
     &[class*="-icon-only"] {
       width: $unit-size;
@@ -250,12 +257,13 @@
 
 @mixin valo-menubar-borderless-style ($primary-stylename: v-menubar) {
   border: none;
+  border-radius: 0;
   padding: first-number($v-border);
   box-shadow: none;
   background: transparent;
   color: inherit;
 
-  &:focus:not(.v-disabled) {
+  &:not(.v-disabled):focus {
     border: none;
     box-shadow: none;
   }
@@ -265,7 +273,9 @@
     border: none;
     margin-right: max(1px, first-number($v-border));
     border-radius: $v-border-radius;
-    text-shadow: valo-text-shadow($offset: -1px);
+    color: $v-selection-color;
+    text-shadow: valo-text-shadow($font-color: $v-selection-color, $offset: -1px);
+    padding: 0 round($v-unit-size/3);
 
     @if $v-animations-enabled {
       @include transition(color 140ms);
@@ -273,30 +283,36 @@
 
     &:first-child,
     &:last-child {
-      border-radius: inherit;
+      border-radius: $v-border-radius;
     }
 
-    &:hover:before {
-      display: none;
+    &:before {
+      content: none;
     }
 
-    &:active:not(.#{$primary-stylename}-menuitem-disabled):before {
-      display: block;
+    &:hover {
+      color: lighten($v-selection-color, 10%);
     }
 
-    &:hover {
-      color: $v-focus-color;
+    &:active {
+      color: inherit;
     }
   }
 
-  .#{$primary-stylename}-menuitem-checked {
+  .#{$primary-stylename}-menuitem-checked,
+  .#{$primary-stylename}-menuitem-checked:first-child {
     border: valo-border();
-    line-height: $v-unit-size - first-number($v-border)*4 - 1px;
     color: $v-selection-color;
+
+    .#{$primary-stylename}-menuitem-caption {
+      position: relative;
+      top: first-number($v-border)*-1;
+    }
   }
 
   .#{$primary-stylename}-menuitem-selected {
     $font-color: valo-font-color($v-selection-color, 0.9);
+    color: $font-color;
     text-shadow: valo-text-shadow($background-color: $v-selection-color, $font-color: $font-color);
 
     &:hover {
@@ -304,6 +320,7 @@
     }
   }
 
+  .#{$primary-stylename}-menuitem-disabled,
   .#{$primary-stylename}-menuitem-disabled:hover {
     color: inherit;
   }
diff --git a/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss
index ddaa5c363e..1173ca3dbe 100644
--- a/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss
@@ -9,17 +9,13 @@
     @include box-sizing(border-box);
     width: 100%;
     height: 100%;
-
-    // TODO fixes extra white space issues in some cases (can't remember what anymore), but causes some styles to clip
-    //overflow: hidden;
   }
 
   .v-slot,
   .v-spacing {
     display: inline-block;
-    white-space: normal;
+    white-space: nowrap;
     vertical-align: top;
-    line-height: 0;
   }
 
   // Clear any floats inside the slot, to prevent unwanted collapsing
@@ -44,14 +40,14 @@
 
   .v-vertical > .v-spacing,
   .v-vertical > .v-expand > .v-spacing {
-    width: 0;
+    width: 0 !important;
     display: block;
     clear: both;
   }
 
   .v-horizontal > .v-spacing,
   .v-horizontal > .v-expand > .v-spacing {
-    height: 0;
+    height: 0 !important;
   }
 
   .v-align-middle:before,
@@ -63,7 +59,6 @@
     height: 100%;
     vertical-align: middle;
     width: 0;
-    overflow: hidden;
   }
 
   .v-align-middle,
@@ -76,12 +71,12 @@
     display: inline-block;
   }
 
-  //.v-align-middle,
+  .v-align-middle,
   .v-align-middle > .v-widget {
     vertical-align: middle;
   }
 
-  //.v-align-bottom,
+  .v-align-bottom,
   .v-align-bottom > .v-widget {
     vertical-align: bottom;
   }
diff --git a/WebContent/VAADIN/themes/valo/components/_panel.scss b/WebContent/VAADIN/themes/valo/components/_panel.scss
index b18e4f86d1..437706ee86 100644
--- a/WebContent/VAADIN/themes/valo/components/_panel.scss
+++ b/WebContent/VAADIN/themes/valo/components/_panel.scss
@@ -9,6 +9,7 @@ $v-panel-border: $v-border !default;
 
   .#{$primary-stylename}-caption {
     @include valo-panel-caption-style;
+    border-radius: $v-border-radius - first-number($v-border) $v-border-radius - first-number($v-border) 0 0;
   }
 
   .#{$primary-stylename}-content {
@@ -23,14 +24,16 @@ $v-panel-border: $v-border !default;
 
 
 @mixin valo-panel-style (
+    $primary-stylename: v-panel,
     $background-color : $v-panel-background-color,
     $shadow           : $v-shadow,
-    $border           : $v-panel-border
+    $border           : $v-panel-border,
+    $border-radius    : $v-border-radius
   ) {
   background: $background-color;
   color: valo-font-color($background-color);
-  border-radius: $v-border-radius;
-  border: valo-border($border: $border, $color: darker-of($background-color, $v-app-background-color), $strength: 0.7);
+  border-radius: $border-radius;
+  border: valo-border($border: $border, $color: darkest-color($background-color, $v-app-background-color), $strength: 0.7);
   box-shadow: valo-bevel-and-shadow($shadow: $shadow);
 }
 
@@ -40,15 +43,13 @@ $v-panel-border: $v-border !default;
     $background-color : $v-background-color,
     $bevel            : first($v-bevel),
     $gradient         : valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4,
-    $border           : $v-panel-border,
-    $border-radius    : $v-border-radius - first-number($v-border) $v-border-radius - first-number($v-border) 0 0
+    $border           : $v-panel-border
   ) {
   @include box-sizing(border-box);
   padding: 0 round($v-unit-size/3);
   line-height: $v-unit-size - first-number($v-border);
   $bg: $background-color;
   border-bottom: valo-border($border: $border, $color: $bg, $strength: 0.5);
-  border-radius: $border-radius;
   @include valo-gradient($color: $bg, $gradient: $gradient);
   color: valo-font-color($bg);
   font-weight: $v-caption-font-weight;
@@ -67,7 +68,7 @@ $v-panel-border: $v-border !default;
   border-radius: $v-border-radius;
   border: valo-border();
 
-  .v-panel-caption {
+  > div > .v-panel-caption {
     background: transparent;
     box-shadow: none;
   }
@@ -79,9 +80,10 @@ $v-panel-border: $v-border !default;
   background: transparent;
   color: inherit;
   border: none;
+  border-radius: 0;
   box-shadow: none;
 
-  .v-panel-caption {
+  > div > .v-panel-caption {
     background: transparent;
     box-shadow: none;
     color: inherit;
diff --git a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss
index 0b097f71fd..e05eb08d16 100644
--- a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss
+++ b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss
@@ -171,26 +171,6 @@
 
 
 
-/*
-@mixin valo-splitpanel-style ($splitter-size: ) {
-  > div > .v-splitpanel-hsplitter {
-    width: ;
-
-    div:after {
-      @include valo-splitpanel-splitter-handle-style($horizontal: true);
-    }
-
-    &:after {
-      left: 0;
-      right: 0;
-    }
-  }
-  .v-splitpanel-horizontal .v-splitpanel-second-container
-}
-*/
-
-
-
 @mixin valo-splitpanel-splitter-handle-style ($horizontal: false, $include-common: true) {
   @if $include-common {
     content: "";
diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss
index 8b155fe525..7aa2d127da 100644
--- a/WebContent/VAADIN/themes/valo/components/_table.scss
+++ b/WebContent/VAADIN/themes/valo/components/_table.scss
@@ -75,7 +75,11 @@ $v-table-background-color: null !default;
   .v-table-header table,
   .v-table-footer table,
   .v-table-table {
-    outline: $v-table-border-width solid $border-color;
+    box-shadow: 0 0 0 $v-table-border-width $border-color;
+
+    .v-ie8 & {
+      outline: $v-table-border-width solid $border-color;
+    }
   }
 
   .#{$primary-stylename}-header-wrap,
@@ -319,6 +323,19 @@ $v-table-background-color: null !default;
     }
   }
 
+  .v-scrollable > .#{$primary-stylename} .#{$primary-stylename}-column-selector {
+    right: 0;
+    top: 0;
+    border-top: none;
+    border-right: none;
+    border-radius: 0 0 0 50%;
+
+    &:after {
+      top: 0;
+      right: 0;
+    }
+  }
+
   .#{$primary-stylename}-header-wrap:hover .#{$primary-stylename}-column-selector {
     @include opacity(1);
     @include transition-delay(100ms);
diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
index 185c6fbdc0..20669af43d 100644
--- a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
+++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
@@ -12,8 +12,33 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
     display: none;
   }
 
+  .#{$primary-stylename}-tabcontainer {
+    table,
+    tbody,
+    tr {
+      display: inline-block;
+      border-spacing: 0;
+      border-collapse: collapse;
+      vertical-align: top;
+    }
+
+    td {
+      display: inline-block;
+      padding: 0;
+    }
+  }
+
+  .#{$primary-stylename}-tabs {
+    white-space: nowrap;
+    @include box-sizing(border-box);
+  }
+
   .#{$primary-stylename}-content {
     position: relative;
+
+    > div > .v-scrollable {
+      @include valo-panel-adjust-content-margins;
+    }
   }
 
 }
@@ -23,10 +48,6 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 
 @mixin valo-tabsheet ($primary-stylename: v-tabsheet) {
-
-  $_scale: if( is-dark-color($v-background-color) , max(5%, $v-bevel-depth/2), min(-5%, -$v-bevel-depth/2) );
-  $border-color: scale-color($v-background-color, $lightness: $_scale);
-
   .#{$primary-stylename} {
     &:not(.v-has-width) {
       width: auto !important;
@@ -38,84 +59,86 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
   }
 
   .#{$primary-stylename}-tabcontainer {
-    position: relative;
-    line-height: $v-unit-size;
-    @include user-select(none);
+    @include valo-tabsheet-tabcontainer($primary-stylename);
+  }
 
-    table,
-    tbody,
-    tr {
-      display: inline-block;
-      border-spacing: 0;
-      border-collapse: collapse;
-      vertical-align: top;
-    }
+  .#{$primary-stylename}-scroller {
+    @include valo-tabsheet-scroller($primary-stylename);
+  }
 
-    td {
-      display: inline-block;
-      padding: 0;
-    }
 
-    &:before {
-      content: "";
-      position: absolute;
-      height: max(1px, first-number($v-border));
-      background: $border-color;
-      bottom: 0;
-      left: 0;
-      right: 0;
+  @if $v-tabsheet-content-animation-enabled {
+    .#{$primary-stylename}-tabsheetpanel > .v-scrollable > .v-widget {
+      @include valo-anim-fade-in(300ms);
     }
   }
 
+}
+
+
+@mixin valo-tabsheet-tabcontainer ($primary-stylename: v-tabsheet) {
+  position: relative;
+  line-height: $v-unit-size;
+  @include user-select(none);
+
+  &:before {
+    content: "";
+    position: absolute;
+    height: max(1px, first-number($v-border));
+    background: first-color(valo-border($strength: 0.5));
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
   .#{$primary-stylename}-tabs {
     height: $v-unit-size;
     position: relative;
-    white-space: nowrap;
-    @include box-sizing(border-box);
+  }
 
-    .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);
-      cursor: pointer;
-      text-align: center;
-      line-height: $v-unit-size;
-      font-size: $v-font-size;
-      font-weight: $v-font-weight;
-      color: valo-font-color($v-app-background-color, 0.6);
-      width: auto !important;
+  @include valo-tabsheet-tabitem($primary-stylename);
+}
 
-      @if $v-animations-enabled {
-        @include transition(border-bottom 200ms, color 200ms);
-      }
 
-      .v-icon {
-        cursor: inherit;
-      }
+@mixin valo-tabsheet-tabitem ($primary-stylename: v-tabsheet) {
+  .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);
+    cursor: pointer;
+    text-align: center;
+    line-height: $v-unit-size;
+    font-size: round($v-font-size * 0.95);
+    font-weight: $v-font-weight;
+    color: valo-font-color($v-app-background-color, 0.6);
+    width: auto !important;
 
-      .v-icon + .v-captiontext {
-        margin-left: round($v-unit-size/4);
-      }
+    @if $v-animations-enabled {
+      @include transition(border-bottom 200ms, color 200ms);
+    }
 
-      &:hover {
-        color: $v-selection-color;
-      }
+    .v-icon + .v-captiontext {
+      margin-left: round($v-unit-size/4);
+    }
 
-      &.v-disabled {
-        @include opacity($v-disabled-opacity);
-        cursor: default;
-        color: inherit !important;
-        border-bottom: none;
-      }
+    &:hover {
+      color: $v-selection-color;
     }
 
-    td:first-child .v-caption,
-    [aria-hidden="true"] + td .v-caption {
-      margin-left: 0;
+    &.v-disabled {
+      @include opacity($v-disabled-opacity);
+      cursor: default;
+      color: inherit !important;
+      border-bottom: none;
     }
   }
 
+  td:first-child .v-caption,
+  [aria-hidden="true"] + td .v-caption {
+    margin-left: 0;
+  }
+
   .#{$primary-stylename}-tabitemcell:focus {
     outline: none;
 
@@ -149,101 +172,113 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
       color: valo-font-color($v-selection-color);
     }
   }
+}
 
-  .#{$primary-stylename}-scroller {
+
+@mixin valo-tabsheet-scroller ($primary-stylename: v-tabsheet) {
+  $border-color: first-color(valo-border($strength: 0.5));
+
+  position: absolute;
+  right: 0;
+  top: 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: "";
+    height: first-number($v-border);
     position: absolute;
+    bottom: 0;
+    left: 0;
     right: 0;
-    top: 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;
+    display: block;
+    @include linear-gradient(to left, $border-color 70%, rgba($border-color, 0) 100%, $fallback: transparent);
+  }
+
+  .v-ie8 &,
+  .v-ie9 & {
+    background-color: $v-background-color;
 
     &:after {
-      content: "";
-      height: first-number($v-border);
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      display: block;
-      @include linear-gradient(to left, $border-color 70%, rgba($border-color, 0) 100%, $fallback: transparent);
+      background-color: $border-color;
     }
+  }
 
-    .v-ie8 &,
-    .v-ie9 & {
-      background-color: $v-background-color;
+  button {
+    @include appearance(none);
+    border: none;
+    background: transparent;
+    font: inherit;
+    color: inherit;
+    height: $v-unit-size;
+    line-height: $v-unit-size;
+    margin: 0;
+    padding: 0 round($v-unit-size/4);
+    outline: none;
+    cursor: pointer;
+    pointer-events: auto;
+    @include opacity(.5);
 
-      &:after {
-        background-color: $border-color;
-      }
+    &:hover {
+      @include opacity(1);
+      color: $v-selection-color;
     }
 
-    button {
-      @include appearance(none);
-      border: none;
-      background: transparent;
-      font: inherit;
-      color: inherit;
-      height: $v-unit-size;
-      line-height: $v-unit-size;
-      margin: 0;
-      padding: 0 round($v-unit-size/4);
-      outline: none;
-      cursor: pointer;
-      pointer-events: auto;
-      @include opacity(.5);
-
-      &:hover {
-        @include opacity(1);
-        color: $v-selection-color;
-      }
-
-      &:active {
-        @include opacity(.7);
-        color: $v-selection-color;
-      }
-
-      &::-moz-focus-inner {
-        padding: 0;
-        border: 0
-      }
+    &:active {
+      @include opacity(.7);
+      color: $v-selection-color;
     }
 
-    [class*="Next"] {
-      padding-left: round($v-unit-size/8);
-      &:before {
-        @include valo-tabsheet-scroller-next-icon-style;
-      }
+    &::-moz-focus-inner {
+      padding: 0;
+      border: 0
     }
+  }
 
-    [class*="Prev"] {
-      padding-right: round($v-unit-size/8);
-      &:before {
-        @include valo-tabsheet-scroller-prev-icon-style;
-      }
+  [class*="Next"] {
+    padding-left: round($v-unit-size/8);
+    &:before {
+      @include valo-tabsheet-scroller-next-icon-style;
     }
+  }
 
-    [class*="disabled"] {
-      cursor: default;
-      color: inherit !important;
-      @include opacity(.1 !important);
+  [class*="Prev"] {
+    padding-right: round($v-unit-size/8);
+    &:before {
+      @include valo-tabsheet-scroller-prev-icon-style;
     }
   }
 
-
-  @if $v-tabsheet-content-animation-enabled {
-    .#{$primary-stylename}-tabsheetpanel > .v-scrollable > .v-widget {
-      @include valo-anim-fade-in(300ms);
-    }
+  [class*="disabled"] {
+    cursor: default;
+    color: inherit !important;
+    @include opacity(.1 !important);
   }
+}
 
+
+@mixin valo-tabsheet-scroller-prev-icon-style {
+  font-family: FontAwesome;
+  content: "\f053";
+}
+
+
+@mixin valo-tabsheet-scroller-next-icon-style {
+  font-family: FontAwesome;
+  content: "\f054";
 }
 
 
 
 
 
+
+
+
+
+
 @mixin valo-tabsheet-centered-tabs ($primary-stylename: v-tabsheet) {
   .#{$primary-stylename}-tabcontainer {
     text-align: center;
@@ -267,7 +302,6 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
     td {
       display: table-cell;
-      //width: 100% !important;
     }
 
     .v-caption {
@@ -309,6 +343,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
   }
 }
 
+
 @mixin valo-tabsheet-only-selected-closable ($primary-stylename: v-tabsheet) {
   > .#{$primary-stylename}-tabcontainer .#{$primary-stylename}-caption-close {
     visibility: hidden;
@@ -319,18 +354,9 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
   }
 }
 
+
 @mixin valo-tabsheet-padded-tabbar ($primary-stylename: v-tabsheet) {
   > .#{$primary-stylename}-tabcontainer .#{$primary-stylename}-tabs {
     padding: 0 round($v-unit-size/4);
   }
 }
-
-@mixin valo-tabsheet-scroller-prev-icon-style {
-  font-family: FontAwesome;
-  content: "\f053";
-}
-
-@mixin valo-tabsheet-scroller-next-icon-style {
-  font-family: FontAwesome;
-  content: "\f054";
-}
diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss
index f28fee0d1c..4a63004b3c 100644
--- a/WebContent/VAADIN/themes/valo/components/_textfield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss
@@ -49,20 +49,12 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
       @if $border-radius {
         $padding-width: $padding-width + ceil($border-radius/3);
       }
-
       $padding-height: round($unit-size/9);
-
       padding: $padding-height $padding-width;
-
-      // Go ask Mozilla why text alignment in text inputs is so wonky
-      .v-ff & {
-        // padding-top: $padding-height - 2px;
-        // padding-bottom: 0;
-      }
     }
 
     @if $background-color and $border {
-      border: valo-border($border, darker-of($background-color, $v-app-background-color));
+      border: valo-border($border, darkest-color($background-color, $v-app-background-color));
     }
 
     @if $gradient == none {
diff --git a/WebContent/VAADIN/themes/valo/components/_widget.scss b/WebContent/VAADIN/themes/valo/components/_widget.scss
index 20e3b2b3c9..f6c0b6462a 100644
--- a/WebContent/VAADIN/themes/valo/components/_widget.scss
+++ b/WebContent/VAADIN/themes/valo/components/_widget.scss
@@ -1,21 +1,15 @@
-// 
+//
 // @mixin valo-widget-style
 @mixin valo-widget-style {
   // Baseline expectations for all Vaadin widgets
   @include box-sizing(border-box);
   display: inline-block;
+  vertical-align: top;
 
-  // Reset, since ordered layout uses text-align for horizotal alignment inside slots and 
+  // Reset, since ordered layout uses text-align for horizotal alignment inside slots and
   // white-space: nowrap; for horizontal layout orientation
   text-align: left;
   white-space: normal;
-  
-  // This is needed to overcome issues with line-boxes (i.e. block elements 
-  // with inline elements as children, whose height is less than the parent's line-height)
-  // See: http://stackoverflow.com/questions/3003051/why-does-the-html5-doctype-mess-with-my-padding
-  // In order to avoid specifying font-size: 0; for all component containers, we need to avoid adding 
-  // vertical-align: top/middle/bottom to any component by default, which will mess up the spacing.
-  line-height: $v-line-height;
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_window.scss b/WebContent/VAADIN/themes/valo/components/_window.scss
index 050a8156d3..d8c10b7347 100644
--- a/WebContent/VAADIN/themes/valo/components/_window.scss
+++ b/WebContent/VAADIN/themes/valo/components/_window.scss
@@ -1,26 +1,29 @@
 $v-window-background-color: $v-panel-background-color !default;
-$v-window-border-radius: null !default;
-$v-window-shadow: 0 4px 12px 6px rgba(0,0,0, $v-shadow-opacity/100%), $v-overlay-shadow !default;
-$v-window-open-animation: null !default;
-$v-window-animations-enabled: $v-animations-enabled !default;
+$v-window-border-radius: $v-border-radius !default;
+$v-window-shadow: 0 4px 20px 6px (v-shade 2), $v-overlay-shadow !default;
+$v-window-animate-in: valo-placeholder-animate-in 140ms, valo-anim-fade-in 140ms !default;
+$v-window-animate-out: valo-placeholder-animate-out 80ms, valo-anim-scale-down-fade-out 80ms !default;
 
 
-@if $v-window-animations-enabled {
+@if $v-animations-enabled {
   @include keyframes(valo-modal-window-indication) {
     0% { opacity: 0; }
     100% { opacity: 1; }
   }
+
+  @include keyframes(valo-anim-scale-down-fade-out) {
+    100% {
+      @include transform(scale(0.8));
+      opacity: 0;
+    }
+  }
 }
 
 
 @mixin valo-window ($primary-stylename: v-window) {
 
   .#{$primary-stylename} {
-    @include valo-overlay-style($background-color: $v-window-background-color);
-
-    @if $v-window-animations-enabled and $v-window-open-animation {
-      @include animation($v-window-open-animation);
-    }
+    @include valo-overlay-style($background-color: $v-window-background-color, $animate-in: $v-window-animate-in, $animate-out: $v-window-animate-out);
 
     @if $v-window-shadow {
       @if $v-window-shadow == none {
@@ -29,16 +32,21 @@ $v-window-animations-enabled: $v-animations-enabled !default;
         box-shadow: valo-bevel-and-shadow($shadow: $v-window-shadow);
       }
     }
-    border-radius: $v-window-border-radius;
-    //border: first-number($v-border) solid valo-panel-border-color();
+    @if $v-window-border-radius != $v-border-radius {
+      border-radius: $v-window-border-radius;
+    }
     padding: 0;
     min-width: 4*$v-unit-size !important;
     min-height: $v-unit-size !important;
-    overflow: hidden !important;
     white-space: nowrap;
+    overflow: hidden !important;
 
-    @if $v-window-animations-enabled {
+    @if $v-animations-enabled {
       @include transition(width 200ms, height 200ms, top 200ms, left 200ms);
+
+      &.#{$primary-stylename}-animate-in {
+        @include transition(none);
+      }
     }
   }
 
@@ -100,19 +108,26 @@ $v-window-animations-enabled: $v-animations-enabled !default;
   .#{$primary-stylename}-maximizebox,
   .#{$primary-stylename}-restorebox {
     position: absolute;
-    z-index: 2;
+    z-index: 3;
     top: 0;
     right: 0;
-    width: $v-unit-size;
+    @include box-sizing(border-box);
+    width: $v-unit-size - round($v-unit-size/9);
     height: $v-unit-size - 1px;
+    background-color: $v-window-background-color;
     line-height: $v-unit-size - 3px;
     text-align: center;
     cursor: pointer;
     font-family: FontAwesome;
     font-size: round($v-font-size * 1.3);
-    @include opacity(.4);
+    color: valo-font-color($v-window-background-color, .4);
+
     @if $v-animations-enabled {
-      @include transition(all 140ms);
+      @include transition(color 140ms);
+    }
+
+    @if $v-window-border-radius > 0 {
+      border-radius: 0 0 0 $v-window-border-radius;
     }
 
     &:focus {
@@ -130,17 +145,29 @@ $v-window-animations-enabled: $v-animations-enabled !default;
   }
 
   .#{$primary-stylename}-closebox {
+    padding-right: round($v-unit-size/9);
     @include valo-window-close-icon-style;
   }
 
   .#{$primary-stylename}-maximizebox,
   .#{$primary-stylename}-restorebox {
-    right: $v-unit-size;
+    right: $v-unit-size - round($v-unit-size/9);
+    padding-left: round($v-unit-size/9);
+
+    + .#{$primary-stylename}-closebox {
+      border-bottom-left-radius: 0;
+    }
   }
 
   .#{$primary-stylename}-restorebox-disabled,
   .#{$primary-stylename}-maximizebox-disabled {
     display: none;
+
+    + .#{$primary-stylename}-closebox {
+      width: $v-unit-size;
+      padding-right: 0;
+      border-bottom-left-radius: $v-window-border-radius;
+    }
   }
 
   .#{$primary-stylename}-maximizebox {
@@ -234,15 +261,10 @@ $v-window-animations-enabled: $v-animations-enabled !default;
   }
 
 
-
-
+  .#{$primary-stylename}-top-toolbar,
   .#{$primary-stylename}-bottom-toolbar {
-    padding: round($v-unit-size/5) round($v-unit-size/3);
-    @include linear-gradient(to bottom, darken($v-background-color, valo-gradient-opacity($v-gradient)/2) 0, $v-background-color round($v-unit-size/10), $fallback: $v-background-color);
-    border-top: valo-border($strength: 0.5);
-
-    .v-expand {
-      overflow: visible;
+    > .v-widget {
+      vertical-align: top;
     }
 
     .v-label {
@@ -254,10 +276,58 @@ $v-window-animations-enabled: $v-animations-enabled !default;
     }
   }
 
+  .#{$primary-stylename}-top-toolbar {
+    &.v-layout {
+      padding: round($v-unit-size/5) round($v-unit-size/3);
+      position: relative;
+      z-index: 2;
+      border-top: valo-border($strength: 0.5);
+      border-bottom: valo-border($strength: 0.5);
+      background-color: $v-background-color;
+    }
+
+    &.v-menubar {
+      margin: round($v-unit-size/3) round($v-unit-size/3) round($v-unit-size/6);
+    }
+
+    &.v-menubar-borderless {
+      padding-left: round($v-unit-size/6);
+      padding-right: round($v-unit-size/6);
+      margin: round($v-unit-size/6) - first-number($v-border) 0;
+    }
+  }
+
+  .#{$primary-stylename}-bottom-toolbar.v-layout {
+    padding: round($v-unit-size/5) round($v-unit-size/3);
+    @include linear-gradient(to bottom, darken($v-background-color, valo-gradient-opacity($v-gradient)/2) 0, $v-background-color round($v-unit-size/10), $fallback: $v-background-color);
+    border-top: valo-border($strength: 0.5);
+    border-radius: 0 0 $v-border-radius $v-border-radius;
+  }
+
+  .v-margin-left.v-margin-right.v-margin-top {
+    .#{$primary-stylename}-top-toolbar {
+      &.v-layout {
+        @include box-sizing(content-box);
+        margin: round($v-unit-size/-3) round($v-unit-size/-3) 0;
+      }
+
+      &.v-menubar {
+        margin: 0;
+      }
+
+      &.v-menubar-borderless {
+        margin: round($v-unit-size/6) - round($v-unit-size/3) round($v-unit-size/6) - round($v-unit-size/3) 0;
+        padding: 0;
+      }
+    }
+  }
+
   .v-margin-left.v-margin-right.v-margin-bottom {
     .#{$primary-stylename}-bottom-toolbar {
-      margin: 0 round($v-unit-size/-3) round($v-unit-size/-3);
-      @include box-sizing(content-box);
+      &.v-layout {
+        @include box-sizing(content-box);
+        margin: 0 round($v-unit-size/-3) round($v-unit-size/-3);
+      }
     }
   }