1 files changed, 97 insertions, 18 deletions
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);