SassDoc stubs, mostly auto-generated by special utility (#14203)

Change-Id: Id621c25cae3314dc44a700e1e9dcdae97cda5bfb

30 files changed, 837 insertions, 18 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_absolutelayout.scss b/WebContent/VAADIN/themes/valo/components/_absolutelayout.scss
index 1750491196..5f1ef9281e 100755
--- a/WebContent/VAADIN/themes/valo/components/_absolutelayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_absolutelayout.scss
@@ -1,3 +1,10 @@
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-absolutelayout) - 
+ *
+ * @group absolutelayout
+ */
 @mixin valo-absolutelayout ($primary-stylename: v-absolutelayout) {
   
   .#{$primary-stylename}-wrapper {
diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index 0b756126ff..79107eb0d1 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -475,6 +475,12 @@
   }
 }
 
+/**
+ *
+ *
+ *
+ * @group combobox
+ */
 @mixin valo-combobox-no-input-style {
   cursor: pointer;
   text-shadow: valo-text-shadow();
diff --git a/WebContent/VAADIN/themes/valo/components/_customcomponent.scss b/WebContent/VAADIN/themes/valo/components/_customcomponent.scss
index 34aef09c13..e9d94b7274 100644
--- a/WebContent/VAADIN/themes/valo/components/_customcomponent.scss
+++ b/WebContent/VAADIN/themes/valo/components/_customcomponent.scss
@@ -1,3 +1,10 @@
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-customcomponent) - 
+ *
+ * @group customcomponent
+ */
 @mixin valo-customcomponent ($primary-stylename: v-customcomponent) {
   
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/valo/components/_customlayout.scss b/WebContent/VAADIN/themes/valo/components/_customlayout.scss
index 75eac938f1..c9eddc5306 100644
--- a/WebContent/VAADIN/themes/valo/components/_customlayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_customlayout.scss
@@ -1,3 +1,10 @@
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-customlayout) - 
+ *
+ * @group customlayout
+ */
 @mixin valo-customlayout ($primary-stylename: v-customlayout) {
   
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/valo/components/_escalator.scss b/WebContent/VAADIN/themes/valo/components/_escalator.scss
index 237b53946b..06ce2e6142 100644
--- a/WebContent/VAADIN/themes/valo/components/_escalator.scss
+++ b/WebContent/VAADIN/themes/valo/components/_escalator.scss
@@ -1,3 +1,10 @@
+/**
+ *
+ *
+ * @param {string} $primaryStyleName (v-escalator) - 
+ *
+ * @group escalator
+ */
 @mixin valo-escalator($primaryStyleName : v-escalator) {
 
 $background-color: white;
diff --git a/WebContent/VAADIN/themes/valo/components/_form.scss b/WebContent/VAADIN/themes/valo/components/_form.scss
index 36a13dceac..6b15d2a7cd 100644
--- a/WebContent/VAADIN/themes/valo/components/_form.scss
+++ b/WebContent/VAADIN/themes/valo/components/_form.scss
@@ -1,3 +1,10 @@
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-form) - 
+ *
+ * @group form
+ */
 @mixin valo-form ($primary-stylename: v-form) {
   
   .#{$primary-stylename} fieldset {
diff --git a/WebContent/VAADIN/themes/valo/components/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss
index b1f7dbda05..cf06167337 100644
--- a/WebContent/VAADIN/themes/valo/components/_grid.scss
+++ b/WebContent/VAADIN/themes/valo/components/_grid.scss
@@ -1,5 +1,12 @@
 @import "escalator";
 
+/**
+ *
+ *
+ * @param {string} $primary-styleName (v-grid) - 
+ *
+ * @group grid
+ */
 @mixin valo-grid($primary-styleName : v-grid) {
   @include valo-escalator($primary-styleName);
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/valo/components/_gridlayout.scss b/WebContent/VAADIN/themes/valo/components/_gridlayout.scss
index 738b86c9e2..e1777750cd 100644
--- a/WebContent/VAADIN/themes/valo/components/_gridlayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_gridlayout.scss
@@ -1,3 +1,10 @@
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-gridlayout) - 
+ *
+ * @group gridlayout
+ */
 @mixin valo-gridlayout-global ($primary-stylename: v-gridlayout) {
   .#{$primary-stylename} {
     position: relative;
@@ -20,6 +27,13 @@
 }
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-gridlayout) - 
+ *
+ * @group gridlayout
+ */
 @mixin valo-gridlayout($primary-stylename : v-gridlayout) {
 
   .#{$primary-stylename}-margin-top {
diff --git a/WebContent/VAADIN/themes/valo/components/_link.scss b/WebContent/VAADIN/themes/valo/components/_link.scss
index 680659b8b6..b568df1d7b 100644
--- a/WebContent/VAADIN/themes/valo/components/_link.scss
+++ b/WebContent/VAADIN/themes/valo/components/_link.scss
@@ -1,8 +1,30 @@
+/**
+ *
+ * @group link
+ */
 $v-link-font-color: $v-focus-color !default;
+
+/**
+ *
+ * @group link
+ */
 $v-link-text-decoration: underline !default;
+
+/**
+ *
+ * @group link
+ */
 $v-link-cursor: pointer !default;
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-link) - 
+ * @param {bool} $include-additional-styles - 
+ *
+ * @group link
+ */
 @mixin valo-link ($primary-stylename: v-link, $include-additional-styles: contains($v-included-additional-styles, link)) {
   .#{$primary-stylename} {
     @include valo-link-style;
@@ -33,6 +55,12 @@ $v-link-cursor: pointer !default;
 }
 
 
+/**
+ *
+ *
+ *
+ * @group link
+ */
 @mixin valo-link-style {
   cursor: $v-link-cursor;
   color: $v-link-font-color;
diff --git a/WebContent/VAADIN/themes/valo/components/_loginform.scss b/WebContent/VAADIN/themes/valo/components/_loginform.scss
index bf0c06b4d9..88745d649d 100644
--- a/WebContent/VAADIN/themes/valo/components/_loginform.scss
+++ b/WebContent/VAADIN/themes/valo/components/_loginform.scss
@@ -1,3 +1,10 @@
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-loginform) - 
+ *
+ * @group loginform
+ */
 @mixin valo-loginform ($primary-stylename: v-loginform) {
   
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss
index fee5b87e84..9075eb7ba8 100644
--- a/WebContent/VAADIN/themes/valo/components/_menubar.scss
+++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss
@@ -1,3 +1,11 @@
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-menubar) - 
+ * @param {bool} $include-additional-styles - 
+ *
+ * @group menubar
+ */
 @mixin valo-menubar ($primary-stylename: v-menubar, $include-additional-styles: contains($v-included-additional-styles, menubar)) {
 
   .#{$primary-stylename} {
@@ -85,6 +93,15 @@
 
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-menubar) - 
+ * @param {color} $background-color ($v-background-color) - 
+ * @param {size} $unit-size ($v-unit-size) - 
+ *
+ * @group menubar
+ */
 @mixin valo-menubar-style ($primary-stylename: v-menubar, $background-color: $v-background-color, $unit-size: $v-unit-size) {
   @include valo-button-style($states: normal focus, $cursor: default, $background-color: $background-color, $unit-size: $unit-size);
   padding: 0;
@@ -106,6 +123,12 @@
 
 
 
+/**
+ *
+ *
+ *
+ * @group menubar
+ */
 @mixin valo-menubar-menuitem-style {
   $border-width: first-number($v-border);
   position: relative;
@@ -193,6 +216,13 @@
 
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-menubar) - 
+ *
+ * @group menubar
+ */
 @mixin valo-menubar-popup-style ($primary-stylename: v-menubar) {
   @include valo-selection-overlay-style;
 
@@ -252,18 +282,37 @@
 
 
 
+/**
+ *
+ *
+ *
+ * @group menubar
+ */
 @mixin valo-menubar-submenu-indicator-style {
   font-family: FontAwesome;
   content: "\f054";
   line-height: $v-selection-item-height + 2px;
 }
 
+/**
+ *
+ *
+ *
+ * @group menubar
+ */
 @mixin valo-menubar-checked-icon-style {
   content: "\f00c";
   font-family: FontAwesome;
 }
 
 
+/**
+ *
+ *
+ * @param {list} $background-color - 
+ *
+ * @group menubar
+ */
 @mixin valo-menubar-menuitem-checked-style ($background-color: if(color-luminance($v-background-color) < 10, scale-color($v-background-color, $lightness: 10%, $saturation: -5%), scale-color($v-background-color, $lightness: -5%, $saturation: -5%))) {
   $grad: valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4;
   @include box-shadow(none);
@@ -271,6 +320,13 @@
   color: valo-font-color($background-color, 0.9);
 }
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-menubar) - 
+ *
+ * @group menubar
+ */
 @mixin valo-menubar-menuitem-checked ($background-color, $primary-stylename: v-menubar) {
   .#{$primary-stylename}-menuitem-checked {
     @include valo-menubar-menuitem-checked-style($background-color: $background-color);
@@ -278,6 +334,13 @@
 }
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-menubar) - 
+ *
+ * @group menubar
+ */
 @mixin valo-menubar-borderless-style ($primary-stylename: v-menubar) {
   border: none;
   border-radius: 0;
diff --git a/WebContent/VAADIN/themes/valo/components/_nativebutton.scss b/WebContent/VAADIN/themes/valo/components/_nativebutton.scss
index 69c48d4649..9bfca4f396 100644
--- a/WebContent/VAADIN/themes/valo/components/_nativebutton.scss
+++ b/WebContent/VAADIN/themes/valo/components/_nativebutton.scss
@@ -1,3 +1,10 @@
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-nativebutton) - 
+ *
+ * @group nativebutton
+ */
 @mixin valo-nativebutton ($primary-stylename: v-nativebutton) {
   .#{$primary-stylename} {
     -webkit-touch-callout: none;
diff --git a/WebContent/VAADIN/themes/valo/components/_nativeselect.scss b/WebContent/VAADIN/themes/valo/components/_nativeselect.scss
index 3f24d9293f..d0b2caf745 100644
--- a/WebContent/VAADIN/themes/valo/components/_nativeselect.scss
+++ b/WebContent/VAADIN/themes/valo/components/_nativeselect.scss
@@ -1,3 +1,10 @@
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-select) - 
+ *
+ * @group nativeselect
+ */
 @mixin valo-nativeselect ($primary-stylename: v-select) {
   .#{$primary-stylename} select {
     @include valo-nativeselect-select-style;
@@ -20,6 +27,12 @@
 
 
 
+/**
+ *
+ *
+ *
+ * @group nativeselect
+ */
 @mixin valo-nativeselect-select-style {
   border: valo-border();
   @include valo-gradient;
diff --git a/WebContent/VAADIN/themes/valo/components/_notification.scss b/WebContent/VAADIN/themes/valo/components/_notification.scss
index ff5e2da8d6..d0879a1caa 100644
--- a/WebContent/VAADIN/themes/valo/components/_notification.scss
+++ b/WebContent/VAADIN/themes/valo/components/_notification.scss
@@ -1,6 +1,18 @@
+/**
+ *
+ * @group notification
+ */
 $v-notification-title-color: $v-focus-color !default;
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-Notification) - 
+ * @param {bool} $include-additional-styles - 
+ *
+ * @group notification
+ */
 @mixin valo-notification ($primary-stylename: v-Notification, $include-additional-styles: contains($v-included-additional-styles, notification)) {
 
   // Positional offsets
@@ -200,6 +212,12 @@ $v-notification-title-color: $v-focus-color !default;
 
 
 
+/**
+ *
+ *
+ *
+ * @group notification
+ */
 @mixin valo-notification-closable-style {
   padding-right: $v-unit-size + round($v-unit-size/1.7);
   overflow: hidden !important; // Override GWT PopupPanel
@@ -244,6 +262,12 @@ $v-notification-title-color: $v-focus-color !default;
 
 
 
+/**
+ *
+ *
+ *
+ * @group notification
+ */
 @mixin valo-notification-style {
   background: $v-overlay-background-color;
   @include box-shadow(0px 5px 15px 0px rgba(0,0,0,0.15));
@@ -259,6 +283,12 @@ $v-notification-title-color: $v-focus-color !default;
   }
 }
 
+/**
+ *
+ *
+ *
+ * @group notification
+ */
 @mixin valo-notification-bar-style {
   left: 0 !important;
   right: 0;
@@ -301,6 +331,12 @@ $v-notification-title-color: $v-focus-color !default;
   }
 }
 
+/**
+ *
+ *
+ *
+ * @group notification
+ */
 @mixin valo-notification-dark-style {
   background-color: #444;
   background-color: rgba(#444, .9);
@@ -317,6 +353,12 @@ $v-notification-title-color: $v-focus-color !default;
   }
 }
 
+/**
+ *
+ *
+ *
+ * @group notification
+ */
 @mixin valo-notification-system-style {
   @include valo-notification-dark-style;
 
@@ -326,8 +368,20 @@ $v-notification-title-color: $v-focus-color !default;
   }
 }
 
+/**
+ *
+ *
+ *
+ * @group notification
+ */
 @mixin valo-notification-tray-style {}
 
+/**
+ *
+ *
+ *
+ * @group notification
+ */
 @mixin valo-notification-warning-style {
   background: #FFF3D2;
 
@@ -340,6 +394,12 @@ $v-notification-title-color: $v-focus-color !default;
   }
 }
 
+/**
+ *
+ *
+ *
+ * @group notification
+ */
 @mixin valo-notification-error-style {
   background: $v-error-indicator-color;
   font-weight: $v-font-weight + 100;
@@ -354,6 +414,12 @@ $v-notification-title-color: $v-focus-color !default;
   }
 }
 
+/**
+ *
+ *
+ *
+ * @group notification
+ */
 @mixin valo-notification-small-style {
   padding: round($v-unit-size/3.3) round($v-unit-size/2.8);
 
diff --git a/WebContent/VAADIN/themes/valo/components/_optiongroup.scss b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss
index a058ad4e85..84e0a821d3 100644
--- a/WebContent/VAADIN/themes/valo/components/_optiongroup.scss
+++ b/WebContent/VAADIN/themes/valo/components/_optiongroup.scss
@@ -1,3 +1,11 @@
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-select-optiongroup) - 
+ * @param {bool} $include-additional-styles - 
+ *
+ * @group optiongroup
+ */
 @mixin valo-optiongroup ($primary-stylename: v-select-optiongroup, $include-additional-styles: contains($v-included-additional-styles, optiongroup)) {
 
   .v-radiobutton {
@@ -28,6 +36,15 @@
 }
 
 
+/**
+ *
+ *
+ * @param {color} $background-color ($v-background-color) - 
+ * @param {size} $unit-size ($v-unit-size) - 
+ * @param {color} $selection-color ($v-selection-color) - 
+ *
+ * @group optiongroup
+ */
 @mixin valo-radiobutton-style ($background-color: $v-background-color, $unit-size: $v-unit-size, $selection-color: $v-selection-color) {
   @include valo-checkbox-style($background-color: $background-color, $unit-size: $unit-size, $selection-color: $selection-color);
 
@@ -52,6 +69,14 @@
 
 
 
+/**
+ *
+ *
+ * @param {size} $unit-size ($v-unit-size) - 
+ * @param {size} $font-size ($v-font-size) - 
+ *
+ * @group optiongroup
+ */
 @mixin valo-optiongroup-style ($unit-size: $v-unit-size, $font-size: $v-font-size) {
 
   @if $unit-size != $v-unit-size {
@@ -83,6 +108,12 @@
 }
 
 
+/**
+ *
+ *
+ *
+ * @group optiongroup
+ */
 @mixin valo-optiongroup-horizontal {
   white-space: nowrap;
 
diff --git a/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss
index ae1347d0e3..fb40763ade 100644
--- a/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_orderedlayout.scss
@@ -1,3 +1,9 @@
+/**
+ *
+ *
+ *
+ * @group orderedlayout
+ */
 @mixin valo-orderedlayout-global {
 
   div.v-layout.v-horizontal.v-widget {
@@ -140,6 +146,13 @@
 
 
 
+/**
+ *
+ *
+ * @param {bool} $include-additional-styles - 
+ *
+ * @group 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 {
@@ -184,6 +197,12 @@
 }
 
 
+/**
+ *
+ *
+ *
+ * @group orderedlayout
+ */
 @mixin valo-horizontallayout-wrapping-style {
     white-space: normal !important;
 
diff --git a/WebContent/VAADIN/themes/valo/components/_panel.scss b/WebContent/VAADIN/themes/valo/components/_panel.scss
index 8a7cd72c7c..42a4ff3a3d 100644
--- a/WebContent/VAADIN/themes/valo/components/_panel.scss
+++ b/WebContent/VAADIN/themes/valo/components/_panel.scss
@@ -1,6 +1,23 @@
+/**
+ *
+ * @group panel
+ */
 $v-panel-background-color: scale-color(lighten($v-app-background-color, 5%), $saturation: -5%) !default;
-$v-panel-border: $v-border !default;
 
+/**
+ *
+ * @group panel
+ */
+ $v-panel-border: $v-border !default;
+
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-panel) - 
+ * @param {bool} $include-additional-styles - 
+ *
+ * @group panel
+ */
 @mixin valo-panel ($primary-stylename: v-panel, $include-additional-styles: contains($v-included-additional-styles, panel)) {
 
   .#{$primary-stylename} {
@@ -52,13 +69,18 @@ $v-panel-border: $v-border !default;
 
 
 
-@mixin valo-panel-style (
-    $primary-stylename: v-panel,
-    $background-color : $v-panel-background-color,
-    $shadow           : $v-shadow,
-    $border           : $v-panel-border,
-    $border-radius    : $v-border-radius
-  ) {
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-panel) - 
+ * @param {color} $background-color ($v-panel-background-color) - 
+ * @param {list} $shadow ($v-shadow) - 
+ * @param {list} $border ($v-panel-border) - 
+ * @param {string} $border-radius ($v-border-radius) - 
+ *
+ * @group panel
+ */
+@mixin valo-panel-style ($primary-stylename: v-panel, $background-color : $v-panel-background-color, $shadow : $v-shadow,  $border : $v-panel-border, $border-radius    : $v-border-radius  ) {
   background: $background-color;
   color: valo-font-color($background-color);
   border-radius: $border-radius;
@@ -68,12 +90,17 @@ $v-panel-border: $v-border !default;
 
 
 
-@mixin valo-panel-caption-style (
-    $background-color : $v-background-color,
-    $bevel            : $v-bevel,
-    $gradient         : valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4,
-    $border           : $v-panel-border
-  ) {
+/**
+ *
+ *
+ * @param {color} $background-color ($v-background-color) - 
+ * @param {list} $bevel ($v-bevel) - 
+ * @param {list} $gradient (valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4) - 
+ * @param {list} $border ($v-panel-border) - 
+ *
+ * @group panel
+ */
+@mixin valo-panel-caption-style ( $background-color : $v-background-color,  $bevel  : $v-bevel, $gradient : valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4, $border   : $v-panel-border ) {
   @include box-sizing(border-box);
   padding: 0 round($v-unit-size/3);
   line-height: $v-unit-size - first-number($v-border);
@@ -102,6 +129,13 @@ $v-panel-border: $v-border !default;
 
 
 
+/**
+ *
+ *
+ * @param {list} $shadow (false) - 
+ *
+ * @group panel
+ */
 @mixin valo-panel-well-style ($shadow: false) {
   @if $shadow == false {
     $new-shadow: ();
@@ -130,6 +164,12 @@ $v-panel-border: $v-border !default;
 
 
 
+/**
+ *
+ *
+ *
+ * @group panel
+ */
 @mixin valo-panel-borderless-style {
   background: transparent;
   color: inherit;
@@ -149,6 +189,13 @@ $v-panel-border: $v-border !default;
 
 
 
+/**
+ *
+ *
+ * @param {size} $border-width (max(1px, first-number($v-panel-border))) - 
+ *
+ * @group panel
+ */
 @mixin valo-panel-scroll-divider-style ($border-width: max(1px, first-number($v-panel-border))) {
   > [class*="-captionwrap"] {
     position: relative;
@@ -183,6 +230,12 @@ $v-panel-border: $v-border !default;
 
 
 
+/**
+ *
+ *
+ *
+ * @group panel
+ */
 @mixin valo-panel-adjust-content-margins {
   > .v-margin-top {
     padding-top: round($v-unit-size/3);
diff --git a/WebContent/VAADIN/themes/valo/components/_popupview.scss b/WebContent/VAADIN/themes/valo/components/_popupview.scss
index 12e294e8cc..f7f8ef35b7 100644
--- a/WebContent/VAADIN/themes/valo/components/_popupview.scss
+++ b/WebContent/VAADIN/themes/valo/components/_popupview.scss
@@ -4,6 +4,13 @@
   }
 }
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-popupview) - 
+ *
+ * @group popupview
+ */
 @mixin valo-popupview ($primary-stylename: v-popupview) {
   .#{$primary-stylename} {
     @include valo-link-style;
diff --git a/WebContent/VAADIN/themes/valo/components/_progressbar.scss b/WebContent/VAADIN/themes/valo/components/_progressbar.scss
index f5836c7eaf..1dc8ef1b63 100644
--- a/WebContent/VAADIN/themes/valo/components/_progressbar.scss
+++ b/WebContent/VAADIN/themes/valo/components/_progressbar.scss
@@ -1,6 +1,17 @@
+/**
+ *
+ * @group progressbar
+ */
 $v-progressbar-border-radius: $v-border-radius !default;
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-progressbar) - 
+ *
+ * @group progressbar
+ */
 @mixin valo-progressbar ($primary-stylename: v-progressbar) {
 
   .#{$primary-stylename}-wrapper {
@@ -44,6 +55,13 @@ $v-progressbar-border-radius: $v-border-radius !default;
 }
 
 
+/**
+ *
+ *
+ * @param {color} $background-color ($v-background-color) - 
+ *
+ * @group progressbar
+ */
 @mixin valo-progressbar-track-style ($background-color: $v-background-color) {
   border-radius: $v-progressbar-border-radius;
   height: round($v-unit-size/4);
@@ -53,6 +71,14 @@ $v-progressbar-border-radius: $v-border-radius !default;
 }
 
 
+/**
+ *
+ *
+ * @param {color} $background-color ($v-selection-color) - 
+ * @param {string} $border ($v-border) - 
+ *
+ * @group progressbar
+ */
 @mixin valo-progressbar-indicator-style ($background-color: $v-selection-color, $border: $v-border) {
   border-radius: $v-progressbar-border-radius;
   height: inherit;
diff --git a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss
index 2d32769898..0dc3ee274c 100644
--- a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss
+++ b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss
@@ -1,5 +1,16 @@
+/**
+ *
+ * @group richtextarea
+ */
 $valo-richtextarea-use-font-awesome: true !default;
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-richtextarea) - 
+ *
+ * @group richtextarea
+ */
 @mixin valo-richtextarea ($primary-stylename: v-richtextarea) {
   .#{$primary-stylename} {
     @include valo-textfield-style($states: normal, $padding: 0);
diff --git a/WebContent/VAADIN/themes/valo/components/_slider.scss b/WebContent/VAADIN/themes/valo/components/_slider.scss
index 123712a8ee..6dab5be94b 100644
--- a/WebContent/VAADIN/themes/valo/components/_slider.scss
+++ b/WebContent/VAADIN/themes/valo/components/_slider.scss
@@ -1,13 +1,54 @@
+/**
+ *
+ * @group slider
+ */
 $v-slider-track-size: round($v-unit-size/8) !default;
+
+/**
+ *
+ * @group slider
+ */
 $v-slider-track-border-radius: null !default;
+
+/**
+ *
+ * @group slider
+ */
 $v-slider-handle-width: round($v-unit-size/1.8) !default;
+
+/**
+ *
+ * @group slider
+ */
 $v-slider-handle-height: round($v-unit-size/1.8) !default;
+
+/**
+ *
+ * @group slider
+ */
 $v-slider-handle-border-radius: ceil($v-slider-handle-width/2) !default;
 
+/**
+ *
+ * @group slider
+ */
 $_valo-slider-base-margin-vertical: round(($v-unit-size - $v-slider-track-size)/2);
+
+/**
+ *
+ * @group slider
+ */
 $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-slider) - 
+ * @param {bool} $include-additional-styles - 
+ *
+ * @group slider
+ */
 @mixin valo-slider ($primary-stylename: v-slider, $include-additional-styles: contains($v-included-additional-styles, slider)) {
 
   // Round to an even number
@@ -185,6 +226,14 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
 
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-slider) - 
+ * @param {color} $background-color ($v-background-color) - 
+ *
+ * @group slider
+ */
 @mixin valo-slider-track-style ($primary-stylename: v-slider, $background-color: $v-background-color) {
   .#{$primary-stylename}-base {
     @include valo-progressbar-track-style($background-color: $background-color);
@@ -199,6 +248,15 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
   }
 }
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-slider) - 
+ * @param {color} $background-color ($v-selection-color) - 
+ * @param {list} $border ($v-border) - 
+ *
+ * @group slider
+ */
 @mixin valo-slider-indicator-style ($primary-stylename: v-slider, $background-color: $v-selection-color, $border: $v-border) {
   .#{$primary-stylename}-base {
     &:before {
@@ -220,6 +278,13 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
 }
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-slider) - 
+ *
+ * @group slider
+ */
 @mixin valo-slider-no-indicator ($primary-stylename: v-slider) {
   .#{$primary-stylename}-base:before,
   .#{$primary-stylename}-base:after {
@@ -228,6 +293,14 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
 }
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-slider) - 
+ * @param {color} $background-color ($v-background-color) - 
+ *
+ * @group slider
+ */
 @mixin valo-slider-handle-style ($primary-stylename: v-slider, $background-color: $v-background-color) {
   .#{$primary-stylename}-handle {
     &:before {
@@ -242,6 +315,14 @@ $_valo-slider-base-margin-horizontal: round($v-slider-handle-width/2);
 }
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-slider) - 
+ * @param {number} $tick-count (5) - 
+ *
+ * @group slider
+ */
 @mixin valo-slider-ticks ($primary-stylename: v-slider, $tick-count: 5) {
   $tick-size: max(1px, first-number($v-border));
   $tick-color: first-color(valo-border($strength: 0.7));
diff --git a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss
index cd709e1df9..6877b8327e 100644
--- a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss
+++ b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss
@@ -1,3 +1,11 @@
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-splitpanel) - 
+ * @param {bool} $include-additional-styles - 
+ *
+ * @group 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);
@@ -21,6 +29,13 @@
 
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-splitpanel) - 
+ *
+ * @group splitpanel
+ */
 @mixin valo-splitpanel-global ($primary-stylename : v-splitpanel) {
   .#{$primary-stylename}-vertical,
   .#{$primary-stylename}-horizontal {
@@ -99,7 +114,18 @@
 
 
 
-
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-splitpanel) - 
+ * @param {size} $splitter-size (max(1px, first-number($v-border)) - 
+ * @param {list} $splitter-active-size (round($v-unit-size/3)) - 
+ * @param {bool} $splitter-handle-visible (false) - 
+ * @param {list} $splitter-shadow (none) - 
+ * @param {list} $orientation (vertical horizontal) - 
+ *
+ * @group splitpanel
+ */
 @mixin valo-splitpanel-style(
     $primary-stylename : v-splitpanel,
     $splitter-size: max(1px, first-number($v-border)),
@@ -171,6 +197,14 @@
 
 
 
+/**
+ *
+ *
+ * @param {bool} $horizontal (false) - 
+ * @param {bool} $include-common (true) - 
+ *
+ * @group splitpanel
+ */
 @mixin valo-splitpanel-splitter-handle-style ($horizontal: false, $include-common: true) {
   @if $include-common {
     content: "";
diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss
index 36e0565c83..e040a62d0f 100644
--- a/WebContent/VAADIN/themes/valo/components/_table.scss
+++ b/WebContent/VAADIN/themes/valo/components/_table.scss
@@ -1,15 +1,66 @@
+/**
+ *
+ * @group table
+ */
 $v-table-row-height: $v-unit-size !default;
+
+/**
+ *
+ * @group table
+ */
 $v-table-border-width: first-number($v-border) !default;
+
+/**
+ *
+ * @group table
+ */
 $v-table-border-color: null !default;
+
+/**
+ *
+ * @group table
+ */
 $v-table-border-radius: 0 !default;
+
+/**
+ *
+ * @group table
+ */
 $v-table-cell-padding-horizontal: round($v-unit-size/3) !default;
+
+/**
+ *
+ * @group table
+ */
 $v-table-resizer-width: round($v-unit-size/4.5) !default;
+
+/**
+ *
+ * @group table
+ */
 $v-table-sort-indicator-width: round($v-unit-size/2) !default;
+
+/**
+ *
+ * @group table
+ */
 $v-table-header-font-size: round($v-font-size * 0.86) !default;
+
+/**
+ *
+ * @group table
+ */
 $v-table-background-color: null !default;
 
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-table) - 
+ *
+ * @group table
+ */
 @mixin valo-table-global ($primary-stylename: v-table) {
 
   .#{$primary-stylename}-header table,
@@ -51,6 +102,15 @@ $v-table-background-color: null !default;
 
 
 
+/**
+ *
+ *
+ * @param {color} $context ($v-background-color) - 
+ *
+ * @return {color} - 
+ *
+ * @group table
+ */
 @function valo-table-background-color($context: $v-background-color) {
   @if is-dark-color($context) {
     @return darken($context, 2%);
@@ -59,6 +119,14 @@ $v-table-background-color: null !default;
 }
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-table) - 
+ * @param {bool} $include-additional-styles - 
+ *
+ * @group 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();
@@ -529,21 +597,45 @@ $v-table-background-color: null !default;
 
 
 
+/**
+ *
+ *
+ *
+ * @group table
+ */
 @mixin valo-table-sort-asc-icon-style {
   content: '\f0dd';
   font-family: FontAwesome;
 }
 
+/**
+ *
+ *
+ *
+ * @group table
+ */
 @mixin valo-table-sort-desc-icon-style {
   content: '\f0de';
   font-family: FontAwesome;
 }
 
+/**
+ *
+ *
+ *
+ * @group table
+ */
 @mixin valo-table-column-selector-icon-style {
   font-family: FontAwesome;
   content: "\f013";
 }
 
+/**
+ *
+ *
+ *
+ * @group table
+ */
 @mixin valo-table-column-visible-icon-style {
   content: "\f00c";
   font-family: FontAwesome;
@@ -552,6 +644,13 @@ $v-table-background-color: null !default;
 
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-table) - 
+ *
+ * @group table
+ */
 @mixin valo-table-no-stripes-style ($primary-stylename: v-table) {
   .#{$primary-stylename}-row,
   .#{$primary-stylename}-row-odd {
@@ -560,6 +659,13 @@ $v-table-background-color: null !default;
 }
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-table) - 
+ *
+ * @group table
+ */
 @mixin valo-table-no-vertical-lines-style ($primary-stylename: v-table) {
   .#{$primary-stylename}-cell-content {
     border-left: none;
@@ -574,6 +680,13 @@ $v-table-background-color: null !default;
 }
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-table) - 
+ *
+ * @group table
+ */
 @mixin valo-table-no-horizontal-lines-style ($primary-stylename: v-table) {
   .#{$primary-stylename}-cell-content {
     border-top: none;
@@ -582,6 +695,13 @@ $v-table-background-color: null !default;
 }
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-table) - 
+ *
+ * @group table
+ */
 @mixin valo-table-no-header-style ($primary-stylename: v-table) {
   .#{$primary-stylename}-header-wrap {
     display: none;
@@ -589,6 +709,13 @@ $v-table-background-color: null !default;
 }
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-table) - 
+ *
+ * @group table
+ */
 @mixin valo-table-borderless-style ($primary-stylename: v-table) {
   .#{$primary-stylename}-header-wrap,
   .#{$primary-stylename}-footer-wrap,
diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss
index 3cf4aed760..db8b3ba795 100644
--- a/WebContent/VAADIN/themes/valo/components/_tree.scss
+++ b/WebContent/VAADIN/themes/valo/components/_tree.scss
@@ -1,5 +1,19 @@
+/**
+ *
+ * @group tree
+ */
 $v-tree-row-height: round($v-unit-size/1.3) !default;
+
+/**
+ *
+ * @group tree
+ */
 $v-tree-animations-enabled: true !default;
+
+/**
+ *
+ * @group tree
+ */
 $v-tree-expand-animation-enabled: false !default;
 
 
@@ -24,6 +38,13 @@ $v-tree-expand-animation-enabled: false !default;
 }
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-tree) - 
+ *
+ * @group tree
+ */
 @mixin valo-tree ($primary-stylename: v-tree) {
 
   .#{$primary-stylename} {
@@ -261,11 +282,24 @@ $v-tree-expand-animation-enabled: false !default;
 }
 
 
+/**
+ *
+ *
+ *
+ * @group tree
+ */
 @mixin valo-tree-collapsed-icon-style {
   content: "\f0da";
   font-family: FontAwesome;
 }
 
+/**
+ *
+ *
+ * @param {bool} $force (false) - 
+ *
+ * @group tree
+ */
 @mixin valo-tree-expanded-icon-style ($force: false) {
   @if $v-tree-animations-enabled == false or $force {
     content: "\f0d7";
diff --git a/WebContent/VAADIN/themes/valo/components/_treetable.scss b/WebContent/VAADIN/themes/valo/components/_treetable.scss
index 9a80fc6aa9..e025df2bc9 100644
--- a/WebContent/VAADIN/themes/valo/components/_treetable.scss
+++ b/WebContent/VAADIN/themes/valo/components/_treetable.scss
@@ -1,3 +1,10 @@
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-treetable) - 
+ *
+ * @group treetable
+ */
 @mixin valo-treetable ($primary-stylename: v-treetable) {
   .#{$primary-stylename} {
     [class*="caption-container"],
diff --git a/WebContent/VAADIN/themes/valo/components/_twincolselect.scss b/WebContent/VAADIN/themes/valo/components/_twincolselect.scss
index 9d434a88fb..11a81159c0 100644
--- a/WebContent/VAADIN/themes/valo/components/_twincolselect.scss
+++ b/WebContent/VAADIN/themes/valo/components/_twincolselect.scss
@@ -1,3 +1,10 @@
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-select-twincol) - 
+ *
+ * @group twin-column-select
+ */
 @mixin valo-twincolselect ($primary-stylename: v-select-twincol) {
 
   .#{$primary-stylename} {
@@ -75,11 +82,23 @@
 
 
 
+/**
+ *
+ *
+ *
+ * @group twin-column-select
+ */
 @mixin valo-twincolselect-add-icon-style {
   font-family: FontAwesome;
   content: "\f054";
 }
 
+/**
+ *
+ *
+ *
+ * @group twin-column-select
+ */
 @mixin valo-twincolselect-remove-icon-style {
   font-family: FontAwesome;
   content: "\f053";
diff --git a/WebContent/VAADIN/themes/valo/components/_upload.scss b/WebContent/VAADIN/themes/valo/components/_upload.scss
index c54227c704..c301be060a 100644
--- a/WebContent/VAADIN/themes/valo/components/_upload.scss
+++ b/WebContent/VAADIN/themes/valo/components/_upload.scss
@@ -1,3 +1,10 @@
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-upload) - 
+ *
+ * @group upload
+ */
 @mixin valo-upload ($primary-stylename: v-upload) {
   .#{$primary-stylename} .v-button {
     @include valo-widget-style;
diff --git a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss
index 59d3ddca4b..071aceb971 100644
--- a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss
+++ b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss
@@ -1,5 +1,16 @@
+/**
+ * @group valo-menu
+ */
+
 $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if(color-luminance($v-app-background-color) < 10, 15%, -70%)) !default;
 
+/**
+ *
+ *
+ * @param {string} $bg ($valo-menu-background-color) - 
+ *
+ * @group valo-menu
+ */
 @mixin valo-menu ($bg: $valo-menu-background-color) {
 
   .valo-menu {
@@ -134,6 +145,12 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
 }
 
 
+/**
+ *
+ *
+ *
+ * @group valo-menu
+ */
 @mixin valo-menu-responsive {
   .v-ui {
     @include width-range($min: 801px, $max: 1100px) {
@@ -239,6 +256,13 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
 
 
 
+/**
+ *
+ *
+ * @param {string} $bg ($valo-menu-background-color) - 
+ *
+ * @group valo-menu
+ */
 @mixin valo-menu-style ($bg: $valo-menu-background-color) {
   height: 100%;
   @include linear-gradient(to left, (darken($bg, valo-gradient-opacity() / 2) 0%, $bg round($v-unit-size/4)), $fallback: $bg);
@@ -251,6 +275,12 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
 
 
 
+/**
+ *
+ *
+ *
+ * @group valo-menu
+ */
 @mixin valo-menu-title-style {
   line-height: 1.2;
   @include valo-gradient($color: $v-selection-color);
@@ -265,6 +295,13 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
 
 
 
+/**
+ *
+ *
+ * @param {color} $bg ($valo-menu-background-color) - 
+ *
+ * @group valo-menu
+ */
 @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);
@@ -277,6 +314,13 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
 
 
 
+/**
+ *
+ *
+ * @param {color} $bg ($valo-menu-background-color) - 
+ *
+ * @group valo-menu
+ */
 @mixin valo-menu-item-style ($bg: $valo-menu-background-color) {
   $font-color: valo-font-color($bg, 0.5);
   outline: none;
@@ -353,6 +397,15 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
 
 
 
+/**
+ *
+ *
+ * @param {string} $states (inactive active) - 
+ * @param {color} $background-color (null) - 
+ * @param {color} $active-color ($v-selection-color) - 
+ *
+ * @group valo-menu
+ */
 @mixin valo-badge-style ($states: inactive active, $background-color: null, $active-color: $v-selection-color) {
   @if contains($states, inactive) {
     background-color: $background-color;
@@ -373,6 +426,13 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
 
 
 
+/**
+ *
+ *
+ * @param {color} $bg (darken($valo-menu-background-color, 4%)) - 
+ *
+ * @group valo-menu
+ */
 @mixin valo-menu-large-icons-style ($bg: darken($valo-menu-background-color, 4%)) {
   background-color: $bg;
   min-width: $v-unit-size * 2;
@@ -470,6 +530,12 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
 
 
 
+/**
+ *
+ *
+ *
+ * @group valo-menu
+ */
 @mixin valo-menu-logo-style {
   display: block;
   overflow: hidden;
diff --git a/WebContent/VAADIN/themes/valo/components/_widget.scss b/WebContent/VAADIN/themes/valo/components/_widget.scss
index f6c0b6462a..85bc96ba9f 100644
--- a/WebContent/VAADIN/themes/valo/components/_widget.scss
+++ b/WebContent/VAADIN/themes/valo/components/_widget.scss
@@ -1,5 +1,6 @@
-//
-// @mixin valo-widget-style
+/**
+ *
+ */
 @mixin valo-widget-style {
   // Baseline expectations for all Vaadin widgets
   @include box-sizing(border-box);
@@ -12,7 +13,9 @@
   white-space: normal;
 }
 
-
+/**
+ *
+ */
 @mixin valo-widget {
   .v-widget {
     @include valo-widget-style;
diff --git a/WebContent/VAADIN/themes/valo/components/_window.scss b/WebContent/VAADIN/themes/valo/components/_window.scss
index 574c14b3b6..ce7a530c98 100644
--- a/WebContent/VAADIN/themes/valo/components/_window.scss
+++ b/WebContent/VAADIN/themes/valo/components/_window.scss
@@ -1,8 +1,31 @@
+/**
+ * @group window
+ */
 $v-window-background-color: $v-panel-background-color !default;
+
+/**
+ * @group window
+ */
 $v-window-border-radius: $v-border-radius !default;
+
+/**
+ * @group window
+ */
 $v-window-shadow: 0 2px 10px (v-shade 2), 0 16px 80px -6px (v-shade 3), last($v-overlay-shadow) !default;
+
+/**
+ * @group window
+ */
 $v-window-animate-in: valo-animate-in-fade 140ms !default;
+
+/**
+ * @group window
+ */
 $v-window-animate-out: valo-animate-out-scale-down-fade 100ms !default;
+
+/**
+ * @group window
+ */
 $v-window-modality-curtain-background-color: #222 !default;
 
 
@@ -21,6 +44,13 @@ $v-window-modality-curtain-background-color: #222 !default;
 }
 
 
+/**
+ *
+ *
+ * @param {string} $primary-stylename (v-window) - 
+ *
+ * @group window
+ */
 @mixin valo-window ($primary-stylename: v-window) {
 
   .#{$primary-stylename} {
@@ -345,6 +375,12 @@ $v-window-modality-curtain-background-color: #222 !default;
 }
 
 
+/**
+ *
+ *
+ *
+ * @group window
+ */
 @mixin valo-window-close-icon-style {
   &:before {
     // times cross
@@ -352,12 +388,24 @@ $v-window-modality-curtain-background-color: #222 !default;
   }
 }
 
+/**
+ *
+ *
+ *
+ * @group window
+ */
 @mixin valo-window-maximize-icon-style {
   &:before {
     content: "+";
   }
 }
 
+/**
+ *
+ *
+ *
+ * @group window
+ */
 @mixin valo-window-restore-icon-style {
   &:before {
     // en-dash