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

Change-Id: Id3d21cb07bac8cf96c50576647e6b2569b3577a0

15 files changed, 569 insertions, 233 deletions

diff --git a/WebContent/VAADIN/themes/tests-responsive/styles.css b/WebContent/VAADIN/themes/tests-responsive/styles.css
index db92a2a2fc..a06c920fe9 100644
--- a/WebContent/VAADIN/themes/tests-responsive/styles.css
+++ b/WebContent/VAADIN/themes/tests-responsive/styles.css
@@ -98,4 +98,19 @@
 }
 .v-csslayout-width-and-height[height-range~="500px-"][width-range~="600px-"] {
 	background: red;
-}
\ No newline at end of file
+}
+
+/* Styles for ResponsiveLayoutUpdate test */
+.layout-update .change-width {
+  white-space: normal;
+  background: #ddd;
+}
+.layout-update[width-range="0-599px"] .change-width {
+  width: 200px;
+  height: 200px;
+}
+
+.layout-update[width-range="600px-"] .change-width {
+  width: 300px;
+  height: 300px;
+}
diff --git a/WebContent/VAADIN/themes/tests-valo-flatdark/_variables.scss b/WebContent/VAADIN/themes/tests-valo-flatdark/_variables.scss
index f68f9c266d..fa785af8b8 100644
--- a/WebContent/VAADIN/themes/tests-valo-flatdark/_variables.scss
+++ b/WebContent/VAADIN/themes/tests-valo-flatdark/_variables.scss
@@ -1,7 +1,7 @@
 $v-app-loading-text: "Dark & Flat Valo";
 
 $v-background-color: #000;
-$v-focus-color: orange;
+$v-focus-color: #ffa500;
 $v-font-size: 15px;
 $v-font-weight: 600;
 $v-unit-size: 42px;
diff --git a/WebContent/VAADIN/themes/tests-valo/_valotest.scss b/WebContent/VAADIN/themes/tests-valo/_valotest.scss
index f775938e13..7c024b323e 100644
--- a/WebContent/VAADIN/themes/tests-valo/_valotest.scss
+++ b/WebContent/VAADIN/themes/tests-valo/_valotest.scss
@@ -1,9 +1,35 @@
 @mixin valotest {
   @include valo;
 
-  .valo-menu .v-checkbox {
-    margin: round($v-unit-size/2);
-    font-weight: 400;
+  #themeSelect {
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    right: 0;
+    padding: 0 10px;
+    background-color: darken($v-app-background-color, 5%);
+    background-color: rgba(darken($v-app-background-color, 5%), .9);
+    color: valo-font-color($v-app-background-color);
+    border-radius: 0 0 0 $v-border-radius;
+
+    &:before {
+      content: "Theme:";
+    }
+
+    select {
+      background: transparent;
+      color: inherit;
+      border: none;
+      display: inline-block;
+    }
+  }
+
+  .v-ui {
+    @include width-range($max: 800px) {
+      #themeSelect {
+        top: $v-unit-size;
+      }
+    }
   }
 
   $color1: hsl(220, 5%, 38%);
@@ -115,4 +141,4 @@
   .v-accordion-item-color1 .v-accordion-item-caption {
     @include valo-accordion-item-caption-style($background-color: $color2);
   }
-}
\ No newline at end of file
+}
diff --git a/WebContent/VAADIN/themes/tests-valo/img/profile-pic-300px.jpg b/WebContent/VAADIN/themes/tests-valo/img/profile-pic-300px.jpg
new file mode 100644
index 0000000000..8a98078243
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-valo/img/profile-pic-300px.jpg
diff --git a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss
index 4509c23f15..4460aafb21 100644
--- a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss
+++ b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss
@@ -203,6 +203,23 @@
     + .v-button-caption:not(:empty) {
       margin-left: round($v-unit-size/2);
     }
+
+    .v-ie8 & {
+      position: relative;
+      top: auto;
+      right: auto;
+      bottom: auto;
+      left: auto;
+      width: $v-font-size;
+      height: $v-font-size;
+      display: inline-block;
+      vertical-align: middle;
+      margin: 0 round($v-font-size / -2);
+
+      + .v-button-caption {
+        margin-left: round($v-unit-size/2);
+      }
+    }
   }
 
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_nativeselect.scss b/WebContent/VAADIN/themes/valo/components/_nativeselect.scss
index 80e9ab8000..1b7469ed2b 100644
--- a/WebContent/VAADIN/themes/valo/components/_nativeselect.scss
+++ b/WebContent/VAADIN/themes/valo/components/_nativeselect.scss
@@ -23,6 +23,7 @@
 @mixin valo-nativeselect-select-style {
   border: valo-border();
   @include valo-gradient;
+  color: valo-font-color($v-background-color);
 
   &:focus {
     outline: none;
diff --git a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss
index 702bda2ac4..2d32769898 100644
--- a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss
+++ b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss
@@ -48,7 +48,7 @@ $valo-richtextarea-use-font-awesome: true !default;
               "Toggle Strikethrough" "\f0cc",
               "Indent Right" "\f03c",
               "Indent Left" "\f03b",
-              "Insert Horizontal Rule" "—",
+              "Insert Horizontal Rule" "\2014",
               "Insert Ordered List" "\f0cb",
               "Insert Unordered List" "\f0ca",
               "Insert Image" "\f03e",
diff --git a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss
index e05eb08d16..27da1d9cc6 100644
--- a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss
+++ b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss
@@ -1,6 +1,11 @@
 @mixin valo-splitpanel($primary-stylename : v-splitpanel) {
-  // No need for parent selector
-  @include valo-splitpanel-style($primary-stylename: $primary-stylename);
+  .#{$primary-stylename}-horizontal {
+    @include valo-splitpanel-style($primary-stylename: $primary-stylename, $orientation: horizontal);
+  }
+
+  .#{$primary-stylename}-vertical {
+    @include valo-splitpanel-style($primary-stylename: $primary-stylename, $orientation: vertical);
+  }
 }
 
 
@@ -68,14 +73,14 @@
 
   // Allow undefined/auto height for horizontal split
 
-  .#{$primary-stylename}-horizontal {
-    .#{$primary-stylename}-second-container {
+  .#{$primary-stylename}-horizontal > div {
+    > .#{$primary-stylename}-second-container {
       position: static !important;
       display: inline-block;
       vertical-align: top;
     }
 
-    .#{$primary-stylename}-first-container {
+    > .#{$primary-stylename}-first-container {
       display: inline-block;
       vertical-align: top;
     }
@@ -94,76 +99,61 @@
     $orientation: vertical horizontal
   ) {
 
-  @if contains($orientation, horizontal) {
-    .#{$primary-stylename}-hsplitter {
-      width: $splitter-size;
-    }
-  }
-
-  @if contains($orientation, vertical) {
-    .#{$primary-stylename}-vsplitter {
-      height: $splitter-size;
-    }
-  }
-
   $offset: round(($splitter-active-size - $splitter-size)/-2);
 
   @if contains($orientation, horizontal) {
-    .#{$primary-stylename}-hsplitter:after {
-      left: $offset;
-      right: $offset;
-    }
-  }
+    > div > .#{$primary-stylename}-hsplitter {
+      width: $splitter-size;
 
-  @if contains($orientation, vertical) {
-    .#{$primary-stylename}-vsplitter:after {
-      top: $offset;
-      bottom: $offset;
-    }
-  }
+      &:after {
+        left: $offset;
+        right: $offset;
+      }
+
+      div {
+       &:before {
+          @include valo-button-style($shadow: $splitter-shadow);
+          height: auto;
+          padding: 0;
+          border-radius: 0;
+          @include valo-gradient($color: $v-background-color, $direction: to right);
+        }
 
-  @if contains($orientation, horizontal) or contains($orientation, vertical) {
-    .#{$primary-stylename}-hsplitter div,
-    .#{$primary-stylename}-vsplitter div {
-      &:before {
-        @include valo-button-style($shadow: $splitter-shadow);
-        height: auto;
-        padding: 0;
-        border-radius: 0;
+        @if $splitter-handle-visible {
+          &:after {
+            @include valo-splitpanel-splitter-handle-style($horizontal: true);
+          }
+        }
       }
     }
-  }
 
-  @if contains($orientation, horizontal) {
-    .#{$primary-stylename}-hsplitter div {
-      &:before {
-        $color: $v-background-color;
-        @include valo-gradient($color: $color, $direction: to right);
-      }
+    > div > .#{$primary-stylename}-second-container {
+      margin-left: $splitter-size;
     }
   }
 
-  @if $splitter-handle-visible {
-    .#{$primary-stylename}-vsplitter div,
-    .#{$primary-stylename}-hsplitter div {
+  @if contains($orientation, vertical) {
+    > div > .#{$primary-stylename}-vsplitter {
+      height: $splitter-size;
+
       &:after {
-        @include valo-splitpanel-splitter-handle-style;
+        top: $offset;
+        bottom: $offset;
       }
-    }
 
-    @if contains($orientation, horizontal) {
-      .#{$primary-stylename}-hsplitter div {
-        &:after {
-          @include valo-splitpanel-splitter-handle-style($horizontal: true, $include-common: false);
+      div {
+       &:before {
+          @include valo-button-style($shadow: $splitter-shadow);
+          height: auto;
+          padding: 0;
+          border-radius: 0;
         }
-      }
-    }
-  }
 
-  @if contains($orientation, horizontal) {
-    &.#{$primary-stylename}-horizontal {
-      .#{$primary-stylename}-second-container {
-        margin-left: $splitter-size;
+        @if $splitter-handle-visible {
+          &:after {
+            @include valo-splitpanel-splitter-handle-style;
+          }
+        }
       }
     }
   }
diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss
index deef084561..2335c59873 100644
--- a/WebContent/VAADIN/themes/valo/components/_table.scss
+++ b/WebContent/VAADIN/themes/valo/components/_table.scss
@@ -162,6 +162,7 @@ $v-table-background-color: null !default;
   .#{$primary-stylename}-cell-content {
     border-left: $v-table-border-width solid $border-color;
     overflow: hidden;
+    height: $v-table-row-height;
 
     &:first-child {
       border-left: none;
@@ -181,6 +182,10 @@ $v-table-background-color: null !default;
     padding: $vertical-padding $v-table-cell-padding-horizontal;
     @include box-sizing(border-box);
     margin-right: 0 !important;
+
+    > .v-widget {
+      margin: round($vertical-padding / -2) round($v-table-cell-padding-horizontal / -2);
+    }
   }
 
   .#{$primary-stylename}-body {
@@ -429,6 +434,7 @@ $v-table-background-color: null !default;
     content: "";
     display: block;
     position: absolute;
+    z-index: 1;
     height: $v-table-row-height + $v-table-border-width;
     left: 0;
     right: 0;
@@ -588,8 +594,16 @@ $v-table-background-color: null !default;
     height: $row-height;
   }
 
+  .#{$primary-stylename}-cell-content {
+    height: $row-height;
+  }
+
   .#{$primary-stylename}-cell-wrapper {
     padding: $vertical-padding $cell-padding-horizontal;
+
+    > .v-widget {
+      margin: round($vertical-padding / -2) round($cell-padding-horizontal / -2);
+    }
   }
 
   .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator,
diff --git a/WebContent/VAADIN/themes/valo/components/_textarea.scss b/WebContent/VAADIN/themes/valo/components/_textarea.scss
index 3b610251d3..79bdb04d3c 100644
--- a/WebContent/VAADIN/themes/valo/components/_textarea.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textarea.scss
@@ -47,9 +47,9 @@
                                 $shadow: $shadow,
 
                                 $states: $states);
-  //display: block; // Fixes extra white-space under the textarea element
   height: auto;
   resize: none;
+  white-space: pre-wrap; // Restore default, because .v-widget sets it to normal
 
   .v-ie8 &,
   .v-ie9 & {
diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss
index c314a0c855..39dfa3420e 100644
--- a/WebContent/VAADIN/themes/valo/components/_textfield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss
@@ -1,4 +1,5 @@
 $v-textfield-background-color: if(is-dark-color($v-app-background-color), darken($v-app-background-color, 4%), lighten($v-app-background-color, 8%)) !default;
+$v-textfield-background-color--readonly: $v-app-background-color;
 $v-textfield-bevel: inset 0 1px 0 v-shade !default;
 $v-textfield-shadow: 0 1px 0 (v-tint 2) !default;
 $v-textfield-font-weight: 400 !default;
@@ -12,7 +13,6 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 
 
-
 @mixin valo-textfield-style (
     $unit-size        : $v-unit-size,
     $padding          : null, // Computed by default
@@ -134,10 +134,12 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 
 @mixin valo-textfield-readonly-style {
-  background: transparent;
+  background: $v-textfield-background-color--readonly;
+  color: valo-font-color($v-textfield-background-color--readonly)
   @include box-shadow(none);
   &:focus {
-    @include valo-focus-style($include-box-shadow: true);
+    box-shadow: none;
+    border-color: first-color(valo-border($v-textfield-border, $v-textfield-background-color--readonly));
   }
 }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss
index 1327320cd4..7e00f4ec09 100644
--- a/WebContent/VAADIN/themes/valo/components/_tree.scss
+++ b/WebContent/VAADIN/themes/valo/components/_tree.scss
@@ -51,7 +51,6 @@ $v-tree-expand-animation-enabled: false !default;
       opacity: 0;
 
       .v-ie8 & {
-        content: "+";
         position: static;
         margin-left: -1.9em;
         vertical-align: top;
@@ -72,6 +71,9 @@ $v-tree-expand-animation-enabled: false !default;
     overflow: hidden;
     white-space: nowrap;
 
+    // Mainly to satisty IE8 (doesn't harm other browsers)
+    vertical-align: top;
+
     & > div {
       display: inline-block;
       width: 100%;
diff --git a/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss b/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss
index f3377f232c..8bd26e2b10 100644
--- a/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss
+++ b/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss
@@ -1,214 +1,465 @@
-$valo-menu-background-color: null !default;
+$valo-menu-background-color: scale-color($v-app-background-color, $lightness: if(color-luminance($v-app-background-color) < 10, 15%, -70%)) !default;
 
-@mixin valo-menu {
-
-  $bg-lightness: if(color-luminance($v-app-background-color) < 10, 15%, -70%);
-  $bg: $valo-menu-background-color or scale-color($v-app-background-color, $lightness: $bg-lightness);
-  $font-color: valo-font-color($bg, 0.5);
+@mixin valo-menu ($bg: $valo-menu-background-color) {
 
   .valo-menu {
+    @include valo-menu-style($bg);
+  }
+
+  .valo-menu-toggle {
+    display: none;
+    position: fixed;
+    z-index: 200;
+    $offset: floor(($v-unit-size - $v-unit-size * 0.8) / 2);
+    top: $offset;
+    left: $offset;
+    min-width: 0;
+  }
+
+  .valo-menu-part {
+    border-left: valo-border($color: $bg, $strength: 0.6);
     height: 100%;
-    @include linear-gradient(to left, (scale-color($bg, $lightness: valo-gradient-opacity()*-1) 0%, $bg round($v-unit-size/4)), $fallback: $bg);
-    color: $font-color;
-    font-size: round($v-font-size * 0.9);
-    line-height: round($v-unit-size * 0.8);
-    border-right: valo-border($color: $bg);
+    padding-bottom: $v-unit-size;
+    overflow: auto;
+
+    &:first-child {
+      border-left: none;
+    }
+  }
+
+  .valo-menu-title,
+  .valo-menu-subtitle,
+  .valo-menu-item {
+    display: block;
+    line-height: inherit;
     white-space: nowrap;
+    position: relative;
+
+    .valo-menu-badge {
+      position: absolute;
+      right: round($v-unit-size/2);
+    }
+  }
 
-    .valo-menu-part {
-      border-left: valo-border($color: $bg, $strength: 0.6);
-      height: 100%;
-      padding-bottom: $v-unit-size;
-      overflow: auto;
+  .valo-menu-title {
+    @include valo-menu-title-style;
+    text-align: center;
 
-      &:first-child {
-        border-left: none;
-      }
+    .v-menubar.v-menubar {
+      background: transparent;
+      border-color: first-color(valo-border($color: $v-selection-color));
+      color: inherit;
+      @include box-shadow(none);
+      text-shadow: inherit;
     }
 
-    .valo-menu-title,
-    .valo-menu-subtitle,
-    .valo-menu-item {
-      display: block;
-      line-height: inherit;
-      white-space: nowrap;
-      position: relative;
+    .v-menubar-menuitem {
+      background: transparent;
+      @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-selection-color, $gradient: $v-gradient));
+      text-shadow: inherit;
+      font-size: $v-font-size;
+      border-color: inherit;
+    }
 
-      .valo-menu-badge {
-        position: absolute;
-        right: round($v-unit-size/2);
-      }
+    h1, .v-label-h1,
+    h2, .v-label-h2,
+    h3, .v-label-h3,
+    h4, .v-label-h4 {
+      margin-top: 0;
+      margin-bottom: 0;
+      color: inherit;
     }
+  }
 
-    .valo-menu-title {
-      line-height: 1.2;
-      @include valo-gradient($color: $v-selection-color);
-      $font-color: valo-font-color($v-selection-color, 1);
-      color: $font-color;
-      text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color);
-      padding: round($v-unit-size/3) round($v-unit-size/2);
-      font-size: round($v-font-size * 0.9);
-      border-bottom: valo-border($color: $v-selection-color);
-      @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow));
-
-      .v-menubar {
-        background: transparent;
-        border-color: first-color(valo-border($color: $v-selection-color));
-        color: inherit;
-        @include box-shadow(none);
-        text-shadow: inherit;
+  .v-menubar-user-menu {
+    @include valo-menubar-borderless-style;
+    margin: round($v-unit-size/2) round($v-unit-size/5);
+    display: block;
+    text-align: center;
+    height: auto;
+    color: inherit;
+
+    > .v-menubar-menuitem {
+      color: inherit;
+      white-space: normal;
+      line-height: 1.4;
+
+      img.v-icon {
+        width: round($v-unit-size * 1.5);
+        height: round($v-unit-size * 1.5);
+        border-radius: ceil($v-unit-size * 1.5 / 2);
+        box-shadow: valo-bevel-and-shadow($bevel: null, $shadow: $v-shadow);
+        display: block;
+        margin: 0 auto .3em;
       }
+    }
 
-      .v-menubar-menuitem {
-        background: transparent;
-        @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-selection-color, $gradient: $v-gradient));
-        text-shadow: inherit;
-        font-size: $v-font-size;
-        border-color: inherit;
-      }
+    .v-menubar-menuitem-selected {
+      background: transparent;
+    }
+  }
+
+  .valo-menu-subtitle {
+    @include valo-menu-subtitle-style($bg);
+
+    .valo-menu-badge {
+      color: mix(valo-font-color($bg), $v-selection-color);
     }
+  }
+
+  .valo-menuitems {
+    display: block;
+  }
+
+  .valo-menu-item {
+    @include valo-menu-item-style($bg);
+  }
+
+  .valo-menu-part.large-icons {
+    @include valo-menu-large-icons-style($bg);
+  }
+
+  .valo-menu-logo {
+    @include valo-menu-logo-style;
+  }
+
+  @include valo-menu-responsive;
+
+}
 
-    .valo-menu-subtitle {
-      color: valo-font-color($bg, 0.33);
-      margin: round($v-unit-size/5) 0 round($v-unit-size/5) round($v-unit-size/2);
-      border-bottom: valo-border($color: $bg, $strength: 0.5, $border: first-number($v-border) solid v-tone);
 
-      .valo-menu-badge {
-        color: mix(valo-font-color($bg), $v-selection-color);
+@mixin valo-menu-responsive {
+  .v-ui {
+    @include width-range($min: 801px, $max: 1100px) {
+      .valo-menu-part {
+        @include valo-menu-large-icons-style($valo-menu-background-color);
       }
     }
 
-    .valo-menu-item {
-      outline: none;
-      font-weight: $v-font-weight + 100;
-      padding: 0 round($v-unit-size) 0 round($v-unit-size/2);
-      cursor: pointer;
-      position: relative;
-      text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $bg, $offset: -2px);
-      @include transition(background-color 300ms, color 60ms);
+    @include width-range($max: 800px) {
+      padding-top: $v-unit-size;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+
+      .v-loading-indicator {
+        top: $v-unit-size;
+      }
+
+      > .v-widget {
+        position: relative !important
+      }
 
-      $diff: color-luminance($bg) - color-luminance($v-selection-color);
-      $active-color: $v-selection-color;
-      @if abs($diff) < 30 {
-        $active-color: lighten($v-selection-color, 10%);
+      .valo-menu {
+        border-right: none;
       }
 
-      .valo-menu-item-caption {
-        vertical-align: middle;
+      .valo-menu-toggle {
         display: inline-block;
-        width: 90%;
-        max-width: 15em;
-        padding-right: round($v-unit-size/2);
-        text-overflow: ellipsis;
-        overflow: hidden;
       }
 
-      &.selected {
-        background: darken($bg, 3%);
+      .valo-menu-title {
+        position: fixed;
+        z-index: 100;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: $v-unit-size !important;
+        padding-top: 0;
+        padding-bottom: 0;
+      }
 
-        .v-icon {
-          color: $active-color;
+      .valo-menu .v-menubar-user-menu {
+        position: fixed;
+        z-index: 100;
+        top: 0;
+        right: 0;
+        margin: 0;
+        padding: 0;
+        height: $v-unit-size;
+        color: valo-font-color($v-selection-color, 0.5);
+
+        .v-menubar-menuitem {
+          line-height: $v-unit-size - 1px;
         }
 
-        .valo-menu-badge {
-          @include valo-gradient($color: $active-color);
-          color: valo-font-color($active-color);
+        img.v-icon {
+          display: inline-block;
+          margin: 0 round($v-unit-size / 6) 0 0;
+          width: round($v-unit-size / 2);
+          height: round($v-unit-size / 2);
+          border-radius: ceil($v-unit-size / 4);
         }
       }
 
-      &:hover,
-      &.selected {
-        color: valo-font-color($bg, 1);
+      .valo-menuitems {
+        @include valo-menu-style;
+        position: fixed;
+        z-index: 200;
+        top: $v-unit-size;
+        bottom: 0;
+        height: auto;
+        max-width: 100%;
+        overflow: auto;
+        padding: round($v-unit-size / 2) 0;
+        @include transform(translatex(-100%));
+        @include transition(all 300ms);
       }
 
-      // Font icons
-      span.v-icon {
-        min-width: 1em;
-        margin-right: round($v-unit-size/2);
-        text-align: center;
-        vertical-align: middle;
+      .valo-menu-visible .valo-menuitems {
+        @include transform(translatex(0%));
+      }
+    }
 
-        + span {
-          margin-left: 0;
-        }
+    @include width-range($max: 500px) {
+      .valo-menu-toggle .v-button-caption {
+        display: none;
       }
 
-      .valo-menu-badge {
-        background: lighten($bg, 5%);
-        @include transition(background-color 300ms);
-        line-height: 1;
-        padding: round($v-unit-size/9) round($v-unit-size/6);
-        min-width: round($v-font-size/1.5);
-        text-align: center;
-        top: (round($v-unit-size * 0.8) - round($v-font-size * 0.9) - round($v-unit-size/9) * 2) / 2;
-        border-radius: $v-border-radius;
+      .valo-menu .v-menubar-user-menu .v-menubar-menuitem-caption {
+        display: inline-block;
+        width: round($v-unit-size / 2);
+        overflow: hidden;
       }
     }
+  }
+}
 
-    .valo-menu-part.large-icons {
-      $bg: darken($bg, 4%);
-      background-color: $bg;
-
-      .valo-menu-item {
-        font-size: $v-unit-size;
-        line-height: 1;
-        padding: round($v-unit-size/3);
-        min-width: $v-unit-size * 2;
-        max-width: $v-unit-size * 3;
-        text-align: center;
-
-        .valo-menu-item-caption {
-          display: block;
-          width: auto;
-          margin: .3em 0 0;
-          padding: 0;
-          font-size: round($v-font-size * 0.7);
-        }
 
-        .v-icon {
-          margin: 0;
-        }
 
-        span.v-icon {
-          opacity: 0.8;
-        }
+@mixin valo-menu-style ($bg: $valo-menu-background-color) {
+  height: 100%;
+  @include linear-gradient(to left, (scale-color($bg, $lightness: valo-gradient-opacity()*-1) 0%, $bg round($v-unit-size/4)), $fallback: $bg);
+  color: valo-font-color($bg, 0.5);
+  font-size: round($v-font-size * 0.9);
+  line-height: round($v-unit-size * 0.8);
+  border-right: valo-border($color: $bg);
+  white-space: nowrap;
+}
 
-        &.selected {
-          background: darken($bg, 3%);
 
-          .v-icon {
-            opacity: 1;
-          }
 
-          .valo-menu-badge {
-            border-color: darken($bg, 3%);
-          }
-        }
+@mixin valo-menu-title-style {
+  line-height: 1.2;
+  @include valo-gradient($color: $v-selection-color);
+  $font-color: valo-font-color($v-selection-color, 1);
+  color: $font-color;
+  text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color);
+  padding: round($v-unit-size/3) round($v-unit-size/2);
+  font-size: round($v-font-size * 0.9);
+  border-bottom: valo-border($color: $v-selection-color);
+  @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow));
+}
 
-        .valo-menu-badge {
-          padding-left: round($v-unit-size/9);
-          padding-right: round($v-unit-size/9);
-          top: round($v-unit-size/5);
-          right: round($v-unit-size/5);
-          border: 2px solid $bg;
-        }
-      }
+
+
+@mixin valo-menu-subtitle-style ($bg: $valo-menu-background-color) {
+  color: valo-font-color($bg, 0.33);
+  margin: round($v-unit-size/5) 0 round($v-unit-size/5) round($v-unit-size/2);
+  border-bottom: valo-border($color: $bg, $strength: 0.5, $border: first-number($v-border) solid v-tone);
+}
+
+
+
+@mixin valo-menu-item-style ($bg: $valo-menu-background-color) {
+  $font-color: valo-font-color($bg, 0.5);
+  outline: none;
+  font-weight: $v-font-weight + 100;
+  padding: 0 round($v-unit-size) 0 round($v-unit-size/2);
+  cursor: pointer;
+  position: relative;
+  text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $bg, $offset: -2px);
+  @include transition(background-color 300ms, color 60ms);
+
+  $diff: color-luminance($bg) - color-luminance($v-selection-color);
+  $active-color: $v-selection-color;
+  @if abs($diff) < 30 {
+    $active-color: lighten($v-selection-color, 10%);
+  }
+
+  [class*="caption"] {
+    vertical-align: middle;
+    display: inline-block;
+    width: 90%;
+    max-width: 15em;
+    padding-right: round($v-unit-size/2);
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  &.selected {
+    background: darken($bg, 3%);
+
+    .v-icon {
+      color: $active-color;
+    }
+
+    [class*="badge"] {
+      @include valo-badge-style($states: active, $active-color: $active-color);
+    }
+  }
+
+  &:focus,
+  &:hover,
+  &.selected {
+    color: valo-font-color($bg, 1);
+  }
+
+  // Font icons
+  span.v-icon {
+    min-width: 1em;
+    margin-right: round($v-unit-size/2);
+    text-align: center;
+    vertical-align: middle;
+
+    @if $v-gradient {
+      -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(rgba(0, 0, 0, 0.75)));
+    }
+
+    + span {
+      margin-left: 0;
     }
+  }
 
-    .valo-menu-logo {
+  [class*="badge"] {
+    @include valo-badge-style($states: inactive, $background-color: lighten($bg, 5%));
+  }
+}
+
+
+
+
+@mixin valo-badge-style ($states: inactive active, $background-color: null, $active-color: $v-selection-color) {
+  @if contains($states, inactive) {
+    background-color: $background-color;
+    @include transition(background-color 300ms);
+    line-height: 1;
+    padding: round($v-unit-size/9) round($v-unit-size/6);
+    min-width: round($v-font-size/1.5);
+    text-align: center;
+    top: (round($v-unit-size * 0.8) - round($v-font-size * 0.9) - round($v-unit-size/9) * 2) / 2;
+    border-radius: $v-border-radius;
+  }
+
+  @if contains($states, active) {
+    @include valo-gradient($color: $active-color);
+    color: valo-font-color($active-color);
+  }
+}
+
+
+
+@mixin valo-menu-large-icons-style ($bg: darken($valo-menu-background-color, 4%)) {
+  background-color: $bg;
+  min-width: $v-unit-size * 2;
+  max-width: $v-unit-size * 3;
+
+  .valo-menu-title {
+    font-size: round($v-font-size * 0.75);
+
+    .v-label-undef-w {
+      white-space: normal;
+    }
+  }
+
+  .v-menubar-user-menu {
+    margin-left: 0;
+    margin-right: 0;
+    font-size: round($v-font-size * 0.7);
+
+    img.v-icon {
+      width: round($v-unit-size/1.3);
+      height: round($v-unit-size/1.3);
+    }
+  }
+
+  [class*="subtitle"] {
+    margin: round($v-unit-size/4) 0 0;
+    padding: round($v-unit-size/5) round($v-unit-size/1.5) round($v-unit-size/5) round($v-unit-size/4);
+    line-height: 1;
+    border: none;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    background: darken($bg, 6%);
+    font-size: round($v-font-size * 0.8);
+    box-shadow: valo-bevel-and-shadow($shadow: $v-shadow);
+
+    [class*="badge"] {
+      right: round($v-unit-size/4);
+    }
+
+    + .valo-menu-item {
+      border-top: none;
+    }
+  }
+
+  .valo-menu-item {
+    display: block;
+    font-size: round($v-font-size * 1.6);
+    line-height: 1;
+    padding: round($v-unit-size/3);
+    text-align: center;
+    border-top: valo-border($color: $bg, $strength: 0.2, $border: first-number($v-border) solid v-tone);
+
+    &:first-child {
+      border-top: none;
+    }
+
+    [class*="caption"] {
       display: block;
-      overflow: hidden;
-      width: round($v-unit-size * 1.2) !important;
-      height: round($v-unit-size * 1.2);
-      border-radius: $v-border-radius;
-      text-align: center;
-      @include valo-gradient($color: $v-selection-color);
-      color: valo-font-color($v-selection-color, 1);
-      font-size: round($v-unit-size/1.5);
-      line-height: round($v-unit-size * 1.2);
-      margin: round($v-unit-size/2) auto;
-      @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow));
+      width: auto;
+      margin: .3em 0 0;
+      padding: 0;
+      font-size: round($v-font-size * 0.7);
+      line-height: 1.3;
+    }
+
+    .v-icon {
+      margin: 0;
+    }
+
+    span.v-icon {
+      opacity: 0.8;
+    }
+
+    &.selected {
+      background: darken($bg, 3%);
+
+      .v-icon {
+        opacity: 1;
+      }
+
+      [class*="badge"] {
+        border-color: darken($bg, 3%);
+      }
+    }
+
+    [class*="badge"] {
+      padding-left: round($v-unit-size/9);
+      padding-right: round($v-unit-size/9);
+      top: round($v-unit-size/5);
+      right: round($v-unit-size/5);
+      border: 2px solid $bg;
     }
   }
+}
+
 
+
+@mixin valo-menu-logo-style {
+  display: block;
+  overflow: hidden;
+  width: round($v-unit-size * 1.2) !important;
+  height: round($v-unit-size * 1.2);
+  border-radius: $v-border-radius;
+  text-align: center;
+  @include valo-gradient($color: $v-selection-color);
+  color: valo-font-color($v-selection-color, 1);
+  font-size: round($v-unit-size/1.5);
+  line-height: round($v-unit-size * 1.2);
+  margin: round($v-unit-size/2) auto;
+  @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow));
+
+  &:focus {
+    outline: none;
+  }
 }
diff --git a/WebContent/VAADIN/themes/valo/shared/_global.scss b/WebContent/VAADIN/themes/valo/shared/_global.scss
index 71d72b367c..ad5b9297cf 100644
--- a/WebContent/VAADIN/themes/valo/shared/_global.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_global.scss
@@ -13,6 +13,11 @@ $valo-global-included: false !default;
 @mixin valo-global {
   @if $valo-global-included == false {
 
+    // Version info for the debug window
+    .v-vaadin-version:after {
+      content: "@version@";
+    }
+
     // Core widget styles come before any other component (and are always included),
     // so that it has the least specificity
     @include valo-widget;
@@ -304,7 +309,6 @@ $valo-shared-pathPrefix: null;
     font: inherit;
     font-weight: 400;
     line-height: inherit;
-    color: inherit;
     padding: round($v-unit-size/8);
     margin: 0;
     border-radius: $v-border-radius;
diff --git a/WebContent/VAADIN/themes/valo/util/_util.scss b/WebContent/VAADIN/themes/valo/util/_util.scss
index 2f7b28b3ad..a510695560 100644
--- a/WebContent/VAADIN/themes/valo/util/_util.scss
+++ b/WebContent/VAADIN/themes/valo/util/_util.scss
@@ -25,3 +25,17 @@
   -webkit-touch-callout: none;
   cursor: pointer;
 }
+
+
+
+@mixin width-range($min: 0, $max: null) {
+  &[width-range~="#{$min}-#{$max}"] {
+    @content;
+  }
+}
+
+@mixin height-range($min: 0, $max: null) {
+  &[height-range~="#{$min}-#{$max}"] {
+    @content;
+  }
+}