First batch of Valo Sass API documentation, plus bug fixes

Also updates the test to always scroll the left panel to the top after
opening a section.

Change-Id: Icdb42795b8ec347b91694c162898f41aa8d80152

19 files changed, 325 insertions, 129 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_accordion.scss b/WebContent/VAADIN/themes/valo/components/_accordion.scss
index e5457a2331..91ce4efe33 100644
--- a/WebContent/VAADIN/themes/valo/components/_accordion.scss
+++ b/WebContent/VAADIN/themes/valo/components/_accordion.scss
@@ -1,3 +1,10 @@
+/**
+ * Outputs the selectors and properties for the Accordion component.
+ *
+ * @param {string} $primary-stylename (v-accordion) - the primary style name for the selectors
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ * @group accordion
+ */
 @mixin valo-accordion ($primary-stylename: v-accordion, $include-additional-styles: contains($v-included-additional-styles, accordion)) {
   .#{$primary-stylename} {
     @include valo-accordion-style;
@@ -22,7 +29,9 @@
       border-radius: 0;
       @include box-shadow(none);
 
-      > .#{$primary-stylename}-item {
+      > .#{$primary-stylename}-item,
+      > .#{$primary-stylename}-item > div > .v-caption,
+      > .#{$primary-stylename}-item > .#{$primary-stylename}-item-content {
         border-radius: 0;
       }
     }
@@ -31,7 +40,10 @@
 }
 
 
-
+/**
+ * Outputs the styles for the Accordion component root element.
+ * @group accordion
+ */
 @mixin valo-accordion-style {
   @include valo-panel-style;
   $grad-style: valo-gradient-style($v-gradient);
@@ -41,50 +53,64 @@
 }
 
 
+/**
+ * Outputs the styles for an individual Accordion item root element.
+ * @group accordion
+ */
 @mixin valo-accordion-item-style {
+  $_br: $v-border-radius - first-number($v-border);
   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;
-      }
+      border-top-left-radius: $_br;
+      border-top-right-radius: $_br;
     }
 
     &:last-child {
-      border-radius: 0 0 $_br $_br;
+      border-bottom-left-radius: $_br;
+      border-bottom-right-radius: $_br;
 
-      .v-caption {
-        border-radius: 0;
+      [class*="item-content"] {
+        border-radius: inherit;
       }
     }
   }
 
-  &:last-child:not([class*="item-open"]) .v-caption {
+  &[class*="item-open"]:last-child > div > .v-caption {
+    border-radius: 0;
+  }
+
+  &:not([class*="item-open"]):last-child > div > .v-caption {
     border-bottom: none;
+    margin-bottom: 0;
   }
 
   &[class*="item-open"] + [class*="item"] {
-    border-top: valo-border($color: $v-panel-background-color, $strength: 0.7);
+    border-top: valo-border($border: $v-panel-border, $color: $v-panel-background-color, $strength: 0.7);
   }
 }
 
 
-
+/**
+ * Outputs the styles for an individual Accordion item's caption element.
+ *
+ * @param {color} $background-color (null) - the background color of the caption. Other styles (such as font and border colors, gradients and bevels) adapt to the background color automatically.
+ * @group accordion
+ */
 @mixin valo-accordion-item-caption-style ($background-color: null) {
-  .v-caption {
+  border-radius: inherit;
+
+  > .v-caption {
     @include valo-panel-caption-style($background-color: $background-color or $v-background-color);
     display: block;
     @if $background-color == null {
       background: transparent;
     }
     border-bottom-color: first-color(valo-border($color: $v-panel-background-color));
+    border-radius: inherit;
     cursor: pointer;
+    position: relative;
 
     &:hover:before,
     &:active:before {
@@ -94,6 +120,7 @@
       right: 0;
       bottom: 0;
       left: 0;
+      border-radius: inherit;
     }
 
     @if $v-hover-styles-enabled {
@@ -110,11 +137,11 @@
 }
 
 
+/**
+ * Outputs the styles for an individual Accordion item's content element.
+ * @group accordion
+ */
 @mixin valo-accordion-item-content-style {
-  position: absolute;
-  width: 100%;
-  bottom: 0;
-  right: 0;
   @include 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);
diff --git a/WebContent/VAADIN/themes/valo/components/_all.scss b/WebContent/VAADIN/themes/valo/components/_all.scss
index b41a2f3308..0efc363a82 100644
--- a/WebContent/VAADIN/themes/valo/components/_all.scss
+++ b/WebContent/VAADIN/themes/valo/components/_all.scss
@@ -42,13 +42,33 @@
 @import "valo-menu";
 
 
+/**
+ * Outputs all the selectors and properties for all individual components to produce 
+ * the variation specified by global variables.
+ * 
+ * This mixin can be called multiple times for a theme, if you for instance wish to 
+ * generate alternative color versions of the components.
+ * 
+ * @example scss
+ * .my-theme {
+ *   // The default color variation
+ *   @include valo;
+ *   
+ *   .sidebar {
+ *     // For the sidebar context, we generate a darker variant of all components
+ *      $v-background-color: #696969;
+ *      background-color: $v-background-color;
+ *      @include valo-components;
+ *   }
+ * }
+ */
 @mixin valo-components {
 
   @if v-is-included(absolutelayout) {
     @include valo-absolutelayout;
   }
 
-  @if v-is-included(orderedlayout) {
+  @if v-is-included(orderedlayout) or v-is-included(verticallayout) or v-is-included(horizontallayout) {
     @include valo-orderedlayout;
   }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss
index 42953ea610..4ac0e4c16f 100644
--- a/WebContent/VAADIN/themes/valo/components/_button.scss
+++ b/WebContent/VAADIN/themes/valo/components/_button.scss
@@ -1,3 +1,11 @@
+/**
+ * Outputs the selectors and properties for the Button component.
+ *
+ * @param {string} $primary-stylename (v-button) - the primary style name for the selectors
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ *
+ * @group button
+ */
 @mixin valo-button ($primary-stylename: v-button, $include-additional-styles: contains($v-included-additional-styles, button)) {
   .#{$primary-stylename} {
     @include valo-button-static-style;
@@ -97,9 +105,14 @@
 }
 
 
-
-
-
+/**
+ * Outputs the static styles (i.e. styles which don't differ between button variants) for a button.
+ *
+ * @param {list} $states (normal hover focus active disabled) - The button states for which to output corresponding static styles
+ * @param {bool} $vertical-centering (true) - Should the output contain a vertical centering guide
+ *
+ * @group button
+ */
 @mixin valo-button-static-style ($states: (normal, hover, focus, active, disabled), $vertical-centering: true) {
   @if contains($states, normal) {
     position: relative;
@@ -148,14 +161,30 @@
 }
 
 
-
-
-
+/**
+ * Outputs the styles for a button variant.
+ *
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds the its height
+ * @param {size | list} $padding (null) - The padding of the button. Computed from other parameters by default.
+ * @param {color} $font-color (null) - The font color of the button. Computed from the $background-color by default.
+ * @param {number} $font-weight ($v-font-weight + 100) - The font weight of the button
+ * @param {size} $font-size (null) - The font size of the button. Inherited from the parent by default.
+ * @param {string} $cursor (null) - The mouse cursor of the button
+ * @param {color} $background-color ($v-background-color) - The background color of the button
+ * @param {list} $border ($v-border) - The border of the button
+ * @param {size} $border-radius ($v-border-radius) - The border-radius of the button
+ * @param {list} $gradient ($v-gradient) - Valo specific gradient value. See the documentation for $v-gradient.
+ * @param {list} $bevel ($v-bevel) - Box-shadow value according to $v-bevel documentation
+ * @param {list} $shadow ($v-shadow) - Box-shadow value according to $v-shadow documentation
+ * @param {list} $states (normal hover focus active disabled) - The button states for which to output corresponding styles
+ *
+ * @group button
+ */
 @mixin valo-button-style (
   $unit-size        : $v-unit-size,
-  $padding          : null, // Computed by default
+  $padding          : null,
 
-  $font-color       : null, // Computed by default
+  $font-color       : null,
   $font-weight      : $v-font-weight + 100,
   $font-size        : null, // Inherited by default
   $cursor           : null,
@@ -207,7 +236,7 @@
     }
 
     @if $bevel and type-of($_font-color) == color and type-of($background-color) == color {
-      text-shadow: valo-text-shadow($_font-color, $background-color, $bevel);
+      text-shadow: valo-text-shadow($_font-color, $background-color);
     }
 
     @if $bevel == none and $shadow == none {
@@ -237,8 +266,14 @@
 }
 
 
-
-
+/**
+ * Outputs the hover state styles for a button. The styles are by default targeted
+ * for a pseudo element which is shown on top of the normal state button.
+ *
+ * @group button
+ *
+ * @param {color} $background-color ($v-background-color) - The background color of the normal state button
+ */
 @mixin valo-button-hover-style ($background-color: $v-background-color) {
   $bg: darken($background-color, 25%);
   @if is-dark-color($background-color) {
@@ -248,8 +283,16 @@
 }
 
 
-
-@mixin valo-button-focus-style ($background-color: $v-background-color, $border-fallback: inherit, $include-box-shadow: true) {
+/**
+ * Outputs the focus state styles for a button. The styles are by default targeted
+ * for a pseudo element which is shown on top of the normal state button.
+ *
+ * @group button
+ *
+ * @param {color} $background-color ($v-background-color) - The background color of the normal state button
+ * @param {list} $border-fallback (inherit) - If the luminance of $v-focus-color is less than the $background-color, the focus color is also used for the border color. If not, then $border-fallback is used for the focus element's border value.
+ */
+@mixin valo-button-focus-style ($background-color: $v-background-color, $border-fallback: inherit) {
   $focus-color: $v-focus-color;
 
   @if color-luminance($focus-color) + 50 < color-luminance($background-color) {
@@ -258,22 +301,31 @@
     border: $border-fallback or valo-border($color: $background-color);
   }
 
-  @include valo-focus-style($include-box-shadow: $include-box-shadow);
+  @include valo-focus-style;
 }
 
 
-
+/**
+ * Outputs the active state (pressed/down) styles for a button. The styles are by default targeted
+ * for a pseudo element which is shown on top of the normal state button.
+ *
+ * @group button
+ *
+ * @param {color} $background-color ($v-background-color) - The background color of the normal state button
+ */
 @mixin valo-button-active-style ($background-color: $v-background-color) {
   $bg: scale-color($background-color, $lightness: -50%, $saturation: saturation($background-color));
   background-color: rgba($bg, .2);
 }
 
 
-
-
-
+/**
+ * Outputs styles to allow vertical centering of the icon and the caption, independent of the 
+ * height of the button.
+ * 
+ * @group button
+ */
 @mixin valo-button-vertical-centering {
-  // Vertical centering of icon and caption, independent of the height of the button
   @include valo-vertical-align-guide($to-align: div, $pseudo-element: before);
 
   // WebKit handles line-heights and vertical-alignments somewhat differently, so we need to adjust
@@ -293,8 +345,14 @@
 }
 
 
-
-
+/**
+ * Output styles for a borderless button. Expects that the targeted element 
+ * already has both valo-button-static-style and valo-button-style included.
+ * 
+ * @param {color} $font-color (inherit) - The font color of the borderless button
+ * 
+ * @group button
+ */
 @mixin valo-button-borderless-style ($font-color: inherit) {
   border: none;
   @include box-shadow(none);
@@ -321,7 +379,15 @@
 }
 
 
-@mixin valo-button-quiet-style ($primary-stylename: v-button) {
+/**
+ * Output styles for a "quiet" button (a button whose outline is only shown 
+ * once the user hovers over the button caption). Expects that the targeted 
+ * element already has both valo-button-static-style and valo-button-style 
+ * included.
+ * 
+ * @group button
+ */
+@mixin valo-button-quiet-style {
   visibility: hidden;
 
   &:focus,
@@ -329,19 +395,24 @@
     visibility: visible;
   }
 
-  .#{$primary-stylename}-wrap {
+  [class*="wrap"] {
     visibility: visible;
   }
 
-  .#{$primary-stylename}-caption {
+  [class*="caption"] {
     // For IE8
     display: inline-block;
   }
 }
 
 
-@mixin valo-button-icon-align-right-style ($primary-stylename: v-button) {
-  .#{$primary-stylename}-wrap {
+/**
+ * Output styles to align a button's icon on the right side of its caption.
+ * 
+ * @group button
+ */
+@mixin valo-button-icon-align-right-style {
+  [class*="wrap"] {
     display: inline-block;
   }
 
@@ -357,12 +428,17 @@
 }
 
 
-@mixin valo-button-icon-align-top-style ($primary-stylename: v-button) {
+/**
+ * Output styles to align a button's icon on top of its caption.
+ * 
+ * @group button
+ */
+@mixin valo-button-icon-align-top-style {
   height: auto;
   padding-top: ceil($v-unit-size/9);
   padding-bottom: ceil($v-unit-size/9);
 
-  .#{$primary-stylename}-wrap {
+  [class*="wrap"] {
     display: inline-block;
   }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_calendar.scss b/WebContent/VAADIN/themes/valo/components/_calendar.scss
index 753291eea9..bf1dc1c3dc 100644
--- a/WebContent/VAADIN/themes/valo/components/_calendar.scss
+++ b/WebContent/VAADIN/themes/valo/components/_calendar.scss
@@ -1,6 +1,27 @@
+/**
+ * A list of colors for custom event colors. Can be an empty list of you don't 
+ * need any custom event colors.
+ * 
+ * @example javascript
+ * // Java code
+ * // 'event' is an instance of EditableCalendarEvent
+ * event.setStyleName("color1"); // 1st color in the list
+ * event.setStyleName("color2"); // 2nd color in the list
+ * // etc.
+ * 
+ * @group calendar
+ */
 $v-calendar-event-colors: #00ace0, #2d9f19, #d18100, #ce3812, #2d55cd !default;
 
 
+/**
+ * Outputs the global selectors and properties for the Calendar component - styles which are 
+ * considered mandatory for the component to work properly.
+ *
+ * @param {string} $primary-stylename (v-calendar) - the primary style name for the selectors
+ *
+ * @group calendar
+ */
 @mixin valo-calendar-global ($primary-stylename: v-calendar) {
   .#{$primary-stylename}-month-day-scrollable {
     overflow-y: scroll;
@@ -103,12 +124,13 @@ $v-calendar-event-colors: #00ace0, #2d9f19, #d18100, #ce3812, #2d55cd !default;
 }
 
 
-
-
-
-
-
-
+/**
+ * Outputs the selectors and properties for the Calendar component.
+ *
+ * @param {string} $primary-stylename (v-calendar) - the primary style name for the selectors
+ *
+ * @group calendar
+ */
 @mixin valo-calendar ($primary-stylename: v-calendar) {
 
 
@@ -525,12 +547,23 @@ $v-calendar-event-colors: #00ace0, #2d9f19, #d18100, #ce3812, #2d55cd !default;
 }
 
 
+/**
+ * Outputs the styles for the previous button.
+ * 
+ * @group calendar
+ */
 @mixin valo-calendar-prev-style {
   &:before {
     @include valo-tabsheet-scroller-prev-icon-style;
   }
 }
 
+
+/**
+ * Outputs the styles for the next button.
+ * 
+ * @group calendar
+ */
 @mixin valo-calendar-next-style {
   &:before {
     @include valo-tabsheet-scroller-next-icon-style;
diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss
index 9fe360c6ed..7ad08ad74d 100644
--- a/WebContent/VAADIN/themes/valo/components/_checkbox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss
@@ -1,3 +1,11 @@
+/**
+ * Outputs the selectors and properties for the CheckBox component.
+ *
+ * @param {string} $primary-stylename (v-checkbox) - the primary style name for the selectors
+ * @param {bool} $include-additional-styles - should the mixin output all the different style variations of the component
+ *
+ * @group checkbox
+ */
 @mixin valo-checkbox ($primary-stylename: v-checkbox, $include-additional-styles: contains($v-included-additional-styles, checkbox)) {
 
   .#{$primary-stylename} {
@@ -20,12 +28,26 @@
 }
 
 
+/**
+ * Outputs the font icon to indicate the checked state.
+ * 
+ * @group checkbox
+ */
 @mixin valo-checkbox-icon-style {
   content: "\f00c";
   font-family: FontAwesome;
 }
 
 
+/**
+ * Outputs the styles for a checkbox variant.
+ * 
+ * @param {color} $background-color ($v-background-color) - The background color of the checkbox
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the checkbox. The width and height of the checkbox will be the unit-size divided by 2.
+ * @param {color} $selection-color ($v-selection-color) - The color of the checked state icon 
+ * 
+ * @group checkbox
+ */
 @mixin valo-checkbox-style ($background-color: $v-background-color, $unit-size: $v-unit-size, $selection-color: $v-selection-color) {
 
   // So that we can use the same 'unit-size' for all component sizes
@@ -57,7 +79,7 @@
     margin: 0;
 
     &:focus ~ label:before {
-      @include valo-button-focus-style($background-color: $background-color, $border-fallback: null, $include-box-shadow: false);
+      @include valo-button-focus-style($background-color: $background-color, $border-fallback: null);
       @include box-shadow(valo-bevel-and-shadow($background-color: $background-color, $bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $include-focus: true));
     }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss
index 4460aafb21..b859904e59 100644
--- a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss
+++ b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss
@@ -1,3 +1,11 @@
+/**
+ * Outputs the global selectors and properties for the ColorPicker component - styles which are 
+ * considered mandatory for the component to work properly.
+ *
+ * @param {string} $primary-stylename (v-colorpicker) - the primary style name for the selectors
+ *
+ * @group colorpicker
+ */
 @mixin valo-colorpicker-global ($primary-stylename: v-colorpicker) {
   $valo-colorpicker-pathPrefix: null;
   @if $v-relative-paths == false {
@@ -73,10 +81,13 @@
 }
 
 
-
-
-
-
+/**
+ * Outputs the selectors and properties for the ColorPicker component.
+ *
+ * @param {string} $primary-stylename (v-colorpicker) - the primary style name for the selectors
+ *
+ * @group colorpicker
+ */
 @mixin valo-colorpicker ($primary-stylename: v-colorpicker) {
 
   .#{$primary-stylename}-popup.v-window {
diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index 93cb5393ee..19fc135f61 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -333,9 +333,13 @@
 
   .#{$primary-stylename}-suggestmenu {
     @include valo-selection-overlay-style($animate-in: false, $animate-out: false);
-    box-sizing: border-box;
+    @include box-sizing(border-box);
     position: relative;
     z-index: 1;
+
+    &[style*="height"] {
+      @include box-sizing(content-box);
+    }
   }
 
    margin-top: ceil($v-unit-size/8) !important;
@@ -371,7 +375,7 @@
     pointer-events: none;
 
     @if $v-animations-enabled {
-       @include animation(valo-anim-slide-in-down 200ms 80ms backwards);
+       @include animation(valo-animate-in-slide-down 200ms 80ms backwards);
     }
 
     > * {
@@ -396,9 +400,24 @@
 
     color: valo-font-color($v-background-color);
 
+    &:after {
+      // Extend click target when hovering over (popup width might change between pages)
+      content: "";
+      position: absolute;
+      display: block;
+      border-radius: 50%;
+    }
+
     &:hover {
       @include opacity(1);
       background: rgba($v-background-color, .5);
+
+      &:after {
+        top: -10px;
+        bottom: -10px;
+        left: -20px;
+        right: -20px;
+      }
     }
 
     span {
diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss
index 81c7fa0e5e..7a09d1f642 100644
--- a/WebContent/VAADIN/themes/valo/components/_datefield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss
@@ -241,8 +241,9 @@
   width: auto;
 
    table {
-     border-collapse: collapse;
+    border-collapse: collapse;
     border-spacing: 0;
+    margin: 0 auto;
   }
 
   td {
@@ -360,7 +361,7 @@
   }
 
   td.#{$primary-stylename}-month {
-    width: round($v-unit-size * 3.5);
+    width: round($v-unit-size * 4);
     @include valo-datefield-calendarpanel-month-style;
   }
 
@@ -451,7 +452,7 @@
 }
 
 @mixin valo-datefield-calendarpanel-day-focused-style {
-  @include valo-focus-style($include-box-shadow: true);
+  @include valo-focus-style;
   position: relative; // Show above other cells
 
   .v-ie8 & {
diff --git a/WebContent/VAADIN/themes/valo/components/_formlayout.scss b/WebContent/VAADIN/themes/valo/components/_formlayout.scss
index fc065cec3d..00ba01248f 100644
--- a/WebContent/VAADIN/themes/valo/components/_formlayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_formlayout.scss
@@ -156,6 +156,10 @@
       background: transparent;
       border: none;
       color: inherit;
+
+      &:focus {
+        box-shadow: none;
+      }
     }
 
     > .v-textfield-prompt,
diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss
index 7f4fef58d9..e86d017404 100644
--- a/WebContent/VAADIN/themes/valo/components/_label.scss
+++ b/WebContent/VAADIN/themes/valo/components/_label.scss
@@ -34,7 +34,7 @@ $v-letter-spacing--h4:    0               !default;
   h3, .#{$primary-stylename}-h3 {
     line-height: $v-line-height--header;
     font-weight: $v-font-weight--header;
-    color: valo-header-color($v-app-background-color);
+    color: valo-font-color($v-app-background-color, 0.92);
   }
 
   h1, .#{$primary-stylename}-h1 {
@@ -65,7 +65,7 @@ $v-letter-spacing--h4:    0               !default;
     line-height: $v-line-height--header;
     font-weight: $v-font-weight + 200;
     font-size: $v-font-size--small;
-    color: valo-header-color($v-app-background-color, $contrast: 0.12);
+    color: valo-font-color($v-app-background-color, 0.74);
     text-transform: uppercase;
     letter-spacing: $v-letter-spacing--h4;
     margin-top: 2.4em;
diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss
index 7368579d43..fee5b87e84 100644
--- a/WebContent/VAADIN/themes/valo/components/_menubar.scss
+++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss
@@ -283,6 +283,7 @@
   border-radius: 0;
   padding: first-number($v-border);
   @include box-shadow(none);
+  text-shadow: none;
   background: transparent;
   color: inherit;
 
@@ -296,7 +297,6 @@
     margin-right: max(1px, first-number($v-border));
     border-radius: $v-border-radius;
     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 {
diff --git a/WebContent/VAADIN/themes/valo/components/_nativeselect.scss b/WebContent/VAADIN/themes/valo/components/_nativeselect.scss
index 1b7469ed2b..3f24d9293f 100644
--- a/WebContent/VAADIN/themes/valo/components/_nativeselect.scss
+++ b/WebContent/VAADIN/themes/valo/components/_nativeselect.scss
@@ -27,6 +27,6 @@
 
   &:focus {
     outline: none;
-    @include valo-focus-style($include-box-shadow: true);
+    @include valo-focus-style;
   }
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_notification.scss b/WebContent/VAADIN/themes/valo/components/_notification.scss
index 3cfa446f7d..ff5e2da8d6 100644
--- a/WebContent/VAADIN/themes/valo/components/_notification.scss
+++ b/WebContent/VAADIN/themes/valo/components/_notification.scss
@@ -33,23 +33,23 @@ $v-notification-title-color: $v-focus-color !default;
   @if $v-animations-enabled {
 
     .#{$primary-stylename}-animate-in {
-      @include animation(valo-placeholder-animate-in 100ms, valo-anim-fade-in 100ms);
+      @include animation(valo-animate-in-fade 180ms);
 
-      &.v-position-left {
-        @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-right 200ms);
+      &.v-position-top {
+        @include animation(valo-animate-in-slide-down 400ms);
       }
 
-      &.v-position-right {
-        @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-left 200ms);
+      &.v-position-bottom {
+        @include animation(valo-animate-in-slide-up 400ms);
       }
     }
 
     .#{$primary-stylename}-animate-out {
-      @include animation(valo-placeholder-animate-out 150ms, valo-anim-fade-out 150ms);
+      @include animation(valo-animate-out-fade 150ms);
 
-      &.v-position-left,
-      &.v-position-right {
-        @include animation(valo-placeholder-animate-out 120ms, valo-anim-drop-fade-out 120ms);
+      &.v-position-top,
+      &.v-position-bottom {
+        @include animation(valo-animate-out-slide-down-fade 200ms);
       }
     }
   }
@@ -216,11 +216,12 @@ $v-notification-title-color: $v-focus-color !default;
     height: round($v-unit-size/1.5);
     line-height: round($v-unit-size/1.5) - 1px;
     cursor: pointer;
-    color: #000;
+    $color: if(is-dark-color($v-overlay-background-color), #fff, #000);
+    color: $color;
     @include opacity(.5);
     text-align: center;
-    border: first-number($v-border) solid #000;
-    border-color: rgba(0,0,0,.3);
+    border: first-number($v-border) solid $color;
+    border-color: rgba($color, .3);
     border-radius: 50%;
     @include transition(opacity 200ms);
   }
@@ -230,8 +231,10 @@ $v-notification-title-color: $v-focus-color !default;
   }
 
   &:active:after {
-    background-color: #000;
-    color: #fff;
+    $color: if(is-dark-color($v-overlay-background-color), #000, #fff);
+    $bg: if(is-dark-color($v-overlay-background-color), #fff, #000);
+    background-color: $bg;
+    color: $color;
     @include opacity(.3);
     @include transition(none 200ms);
   }
@@ -242,7 +245,7 @@ $v-notification-title-color: $v-focus-color !default;
 
 
 @mixin valo-notification-style {
-  background: valo-overlay-background-color();
+  background: $v-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);
 
@@ -274,11 +277,11 @@ $v-notification-title-color: $v-focus-color !default;
 
     @if $v-animations-enabled {
       &[class*="animate-in"] {
-        @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-down 200ms);
+        @include animation(valo-animate-in-slide-down 300ms);
       }
 
       &[class*="animate-out"] {
-        @include animation(valo-placeholder-animate-out 200ms, valo-anim-slide-out-up 200ms);
+        @include animation(valo-animate-out-slide-up 200ms);
       }
     }
   }
@@ -288,11 +291,11 @@ $v-notification-title-color: $v-focus-color !default;
 
     @if $v-animations-enabled {
       &[class*="animate-in"] {
-        @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-up 200ms);
+        @include animation(valo-animate-in-slide-up 300ms);
       }
 
       &[class*="animate-out"] {
-        @include animation(valo-placeholder-animate-out 200ms, valo-anim-slide-out-down 200ms);
+        @include animation(valo-animate-out-slide-down 200ms);
       }
     }
   }
diff --git a/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss
index dbe2490826..ae1347d0e3 100644
--- a/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss
@@ -140,7 +140,7 @@
 
 
 
-@mixin valo-orderedlayout ($include-additional-styles: contains($v-included-additional-styles, orderedlayout)) {
+@mixin valo-orderedlayout ($include-additional-styles: contains($v-included-additional-styles, orderedlayout) or contains($v-included-additional-styles, verticallayout) or contains($v-included-additional-styles, horizontallayout)) {
 
   .v-margin-top {
     padding-top: $v-layout-margin-top;
diff --git a/WebContent/VAADIN/themes/valo/components/_panel.scss b/WebContent/VAADIN/themes/valo/components/_panel.scss
index 07e21cccbf..8a7cd72c7c 100644
--- a/WebContent/VAADIN/themes/valo/components/_panel.scss
+++ b/WebContent/VAADIN/themes/valo/components/_panel.scss
@@ -97,7 +97,7 @@ $v-panel-border: $v-border !default;
   font-weight: $v-caption-font-weight;
   font-size: $v-caption-font-size;
   @include box-shadow(valo-bevel-and-shadow($background-color: $bg, $bevel: $bevel, $shadow: $shadow, $gradient: $gradient));
-  text-shadow: valo-text-shadow(valo-font-color($bg), $bg, $v-bevel);
+  text-shadow: valo-text-shadow(valo-font-color($bg), $bg);
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_popupview.scss b/WebContent/VAADIN/themes/valo/components/_popupview.scss
index 794a6997de..12e294e8cc 100644
--- a/WebContent/VAADIN/themes/valo/components/_popupview.scss
+++ b/WebContent/VAADIN/themes/valo/components/_popupview.scss
@@ -8,9 +8,9 @@
   .#{$primary-stylename} {
     @include valo-link-style;
   }
-  
+
   .#{$primary-stylename}-popup {
-    @include valo-overlay-style($animate-in: v-popupview-animate-in 120ms, $animate-out: (valo-placeholder-animate-out 120ms, valo-anim-fade-out 120ms));
+    @include valo-overlay-style($animate-in: v-popupview-animate-in 120ms, $animate-out: (valo-animate-out-fade 120ms));
 
     .popupContent {
       @include valo-panel-adjust-content-margins;
diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
index ccd70c4328..f4fee96041 100644
--- a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
+++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
@@ -77,7 +77,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
   @if $v-tabsheet-content-animation-enabled {
     .#{$primary-stylename}-tabsheetpanel > .v-scrollable > .v-widget {
-      @include valo-anim-fade-in(300ms);
+      @include valo-animate-in-fade(300ms);
     }
 
     $spinner-size: round($v-unit-size/2);
@@ -85,37 +85,17 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
     .#{$primary-stylename}-deco {
       @include valo-spinner($size: $spinner-size);
-      height: 0 !important;
-      border-style: none;
-      display: block;
+      display: none;
       position: absolute;
-      z-index: -1;
+      z-index: 1;
       bottom: 50%;
       margin-bottom: round($v-unit-size/-2) - $spinner-size/2;
       left: 50%;
       margin-left: $spinner-size/-2;
-      opacity: 0;
-
-      .v-ie8 & {
-        min-height: 0;
-      }
     }
 
     .#{$primary-stylename}-loading .#{$primary-stylename}-deco {
-      @include transition(opacity 200ms 200ms);
-      opacity: 1;
-      z-index: 1;
-      height: $spinner-size !important;
-      border-style: solid;
-
-      .v-ie8 &,
-      .v-ie9 & {
-        border-style: none;
-      }
-
-      .v-ie8 & {
-        min-height: 30px;
-      }
+      display: block;
     }
   }
 
@@ -168,7 +148,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
     position: absolute;
     height: 0;
     // iOS panics with background color, creating black line artifacts
-    border-top: max(1px, first-number($v-border)) solid first-color(valo-border($strength: 0.5));
+    border-top: max(1px, first-number($v-border)) solid first-color(valo-border($color: $v-app-background-color, $strength: 0.5));
     bottom: 0;
     left: 0;
     right: 0;
@@ -387,7 +367,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
       &:hover {
         background-color: darken($v-app-background-color, 3%);
-        border-bottom-color: first-color(valo-border($strength: 0.5));
+        border-bottom-color: first-color(valo-border($color: $v-app-background-color, $strength: 0.5));
       }
     }
 
@@ -398,13 +378,13 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
     @if $frame-inactive-tabs {
       .#{$primary-stylename}-tabitem .v-caption {
-        border-color: first-color(valo-border($strength: 0.5));
+        border-color: first-color(valo-border($color: $v-app-background-color, $strength: 0.5));
       }
     }
 
     .#{$primary-stylename}-tabitem-selected .v-caption {
       background: $v-panel-background-color;
-      border-color: first-color(valo-border($strength: 0.5));
+      border-color: first-color(valo-border($color: $v-app-background-color, $strength: 0.5));
       border-bottom: none;
       padding-bottom: first-number($v-border);
     }
@@ -429,7 +409,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
     }
 
     @if $outer-frame {
-      border: valo-border($strength: 0.5);
+      border: valo-border($color: $v-app-background-color, $strength: 0.5);
       border-top: none;
     }
   }
@@ -437,7 +417,7 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
   &.padded-tabbar {
     > .#{$primary-stylename}-tabcontainer {
       @if $outer-frame {
-        border: valo-border($strength: 0.5);
+        border: valo-border($color: $v-app-background-color, $strength: 0.5);
         border-bottom: none;
       }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss
index 9a9e597888..6429dc0896 100644
--- a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss
+++ b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss
@@ -271,7 +271,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
   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);
+  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);
@@ -297,7 +297,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
       color: $active-color;
     }
   }
-  
+
   &.selected {
     background: if(is-dark-color($bg), darken($bg, 3%), lighten($bg, 5%));
 
diff --git a/WebContent/VAADIN/themes/valo/components/_window.scss b/WebContent/VAADIN/themes/valo/components/_window.scss
index cdd2298499..dd2eb60d16 100644
--- a/WebContent/VAADIN/themes/valo/components/_window.scss
+++ b/WebContent/VAADIN/themes/valo/components/_window.scss
@@ -1,8 +1,8 @@
 $v-window-background-color: $v-panel-background-color !default;
 $v-window-border-radius: $v-border-radius !default;
 $v-window-shadow: 0 2px 10px (v-shade 2), 0 16px 80px -6px (v-shade 3), last($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 100ms, valo-anim-scale-down-fade-out 100ms !default;
+$v-window-animate-in: valo-animate-in-fade 140ms !default;
+$v-window-animate-out: valo-animate-out-scale-down-fade 100ms !default;
 $v-window-modality-curtain-background-color: #222 !default;
 
 
@@ -12,7 +12,7 @@ $v-window-modality-curtain-background-color: #222 !default;
     100% { opacity: 1; }
   }
 
-  @include keyframes(valo-anim-scale-down-fade-out) {
+  @include keyframes(valo-animate-out-scale-down-fade) {
     100% {
       @include transform(scale(0.8));
       opacity: 0;
@@ -59,7 +59,7 @@ $v-window-modality-curtain-background-color: #222 !default;
     left: 0;
     @include radial-gradient(circle at 50% 50%, $v-window-modality-curtain-background-color, darken($v-window-modality-curtain-background-color, valo-gradient-opacity()), $fallback: $v-window-modality-curtain-background-color);
     @include opacity(max(0.2, 0.8 - valo-gradient-opacity()/100%));
-    @include valo-anim-fade-in($duration: 400ms, $delay: 100ms);
+    @include valo-animate-in-fade($duration: 400ms, $delay: 100ms);
 
     .v-op12 & {
       // Opera 12 has a shitbreak with the fade-in (flickers)