Split common-stylenames to individual component files (#14374)

Moved notification and valo-menu styles to the components folder as
well, and added them to the $v-included-components list.

Additional styles are now also controlled with a list variable, which
lists all components whose additional styles should be included in the
build.

Change-Id: Ifb8d49d71622decf8fa0d4875985fcafd908a1f8

23 files changed, 1399 insertions, 114 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_accordion.scss b/WebContent/VAADIN/themes/valo/components/_accordion.scss
index 350c704eb4..82a4396828 100644
--- a/WebContent/VAADIN/themes/valo/components/_accordion.scss
+++ b/WebContent/VAADIN/themes/valo/components/_accordion.scss
@@ -1,4 +1,4 @@
-@mixin valo-accordion ($primary-stylename: v-accordion) {
+@mixin valo-accordion ($primary-stylename: v-accordion, $include-additional-styles: contains($v-included-additional-styles, accordion)) {
   .#{$primary-stylename} {
     @include valo-accordion-style;
   }
@@ -14,6 +14,20 @@
   .#{$primary-stylename}-item-content {
     @include valo-accordion-item-content-style;
   }
+
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-borderless {
+      border: none;
+      border-radius: 0;
+      @include box-shadow(none);
+
+      > .#{$primary-stylename}-item {
+        border-radius: 0;
+      }
+    }
+
+  }
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_all.scss b/WebContent/VAADIN/themes/valo/components/_all.scss
index f20e8326bf..b41a2f3308 100644
--- a/WebContent/VAADIN/themes/valo/components/_all.scss
+++ b/WebContent/VAADIN/themes/valo/components/_all.scss
@@ -20,6 +20,7 @@
 @import "menubar";
 @import "nativebutton";
 @import "nativeselect";
+@import "notification";
 @import "optiongroup";
 @import "orderedlayout";
 @import "panel";
@@ -38,6 +39,7 @@
 @import "upload";
 @import "widget";
 @import "window";
+@import "valo-menu";
 
 
 @mixin valo-components {
@@ -207,4 +209,12 @@
     @include valo-upload;
   }
 
+  @if v-is-included(notification) {
+    @include valo-notification;
+  }
+
+  @if v-is-included(valo-menu) {
+    @include valo-menu;
+  }
+
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss
index 4930742dad..ec74f70eaf 100644
--- a/WebContent/VAADIN/themes/valo/components/_button.scss
+++ b/WebContent/VAADIN/themes/valo/components/_button.scss
@@ -1,8 +1,83 @@
-@mixin valo-button ($primary-stylename: v-button) {
+@mixin valo-button ($primary-stylename: v-button, $include-additional-styles: contains($v-included-additional-styles, button)) {
   .#{$primary-stylename} {
     @include valo-button-static-style;
     @include valo-button-style;
   }
+
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-primary {
+      @include valo-button-style($background-color: $v-selection-color);
+      $padding-width: round($v-unit-size/2);
+      padding: 0 $padding-width;
+      font-weight: bold;
+      $min-width: round($v-unit-size * 2.2);
+      min-width: $min-width;
+
+      // IE8 + border-box + min-width == fail
+      .v-ie8 & {
+        min-width: $min-width - ($padding-width * 2);
+      }
+    }
+
+    .#{$primary-stylename}-friendly {
+      @include valo-button-style($background-color: $v-friendly-color);
+    }
+
+    .#{$primary-stylename}-danger {
+      @include valo-button-style($background-color: $v-error-indicator-color);
+    }
+
+    .#{$primary-stylename}-borderless {
+      @include valo-button-borderless-style;
+    }
+
+    .#{$primary-stylename}-borderless-colored {
+      @include valo-button-borderless-style($font-color: $v-selection-color);
+    }
+
+    .#{$primary-stylename}-quiet {
+      @include valo-button-quiet-style;
+    }
+
+    .#{$primary-stylename}-link {
+      @include valo-button-borderless-style;
+      @include valo-link-style;
+    }
+
+    .#{$primary-stylename}-small {
+      @include valo-button-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--small, $font-weight: null);
+    }
+
+    .#{$primary-stylename}-large {
+      @include valo-button-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--large, $font-weight: null);
+    }
+
+    .#{$primary-stylename}-icon-align-right {
+      @include valo-button-icon-align-right-style;
+    }
+
+    .#{$primary-stylename}-icon-align-top {
+      @include valo-button-icon-align-top-style;
+    }
+
+    .#{$primary-stylename}-icon-only {
+      width: $v-unit-size;
+      padding: 0;
+
+      &.#{$primary-stylename}-small {
+        width: $v-unit-size--small;
+      }
+
+      &.#{$primary-stylename}-large {
+        width: $v-unit-size--large;
+      }
+
+      .#{$primary-stylename}-caption {
+        display: none;
+      }
+    }
+  }
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss
index 0ee703c372..e74781fc46 100644
--- a/WebContent/VAADIN/themes/valo/components/_checkbox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss
@@ -1,9 +1,22 @@
-@mixin valo-checkbox ($primary-stylename: v-checkbox) {
+@mixin valo-checkbox ($primary-stylename: v-checkbox, $include-additional-styles: contains($v-included-additional-styles, checkbox)) {
 
   .#{$primary-stylename} {
     @include valo-checkbox-style;
   }
 
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-small {
+      @include valo-checkbox-style($unit-size: $v-unit-size--small);
+      font-size: $v-font-size--small;
+    }
+
+    .#{$primary-stylename}-large {
+      @include valo-checkbox-style($unit-size: $v-unit-size--large);
+      font-size: $v-font-size--large;
+    }
+  }
+
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index 51ec65e55f..e514dc8e20 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -1,4 +1,4 @@
-@mixin valo-combobox ($primary-stylename: v-filterselect) {
+@mixin valo-combobox ($primary-stylename: v-filterselect, $include-additional-styles: contains($v-included-additional-styles, combobox)) {
 
   .#{$primary-stylename} {
     position: relative;
@@ -59,6 +59,35 @@
     }
   }
 
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-borderless {
+      .#{$primary-stylename}-input {
+        @include valo-textfield-borderless-style;
+      }
+      .#{$primary-stylename}-button {
+        border: none;
+      }
+    }
+
+    .#{$primary-stylename}-align-right input {
+      text-align: right;
+    }
+
+    .#{$primary-stylename}-align-center input {
+      text-align: center;
+    }
+
+    .#{$primary-stylename}-small {
+      @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null);
+      font-size: $v-font-size--small;
+    }
+
+    .#{$primary-stylename}-large {
+      @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null);
+      font-size: $v-font-size--large;
+    }
+  }
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_csslayout.scss b/WebContent/VAADIN/themes/valo/components/_csslayout.scss
index 3cefbb0a4b..ee7cd933c5 100644
--- a/WebContent/VAADIN/themes/valo/components/_csslayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_csslayout.scss
@@ -1,63 +1,74 @@
-@mixin valo-csslayout ($primary-stylename: v-csslayout){
+@mixin valo-csslayout ($primary-stylename: v-csslayout, $include-additional-styles: contains($v-included-additional-styles, csslayout)){
+  @if $include-additional-styles {
+    .#{$primary-stylename}-well {
+      @include valo-panel-well-style;
+      @include valo-panel-adjust-content-margins;
+    }
 
-}
+    .#{$primary-stylename}-card {
+      @include valo-panel-style;
+      @include valo-panel-adjust-content-margins;
+    }
 
+    .#{$primary-stylename}-v-component-group {
+      @include valo-component-group($primary-stylename);
+    }
+  }
+}
 
-@mixin valo-component-group ($primary-stylename: v-csslayout) {
-  .#{$primary-stylename}-v-component-group {
-    white-space: nowrap;
-    position: relative;
 
-    @if $v-border-radius > 0 {
-      .v-widget ~ .v-widget:not(:last-child) {
-        border-radius: 0;
-      }
+@mixin valo-component-group {
+  white-space: nowrap;
+  position: relative;
 
-      .v-widget:last-child {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
+  @if $v-border-radius > 0 {
+    .v-widget ~ .v-widget:not(:last-child) {
+      border-radius: 0;
+    }
 
-      .v-widget:first-child,
-      .v-caption:first-child + .v-widget {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
+    .v-widget:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
 
-      .v-widget ~ .v-widget.first.first {
-        border-radius: $v-border-radius 0 0 $v-border-radius;
-      }
+    .v-widget:first-child,
+    .v-caption:first-child + .v-widget {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
 
-      .v-widget ~ .v-widget.last.last {
-        border-radius: 0 $v-border-radius $v-border-radius 0;
-      }
+    .v-widget ~ .v-widget.first.first {
+      border-radius: $v-border-radius 0 0 $v-border-radius;
     }
 
-    // Assume most components have borders.
-    // This is just a best-guess, will need fine-tuning if border-widths vary from widget-to-widget
-    .v-widget {
-      vertical-align: middle;
+    .v-widget ~ .v-widget.last.last {
+      border-radius: 0 $v-border-radius $v-border-radius 0;
+    }
+  }
 
-      $v-border-width: first-number($v-border);
+  // Assume most components have borders.
+  // This is just a best-guess, will need fine-tuning if border-widths vary from widget-to-widget
+  .v-widget {
+    vertical-align: middle;
 
-      @if $v-border-width > 0 {
-        margin-left: -$v-border-width;
-      } @else {
-        margin-left: 1px;
-      }
+    $v-border-width: first-number($v-border);
 
-      &:first-child {
-        margin-left: 0;
-      }
+    @if $v-border-width > 0 {
+      margin-left: -$v-border-width;
+    } @else {
+      margin-left: 1px;
+    }
 
-      // Focused component should be on top
-      &:focus,
-      &[class*="focus"],
-      [class*="focus"] {
-        position: relative;
-        z-index: 5;
-      }
+    &:first-child {
+      margin-left: 0;
     }
 
+    // Focused component should be on top
+    &:focus,
+    &[class*="focus"],
+    [class*="focus"] {
+      position: relative;
+      z-index: 5;
+    }
   }
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss
index b1f3a78af6..a2b67b3f8c 100644
--- a/WebContent/VAADIN/themes/valo/components/_datefield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss
@@ -1,4 +1,4 @@
-@mixin valo-datefield ($primary-stylename: v-datefield) {
+@mixin valo-datefield ($primary-stylename: v-datefield, $include-additional-styles: contains($v-included-additional-styles, datefield)) {
 
   .#{$primary-stylename} {
     position: relative;
@@ -34,12 +34,42 @@
     width: round($v-font-size * 6.5);
   }
 
-  .v-datefield-popup {
+  .#{$primary-stylename}-popup {
     @include valo-datefield-popup-style;
   }
 
   @include valo-datefield-calendarpanel-style;
 
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-borderless {
+      .#{$primary-stylename}-textfield {
+        @include valo-textfield-borderless-style;
+      }
+      .#{$primary-stylename}-button {
+        border: none;
+      }
+    }
+
+    .#{$primary-stylename}-align-right input {
+      text-align: right;
+    }
+
+    .#{$primary-stylename}-align-center input {
+      text-align: center;
+    }
+
+    .#{$primary-stylename}-small {
+      @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null);
+      font-size: $v-font-size--small;
+    }
+
+    .#{$primary-stylename}-large {
+      @include valo-datefield-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $border: null, $background-color: null);
+      font-size: $v-font-size--large;
+    }
+  }
+
 }
 
 
@@ -319,7 +349,7 @@
     @include valo-datefield-calendarpanel-month-style;
   }
 
-  .v-datefield-year td.v-datefield-calendarpanel-month {
+  .#{$primary-stylename}-year td.#{$primary-stylename}-month {
     width: round($v-unit-size * 2);
   }
 
@@ -350,12 +380,12 @@
     background: $v-app-background-color;
   }
 
-  td.v-datefield-calendarpanel-time {
+  td.#{$primary-stylename}-time {
     width: 100%;
     font-size: ceil($v-font-size * 0.86);
 
     .v-label {
-      display: inline-block;
+      display: inline;
       margin: 0 0.1em;
       font-weight: 400;
     }
diff --git a/WebContent/VAADIN/themes/valo/components/_formlayout.scss b/WebContent/VAADIN/themes/valo/components/_formlayout.scss
index 33191e4a20..25dbfbef28 100644
--- a/WebContent/VAADIN/themes/valo/components/_formlayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_formlayout.scss
@@ -1,4 +1,4 @@
-@mixin valo-formlayout ($primary-stylename: v-formlayout) {
+@mixin valo-formlayout ($primary-stylename: v-formlayout, $include-additional-styles: contains($v-included-additional-styles, formlayout)) {
 
   @include valo-formlayout-spacing;
   @include valo-formlayout-margins;
@@ -51,6 +51,11 @@
   }
 
 
+  @if $include-additional-styles {
+    .#{$primary-stylename}.light {
+      @include valo-formlayout-light-style($primary-stylename);
+    }
+  }
 
 }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss
index 502b640809..290d51fe9a 100644
--- a/WebContent/VAADIN/themes/valo/components/_label.scss
+++ b/WebContent/VAADIN/themes/valo/components/_label.scss
@@ -18,7 +18,7 @@ $v-letter-spacing--h3:    0               !default;
 $v-letter-spacing--h4:    0               !default;
 
 
-@mixin valo-label ($primary-stylename: v-label) {
+@mixin valo-label ($primary-stylename: v-label, $include-additional-styles: contains($v-included-additional-styles, label)) {
 
   .#{$primary-stylename}-undef-w {
     white-space: nowrap;
@@ -101,31 +101,67 @@ $v-letter-spacing--h4:    0               !default;
     }
   }
 
-  .#{$primary-stylename}-large {
-    font-size: $v-font-size--large;
-  }
 
-  .#{$primary-stylename}-small {
-    font-size: $v-font-size--small;
-  }
+  @if $include-additional-styles {
 
-  .#{$primary-stylename}-bold {
-    font-weight: $v-font-weight + 200;
-  }
+    .#{$primary-stylename}-large {
+      font-size: $v-font-size--large;
+    }
 
-  .#{$primary-stylename}-light {
-    font-weight: $v-font-weight - 100;
-    @if $v-font-weight < 400 {
-      color: valo-font-color($v-app-background-color, .5);
+    .#{$primary-stylename}-small {
+      font-size: $v-font-size--small;
     }
-  }
 
-  .#{$primary-stylename}-align-right {
-    text-align: right;
-  }
+    .#{$primary-stylename}-bold {
+      font-weight: $v-font-weight + 200;
+    }
+
+    .#{$primary-stylename}-light {
+      font-weight: $v-font-weight - 100;
+      @if $v-font-weight < 400 {
+        color: valo-font-color($v-app-background-color, .5);
+      }
+    }
 
-  .#{$primary-stylename}-align-center {
-    text-align: center;
+    .#{$primary-stylename}-align-right {
+      text-align: right;
+    }
+
+    .#{$primary-stylename}-align-center {
+      text-align: center;
+    }
+
+    .#{$primary-stylename}-spinner {
+      @include valo-spinner;
+    }
+
+    .#{$primary-stylename}-success,
+    .#{$primary-stylename}-failure {
+      background: #fff;
+      color: #555;
+      border: 2px solid $v-friendly-color;
+      border-radius: $v-border-radius;
+      padding: round($v-unit-size/5) round($v-unit-size/2) round($v-unit-size/5) round($v-unit-size);
+      font-weight: $v-font-weight + 100;
+      font-size: round($v-font-size * 0.95);
+
+      &:before {
+        font-family: FontAwesome;
+        content: "\f00c";
+        margin-right: .5em;
+        margin-left: round($v-unit-size/-2);
+        color: $v-friendly-color;
+      }
+    }
+
+    .#{$primary-stylename}-failure {
+      border-color: $v-error-indicator-color;
+
+      &:before {
+        content: "\f05e";
+        color: $v-error-indicator-color;
+      }
+    }
   }
 
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_link.scss b/WebContent/VAADIN/themes/valo/components/_link.scss
index 129ffcca2f..680659b8b6 100644
--- a/WebContent/VAADIN/themes/valo/components/_link.scss
+++ b/WebContent/VAADIN/themes/valo/components/_link.scss
@@ -3,7 +3,7 @@ $v-link-text-decoration: underline !default;
 $v-link-cursor: pointer !default;
 
 
-@mixin valo-link ($primary-stylename: v-link) {
+@mixin valo-link ($primary-stylename: v-link, $include-additional-styles: contains($v-included-additional-styles, link)) {
   .#{$primary-stylename} {
     @include valo-link-style;
 
@@ -20,6 +20,16 @@ $v-link-cursor: pointer !default;
       cursor: inherit;
     }
   }
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-small {
+      font-size: $v-font-size--small;
+    }
+
+    .#{$primary-stylename}-large {
+      font-size: $v-font-size--large;
+    }
+  }
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss
index 75b93b646f..e79e6898a9 100644
--- a/WebContent/VAADIN/themes/valo/components/_menubar.scss
+++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss
@@ -1,4 +1,4 @@
-@mixin valo-menubar ($primary-stylename: v-menubar) {
+@mixin valo-menubar ($primary-stylename: v-menubar, $include-additional-styles: contains($v-included-additional-styles, menubar)) {
 
   .#{$primary-stylename} {
     @include valo-button-static-style($states: normal, $vertical-centering: false);
@@ -70,6 +70,18 @@
     }
   }
 
+  
+  @if $include-additional-styles {
+    .#{$primary-stylename}-small {
+      @include valo-menubar-small-style($unit-size: $v-unit-size--small);
+      font-size: $v-font-size--small;
+    }
+
+    .#{$primary-stylename}-borderless {
+      @include valo-menubar-borderless-style;
+    }
+  }
+
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_notification.scss b/WebContent/VAADIN/themes/valo/components/_notification.scss
new file mode 100644
index 0000000000..3cfa446f7d
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/components/_notification.scss
@@ -0,0 +1,363 @@
+$v-notification-title-color: $v-focus-color !default;
+
+
+@mixin valo-notification ($primary-stylename: v-Notification, $include-additional-styles: contains($v-included-additional-styles, notification)) {
+
+  // Positional offsets
+
+  .#{$primary-stylename} {
+    &.v-position-top {
+      top: $v-layout-spacing-vertical;
+    }
+
+    &.v-position-right {
+      right: $v-layout-spacing-horizontal;
+    }
+
+    &.v-position-bottom {
+      bottom: $v-layout-spacing-vertical;
+    }
+
+    &.v-position-left {
+      left: $v-layout-spacing-horizontal;
+    }
+
+    &.v-position-assistive {
+      top: -9999px;
+      left: -9999px;
+    }
+  }
+
+  // Custom animations for positions
+
+  @if $v-animations-enabled {
+
+    .#{$primary-stylename}-animate-in {
+      @include animation(valo-placeholder-animate-in 100ms, valo-anim-fade-in 100ms);
+
+      &.v-position-left {
+        @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-right 200ms);
+      }
+
+      &.v-position-right {
+        @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-left 200ms);
+      }
+    }
+
+    .#{$primary-stylename}-animate-out {
+      @include animation(valo-placeholder-animate-out 150ms, valo-anim-fade-out 150ms);
+
+      &.v-position-left,
+      &.v-position-right {
+        @include animation(valo-placeholder-animate-out 120ms, valo-anim-drop-fade-out 120ms);
+      }
+    }
+  }
+
+  // Default style (a.k.a. humanized)
+
+  .#{$primary-stylename} {
+    border-radius: $v-border-radius;
+    text-align: center;
+    position: fixed !important;
+
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
+    backface-visibility: hidden;
+
+    h1 {
+      margin: 0;
+      display: inline-block;
+      text-align: left;
+      font-weight: inherit;
+      line-height: inherit;
+      white-space: nowrap;
+      letter-spacing: 0;
+    }
+
+    p {
+      margin: 0;
+      display: inline-block;
+      vertical-align: middle;
+      max-width: 30em;
+      text-align: left;
+      max-height: 20em;
+      overflow: auto;
+    }
+
+    h1 ~ p {
+      margin-left: round($v-font-size * 1.5);
+    }
+
+    .v-icon + h1 {
+      margin-left: round($v-font-size);
+    }
+
+    @include valo-notification-style;
+
+  }
+
+  .#{$primary-stylename}-system {
+    @include valo-notification-bar-style;
+    @include valo-notification-system-style;
+  }
+
+  .#{$primary-stylename}.tray {
+    text-align: left;
+    h1 {
+      //display: block;
+    }
+
+    h1 + p {
+      display: block;
+      margin: .5em 0 0;
+    }
+    @include valo-notification-tray-style;
+  }
+
+  .#{$primary-stylename}.warning {
+    @include valo-notification-warning-style;
+  }
+
+  .#{$primary-stylename}.error {
+    @include valo-notification-error-style;
+  }
+
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}.dark {
+      @include valo-notification-dark-style;
+    }
+
+    .#{$primary-stylename}.bar {
+      @include valo-notification-bar-style;
+    }
+
+    .#{$primary-stylename}.small {
+      @include valo-notification-small-style;
+    }
+
+    .#{$primary-stylename}.closable {
+      @include valo-notification-closable-style;
+
+      &.dark,
+      &.error,
+      &.system {
+        &:after {
+          color: #fff;
+          border-color: #fff;
+          border-color: rgba(255,255,255,.3);
+        }
+        &:active:after {
+          background-color: #fff;
+          color: #000;
+        }
+      }
+
+      &.tray:after {
+        top: round($v-unit-size/2.3);
+        margin-top: 0;
+      }
+    }
+
+    .#{$primary-stylename}.success,
+    .#{$primary-stylename}.failure {
+      background: #fff;
+      color: #555;
+      border: 2px solid $v-friendly-color;
+
+      h1 {
+        color: $v-friendly-color;
+        font-weight: $v-font-weight + 100;
+
+        &:before {
+          font-family: FontAwesome;
+          content: "\f00c";
+          margin-right: .5em;
+        }
+      }
+
+      &.bar {
+        margin: -2px !important;
+      }
+    }
+
+    .#{$primary-stylename}.failure {
+      border-color: $v-error-indicator-color;
+
+      h1 {
+        color: $v-error-indicator-color;
+
+        &:before {
+          content: "\f05e";
+        }
+      }
+    }
+  }
+}
+
+
+
+
+@mixin valo-notification-closable-style {
+  padding-right: $v-unit-size + round($v-unit-size/1.7);
+  overflow: hidden !important; // Override GWT PopupPanel
+  cursor: pointer;
+
+  &:after {
+    content: "\00d7";
+    font-size: 1.5em;
+    position: absolute;
+    top: 50%;
+    margin-top: round($v-unit-size/-3);
+    right: round($v-unit-size/3);
+    width: round($v-unit-size/1.5);
+    height: round($v-unit-size/1.5);
+    line-height: round($v-unit-size/1.5) - 1px;
+    cursor: pointer;
+    color: #000;
+    @include opacity(.5);
+    text-align: center;
+    border: first-number($v-border) solid #000;
+    border-color: rgba(0,0,0,.3);
+    border-radius: 50%;
+    @include transition(opacity 200ms);
+  }
+
+  &:hover:after {
+    @include opacity(1);
+  }
+
+  &:active:after {
+    background-color: #000;
+    color: #fff;
+    @include opacity(.3);
+    @include transition(none 200ms);
+  }
+}
+
+
+
+
+
+@mixin valo-notification-style {
+  background: valo-overlay-background-color();
+  @include box-shadow(0px 5px 15px 0px rgba(0,0,0,0.15));
+  padding: round($v-unit-size/2) round($v-unit-size/1.7);
+
+  h1 {
+    color: $v-notification-title-color;
+    font-size: round($v-font-size * 1.2);
+    line-height: 1;
+  }
+  p {
+    line-height: 1.4;
+  }
+}
+
+@mixin valo-notification-bar-style {
+  left: 0 !important;
+  right: 0;
+  max-width: 100%;
+  margin: 0 !important;
+  border-radius: 0;
+  @include box-shadow(0 0 20px 0 rgba(0,0,0,0.25));
+  padding: round($v-unit-size/3) round($v-unit-size/2.5);
+
+  p {
+    max-width: 50em;
+  }
+
+  &.v-position-top {
+    top: 0;
+
+    @if $v-animations-enabled {
+      &[class*="animate-in"] {
+        @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-down 200ms);
+      }
+
+      &[class*="animate-out"] {
+        @include animation(valo-placeholder-animate-out 200ms, valo-anim-slide-out-up 200ms);
+      }
+    }
+  }
+
+  &.v-position-bottom {
+    bottom: 0;
+
+    @if $v-animations-enabled {
+      &[class*="animate-in"] {
+        @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-up 200ms);
+      }
+
+      &[class*="animate-out"] {
+        @include animation(valo-placeholder-animate-out 200ms, valo-anim-slide-out-down 200ms);
+      }
+    }
+  }
+}
+
+@mixin valo-notification-dark-style {
+  background-color: #444;
+  background-color: rgba(#444, .9);
+  font-weight: $v-font-weight + 100;
+  line-height: round($v-font-size * 1.4);
+
+  h1 {
+    color: #fff;
+    vertical-align: middle;
+  }
+
+  p {
+    color: #e6e6e6;
+  }
+}
+
+@mixin valo-notification-system-style {
+  @include valo-notification-dark-style;
+
+  // No need to underline the "click here" text, let's imply that the whole banner is clickable
+  u {
+    text-decoration: none;
+  }
+}
+
+@mixin valo-notification-tray-style {}
+
+@mixin valo-notification-warning-style {
+  background: #FFF3D2;
+
+  h1 {
+    color: #AC7C00;
+  }
+
+  p {
+    color: #9D874D;
+  }
+}
+
+@mixin valo-notification-error-style {
+  background: $v-error-indicator-color;
+  font-weight: $v-font-weight + 100;
+  @include box-shadow(0px 5px 15px 0px rgba(0,0,0,0.25));
+
+  h1 {
+    color: valo-font-color($v-error-indicator-color, 1);
+  }
+
+  p {
+    color: valo-font-color($v-error-indicator-color, .8);
+  }
+}
+
+@mixin valo-notification-small-style {
+  padding: round($v-unit-size/3.3) round($v-unit-size/2.8);
+
+  h1 {
+    font-size: $v-font-size;
+  }
+  p {
+    font-size: round($v-font-size * 0.85);
+  }
+}
diff --git a/WebContent/VAADIN/themes/valo/components/_optiongroup.scss b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss
index 71c67cd9d8..a058ad4e85 100644
--- a/WebContent/VAADIN/themes/valo/components/_optiongroup.scss
+++ b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss
@@ -1,13 +1,30 @@
-@mixin valo-optiongroup ($primary-stylename: v-optiongroup) {
+@mixin valo-optiongroup ($primary-stylename: v-select-optiongroup, $include-additional-styles: contains($v-included-additional-styles, optiongroup)) {
 
   .v-radiobutton {
     @include valo-radiobutton-style;
   }
 
-  .v-select-optiongroup {
+  .#{$primary-stylename} {
     @include valo-optiongroup-style;
   }
 
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-small {
+      @include valo-optiongroup-style($unit-size: $v-unit-size--small);
+      font-size: $v-font-size--small;
+    }
+
+    .#{$primary-stylename}-large {
+      @include valo-optiongroup-style($unit-size: $v-unit-size--large);
+      font-size: $v-font-size--large;
+    }
+
+    .#{$primary-stylename}-horizontal {
+      @include valo-optiongroup-horizontal;
+    }
+  }
+
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss
index 1173ca3dbe..dbe2490826 100644
--- a/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss
@@ -140,7 +140,7 @@
 
 
 
-@mixin valo-orderedlayout {
+@mixin valo-orderedlayout ($include-additional-styles: contains($v-included-additional-styles, orderedlayout)) {
 
   .v-margin-top {
     padding-top: $v-layout-margin-top;
@@ -163,10 +163,28 @@
     height: $v-layout-spacing-vertical;
   }
 
+  @if $include-additional-styles {
+    .v-verticallayout-well,
+    .v-horizontallayout-well {
+      @include valo-panel-well-style;
+      @include valo-panel-adjust-content-margins;
+    }
+
+    .v-verticallayout-card,
+    .v-horizontallayout-card {
+      @include valo-panel-style;
+      @include valo-panel-adjust-content-margins;
+    }
+
+    .v-horizontallayout-wrapping {
+      @include valo-horizontallayout-wrapping-style;
+    }
+  }
+
 }
 
 
-@mixin valo-horizontallayout--wrapping {
+@mixin valo-horizontallayout-wrapping-style {
     white-space: normal !important;
 
     & > .v-spacing + .v-slot,
diff --git a/WebContent/VAADIN/themes/valo/components/_panel.scss b/WebContent/VAADIN/themes/valo/components/_panel.scss
index 542c14ea64..075de3daeb 100644
--- a/WebContent/VAADIN/themes/valo/components/_panel.scss
+++ b/WebContent/VAADIN/themes/valo/components/_panel.scss
@@ -1,7 +1,7 @@
 $v-panel-background-color: scale-color(lighten($v-app-background-color, 5%), $saturation: -5%) !default;
 $v-panel-border: $v-border !default;
 
-@mixin valo-panel ($primary-stylename: v-panel) {
+@mixin valo-panel ($primary-stylename: v-panel, $include-additional-styles: contains($v-included-additional-styles, panel)) {
 
   .#{$primary-stylename} {
     @include valo-panel-style;
@@ -19,6 +19,34 @@ $v-panel-border: $v-border !default;
     @include valo-panel-adjust-content-margins;
   }
 
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-borderless {
+      @include valo-panel-borderless-style;
+    }
+
+    .#{$primary-stylename}-well {
+      @include valo-panel-well-style;
+    }
+
+    .#{$primary-stylename}-scroll-divider {
+      @include valo-panel-scroll-divider-style;
+    }
+
+    .#{$primary-stylename}-caption.v-horizontallayout {
+      height: auto !important;
+      line-height: 0;
+
+      .v-slot {
+        vertical-align: middle;
+      }
+
+      .v-label {
+        line-height: $v-unit-size;
+      }
+    }
+  }
+
 }
 
 
@@ -68,7 +96,7 @@ $v-panel-border: $v-border !default;
   border-radius: $v-border-radius;
   border: valo-border();
 
-  > div > .v-panel-caption {
+  > div > [class*="-caption"] {
     background: transparent;
     @include box-shadow(none);
   }
@@ -83,7 +111,7 @@ $v-panel-border: $v-border !default;
   border-radius: 0;
   @include box-shadow(none);
 
-  > div > .v-panel-caption {
+  > div > [class*="-caption"] {
     background: transparent;
     @include box-shadow(none);
     color: inherit;
@@ -96,7 +124,7 @@ $v-panel-border: $v-border !default;
 
 
 @mixin valo-panel-scroll-divider-style ($border-width: max(1px, first-number($v-panel-border))) {
-  > .v-panel-captionwrap {
+  > [class*="-captionwrap"] {
     position: relative;
     z-index: 2;
 
@@ -111,7 +139,7 @@ $v-panel-border: $v-border !default;
     }
   }
 
-  > .v-panel-content {
+  > [class*="-content"] {
     &:before {
       content: "";
       position: absolute;
diff --git a/WebContent/VAADIN/themes/valo/components/_slider.scss b/WebContent/VAADIN/themes/valo/components/_slider.scss
index b4785a8471..123712a8ee 100644
--- a/WebContent/VAADIN/themes/valo/components/_slider.scss
+++ b/WebContent/VAADIN/themes/valo/components/_slider.scss
@@ -8,7 +8,7 @@ $_valo-slider-base-margin-vertical: round(($v-unit-size - $v-slider-track-size)/
 $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
 
 
-@mixin valo-slider ($primary-stylename: v-slider) {
+@mixin valo-slider ($primary-stylename: v-slider, $include-additional-styles: contains($v-included-additional-styles, slider)) {
 
   // Round to an even number
   $v-slider-track-size: $v-slider-track-size + $v-slider-track-size%2;
@@ -174,6 +174,13 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
     }
   }
 
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-no-indicator {
+      @include valo-slider-no-indicator;
+    }
+  }
+
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss
index 27da1d9cc6..cd709e1df9 100644
--- a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss
+++ b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss
@@ -1,4 +1,4 @@
-@mixin valo-splitpanel($primary-stylename : v-splitpanel) {
+@mixin valo-splitpanel($primary-stylename : v-splitpanel, $include-additional-styles: contains($v-included-additional-styles, splitpanel)) {
   .#{$primary-stylename}-horizontal {
     @include valo-splitpanel-style($primary-stylename: $primary-stylename, $orientation: horizontal);
   }
@@ -6,6 +6,16 @@
   .#{$primary-stylename}-vertical {
     @include valo-splitpanel-style($primary-stylename: $primary-stylename, $orientation: vertical);
   }
+  
+  @if $include-additional-styles {
+    .#{$primary-stylename}-horizontal.large {
+      @include valo-splitpanel-style($splitter-size: round($v-unit-size/3), $splitter-handle-visible: true, $orientation: horizontal);
+    }
+    
+    .#{$primary-stylename}-vertical.large {
+      @include valo-splitpanel-style($splitter-size: round($v-unit-size/3), $splitter-handle-visible: true, $orientation: vertical);
+    }
+  }
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss
index 2335c59873..3644e482f2 100644
--- a/WebContent/VAADIN/themes/valo/components/_table.scss
+++ b/WebContent/VAADIN/themes/valo/components/_table.scss
@@ -60,7 +60,7 @@ $v-table-background-color: null !default;
 }
 
 
-@mixin valo-table ($primary-stylename: v-table) {
+@mixin valo-table ($primary-stylename: v-table, $include-additional-styles: contains($v-included-additional-styles, table)) {
 
   $background-color: $v-table-background-color or valo-table-background-color();
   $border-color: $v-table-border-color or first-color(valo-border($color: $background-color, $strength: 0.8));
@@ -72,9 +72,9 @@ $v-table-background-color: null !default;
     color: valo-font-color($v-background-color);
   }
 
-  .v-table-header table,
-  .v-table-footer table,
-  .v-table-table {
+  .#{$primary-stylename}-header table,
+  .#{$primary-stylename}-footer table,
+  .#{$primary-stylename}-table {
     @include box-shadow(0 0 0 $v-table-border-width $border-color);
 
     .v-ie8 & {
@@ -178,6 +178,7 @@ $v-table-background-color: null !default;
 
   .#{$primary-stylename}-cell-wrapper {
     line-height: 1;
+    min-height: $v-table-row-height;
     $vertical-padding: round(($v-table-row-height - $v-font-size)/2);
     padding: $vertical-padding $v-table-cell-padding-horizontal;
     @include box-sizing(border-box);
@@ -472,6 +473,44 @@ $v-table-background-color: null !default;
     line-height: 0;
   }
 
+
+
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-no-stripes {
+      @include valo-table-no-stripes-style;
+    }
+
+    .#{$primary-stylename}-no-vertical-lines {
+      @include valo-table-no-vertical-lines-style;
+    }
+
+    .#{$primary-stylename}-no-horizontal-lines {
+      @include valo-table-no-horizontal-lines-style;
+    }
+
+    .#{$primary-stylename}-no-header {
+      @include valo-table-no-header-style;
+    }
+
+    .#{$primary-stylename}-borderless {
+      @include valo-table-borderless-style;
+    }
+
+    .#{$primary-stylename}-compact,
+    .#{$primary-stylename}-small {
+      @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));
+    }
+
+    .#{$primary-stylename}-small {
+      font-size: $v-font-size--small;
+
+      &.v-treetable .#{$primary-stylename}-cell-wrapper {
+        min-height: $v-font-size--small;
+      }
+    }
+  }
+
 }
 
 
@@ -600,6 +639,7 @@ $v-table-background-color: null !default;
 
   .#{$primary-stylename}-cell-wrapper {
     padding: $vertical-padding $cell-padding-horizontal;
+    min-height: $row-height;
 
     > .v-widget {
       margin: round($vertical-padding / -2) round($cell-padding-horizontal / -2);
@@ -624,6 +664,7 @@ $v-table-background-color: null !default;
     .#{$primary-stylename}-cell-wrapper {
       padding-left: 0;
       padding-right: 0;
+      min-height: $v-font-size;
     }
 
     .#{$primary-stylename}-cell-content {
diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
index 2e28174fa7..7f2421b5ff 100644
--- a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
+++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
@@ -51,7 +51,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 
 
-@mixin valo-tabsheet ($primary-stylename: v-tabsheet) {
+@mixin valo-tabsheet ($primary-stylename: v-tabsheet, $include-additional-styles: contains($v-included-additional-styles, tabsheet)) {
   .#{$primary-stylename} {
     &:not(.v-has-width) {
       width: auto !important;
@@ -119,6 +119,43 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
     }
   }
 
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-equal-width-tabs {
+      @include valo-tabsheet-equal-width-tabs-style($flex: false);
+    }
+
+    .#{$primary-stylename}-framed {
+      @include valo-tabsheet-framed-style;
+    }
+
+    .#{$primary-stylename}-centered-tabs {
+      @include valo-tabsheet-align-tabs-style($align: center);
+    }
+
+    .#{$primary-stylename}-right-aligned-tabs {
+      @include valo-tabsheet-align-tabs-style($align: right);
+    }
+
+    .#{$primary-stylename}-padded-tabbar {
+      @include valo-tabsheet-padded-tabbar-style;
+    }
+
+    .#{$primary-stylename}-icons-on-top {
+      @include valo-tabsheet-icons-on-top-style;
+    }
+
+    .#{$primary-stylename}-compact-tabbar {
+      > .#{$primary-stylename}-tabcontainer-compact-tabbar .v-caption {
+        line-height: 1.8;
+      }
+    }
+
+    .#{$primary-stylename}-only-selected-closable {
+      @include valo-tabsheet-only-selected-closable-style;
+    }
+  }
+
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_textarea.scss b/WebContent/VAADIN/themes/valo/components/_textarea.scss
index 79bdb04d3c..4c5d99b8e2 100644
--- a/WebContent/VAADIN/themes/valo/components/_textarea.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textarea.scss
@@ -1,4 +1,4 @@
-@mixin valo-textarea ($primary-stylename: v-textarea) {
+@mixin valo-textarea ($primary-stylename: v-textarea, $include-additional-styles: contains($v-included-additional-styles, textarea)) {
 
   .#{$primary-stylename} {
     @include valo-textarea-style;
@@ -13,6 +13,31 @@
     @include valo-textfield-error-style;
   }
 
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-borderless {
+      @include valo-textfield-borderless-style;
+    }
+
+    .#{$primary-stylename}-small {
+      @include valo-textarea-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
+      font-size: $v-font-size--small;
+    }
+
+    .#{$primary-stylename}-large {
+      @include valo-textarea-style($unit-size: $v-unit-size--large, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
+      font-size: $v-font-size--large;
+    }
+
+    .#{$primary-stylename}-align-right {
+      text-align: right;
+    }
+
+    .#{$primary-stylename}-align-center {
+      text-align: center;
+    }
+  }
+
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss
index 39dfa3420e..75cfc5ef85 100644
--- a/WebContent/VAADIN/themes/valo/components/_textfield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss
@@ -9,7 +9,51 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 
 
+@mixin valo-textfield ($primary-stylename: v-textfield, $include-additional-styles: contains($v-included-additional-styles, textfield)) {
 
+  .#{$primary-stylename} {
+    @include valo-textfield-style;
+    width: $v-default-field-width;
+  }
+
+  .#{$primary-stylename}-readonly {
+    @include valo-textfield-readonly-style;
+  }
+
+  .#{$primary-stylename}-error {
+    @include valo-textfield-error-style;
+  }
+
+
+  @if $include-additional-styles {
+    .#{$primary-stylename}-borderless {
+      @include valo-textfield-borderless-style;
+    }
+
+    .#{$primary-stylename}-small {
+      @include valo-textfield-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
+      font-size: $v-font-size--small;
+    }
+
+    .#{$primary-stylename}-large {
+      @include valo-textfield-style($unit-size: $v-unit-size--large, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
+      font-size: $v-font-size--large;
+    }
+
+    @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);
+
+    .#{$primary-stylename}-align-right {
+      text-align: right;
+    }
+
+    .#{$primary-stylename}-align-center {
+      text-align: center;
+    }
+  }
+
+}
 
 
 
@@ -94,8 +138,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
   }
 
   // TODO allow parent selector to be used in interpolation
-  &.v-textfield-prompt,
-  &.v-textarea-prompt {
+  &[class*="prompt"] {
     @include valo-textfield-prompt-style($background-color);
   }
 
@@ -144,24 +187,6 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 }
 
 
-@mixin valo-textfield ($primary-stylename: v-textfield) {
-
-  .#{$primary-stylename} {
-    @include valo-textfield-style;
-    width: $v-default-field-width;
-  }
-
-  .#{$primary-stylename}-readonly {
-    @include valo-textfield-readonly-style;
-  }
-
-  .#{$primary-stylename}-error {
-    @include valo-textfield-error-style;
-  }
-
-}
-
-
 
 @mixin valo-textfield-borderless-style ($background-color: transparent) {
   border: none;
diff --git a/WebContent/VAADIN/themes/valo/components/_treetable.scss b/WebContent/VAADIN/themes/valo/components/_treetable.scss
index 0423b37ab1..41ef9060c7 100644
--- a/WebContent/VAADIN/themes/valo/components/_treetable.scss
+++ b/WebContent/VAADIN/themes/valo/components/_treetable.scss
@@ -8,6 +8,10 @@
       padding-right: 0;
     }
 
+    [class*="cell-wrapper"] {
+      min-height: $v-font-size;
+    }
+
     [class*="caption-container"] {
       padding-left: $v-table-cell-padding-horizontal;
     }
diff --git a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss
new file mode 100644
index 0000000000..8bd26e2b10
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss
@@ -0,0 +1,465 @@
+$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: $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%;
+    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-title {
+    @include valo-menu-title-style;
+    text-align: center;
+
+    .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;
+    }
+
+    .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;
+    }
+
+    h1, .v-label-h1,
+    h2, .v-label-h2,
+    h3, .v-label-h3,
+    h4, .v-label-h4 {
+      margin-top: 0;
+      margin-bottom: 0;
+      color: 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-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;
+
+}
+
+
+@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);
+      }
+    }
+
+    @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
+      }
+
+      .valo-menu {
+        border-right: none;
+      }
+
+      .valo-menu-toggle {
+        display: inline-block;
+      }
+
+      .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;
+      }
+
+      .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;
+        }
+
+        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);
+        }
+      }
+
+      .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);
+      }
+
+      .valo-menu-visible .valo-menuitems {
+        @include transform(translatex(0%));
+      }
+    }
+
+    @include width-range($max: 500px) {
+      .valo-menu-toggle .v-button-caption {
+        display: none;
+      }
+
+      .valo-menu .v-menubar-user-menu .v-menubar-menuitem-caption {
+        display: inline-block;
+        width: round($v-unit-size / 2);
+        overflow: hidden;
+      }
+    }
+  }
+}
+
+
+
+@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;
+}
+
+
+
+@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));
+}
+
+
+
+@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;
+    }
+  }
+
+  [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;
+      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;
+  }
+}