@progress/kendo-theme-utils 6.2.1-dev.1 → 6.2.1-dev.151

package/scss/flex-grid/_flex-direction.scss

@@ -1,19 +1,23 @@
-/// This is equivalent to `flex-direction: row`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: left to right in `ltr`; right to left in `rtl`.
+/// This is equivalent to `flex-direction: row;`.
+/// @example flex-direction: row;
 /// @name .k-flex-row
 /// @group flex-direction
 /// @contextType css
 
-/// This is equivalent to `flex-direction: row-reverse`. This establishes the main-axis to be horizontal, thus defining the direction flex items are placed in the flex container: right to left in `ltr`; left to right in `rtl`.
+/// This is equivalent to `flex-direction: row-reverse;`.
+/// @example flex-direction: row-reverse;
 /// @name .k-flex-row-reverse
 /// @group flex-direction
 /// @contextType css
 
-/// This is equivalent to `flex-direction: column`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: top to bottom.
+/// This is equivalent to `flex-direction: column;`.
+/// @example flex-direction: column;
 /// @name .k-flex-col
 /// @group flex-direction
 /// @contextType css
 
-/// This is equivalent to `flex-direction: column-reverse`. This establishes the main-axis to be vertical, thus defining the direction flex items are placed in the flex container: bottom to top.
+/// This is equivalent to `flex-direction: column-reverse;`.
+/// @example flex-direction: column-reverse;
 /// @name .k-flex-col-reverse
 /// @group flex-direction
 /// @contextType css

package/scss/flex-grid/_flex-grow.scss

@@ -1,9 +1,11 @@
-/// This is equivalent to `flex-grow: 1`. It defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
+/// This is equivalent to `flex-grow: 1;`.
+/// @example flex-grow: 1;
 /// @name .k-flex-grow
 /// @group flex-grow
 /// @contextType css
 
-/// This is equivalent to `flex-grow: 0`. The item will not grow.
+/// This is equivalent to `flex-grow: 0;`.
+/// @example flex-grow: 0;
 /// @name .k-flex-grow-0
 /// @group flex-grow
 /// @contextType css

package/scss/flex-grid/_flex-shrink.scss

@@ -1,9 +1,11 @@
-/// This is equivalent to `flex-shrink: 1`. It determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the row.
+/// This is equivalent to `flex-shrink: 1;`.
+/// @example flex-shrink: 1;
 /// @name .k-flex-shrink
 /// @group flex-shrink
 /// @contextType css
 
-/// This is equivalent to `flex-shrink: 0`. The item will not shrink.
+/// This is equivalent to `flex-shrink: 0;`.
+/// @example flex-shrink: 0;
 /// @name .k-flex-shrink-0
 /// @group flex-shrink
 /// @contextType css

package/scss/flex-grid/_flex-wrap.scss

@@ -1,14 +1,17 @@
-/// This is equivalent to `flex-wrap: wrap`. It allows flex items to wrap as needed onto multiple lines, from top to bottom.
+/// This is equivalent to `flex-wrap: wrap;`.
+/// @example flex-wrap: wrap
 /// @name .k-flex-wrap
 /// @group flex-wrap
 /// @contextType css
 
-/// This is equivalent to `flex-wrap: nowrap`. All flex items will be on one line.
+/// This is equivalent to `flex-wrap: nowrap;`.
+/// @example flex-wrap: nowrap
 /// @name .k-flex-nowrap
 /// @group flex-wrap
 /// @contextType css
 
-/// This is equivalent to `flex-wrap: wrap-reverse`. It allows flex items to wrap as needed onto multiple lines, from bottom to top.
+/// This is equivalent to `flex-wrap: wrap-reverse;`.
+/// @example flex-wrap: wrap-reverse
 /// @name .k-flex-wrap-reverse
 /// @group flex-wrap
 /// @contextType css

package/scss/flex-grid/_flex.scss

@@ -1,19 +1,23 @@
-/// This is equivalent to `flex: 1 1 0%`. It sizes the item not based on its `width`/`height` properties, but based on the available space. This is similar to `flex: 1 1 auto` except it is allowed to shrink beyond its initial size.
+/// This is equivalent to `flex: 1 1 0%;`.
+/// @example flex: 1 1 0%;
 /// @name .k-flex-1
 /// @group flex
 /// @contextType css
 
-/// This is equivalent to `flex: 1 1 auto`. Beware, this is not the default value. It sizes the item based on its `width`/`height` properties, but makes it fully flexible so that they absorb any extra space along the main axis. If all items are either `flex: auto`, `flex: initial`, or `flex: none`, any remaining space after the items have been sized will be distributed evenly to the items with `flex: auto`.
+/// This is equivalent to `flex: 1 1 auto;`.
+/// @example flex: 1 1 auto;
 /// @name .k-flex-auto
 /// @group flex
 /// @contextType css
 
 /// This is the same as `flex: initial;` and the shorthand for the default value: `flex: 0 1 auto`. It sizes the item based on its `width`/`height` properties (or its content if not set). It makes the flex item inflexible when there is some free space left, but allows it to shrink to its minimum when there is not enough space. The alignment abilities or `auto` margins can be used to align flex items along the main axis.
+/// @example flex: initial;
 /// @name .k-flex-initial
 /// @group flex
 /// @contextType css
 
-/// This is equivalent to `flex: 0 0 auto`. It sizes the item according to its `width`/`height` properties, but makes it fully inflexible. This is similar to `flex: initial` except it is not allowed to shrink, even in an overflow situation.
+/// This is equivalent to `flex: 0 0 auto;`.
+/// @example flex: 0 0 auto;
 /// @name .k-flex-none
 /// @group flex
 /// @contextType css

package/scss/flex-grid/_gap.scss

@@ -1,4 +1,182 @@
-// TODO: docs
+/// This is equivalent to `gap: 0;`.
+/// @example gap: 0;
+/// @name .k-gap-0
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `gap: 1px;`.
+/// @example gap: 1px;
+/// @name .k-gap-1px
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `gap: 0.25rem;`.
+/// @example gap: 0.25rem;
+/// @name .k-gap-1
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `gap: 0.25rem;`.
+/// @example gap: 0.25rem;
+/// @name .k-gap-xs
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `gap: 0.5rem;`.
+/// @example gap: 0.5rem;
+/// @name .k-gap-sm
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `gap: 0.75rem;`.
+/// @example gap: 0.75rem;
+/// @name .k-gap-md
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `gap: 1rem;`.
+/// @example gap: 1rem;
+/// @name .k-gap-lg
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `gap: 1.5rem;`.
+/// @example gap: 1.5rem;
+/// @name .k-gap-xl
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `gap: 0.125rem;`.
+/// @example gap: 0.125rem;
+/// @name .k-gap-thin
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `gap: 1px;`.
+/// @example gap: 1px;
+/// @name .k-gap-hair
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `column-gap: 0;`.
+/// @example column-gap: 0;
+/// @name .k-gap-x-0
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `column-gap: 1px;`.
+/// @example column-gap: 1px;
+/// @name .k-gap-x-1px
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `column-gap: 0.25rem;`.
+/// @example column-gap: 0.25rem;
+/// @name .k-gap-x-1
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `column-gap: 0.25rem;`.
+/// @example column-gap: 0.25rem;
+/// @name .k-gap-x-xs
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `column-gap: 0.5rem;`.
+/// @example column-gap: 0.5rem;
+/// @name .k-gap-x-sm
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `column-gap: 0.75rem;`.
+/// @example column-gap: 0.75rem;
+/// @name .k-gap-x-md
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `column-gap: 1rem;`.
+/// @example column-gap: 1rem;
+/// @name .k-gap-x-lg
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `column-gap: 1.5rem;`.
+/// @example column-gap: 1.5rem;
+/// @name .k-gap-x-xl
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `column-gap: 0.125rem;`.
+/// @example column-gap: 0.125rem;
+/// @name .k-gap-x-thin
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `column-gap: 1px;`.
+/// @example column-gap: 1px;
+/// @name .k-gap-x-hair
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `row-gap: 0;`.
+/// @example row-gap: 0;
+/// @name .k-gap-y-0
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `row-gap: 1px;`.
+/// @example row-gap: 1px;
+/// @name .k-gap-y-1px
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `row-gap: 0.25rem;`.
+/// @example row-gap: 0.25rem;
+/// @name .k-gap-y-1
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `row-gap: 0.25rem;`.
+/// @example row-gap: 0.25rem;
+/// @name .k-gap-y-xs
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `row-gap: 0.5rem;`.
+/// @example row-gap: 0.5rem;
+/// @name .k-gap-y-sm
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `row-gap: 0.75rem;`.
+/// @example row-gap: 0.75rem;
+/// @name .k-gap-y-md
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `row-gap: 1rem;`.
+/// @example row-gap: 1rem;
+/// @name .k-gap-y-lg
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `row-gap: 1.5rem;`.
+/// @example row-gap: 1.5rem;
+/// @name .k-gap-y-xl
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `row-gap: 0.125rem;`.
+/// @example row-gap: 0.125rem;
+/// @name .k-gap-y-thin
+/// @group gap
+/// @contextType css
+
+/// This is equivalent to `row-gap: 1px;`.
+/// @example row-gap: 1px;
+/// @name .k-gap-y-hair
+/// @group gap
+/// @contextType css
 
 @mixin kendo-utils--flex-grid--gap() {
 

package/scss/flex-grid/_grid-auto-columns.scss

@@ -1,4 +1,26 @@
-// TODO: docs
+/// This is equivalent to `grid-auto-columns: auto;`.
+/// @example grid-auto-columns: auto;
+/// @name .k-grid-auto-cols-auto
+/// @group grid-auto-columns
+/// @contextType css
+
+/// This is equivalent to `grid-auto-columns: min-content;`.
+/// @example grid-auto-columns: min-content;
+/// @name .k-grid-auto-cols-min
+/// @group grid-auto-columns
+/// @contextType css
+
+/// This is equivalent to `grid-auto-columns: max-content;`.
+/// @example grid-auto-columns: max-content;
+/// @name .k-grid-auto-cols-max
+/// @group grid-auto-columns
+/// @contextType css
+
+/// This is equivalent to `grid-auto-columns: minmax( 0, 1fr );`.
+/// @example grid-auto-columns: minmax( 0, 1fr );
+/// @name .k-grid-auto-cols-fr
+/// @group grid-auto-columns
+/// @contextType css
 
 @mixin kendo-utils--flex-grid--grid-auto-columns() {
 

package/scss/flex-grid/_grid-auto-flow.scss

@@ -1,4 +1,38 @@
-// TODO: docs
+/// This is equivalent to `grid-auto-flow: row;`.
+/// @example grid-auto-flow: row;
+/// @name .k-grid-auto-flow-row
+/// @group grid-auto-flow
+/// @contextType css
+
+/// This is equivalent to `grid-auto-flow: column;`.
+/// @example grid-auto-flow: column;
+/// @name .k-grid-auto-flow-column
+/// @group grid-auto-flow
+/// @contextType css
+
+/// This is equivalent to `grid-auto-flow: dense;`.
+/// @example grid-auto-flow: dense;
+/// @name .k-grid-auto-flow-dense
+/// @group grid-auto-flow
+/// @contextType css
+
+/// This is equivalent to `grid-auto-flow: row dense;`.
+/// @example grid-auto-flow: row dense;
+/// @name .k-grid-auto-flow-row-dense
+/// @group grid-auto-flow
+/// @contextType css
+
+/// This is equivalent to `grid-auto-flow: col dense;`.
+/// @example grid-auto-flow: col dense;
+/// @name .k-grid-auto-flow-col-dense
+/// @group grid-auto-flow
+/// @contextType css
+
+/// This is equivalent to `grid-auto-flow: unset;`.
+/// @example grid-auto-flow: unset;
+/// @name .k-grid-auto-flow-unset
+/// @group grid-auto-flow
+/// @contextType css
 
 @mixin kendo-utils--flex-grid--grid-auto-flow() {
 

package/scss/flex-grid/_grid-auto-rows.scss

@@ -1,4 +1,26 @@
-// TODO: docs
+/// This is equivalent to `grid-auto-rows: auto;`.
+/// @example grid-auto-rows: auto;
+/// @name .k-grid-auto-rows-auto
+/// @group grid-auto-rows
+/// @contextType css
+
+/// This is equivalent to `grid-auto-rows: min-content;`.
+/// @example grid-auto-rows: min-content;
+/// @name .k-grid-auto-rows-min
+/// @group grid-auto-rows
+/// @contextType css
+
+/// This is equivalent to `grid-auto-rows: max-content;`.
+/// @example grid-auto-rows: max-content;
+/// @name .k-grid-auto-rows-max
+/// @group grid-auto-rows
+/// @contextType css
+
+/// This is equivalent to `grid-auto-rows: minmax( 0, 1fr );`.
+/// @example grid-auto-rows: minmax( 0, 1fr );
+/// @name .k-grid-auto-rows-fr
+/// @group grid-auto-rows
+/// @contextType css
 
 @mixin kendo-utils--flex-grid--grid-auto-rows() {
 

package/scss/flex-grid/_grid-column-start-end.scss

@@ -1,4 +1,20 @@
-// TODO: docs
+/// This is equivalent to `grid-column-start: 1;`.
+/// @example grid-column-start: 1;
+/// @name .k-col-start-1
+/// @group grid-column-start
+/// @contextType css
+
+/// This is equivalent to `grid-column-start: -1;`.
+/// @example grid-column-start: -1;
+/// @name .k-col-start--1
+/// @group grid-column-start
+/// @contextType css
+
+/// This is equivalent to `grid-column-start: auto;`.
+/// @example grid-column-start: auto;
+/// @name .k-col-start-auto
+/// @group grid-column-start
+/// @contextType css
 
 @mixin kendo-utils--flex-grid--grid-column-start-end() {
 

package/scss/flex-grid/_grid-row-start-end.scss

@@ -1,4 +1,20 @@
-// TODO: docs
+/// This is equivalent to `grid-row-start: 1;`.
+/// @example grid-row-start: 1;
+/// @name .k-row-start-1
+/// @group grid-row-start
+/// @contextType css
+
+/// This is equivalent to `grid-row-start: -1;`.
+/// @example grid-row-start: -1;
+/// @name .k-row-start--1
+/// @group grid-row-start
+/// @contextType css
+
+/// This is equivalent to `grid-row-start: auto;`.
+/// @example grid-row-start: auto;
+/// @name .k-row-start-auto
+/// @group grid-row-start
+/// @contextType css
 
 @mixin kendo-utils--flex-grid--grid-row-start-end() {
 

package/scss/flex-grid/_grid-template-columns.scss

@@ -1,4 +1,20 @@
-// TODO: docs
+/// This is equivalent to `grid-template-columns: repeat(1, minmax(0, 1fr));`.
+/// @example grid-template-columns: repeat(1, minmax(0, 1fr));
+/// @name .k-grid-cols-1
+/// @group grid-template-columns
+/// @contextType css
+
+/// This is equivalent to `grid-template-columns: repeat(2, minmax(0, 1fr));`.
+/// @example grid-template-columns: repeat(2, minmax(0, 1fr));
+/// @name .k-grid-cols-2
+/// @group grid-template-columns
+/// @contextType css
+
+/// This is equivalent to `grid-template-columns: none;`.
+/// @example grid-template-columns: none;
+/// @name .k-grid-cols-none
+/// @group grid-template-columns
+/// @contextType css
 
 @mixin kendo-utils--flex-grid--grid-template-columns() {
 

package/scss/flex-grid/_grid-template-rows.scss

@@ -1,4 +1,20 @@
-// TODO: docs
+/// This is equivalent to `grid-template-rows: repeat(1, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(1, minmax(0, 1fr));
+/// @name .k-grid-rows-1
+/// @group grid-template-rows
+/// @contextType css
+
+/// This is equivalent to `grid-template-rows: repeat(2, minmax(0, 1fr));`.
+/// @example grid-template-rows: repeat(2, minmax(0, 1fr));
+/// @name .k-grid-rows-2
+/// @group grid-template-rows
+/// @contextType css
+
+/// This is equivalent to `grid-template-rows: none;`.
+/// @example grid-template-rows: none;
+/// @name .k-grid-rows-none
+/// @group grid-template-rows
+/// @contextType css
 
 @mixin kendo-utils--flex-grid--grid-template-rows() {
 

package/scss/flex-grid/_justify-content.scss

@@ -1,4 +1,80 @@
-// TODO: docs
+/// This is equivalent to `justify-content: normal;`.
+/// @example justify-content: normal;
+/// @name .k-justify-content-normal
+/// @group justify-content
+/// @contextType css
+
+/// This is equivalent to `justify-content: stretch;`.
+/// @example justify-content: stretch;
+/// @name .k-justify-content-stretch
+/// @group justify-content
+/// @contextType css
+
+/// This is equivalent to `justify-content: center;`.
+/// @example justify-content: center;
+/// @name .k-justify-content-center
+/// @group justify-content
+/// @contextType css
+
+/// This is equivalent to `justify-content: start;`.
+/// @example justify-content: start;
+/// @name .k-justify-content-start
+/// @group justify-content
+/// @contextType css
+
+/// This is equivalent to `justify-content: end;`.
+/// @example justify-content: end;
+/// @name .k-justify-content-end
+/// @group justify-content
+/// @contextType css
+
+/// This is equivalent to `justify-content: flex-start;`.
+/// @example justify-content: flex-start;
+/// @name .k-justify-content-selft-start
+/// @group justify-content
+/// @contextType css
+
+/// This is equivalent to `justify-content: flex-end;`.
+/// @example justify-content: flex-end;
+/// @name .k-justify-content-self-end
+/// @group justify-content
+/// @contextType css
+
+/// This is equivalent to `justify-content: baseline;`.
+/// @example justify-content: baseline;
+/// @name .k-justify-content-baseline
+/// @group justify-content
+/// @contextType css
+
+/// This is equivalent to `justify-content: first baseline;`.
+/// @example justify-content: first baseline;
+/// @name .k-justify-content-first-baseline
+/// @group justify-content
+/// @contextType css
+
+/// This is equivalent to `justify-content: last baseline;`.
+/// @example justify-content: last baseline;
+/// @name .k-justify-content-last-baseline
+/// @group justify-content
+/// @contextType css
+
+/// This is equivalent to `justify-content: space-between;`.
+/// @example justify-content: space-between;
+/// @name .k-justify-content-between
+/// @group justify-content
+/// @contextType css
+
+/// This is equivalent to `justify-content: space-around;`.
+/// @example justify-content: space-around;
+/// @name .k-justify-content-around
+/// @group justify-content
+/// @contextType css
+
+/// This is equivalent to `justify-content: space-evenly;`.
+/// @example justify-content: space-evenly;
+/// @name .k-justify-content-evenly
+/// @group justify-content
+/// @contextType css
 
 @mixin kendo-utils--flex-grid--justify-content() {
 

package/scss/flex-grid/_justify-items.scss

@@ -1,4 +1,86 @@
-// TODO: docs
+/// This is equivalent to `justify-items: normal;`.
+/// @example justify-items: normal;
+/// @name .k-justify-items-normal
+/// @group justify-items
+/// @contextType css
+
+/// This is equivalent to `justify-items: stretch;`.
+/// @example justify-items: stretch;
+/// @name .k-justify-items-stretch
+/// @group justify-items
+/// @contextType css
+
+/// This is equivalent to `justify-items: center;`.
+/// @example justify-items: center;
+/// @name .k-justify-items-center
+/// @group justify-items
+/// @contextType css
+
+/// This is equivalent to `justify-items: start;`.
+/// @example justify-items: start;
+/// @name .k-justify-items-start
+/// @group justify-items
+/// @contextType css
+
+/// This is equivalent to `justify-items: end;`.
+/// @example justify-items: end;
+/// @name .k-justify-items-end
+/// @group justify-items
+/// @contextType css
+
+/// This is equivalent to `justify-items: flex-start;`.
+/// @example justify-items: flex-start;
+/// @name .k-justify-items-selft-start
+/// @group justify-items
+/// @contextType css
+
+/// This is equivalent to `justify-items: flex-end;`.
+/// @example justify-items: flex-end;
+/// @name .k-justify-items-self-end
+/// @group justify-items
+/// @contextType css
+
+/// This is equivalent to `justify-items: self-start;`.
+/// @example justify-items: self-start;
+/// @name .k-justify-items-selft-start
+/// @group justify-items
+/// @contextType css
+
+/// This is equivalent to `justify-items: self-end;`.
+/// @example justify-items: self-end;
+/// @name .k-justify-items-self-end
+/// @group justify-items
+/// @contextType css
+
+/// This is equivalent to `justify-items: left;`.
+/// @example justify-items: left;
+/// @name .k-justify-items-left
+/// @group justify-items
+/// @contextType css
+
+/// This is equivalent to `justify-items: right;`.
+/// @example justify-items: right;
+/// @name .k-justify-items-right
+/// @group justify-items
+/// @contextType css
+
+/// This is equivalent to `justify-items: baseline;`.
+/// @example justify-items: baseline;
+/// @name .k-justify-items-baseline
+/// @group justify-items
+/// @contextType css
+
+/// This is equivalent to `justify-items: first baseline;`.
+/// @example justify-items: first baseline;
+/// @name .k-justify-items-first-baseline
+/// @group justify-items
+/// @contextType css
+
+/// This is equivalent to `justify-items: last baseline;`.
+/// @example justify-items: last baseline;
+/// @name .k-justify-items-last-baseline
+/// @group justify-items
+/// @contextType css
 
 @mixin kendo-utils--flex-grid--justify-items() {