@progress/kendo-theme-utils 5.12.1-dev.0 → 5.12.1-dev.1

package/scss/table/_border-collapse.scss

@@ -1,5 +1,5 @@
 // TODO DOCS
 
-$kendo-utils-border-collapse: map-get( $kendo-utils, "border-collapse" ) !default;
+$kendo-utils-border-collapse: k-map-get( $kendo-utils, "border-collapse" ) !default;
 
 @include generate-utils( border, border-collapse, $kendo-utils-border-collapse );

package/scss/table/_table-layout.scss

@@ -1,12 +1,17 @@
+// Table-layout documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout.
+
+/// This is equivalent to `table-layout: auto;`. By default, most browsers use an automatic table layout algorithm. The widths of the table and its cells are adjusted to fit the content.
 /// @name .k-table-layout-auto
-/// @description This is equivalent to `table-layout: auto;`. By default, most browsers use an automatic table layout algorithm. The widths of the table and its cells are adjusted to fit the content.
 /// @group table-layout
+/// @contextType css
 
+/// This is equivalent to `table-layout: fixed;`. Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.
 /// @name .k-table-layout-fixed
-/// @description This is equivalent to `table-layout: fixed;`. Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.
 /// @group table-layout
+/// @contextType css
 
-$kendo-utils-table-layout: map-get( $kendo-utils, "table-layout" ) !default;
+// Table layout utility classes
+$kendo-utils-table-layout: k-map-get( $kendo-utils, "table-layout" ) !default;
 
 @include generate-utils( table, table-layout, $kendo-utils-table-layout );
 @include generate-utils( table-layout, table-layout, $kendo-utils-table-layout );

package/scss/transform/_flip.scss

@@ -1,12 +1,15 @@
+/// This is equivalent to `transform: scaleX( -1 );`. Flips the element horizontally.
 /// @name .k-flip-h
-/// @description This is equivalent to `transform: scaleX( -1 );`. Flips the element horizontally.
 /// @group transform
+/// @contextType css
 
+/// This is equivalent to `transform: scaleY( -1 );`. Flips the element vertically.
 /// @name .k-flip-v
-/// @description This is equivalent to `transform: scaleY( -1 );`. Flips the element vertically.
 /// @group transform
+/// @contextType css
 
-$kendo-utils-flip: map-get( $kendo-utils, "flip" ) !default;
+// Flip utility classes
+$kendo-utils-flip: k-map-get( $kendo-utils, "flip" ) !default;
 
 @if $kendo-utils-flip {
     .#{$kendo-prefix}flip-h { transform: scaleX( -1 ); }

package/scss/transform/_origin.scss

@@ -1,5 +1,5 @@
 // TODO DOCS
 
-$kendo-utils-origin: map-get( $kendo-utils, "origin" ) !default;
+$kendo-utils-origin: k-map-get( $kendo-utils, "origin" ) !default;
 
 @include generate-utils( origin, transform-origin, $kendo-utils-origin );

package/scss/transform/_rotate.scss

@@ -1,6 +1,44 @@
-// TODO DOCS
+/// This is equivalent to `transform: rotate( 0 );`. Does not rotate the element.
+/// @name .k-rotate-0
+/// @group transform
+/// @contextType css
 
-$kendo-utils-rotate: map-get( $kendo-utils, "rotate" ) !default;
+/// This is equivalent to `transform: rotate( 45deg );`. Rotates the element by 45 degrees.
+/// @name .k-rotate-45
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: rotate( 90deg );`. Rotates the element by 90 degrees.
+/// @name .k-rotate-90
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: rotate( 135deg );`. Rotates the element by 135 degrees.
+/// @name .k-rotate-135
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: rotate( 180deg );`. Rotates the element by 180 degrees.
+/// @name .k-rotate-180
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: rotate( 225deg );`. Rotates the element by 225 degrees.
+/// @name .k-rotate-225
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: rotate( 270deg );`. Rotates the element by 270 degrees.
+/// @name .k-rotate-270
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: rotate( 315deg );`. Rotates the element by 315 degrees.
+/// @name .k-rotate-315
+/// @group transform
+/// @contextType css
+
+$kendo-utils-rotate: k-map-get( $kendo-utils, "rotate" ) !default;
 
 // sass-lint:disable function-name-format
 @function __rotate( $val ) {

package/scss/transform/_scale.scss

@@ -1,16 +1,29 @@
-// TODO DOCS
+/// This is equivalent to `transform: scale( 0, 0 );`. The element is shrunk and no longer visible.
+/// @name .k-scale-0
+/// @group transform
+/// @contextType css
 
-$kendo-utils-scale: map-get( $kendo-utils, "scale" ) !default;
+/// This is equivalent to `transform: scale( 1, 1 );`. The element has its default scale.
+/// @name .k-scale-1
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: scale( 2, 2 );`. The element is scaling two times in both directions.
+/// @name .k-scale-2
+/// @group transform
+/// @contextType css
+
+$kendo-utils-scale: k-map-get( $kendo-utils, "scale" ) !default;
 
 // sass-lint:disable function-name-format
 @function __scale( $val ) {
-    @return scale( unquote($val) );
+    @return scale( $val );
 }
 @function __scale-x( $val ) {
-    @return scaleX( unquote($val) );
+    @return scaleX( $val );
 }
 @function __scale-y( $val ) {
-    @return scaleY( unquote($val) );
+    @return scaleY( $val );
 }
 // sass-lint:enable function-name-format
 

package/scss/transform/_skew.scss

@@ -1,6 +1,6 @@
 // TODO DOCS
 
-$kendo-utils-skew: map-get( $kendo-utils, "skew" ) !default;
+$kendo-utils-skew: k-map-get( $kendo-utils, "skew" ) !default;
 
 // sass-lint:disable function-name-format
 @function __skew-x( $val ) {

package/scss/transform/_translate.scss

@@ -1,8 +1,65 @@
-// TODO DOCS
+/// This is equivalent to `transform: translate( 0, 0 );`. The element does not move.
+/// @name .k-translate-0
+/// @group transform
+/// @contextType css
 
-$kendo-utils-translate: map-get( $kendo-utils, "translate" ) !default;
+/// This is equivalent to `transform: translate( 0, 50% );`. The element moves vertically by 50% of its height.
+/// @name .k-translate-0-50
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: translate( 0, 100% );`. The element moves vertically by 100% of its height.
+/// @name .k-translate-0-100
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: translate( 50%, 0 );`. The element moves horizontally by 50% of its width.
+/// @name .k-translate-50-0
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: translate( 50%, 50% );`. The element moves horizontally by 50% of its width and vertically by 50% of its height.
+/// @name .k-translate-50-50
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: translate( 50%, 100% );`. The element moves horizontally by 50% of its width and vertically by 100% of its height.
+/// @name .k-translate-50-100
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: translate( 100%, 0 );`. The element moves horizontally by 100% of its width.
+/// @name .k-translate-100-0
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: translate( 100%, 50% );`. The element moves horizontally by 100% of its width and vertically by 50% of its height.
+/// @name .k-translate-100-50
+/// @group transform
+/// @contextType css
+
+/// This is equivalent to `transform: translate( 100%, 100% );`. The element moves horizontally by 100% of its width and vertically by 100% of its height.
+/// @name .k-translate-100-100
+/// @group transform
+/// @contextType css
+
+$kendo-utils-translate: k-map-get( $kendo-utils, "translate" ) !default;
+$kendo-utils-translate-xy: (
+    "0": ( 0, 0 ),
+    "0-50": ( 0, 50% ),
+    "0-100": ( 0, 100% ),
+    "50-0": ( 50%, 0 ),
+    "50-50": ( 50%, 50% ),
+    "50-100": ( 50%, 100% ),
+    "100-0": ( 100%, 0 ),
+    "100-50": ( 100%, 50% ),
+    "100-100": ( 100%, 100% )
+) !default;
 
 // sass-lint:disable function-name-format
+@function __translate( $val ) {
+    @return translate( $val );
+}
 @function __translate-x( $val ) {
     @return translateX( $val );
 }
@@ -11,5 +68,6 @@ $kendo-utils-translate: map-get( $kendo-utils, "translate" ) !default;
 }
 // sass-lint:enable function-name-format
 
+@include generate-utils( translate, transform, $kendo-utils-translate-xy, __translate );
 @include generate-utils( translate-x, transform, $kendo-utils-translate, __translate-x );
 @include generate-utils( translate-y, transform, $kendo-utils-translate, __translate-y );

package/scss/typography/_font-size.scss

@@ -1,5 +1,5 @@
 // TODO DOCS
 
-$kendo-utils-font-size: map-get( $kendo-utils, "font-size" ) !default;
+$kendo-utils-font-size: k-map-get( $kendo-utils, "font-size" ) !default;
 
 @include generate-utils( font-size, font-size, $kendo-utils-font-size );

package/scss/typography/_font-style.scss

@@ -1,5 +1,5 @@
 // TODO DOCS
 
-$kendo-utils-font-style: map-get( $kendo-utils, "font-style" ) !default;
+$kendo-utils-font-style: k-map-get( $kendo-utils, "font-style" ) !default;
 
 @include generate-utils( font, font-style, $kendo-utils-font-style );

package/scss/typography/_font-weight.scss

@@ -1,5 +1,5 @@
 // TODO DOCS
 
-$kendo-utils-font-weight: map-get( $kendo-utils, "font-weight" ) !default;
+$kendo-utils-font-weight: k-map-get( $kendo-utils, "font-weight" ) !default;
 
 @include generate-utils( font, font-weight, $kendo-utils-font-weight );

package/scss/typography/_text-align.scss

@@ -1,19 +1,24 @@
+/// This is equivalent to `text-align: left;`. The inline contents are aligned to the left edge of the line box.
 /// @name .k-text-left
-/// @description This is equivalent to `text-align: left;`. The inline contents are aligned to the left edge of the line box.
 /// @group text-align
+/// @contextType css
 
+/// This is equivalent to `text-align: right;`. The inline contents are aligned to the right edge of the line box.
 /// @name .k-text-right
-/// @description This is equivalent to `text-align: right;`. The inline contents are aligned to the right edge of the line box.
 /// @group text-align
+/// @contextType css
 
+/// This is equivalent to `text-align: center;`. The inline contents are centered within the line box.
 /// @name .k-text-center
-/// @description This is equivalent to `text-align: center;`. The inline contents are centered within the line box.
 /// @group text-align
+/// @contextType css
 
+/// This is equivalent to `text-align: justify;`. The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.
 /// @name .k-text-justify
-/// @description This is equivalent to `text-align: justify;`. The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line.
 /// @group text-align
+/// @contextType css
 
-$kendo-utils-text-align: map-get( $kendo-utils, "text-align" ) !default;
+// Text align utility classes
+$kendo-utils-text-align: k-map-get( $kendo-utils, "text-align" ) !default;
 
 @include generate-utils( text, text-align, $kendo-utils-text-align );

package/scss/typography/_text-transform.scss

@@ -1,17 +1,21 @@
 // TODO DOCS
 
+/// This is equivalent to `text-transform: lowercase;`. Is a keyword that converts all characters to lowercase.
 /// @name k-text-lowercase
-/// @description This is equivalent to `text-transform: lowercase;`. Is a keyword that converts all characters to lowercase.
 /// @group text-transform
+/// @contextType css
 
+/// This is equivalent to `text-transform: uppercase;`. Is a keyword that converts all characters to uppercase.
 /// @name k-text-uppercase
-/// @description This is equivalent to `text-transform: uppercase;`. Is a keyword that converts all characters to uppercase.
 /// @group text-transform
+/// @contextType css
 
+/// This is equivalent to `text-transform: capitalize;`. Is a keyword that converts the first letter of each word to uppercase. Other characters remain unchanged (they retain their original case as written in the element's text).
 /// @name k-text-capitalize
-/// @description This is equivalent to `text-transform: capitalize;`. Is a keyword that converts the first letter of each word to uppercase. Other characters remain unchanged (they retain their original case as written in the element's text).
 /// @group text-transform
+/// @contextType css
 
-$kendo-utils-text-transform: map-get( $kendo-utils, "text-transform" ) !default;
+// Text transform utility classes
+$kendo-utils-text-transform: k-map-get( $kendo-utils, "text-transform" ) !default;
 
 @include generate-utils( text, text-transform, $kendo-utils-text-transform );

package/scss/typography/_white-space.scss

@@ -1,27 +1,34 @@
+/// This is equivalent to `white-space: normal;`. Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.
 /// @name .k-white-space-normal
-/// @description This is equivalent to `white-space: normal;`. Sequences of white space are collapsed. Newline characters in the source are handled the same as other white space. Lines are broken as necessary to fill line boxes.
 /// @group white-space
+/// @contextType css
 
+/// This is equivalent to `white-space: nowrap;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
 /// @name .k-white-space-nowrap
-/// @description This is equivalent to `white-space: nowrap;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
 /// @group white-space
+/// @contextType css
 
+/// This is equivalent to `white-space: pre;`. Sequences of white space are preserved. Lines are only broken at newline characters in the source and at <br> elements.
 /// @name .k-white-space-pre
-/// @description This is equivalent to `white-space: pre;`. Sequences of white space are preserved. Lines are only broken at newline characters in the source and at <br> elements.
 /// @group white-space
+/// @contextType css
 
+/// This is equivalent to `white-space: pre-wrap;`. Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
 /// @name .k-white-space-pre-wrap
-/// @description This is equivalent to `white-space: pre-wrap;`. Sequences of white space are preserved. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
 /// @group white-space
+/// @contextType css
 
+/// This is equivalent to `white-space: pre-line;`. Sequences of white space are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
 /// @name .k-white-space-pre-line
-/// @description This is equivalent to `white-space: pre-line;`. Sequences of white space are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
 /// @group white-space
+/// @contextType css
 
+/// This is equivalent to `white-space: break-spaces;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
 /// @name .k-white-space-break-spaces
-/// @description This is equivalent to `white-space: break-spaces;`. Collapses white space as for normal, but suppresses line breaks (text wrapping) within the source.
 /// @group white-space
+/// @contextType css
 
-$kendo-utils-white-space: map-get( $kendo-utils, "white-space" ) !default;
+// White space utility classes
+$kendo-utils-white-space: k-map-get( $kendo-utils, "white-space" ) !default;
 
 @include generate-utils( white-space, white-space, $kendo-utils-white-space );