Valo Sass API documentation, part 2

Change-Id: Ic707d897a84a308f789b2805a980b696beaa6edd

11 files changed, 729 insertions, 213 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss
index 4ac0e4c16f..eb57e20d2a 100644
--- a/WebContent/VAADIN/themes/valo/components/_button.scss
+++ b/WebContent/VAADIN/themes/valo/components/_button.scss
@@ -164,7 +164,7 @@
 /**
  * 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} $unit-size ($v-unit-size) - The sizing of the button, which corresponds 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
diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index 19fc135f61..0b756126ff 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -1,9 +1,17 @@
+/**
+ * Outputs the selectors and properties for the ComboBox component.
+ *
+ * @param {string} $primary-stylename (v-filterselect) - 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 combobox
+ */
 @mixin valo-combobox ($primary-stylename: v-filterselect, $include-additional-styles: contains($v-included-additional-styles, combobox)) {
 
   .#{$primary-stylename} {
     position: relative;
     width: $v-default-field-width;
-    @include valo-combobox-style($primary-stylename: $primary-stylename);
+    @include valo-combobox-style;
     white-space: nowrap;
 
     .v-icon {
@@ -24,39 +32,11 @@
   }
 
   .#{$primary-stylename}-suggestpopup {
-    @include valo-combobox-popup-style($primary-stylename: $primary-stylename);
+    @include valo-combobox-popup-style;
   }
 
   .#{$primary-stylename}-no-input {
-    cursor: pointer;
-    text-shadow: valo-text-shadow();
-
-    @if $v-border-radius != $v-textfield-border-radius {
-      border-radius: $v-border-radius;
-    }
-
-    .#{$primary-stylename}-input {
-      @include user-select(none);
-      @include valo-gradient;
-      cursor: inherit;
-      @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient));
-      @include valo-border-with-gradient($border: $v-border, $color: $v-background-color, $gradient: $v-gradient);
-      text-shadow: inherit;
-      text-overflow: ellipsis;
-      border-radius: inherit;
-
-      &:focus {
-        @include valo-textfield-focus-style($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $background-color: $v-background-color);
-      }
-    }
-
-    .#{$primary-stylename}-button {
-      border-left: none !important;
-    }
-
-    &:hover .#{$primary-stylename}-button:before {
-      color: inherit;
-    }
+    @include valo-combobox-no-input-style;
   }
 
 
@@ -110,16 +90,29 @@
 }
 
 
-
-
-
-
+/**
+ * Outputs the styles for a combobox variant.
+ *
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the combobox, which corresponds its height
+ * @param {color} $font-color (null) - The font color of the combobox. Computed from the $background-color by default.
+ * @param {number} $font-weight (max(400, $v-font-weight)) - The font weight of the combobox
+ * @param {size} $font-size (null) - The font size of the combobox. Inherited from the parent by default.
+ * @param {color} $background-color ($v-textfield-background-color) - The background color of the combobox
+ * @param {list} $border ($v-textfield-border) - The border of the combobox
+ * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the combobox
+ * @param {list} $gradient (none) - Valo specific gradient value. See the documentation for $v-gradient.
+ * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
+ * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
+ * @param {list} $states (normal focus disabled) - The combobox states for which to output corresponding styles
+ *
+ * @group combobox
+ */
 @mixin valo-combobox-style (
     $unit-size: $v-unit-size,
 
-    $font-color: null, // Computed by default
+    $font-color: null,
     $font-weight: max(400, $v-font-weight),
-    $font-size: null, // Inherited by default
+    $font-size: null,
 
     $background-color: $v-textfield-background-color,
     $border: $v-textfield-border,
@@ -129,14 +122,13 @@
     $bevel: $v-textfield-bevel,
     $shadow: $v-textfield-shadow,
 
-    $primary-stylename: v-filterselect,
     $states: normal focus disabled
   ) {
 
     height: $unit-size;
     border-radius: $border-radius;
 
-  .#{$primary-stylename}-input {
+  [class*="input"] {
     @include valo-combobox-input-style(
           $unit-size: $unit-size,
           $gradient: $gradient,
@@ -151,7 +143,7 @@
           $states: $states);
   }
 
-  .v-icon + .#{$primary-stylename}-input {
+  .v-icon + [class*="input"] {
     padding-left: $unit-size;
   }
 
@@ -171,17 +163,17 @@
     padding-top: .12em;
   }
 
-  &.#{$primary-stylename}-prompt > .#{$primary-stylename}-input {
+  &[class*="prompt"] > [class*="input"] {
     @include valo-textfield-prompt-style($background-color);
   }
 
-  .#{$primary-stylename}-button {
-    @include valo-combobox-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color);
+  [class$="button"] {
+    @include valo-combobox-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color, $border-radius: $border-radius, $border: $border);
   }
 
   &.v-disabled  {
     @include opacity($v-textfield-disabled-opacity);
-    & .#{$primary-stylename}-button {
+    & [class$="button"] {
       cursor: default;
       pointer-events: none;
       &:active:after {
@@ -191,11 +183,11 @@
   }
 
   &.v-readonly {
-    .#{$primary-stylename}-input {
+    [class*="input"] {
       @include valo-textfield-readonly-style;
     }
 
-    .#{$primary-stylename}-button {
+    [class$="button"] {
       cursor: default;
       pointer-events: none;
       &:active:after {
@@ -206,18 +198,34 @@
 }
 
 
-
-
+/**
+ * Outputs the styles for a combobox variant input element.
+ * 
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the input (affects the padding only, width and height are 100%)
+ * @param {size | list} $padding (null) - The padding of the input. Computed from other parameters by default.
+ * @param {color} $font-color (null) - The font color of the input. Computed from the $background-color by default.
+ * @param {number} $font-weight (null) - The font weight of the input. Inherited from the parent by default.
+ * @param {size} $font-size (null) - The font size of the combobox. Inherited from the parent by default.
+ * @param {color} $background-color ($v-textfield-background-color) - The background color of the input
+ * @param {list} $border ($v-textfield-border) - The border of the input
+ * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the input
+ * @param {list} $gradient (none) - Valo specific gradient value. See the documentation for $v-gradient.
+ * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
+ * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
+ * @param {list} $states (normal focus disabled) - The combobox states for which to output corresponding styles
+ *
+ * @group combobox
+ */
 @mixin valo-combobox-input-style (
     $unit-size: $v-unit-size,
-    $padding: null, // Computed by default
+    $padding: null,
 
-    $font-color: null, // Computed by default
-    $font-weight: null, // Inherited by default
-    $font-size: null, // Inherited by default
+    $font-color: null,
+    $font-weight: null,
+    $font-size: null,
 
     $background-color: $v-textfield-background-color,
-    $border: $v-border,
+    $border: $v-textfield-border,
     $border-radius: $v-textfield-border-radius,
 
     $gradient: none,
@@ -246,13 +254,19 @@
 }
 
 
-
-
-
-
-
-@mixin valo-combobox-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color) {
-  $border-width: first-number($v-textfield-border);
+/**
+ * Outputs the styles for a combobox variant button element.
+ * 
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds its width.
+ * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
+ * @param {color} $background-color ($v-textfield-background-color) - The background color of the input, which affects the font color of the button
+ * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the input, which affects the border-radius of the button
+ * @param {list} $border ($v-textfield-border) - The border of the input, which affects the border of the button
+ *
+ * @group combobox
+ */
+@mixin valo-combobox-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-border-radius, $border: $v-textfield-border) {
+  $border-width: first-number($v-textfield-border) or 0;
   @include valo-tappable;
   position: absolute;
   top: $border-width;
@@ -310,16 +324,23 @@
 }
 
 
-
+/**
+ * Outputs the font icon styles for the combobox drop down button.
+ *
+ * @group combobox
+ */
 @mixin valo-combobox-button-icon-style {
   font-family: FontAwesome;
   content: "\f078";
 }
 
 
-
-
-@mixin valo-combobox-popup-style ($primary-stylename: v-filterselect) {
+/**
+ * Outputs the styles for a combobox popup.
+ *
+ * @group combobox
+ */
+@mixin valo-combobox-popup-style {
 
   @if $v-animations-enabled {
     @if $v-overlay-animate-in {
@@ -331,7 +352,7 @@
     // closing when the user selects an item
   }
 
-  .#{$primary-stylename}-suggestmenu {
+  [class$="suggestmenu"] {
     @include valo-selection-overlay-style($animate-in: false, $animate-out: false);
     @include box-sizing(border-box);
     position: relative;
@@ -359,7 +380,7 @@
     @include valo-selection-item-selected-style;
   }
 
-  .#{$primary-stylename}-status {
+  [class$="status"] {
     position: absolute;
     right: $v-border-radius;
     $bg: scale-color($v-background-color, $lightness: -15%);
@@ -453,3 +474,35 @@
     display: none;
   }
 }
+
+@mixin valo-combobox-no-input-style {
+  cursor: pointer;
+  text-shadow: valo-text-shadow();
+
+  @if $v-border-radius != $v-textfield-border-radius {
+    border-radius: $v-border-radius;
+  }
+
+  [class*="input"] {
+    @include user-select(none);
+    @include valo-gradient;
+    cursor: inherit;
+    @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient));
+    @include valo-border-with-gradient($border: $v-border, $color: $v-background-color, $gradient: $v-gradient);
+    text-shadow: inherit;
+    text-overflow: ellipsis;
+    border-radius: inherit;
+
+    &:focus {
+      @include valo-textfield-focus-style($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $background-color: $v-background-color);
+    }
+  }
+
+  [class$="button"] {
+    border-left: none !important;
+  }
+
+  &:hover [class$="button"]:before {
+    color: inherit;
+  }
+}
diff --git a/WebContent/VAADIN/themes/valo/components/_csslayout.scss b/WebContent/VAADIN/themes/valo/components/_csslayout.scss
index b0fa4362e7..3525bcad5a 100644
--- a/WebContent/VAADIN/themes/valo/components/_csslayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_csslayout.scss
@@ -1,6 +1,20 @@
+/**
+ * The amount of spacing between different widgets in a component group.
+ * If null, a computed value is used ($v-border size * -1, or 1px if $v-border size is 0)
+ * 
+ * @group csslayout
+ */
 $v-component-group-spacing: null !default;
 
 
+/**
+ * Outputs the additional styles for the CssLayout component. Does not produce any other output.
+ * 
+ * @param {string} $primary-stylename (v-csslayout) - 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 csslayout
+ */
 @mixin valo-csslayout ($primary-stylename: v-csslayout, $include-additional-styles: contains($v-included-additional-styles, csslayout)){
   @if $include-additional-styles {
     .#{$primary-stylename}-well {
@@ -20,6 +34,18 @@ $v-component-group-spacing: null !default;
 }
 
 
+/**
+ * Outputs the styles for a horizontal component group. The target component is 
+ * expected to be a CssLayout, which is a single DIV element with child components 
+ * directly inside.
+ * 
+ * @group csslayout
+ * 
+ * @example scss
+ * .my-csslayout {
+ *   @include valo-component-group;
+ * }
+ */
 @mixin valo-component-group {
   white-space: nowrap;
   position: relative;
diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss
index 377261e4e6..b1d5dcce5b 100644
--- a/WebContent/VAADIN/themes/valo/components/_datefield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss
@@ -1,9 +1,17 @@
+/**
+ * Outputs the selectors and properties for the DateField component.
+ *
+ * @param {string} $primary-stylename (v-datefield) - 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 datefield
+ */
 @mixin valo-datefield ($primary-stylename: v-datefield, $include-additional-styles: contains($v-included-additional-styles, datefield)) {
 
   .#{$primary-stylename} {
     position: relative;
     width: $v-default-field-width;
-    @include valo-datefield-style($primary-stylename: $primary-stylename);
+    @include valo-datefield-style;
   }
 
   .#{$primary-stylename}-error {
@@ -89,6 +97,13 @@
 }
 
 
+/**
+ * Outputs the selectors and properties for the InlineDateField component.
+ *
+ * @param {string} $primary-stylename (v-inline-datefield) - the primary style name for the selectors
+ *
+ * @group datefield
+ */
 @mixin valo-inline-datefield ($primary-stylename: v-inline-datefield) {
   @include valo-datefield-calendarpanel-style(#{$primary-stylename}-calendarpanel);
 
@@ -100,9 +115,19 @@
 }
 
 
-
-
-
+/**
+ * Outputs the styles for a date field variant.
+ *
+ * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
+ * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the datefield, which corresponds its height
+ * @param {list} $border ($v-textfield-border) - The border of the datefield
+ * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the datefield
+ * @param {color} $background-color ($v-textfield-background-color) - The background color of the datefield
+ * @param {list} $states (normal focus disabled) - The datefield states for which to output corresponding styles
+ *
+ * @group datefield
+ */
 @mixin valo-datefield-style (
     $bevel             : $v-textfield-bevel,
     $shadow            : $v-textfield-shadow,
@@ -110,14 +135,13 @@
     $border            : $v-textfield-border,
     $border-radius     : $v-textfield-border-radius,
     $background-color  : $v-textfield-background-color,
-    $primary-stylename : v-datefield,
     $states            : normal focus disabled
   ) {
 
   height: $unit-size;
   border-radius: $border-radius;
 
-  .#{$primary-stylename}-textfield {
+  [class*="textfield"] {
     @include box-sizing(border-box);
     @include valo-textfield-style($bevel: $bevel, $shadow: $shadow, $unit-size: $unit-size, $border: $border, $border-radius: $border-radius, $background-color: $background-color, $states: $states) ;
     padding-left: $unit-size * 1.2;
@@ -126,18 +150,18 @@
     border-radius: inherit;
   }
 
-  &.#{$primary-stylename}-prompt > .#{$primary-stylename}-textfield {
+  &[class*="prompt"] > [class*="textfield"] {
     @include valo-textfield-prompt-style($background-color);
   }
 
-  .#{$primary-stylename}-button {
+  [class$="button"] {
     @include valo-datefield-button-style($unit-size: $unit-size, $bevel: $bevel, $background-color: $background-color, $border-radius: $border-radius, $border: $border);
   }
 
   &.v-disabled {
     @include opacity($v-disabled-opacity);
 
-    .#{$primary-stylename}-button {
+    [class$="button"] {
       cursor: default;
       pointer-events: none;
       &:active:after {
@@ -147,11 +171,11 @@
   }
 
   &.v-readonly {
-    .#{$primary-stylename}-textfield {
+    [class*="textfield"] {
       @include valo-textfield-readonly-style;
     }
 
-    .#{$primary-stylename}-button {
+    [class$="button"] {
       cursor: default;
       pointer-events: none;
       &:active:after {
@@ -162,10 +186,19 @@
 }
 
 
-
-
+/**
+ * Outputs the styles for a date field variant button element.
+ * 
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the button, which corresponds its width.
+ * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
+ * @param {color} $background-color ($v-textfield-background-color) - The background color of the input, which affects the font color of the button
+ * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the input, which affects the border-radius of the button
+ * @param {list} $border ($v-textfield-border) - The border of the input, which affects the border of the button
+ *
+ * @group datefield
+ */
 @mixin valo-datefield-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-border-radius, $border: $v-textfield-border) {
-  $border-width: first-number($border) or first-number($v-textfield-border);
+  $border-width: first-number($border) or 0;
   @include valo-tappable;
   -webkit-appearance: none;
   background: transparent;
@@ -223,16 +256,22 @@
 }
 
 
-
-
+/**
+ * Outputs the font icon styles for the date field drop down button.
+ *
+ * @group datefield
+ */
 @mixin valo-datefield-button-icon-style {
   font-family: FontAwesome;
   content: "\f073";
 }
 
 
-
-
+/**
+ * Outputs the styles for a date field popup.
+ *
+ * @group datefield
+ */
 @mixin valo-datefield-popup-style {
   @include valo-overlay-style;
 
@@ -254,6 +293,13 @@
 }
 
 
+/**
+ * Outputs the styles for calendar panel (i.e. month view).
+ * 
+ * @param {string} $primary-stylename (v-datefield-calendarpanel) - the primary style name for the selectors
+ *
+ * @group datefield
+ */
 @mixin valo-datefield-calendarpanel-style ($primary-stylename: v-datefield-calendarpanel) {
   .#{$primary-stylename} {
     font-size: $v-font-size;
@@ -410,8 +456,11 @@
 }
 
 
-
-
+/**
+ * Outputs the styles for an individual day element in a calendar panel.
+ * 
+ * @group datefield
+ */
 @mixin valo-datefield-calendarpanel-day-style {
   @include box-sizing(border-box);
   width: round($v-unit-size * 0.8);
@@ -430,21 +479,45 @@
   }
 }
 
+
+/**
+ * Outputs the hover state styles for an individual day element in a calendar panel.
+ * 
+ * @group datefield
+ */
 @mixin valo-datefield-calendarpanel-day-hover-style {
   color: $v-selection-color;
 }
 
+
+/**
+ * Outputs the styles for an individual day element, which are not part of the current month, in a calendar panel.
+ * 
+ * @group datefield
+ */
 @mixin valo-datefield-calendarpanel-day-offmonth-style {
   color: mix(valo-font-color($v-background-color), $v-background-color);
   background: transparent;
 }
 
+
+/**
+ * Outputs the styles for todays day element in a calendar panel.
+ * 
+ * @group datefield
+ */
 @mixin valo-datefield-calendarpanel-day-today-style {
   color: valo-font-color($v-background-color, 0.9);
   font-weight: max(600, $v-font-weight + 100);
   border-color: valo-font-color($v-background-color, 0.3);
 }
 
+
+/**
+ * Outputs the styles for the selected day element in a calendar panel.
+ * 
+ * @group datefield
+ */
 @mixin valo-datefield-calendarpanel-day-selected-style {
   color: valo-font-color($v-selection-color);
   @include valo-gradient($v-selection-color);
@@ -452,6 +525,12 @@
   font-weight: max(600, $v-font-weight + 100);
 }
 
+
+/**
+ * Outputs the focus state styles for an individual day element in a calendar panel.
+ * 
+ * @group datefield
+ */
 @mixin valo-datefield-calendarpanel-day-focused-style {
   @include valo-focus-style;
   position: relative; // Show above other cells
@@ -462,26 +541,55 @@
 }
 
 
+/**
+ * Outputs the font icon styles for the next month button in a calendar panel.
+ * 
+ * @group datefield
+ */
 @mixin valo-datefield-calendarpanel-nextmonth-icon-style {
   font-family: FontAwesome;
   content: "\f105";
 }
 
+
+/**
+ * Outputs the font icon styles for the previous month button in a calendar panel.
+ * 
+ * @group datefield
+ */
 @mixin valo-datefield-calendarpanel-prevmonth-icon-style {
   font-family: FontAwesome;
   content: "\f104";
 }
 
+
+/**
+ * Outputs the font icon styles for the next year button in a calendar panel.
+ * 
+ * @group datefield
+ */
 @mixin valo-datefield-calendarpanel-nextyear-icon-style {
   font-family: FontAwesome;
   content: "\f101";
 }
 
+
+/**
+ * Outputs the font icon styles for the previous year button in a calendar panel.
+ * 
+ * @group datefield
+ */
 @mixin valo-datefield-calendarpanel-prevyear-icon-style {
   font-family: FontAwesome;
   content: "\f100";
 }
 
+
+/**
+ * Outputs the styles for the current month and year title element in a calendar panel.
+ * 
+ * @group datefield
+ */
 @mixin valo-datefield-calendarpanel-month-style {
   color: $v-selection-color;
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss b/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss
index 1eaf078661..6e4859b82c 100644
--- a/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss
+++ b/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss
@@ -1,3 +1,10 @@
+/**
+ * Outputs the styles and selectors for the DragAndDropWrapper component.
+ * 
+ * @param {string} $primary-stylename (v-ddwrapper) - the primary style name for the selectors
+ * 
+ * @group drag-n-drop
+ */
 @mixin valo-dragwrapper ($primary-stylename: v-ddwrapper) {
 
   [draggable=true] {
@@ -103,8 +110,11 @@
 }
 
 
-
-
+/**
+ * Outputs the styles for a drop target when the drag is on top of it.
+ * 
+ * @group drag-n-drop
+ */
 @mixin valo-ddwrapper-box-hint-style {
   border-width: 2px;
   border-radius: $v-border-radius;
diff --git a/WebContent/VAADIN/themes/valo/components/_formlayout.scss b/WebContent/VAADIN/themes/valo/components/_formlayout.scss
index 00ba01248f..7a9e81b30a 100644
--- a/WebContent/VAADIN/themes/valo/components/_formlayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_formlayout.scss
@@ -1,7 +1,15 @@
+/**
+ * Outputs the selectors and properties for the FormLayout component.
+ *
+ * @param {string} $primary-stylename (v-formlayout) - 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 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;
+  @include valo-formlayout-margin;
 
   .#{$primary-stylename} > table {
     border-spacing: 0;
@@ -53,91 +61,114 @@
 
   @if $include-additional-styles {
     .#{$primary-stylename}.light {
-      @include valo-formlayout-light-style($primary-stylename);
+      @include valo-formlayout-light-style;
     }
   }
 
 }
 
 
-@mixin valo-formlayout-margins ($primary-stylename: v-formlayout, $all: null, $top: $v-layout-margin-top, $right: $v-layout-margin-right, $bottom: $v-layout-margin-bottom, $left: $v-layout-margin-left) {
-  @if $all != null {
-    $top: $all;
-    $right: $all;
-    $bottom: $all;
-    $left: $all;
-  }
-
-  .#{$primary-stylename}-margin-top > tbody > .#{$primary-stylename}-firstrow {
-    > .#{$primary-stylename}-captioncell,
-    > .#{$primary-stylename}-contentcell,
-    > .#{$primary-stylename}-errorcell {
-      padding-top: $top;
-    }
-  }
-
-  .#{$primary-stylename}-margin-bottom > tbody > .#{$primary-stylename}-lastrow {
-    > .#{$primary-stylename}-captioncell,
-    > .#{$primary-stylename}-contentcell,
-    > .#{$primary-stylename}-errorcell {
-      padding-bottom: $bottom;
-    }
-  }
-
-  .#{$primary-stylename}-margin-left > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-captioncell {
+/**
+ * Outputs the styles for form layout margin.
+ *
+ * @param {list} $margin ($v-layout-margin-top $v-layout-margin-right $v-layout-margin-bottom $v-layout-margin-left) - The margin for the form layout (any valid CSS margin value)
+ *
+ * @group formlayout
+ */
+@mixin valo-formlayout-margin ($margin: $v-layout-margin-top $v-layout-margin-right $v-layout-margin-bottom $v-layout-margin-left) {
+  $top: 0;
+  $right: 0;
+  $bottom: 0;
+  $left: 0;
+
+  @if length($margin) == 1 {
+    $top: $margin;
+    $right: $margin;
+    $bottom: $margin;
+    $left: $margin;
+  } @else if length($margin) == 2 {
+    $top: nth($margin, 1);
+    $right: nth($margin, 2);
+    $bottom: nth($margin, 1);
+    $left: nth($margin, 2);
+  } @else if length($margin) == 3 {
+    $top: nth($margin, 1);
+    $right: nth($margin, 2);
+    $bottom: nth($margin, 3);
+    $left: nth($margin, 2);
+  } @else if length($margin) == 4 {
+    $top: nth($margin, 1);
+    $right: nth($margin, 2);
+    $bottom: nth($margin, 3);
+    $left: nth($margin, 4);
+  }
+
+  [class*="margin-top"] > tbody > [class*="firstrow"] > td {
+    padding-top: $top;
+  }
+
+  [class*="margin-bottom"] > tbody > [class*="lastrow"] > td {
+    padding-bottom: $bottom;
+  }
+
+  [class*="margin-left"] > tbody > [class*="row"] > [class*="captioncell"] {
     padding-left: $left;
   }
 
-  .#{$primary-stylename}-margin-right > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-contentcell {
+  [class*="margin-right"] > tbody > [class*="row"] > [class*="contentcell"] {
     padding-right: $right;
   }
 }
 
 
-@mixin valo-formlayout-spacing ($primary-stylename: v-formlayout, $vertical: $v-layout-spacing-vertical) {
-  .#{$primary-stylename}-spacing > tbody > .#{$primary-stylename}-row {
-    > .#{$primary-stylename}-captioncell,
-    > .#{$primary-stylename}-contentcell,
-    > .#{$primary-stylename}-errorcell {
-      padding-top: $vertical;
-    }
+/**
+ * Outputs the styles for form layout spacing.
+ *
+ * @param {size} $vertical ($v-layout-spacing-vertical) - The vertical spacing between the rows in the form layout
+ *
+ * @group formlayout
+ */
+@mixin valo-formlayout-spacing ($vertical: $v-layout-spacing-vertical) {
+  [class*="spacing"] > tbody > [class*="row"] > td {
+    padding-top: $vertical;
   }
-}
-
-
 
+  [class*="spacing"] > tbody > [class*="firstrow"] > td {
+    padding-top: 0;
+  }
+}
 
 
-@mixin valo-formlayout-light-style ($primary-stylename: v-formlayout, $row-height: $v-unit-size) {
+/**
+ * Outputs the styles for a light style form layout. This mixin expects the target to have the normal styles of a form layout applied.
+ *
+ * @param {size} $row-height ($v-unit-size) - The height of an individual form layout row
+ *
+ * @group formlayout
+ */
+@mixin valo-formlayout-light-style ($row-height: $v-unit-size) {
   > table {
     padding: 0;
   }
 
-  > table > tbody > .#{$primary-stylename}-row {
-    > .#{$primary-stylename}-captioncell,
-    > .#{$primary-stylename}-contentcell,
-    > .#{$primary-stylename}-errorcell {
-      padding-top: 0;
-      height: $row-height; // Effectively min-height
-    }
-  }
-
-  > table > tbody > .#{$primary-stylename}-row td {
+  > table > tbody > [class*="row"] > td {
+    padding-top: 0;
+    height: $row-height; // Effectively min-height
     border-bottom: valo-border($color: $v-app-background-color, $strength: 0.3);
   }
 
-  > table > tbody > .#{$primary-stylename}-lastrow td {
+  > table > tbody > [class*="lastrow"] > td {
     border-bottom: none;
   }
 
-  > table > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-captioncell {
+  > table > tbody > [class*="row"] > [class*="captioncell"] {
     color: valo-font-color($v-background-color, .5);
     text-align: right;
     padding-left: ceil($v-unit-size/3);
     line-height: $row-height;
   }
 
-  .#{$primary-stylename}-contentcell {
+  > table > tbody > [class*="row"] > [class*="contentcell"] {
     > .v-textfield,
     > .v-textarea,
     > .v-filterselect,
@@ -173,6 +204,17 @@
     > .v-richtextarea {
       height: auto;
     }
+
+    > .v-label-h2,
+    > .v-label-h3,
+    > .v-label-h4 {
+      border-bottom: none;
+    }
+
+    > .v-label-h3,
+    > .v-label-h4 {
+      margin-top: 0;
+    }
   }
 
   .v-richtextarea {
@@ -196,17 +238,4 @@
   .v-checkbox {
     margin-left: ceil($v-unit-size/6);
   }
-
-  > table > tbody > .#{$primary-stylename}-row > .#{$primary-stylename}-contentcell {
-    > .v-label-h2,
-    > .v-label-h3,
-    > .v-label-h4 {
-      border-bottom: none;
-    }
-
-    > .v-label-h3,
-    > .v-label-h4 {
-      margin-top: 0;
-    }
-  }
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss
index e86d017404..b59d3e0e21 100644
--- a/WebContent/VAADIN/themes/valo/components/_label.scss
+++ b/WebContent/VAADIN/themes/valo/components/_label.scss
@@ -1,24 +1,110 @@
-$v-font-weight--header:   $v-font-weight - 100 !default;
-$v-line-height--header:   1.1             !default;
-$v-font-family--header:   null            !default;
-$v-font-color--colored:   $v-selection-color !default;
-
-$v-font-size--h1:         2.4em           !default;
-$v-font-size--h2:         1.6em           !default;
-$v-font-size--h3:         1.2em           !default;
-$v-font-size--large:      1.2em           !default;
-$v-font-size--small:      0.87em          !default;
-
-$v-font-family--h1:       $v-font-family--header   !default;
-$v-font-family--h2:       $v-font-family--header   !default;
-$v-font-family--h3:       $v-font-family--header   !default;
-
-$v-letter-spacing--h1:    -0.03em         !default;
-$v-letter-spacing--h2:    -0.02em         !default;
-$v-letter-spacing--h3:    0               !default;
-$v-letter-spacing--h4:    0               !default;
-
-
+/**
+ * The font weight for headers.
+ * 
+ * @group label
+ */
+$v-font-weight--header: $v-font-weight - 100 !default;
+
+/**
+ * The line height for headers.
+ * 
+ * @group label
+ */
+$v-line-height--header: 1.1 !default;
+
+/**
+ * The font family for headers.
+ * 
+ * @group label
+ */
+$v-font-family--header: null !default;
+
+/**
+ * The font color for colored style labels.
+ * 
+ * @group label
+ */
+$v-font-color--colored: $v-selection-color !default;
+
+/**
+ * The font size for 1st level headers.
+ * 
+ * @group label
+ */
+$v-font-size--h1: 2.4em !default;
+
+/**
+ * The font size for 2nd level headers.
+ * 
+ * @group label
+ */
+$v-font-size--h2: 1.6em !default;
+
+/**
+ * The font size for 3rd level headers.
+ * 
+ * @group label
+ */
+$v-font-size--h3: 1.2em !default;
+
+/**
+ * The font family for 1st level headers.
+ * 
+ * @group label
+ */
+$v-font-family--h1: $v-font-family--header !default;
+
+/**
+ * The font family for 2nd level headers.
+ * 
+ * @group label
+ */
+$v-font-family--h2: $v-font-family--header !default;
+
+/**
+ * The font family for 3rd level headers.
+ * 
+ * @group label
+ */
+$v-font-family--h3: $v-font-family--header !default;
+
+/**
+ * The letter spacing for 1st level headers.
+ * 
+ * @group label
+ */
+$v-letter-spacing--h1: -0.03em !default;
+
+/**
+ * The letter spacing for 2nd level headers.
+ * 
+ * @group label
+ */
+$v-letter-spacing--h2: -0.02em !default;
+
+/**
+ * The letter spacing for 3rd level headers.
+ * 
+ * @group label
+ */
+$v-letter-spacing--h3: 0 !default;
+
+/**
+ * The letter spacing for 4th level headers.
+ * 
+ * @group label
+ */
+$v-letter-spacing--h4: 0 !default;
+
+
+/**
+ * Outputs the selectors and styles for the Label component.
+ * 
+ * @param {string} $primary-stylename (v-label) - 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 label
+ */
 @mixin valo-label ($primary-stylename: v-label, $include-additional-styles: contains($v-included-additional-styles, label)) {
 
   .#{$primary-stylename} {
diff --git a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
index f4fee96041..7dafbe4624 100644
--- a/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
+++ b/WebContent/VAADIN/themes/valo/components/_tabsheet.scss
@@ -1,8 +1,19 @@
+/**
+ * Should the tabsheet content changes be animated.
+ * 
+ * @group tabsheet
+ */
 $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 
 
-
-
+/**
+ * Outputs the global selectors and properties for the TabSheet component - styles which are 
+ * considered mandatory for the component to work properly.
+ *
+ * @param {string} $primary-stylename (v-tabsheet) - the primary style name for the selectors
+ *
+ * @group tabsheet
+ */
 @mixin valo-tabsheet-global ($primary-stylename: v-tabsheet) {
   .#{$primary-stylename}-hidetabs > .#{$primary-stylename}-tabcontainer,
   .#{$primary-stylename}-spacertd,
@@ -48,9 +59,14 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 }
 
 
-
-
-
+/**
+ * Outputs the selectors and properties for the TabSheet component.
+ *
+ * @param {string} $primary-stylename (v-tabsheet) - 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 tabsheet
+ */
 @mixin valo-tabsheet ($primary-stylename: v-tabsheet, $include-additional-styles: contains($v-included-additional-styles, tabsheet)) {
   .#{$primary-stylename} {
     &:not(.v-has-width) {
@@ -139,6 +155,11 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 }
 
 
+/**
+ * Outputs the styles for the tabcontainer element of a tabsheet.
+ * 
+ * @group tabsheet
+ */
 @mixin valo-tabsheet-tabcontainer-style ($primary-stylename: v-tabsheet) {
   position: relative;
   @include box-sizing(border-box);
@@ -160,6 +181,11 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 }
 
 
+/**
+ * Outputs the styles for the tabitemcell element of a tabsheet.
+ * 
+ * @group tabsheet
+ */
 @mixin valo-tabsheet-tabitemcell-style ($primary-stylename: v-tabsheet) {
   vertical-align: bottom;
 
@@ -249,6 +275,11 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 }
 
 
+/**
+ * Outputs the styles for the tab scroller element of a tabsheet.
+ * 
+ * @group tabsheet
+ */
 @mixin valo-tabsheet-scroller-style ($primary-stylename: v-tabsheet) {
   $border-color: first-color(valo-border($strength: 0.5));
 
@@ -332,24 +363,38 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 }
 
 
+/**
+ * Outputs the font icon styles for the previous button element of a tabsheet scroller.
+ * 
+ * @group tabsheet
+ */
 @mixin valo-tabsheet-scroller-prev-icon-style {
   font-family: FontAwesome;
   content: "\f053";
 }
 
 
+/**
+ * Outputs the font icon styles for the next button element of a tabsheet scroller.
+ * 
+ * @group tabsheet
+ */
 @mixin valo-tabsheet-scroller-next-icon-style {
   font-family: FontAwesome;
   content: "\f054";
 }
 
 
-
-
-
-
-
-
+/**
+ * Outputs the styles for the framed tabsheet style.
+ * 
+ * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
+ * @param {bool} $frame-inactive-tabs (true) - Should inactive tabs be framed as well (the active tab is always framed with this style)
+ * @param {bool} $outer-frame (true) - Should the frame contain the whole tabsheet (i.e. tabbar and tab content). If false, works like a "borderless" style.
+ * @param {size} $tab-spacing ($v-unit-size/10) - The spacing between tabs
+ * 
+ * @group tabsheet
+ */
 @mixin valo-tabsheet-framed-style ($primary-stylename: v-tabsheet, $frame-inactive-tabs: true, $outer-frame: true, $tab-spacing: round($v-unit-size/10)) {
   > .#{$primary-stylename}-tabcontainer {
     .v-caption {
@@ -432,19 +477,29 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 }
 
 
-
-
-
-
-
-
-
+/**
+ * Outputs the styles for a tabsheet where the tabs are aligned to the position specified by the parameter in the tabbar.
+ * 
+ * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
+ * @param {string} $align (center) - The alignment of the tabs inside the tabbar. Possible values: left, right, center.
+ * 
+ * @group tabsheet
+ */
 @mixin valo-tabsheet-align-tabs-style ($primary-stylename: v-tabsheet, $align: center) {
   > .#{$primary-stylename}-tabcontainer {
     text-align: $align;
   }
 }
 
+
+/**
+ * Outputs the styles for a tabsheet where all tabs in the tabbar have equal width and span the entire width of the tabbar.
+ * 
+ * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
+ * @param {bool} $flex (false) - Should the size of the tabs be proportional to their content, i.e. should the available space in the tabbar be distributed to the tabs in relation to their content sizes.
+ * 
+ * @group tabsheet
+ */
 @mixin valo-tabsheet-equal-width-tabs-style ($primary-stylename: v-tabsheet, $flex: false) {
   > .#{$primary-stylename}-tabcontainer {
     table,
@@ -471,6 +526,14 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
   }
 }
 
+
+/**
+ * Outputs the styles for a tabsheet where the icons of individual tabs are on top of the tab captions.
+ * 
+ * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
+ *  
+ * @group tabsheet
+ */
 @mixin valo-tabsheet-icons-on-top-style ($primary-stylename: v-tabsheet) {
   > div > .#{$primary-stylename}-tabs {
     .v-caption {
@@ -494,6 +557,14 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 }
 
 
+/**
+ * Outputs the styles for a tabsheet where only the selected tab has the close button visible. 
+ * Note that the other tabs can still be closed programmatically.
+ * 
+ * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
+ *  
+ * @group tabsheet
+ */
 @mixin valo-tabsheet-only-selected-closable-style ($primary-stylename: v-tabsheet) {
   > .#{$primary-stylename}-tabcontainer .#{$primary-stylename}-caption-close {
     visibility: hidden;
@@ -505,6 +576,14 @@ $v-tabsheet-content-animation-enabled: $v-animations-enabled !default;
 }
 
 
+/**
+ * Outputs the styles for a tabsheet where the tabbar has increased padding to separate the tabs 
+ * inside it from their surrounding container.
+ * 
+ * @param {string} $primary-stylename (v-tabsheet) - The primary style name for the selectors
+ *  
+ * @group tabsheet
+ */
 @mixin valo-tabsheet-padded-tabbar-style ($primary-stylename: v-tabsheet) {
   > .#{$primary-stylename}-tabcontainer .#{$primary-stylename}-tabs {
     padding: 0 round($v-unit-size/4);
diff --git a/WebContent/VAADIN/themes/valo/components/_textarea.scss b/WebContent/VAADIN/themes/valo/components/_textarea.scss
index 5e524bfb9e..ffd5ba855a 100644
--- a/WebContent/VAADIN/themes/valo/components/_textarea.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textarea.scss
@@ -1,3 +1,11 @@
+/**
+ * Outputs the selectors and properties for the TextArea component.
+ *
+ * @param {string} $primary-stylename (v-textarea) - 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 textarea
+ */
 @mixin valo-textarea ($primary-stylename: v-textarea, $include-additional-styles: contains($v-included-additional-styles, textarea)) {
 
   .#{$primary-stylename} {
@@ -51,13 +59,30 @@
 }
 
 
+/**
+ * Outputs the styles for a text area variant.
+ *
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the text area, which corresponds its height
+ * @param {size | list} $padding (null) - The padding of the text area. Computed from other parameters by default.
+ * @param {color} $font-color (null) - The font color of the text area. Computed from the $background-color by default.
+ * @param {number} $font-weight (max(400, $v-font-weight)) - The font weight of the text area
+ * @param {size} $font-size (null) - The font size of the text area. Inherited from the parent by default.
+ * @param {color} $background-color ($v-textfield-background-color) - The background color of the text area
+ * @param {list} $border ($v-textfield-border) - The border of the text area
+ * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the text area
+ * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
+ * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
+ * @param {list} $states (normal focus disabled) - The text area states for which to output corresponding styles
+ *
+ * @group textfield
+ */
 @mixin valo-textarea-style (
     $unit-size        : $v-unit-size,
-    $padding          : round($v-unit-size/6), // Computed by default
+    $padding          : round($v-unit-size/6),
 
-    $font-color       : null, // Computed by default
-    $font-weight      : max(400, $v-font-weight), // Inherited by default
-    $font-size        : null, // Inherited by default
+    $font-color       : null,
+    $font-weight      : max(400, $v-font-weight),
+    $font-size        : null,
 
     $background-color : $v-textfield-background-color,
     $border           : $v-textfield-border,
@@ -71,8 +96,8 @@
 
   @include valo-textfield-style($unit-size: $unit-size, $padding: $padding,
                                 $font-color: $font-color,
-                                $font-weight: $font-weight, // Inherited by default
-                                $font-size: $font-size, // Inherited by default
+                                $font-weight: $font-weight,
+                                $font-size: $font-size,
 
                                 $background-color: $background-color,
                                 $border: $border,
diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss
index c194bd715f..f4ca3538bd 100644
--- a/WebContent/VAADIN/themes/valo/components/_textfield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss
@@ -1,14 +1,60 @@
+/**
+ * The background color for text fields.
+ * @group textfield
+ */
 $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;
+
+/**
+ * The background color for read-only text fields.
+ * @group textfield
+ */
 $v-textfield-background-color--readonly: darkest-color($v-app-background-color, darken($v-textfield-background-color, 2%));
+
+/**
+ * The bevel style for text fields. See the documentation for $v-bevel.
+ * @group textfield
+ */
 $v-textfield-bevel: inset 0 1px 0 v-shade !default;
+
+/**
+ * The shadow style for text fields. See the documentation for $v-shadow.
+ * @group textfield
+ */
 $v-textfield-shadow: 0 1px 0 (v-tint 2) !default;
+
+/**
+ * The font-weight for text fields.
+ * @group textfield
+ */
 $v-textfield-font-weight: 400 !default;
+
+/**
+ * The border style for text fields. See the documentation for $v-border.
+ * @group textfield
+ */
 $v-textfield-border: $v-border !default;
+
+/**
+ * The border-radius for text fields. See the documentation for $v-border-radius;
+ * @group textfield
+ */
 $v-textfield-border-radius: $v-border-radius !default;
-$v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
+/**
+ * The opacity for disabled text fields.
+ * @group textfield
+ */
+$v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 
+/**
+ * Outputs the selectors and properties for the TextField component.
+ *
+ * @param {string} $primary-stylename (v-textfield) - 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 textfield
+ */
 @mixin valo-textfield ($primary-stylename: v-textfield, $include-additional-styles: contains($v-included-additional-styles, textfield)) {
 
   .#{$primary-stylename} {
@@ -73,14 +119,30 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 }
 
 
-
+/**
+ * Outputs the styles for a text field variant.
+ *
+ * @param {size} $unit-size ($v-unit-size) - The sizing of the text field, which corresponds its height
+ * @param {size | list} $padding (null) - The padding of the text field. Computed from other parameters by default.
+ * @param {color} $font-color (null) - The font color of the text field. Computed from the $background-color by default.
+ * @param {number} $font-weight (max(400, $v-font-weight)) - The font weight of the text field
+ * @param {size} $font-size (null) - The font size of the text field. Inherited from the parent by default.
+ * @param {color} $background-color ($v-textfield-background-color) - The background color of the text field
+ * @param {list} $border ($v-textfield-border) - The border of the text field
+ * @param {size} $border-radius ($v-textfield-border-radius) - The border-radius of the text field
+ * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
+ * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
+ * @param {list} $states (normal focus disabled) - The text field states for which to output corresponding styles
+ *
+ * @group textfield
+ */
 @mixin valo-textfield-style (
     $unit-size        : $v-unit-size,
-    $padding          : null, // Computed by default
+    $padding          : null,
 
-    $font-color       : null, // Computed by default
+    $font-color       : null,
     $font-weight      : max(400, $v-font-weight),
-    $font-size        : null, // Inherited by default
+    $font-size        : null,
 
     $background-color : $v-textfield-background-color,
     $border           : $v-textfield-border,
@@ -163,6 +225,13 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 }
 
 
+/**
+ * Outputs the styles for a text field input prompt.
+ * 
+ * @param {color} $background-color ($v-textfield-background-color) - The background color of the text field
+ * 
+ * @group textfield
+ */
 @mixin valo-textfield-prompt-style ($background-color: $v-textfield-background-color) {
   @if $background-color ==  transparent {
     color: inherit;
@@ -179,6 +248,16 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 }
 
 
+/**
+ * Outputs the styles for a text field focus state.
+ * 
+ * @param {list} $bevel ($v-textfield-bevel) - Box-shadow value according to $v-bevel documentation
+ * @param {list} $shadow ($v-textfield-shadow) - Box-shadow value according to $v-shadow documentation
+ * @param {color} $background-color ($v-textfield-background-color) - The background color of the text field
+ * @param {list} $gradient (null) - Valo specific gradient value. See the documentation for $v-gradient.
+ * 
+ * @group textfield
+ */
 @mixin valo-textfield-focus-style ($bevel: $v-textfield-bevel, $shadow: $v-textfield-shadow, $background-color: $v-textfield-background-color, $gradient: null) {
   outline: none;
   @if $v-animations-enabled {
@@ -197,6 +276,11 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 }
 
 
+/**
+ * Outputs the styles for a read-only text field.
+ * 
+ * @group textfield
+ */
 @mixin valo-textfield-readonly-style {
   background: $v-textfield-background-color--readonly;
   color: valo-font-color($v-textfield-background-color--readonly);
@@ -208,7 +292,13 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 }
 
 
-
+/**
+ * Outputs the styles for a borderless style text field.
+ * 
+ * @param {color} $background-color (transparent) - The background color of the text field
+ * 
+ * @group textfield
+ */
 @mixin valo-textfield-borderless-style ($background-color: transparent) {
   border: none;
   border-radius: 0;
@@ -231,8 +321,11 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 }
 
 
-
-
+/**
+ * Outputs the styles for a text field error state.
+ * 
+ * @group textfield
+ */
 @mixin valo-textfield-error-style {
   border-color: $v-error-indicator-color !important;
   $bg: scale-color($v-error-indicator-color, $lightness: 98%);
@@ -241,11 +334,18 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 }
 
 
-
-
-
-
-
+/**
+ * Outputs the selectors and styles for an inline-icon style for a text field. Included indipendently (i.e. not enclosed with a parent text field selector). 
+ * 
+ * @param {string} $primary-stylename (v-textfield) - The primary style name for the selectors
+ * @param {string | list} $stylenames (inline-icon) - The additional style names which will define the inline-icon style
+ * @param {string} $input-selector (null) - Additional selector for a nested input element which should be targeted
+ * @param {size} $unit-size ($v-unit-size) - The unit size which the resulting style will support
+ * @param {size} $font-size ($v-font-size) - The font size which the resulting style will support (needed for font icons)
+ * @param {size} $image-icon-size (16px) - The image icon height which the resulting style will support (needed to center the icon vertically inside the text field)
+ * 
+ * @group text field
+ */
 @mixin valo-textfield-inline-icon($primary-stylename: v-textfield, $stylenames: inline-icon, $input-selector: null, $unit-size: $v-unit-size, $font-size: $v-font-size, $image-icon-size: 16px) {
   $slot-selector: "";
   $caption-selector: "";
diff --git a/WebContent/VAADIN/themes/valo/components/_window.scss b/WebContent/VAADIN/themes/valo/components/_window.scss
index dd2eb60d16..574c14b3b6 100644
--- a/WebContent/VAADIN/themes/valo/components/_window.scss
+++ b/WebContent/VAADIN/themes/valo/components/_window.scss
@@ -205,7 +205,7 @@ $v-window-modality-curtain-background-color: #222 !default;
       @include valo-panel-adjust-content-margins;
 
       > .v-formlayout {
-        @include valo-formlayout-margins($all: round($v-unit-size/3));
+        @include valo-formlayout-margin(round($v-unit-size/3));
       }
 
       position: relative;