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

package/scss/transform/_origin.scss

@@ -1,4 +1,56 @@
-// TODO: docs
+/// This is equivalent to `transform-origin: center;`.
+/// @example transform-origin: center;
+/// @name .k-origin-center
+/// @group transform-origin
+/// @contextType css
+
+/// This is equivalent to `transform-origin: top;`.
+/// @example transform-origin: top;
+/// @name .k-origin-top
+/// @group transform-origin
+/// @contextType css
+
+/// This is equivalent to `transform-origin: right;`.
+/// @example transform-origin: right;
+/// @name .k-origin-right
+/// @group transform-origin
+/// @contextType css
+
+/// This is equivalent to `transform-origin: bottom;`.
+/// @example transform-origin: bottom;
+/// @name .k-origin-bottom
+/// @group transform-origin
+/// @contextType css
+
+/// This is equivalent to `transform-origin: left;`.
+/// @example transform-origin: left;
+/// @name .k-origin-left
+/// @group transform-origin
+/// @contextType css
+
+/// This is equivalent to `transform-origin: top-left;`.
+/// @example transform-origin: top-left;
+/// @name .k-origin-top-left
+/// @group transform-origin
+/// @contextType css
+
+/// This is equivalent to `transform-origin: top-right;`.
+/// @example transform-origin: top-right;
+/// @name .k-origin-top-right
+/// @group transform-origin
+/// @contextType css
+
+/// This is equivalent to `transform-origin: bottom-left;`.
+/// @example transform-origin: bottom-left;
+/// @name .k-origin-bottom-left
+/// @group transform-origin
+/// @contextType css
+
+/// This is equivalent to `transform-origin: bottom-right;`.
+/// @example transform-origin: bottom-right;
+/// @name .k-origin-bottom-right
+/// @group transform-origin
+/// @contextType css
 
 @mixin kendo-utils--transform--origin() {
 

package/scss/transform/_rotate.scss

@@ -1,39 +1,47 @@
-/// This is equivalent to `transform: rotate( 0 );`. Does not rotate the element.
+/// This is equivalent to `transform: rotate( 0 );`.
+/// @example transform: rotate( 0 );
 /// @name .k-rotate-0
 /// @group transform
 /// @contextType css
 
-/// This is equivalent to `transform: rotate( 45deg );`. Rotates the element by 45 degrees.
+/// This is equivalent to `transform: rotate( 45deg );`.
+/// @example transform: rotate( 45deg );
 /// @name .k-rotate-45
 /// @group transform
 /// @contextType css
 
-/// This is equivalent to `transform: rotate( 90deg );`. Rotates the element by 90 degrees.
+/// This is equivalent to `transform: rotate( 90deg );`.
+/// @example transform: rotate( 90deg );
 /// @name .k-rotate-90
 /// @group transform
 /// @contextType css
 
-/// This is equivalent to `transform: rotate( 135deg );`. Rotates the element by 135 degrees.
+/// This is equivalent to `transform: rotate( 135deg );`.
+/// @example transform: rotate( 135deg );
 /// @name .k-rotate-135
 /// @group transform
 /// @contextType css
 
-/// This is equivalent to `transform: rotate( 180deg );`. Rotates the element by 180 degrees.
+/// This is equivalent to `transform: rotate( 180deg );`.
+/// @example transform: rotate( 180deg );
 /// @name .k-rotate-180
 /// @group transform
 /// @contextType css
 
-/// This is equivalent to `transform: rotate( 225deg );`. Rotates the element by 225 degrees.
+/// This is equivalent to `transform: rotate( 225deg );`.
+/// @example transform: rotate( 225deg );
 /// @name .k-rotate-225
 /// @group transform
 /// @contextType css
 
-/// This is equivalent to `transform: rotate( 270deg );`. Rotates the element by 270 degrees.
+/// This is equivalent to `transform: rotate( 270deg );`.
+/// @example transform: rotate( 270deg );
 /// @name .k-rotate-270
 /// @group transform
 /// @contextType css
 
-/// This is equivalent to `transform: rotate( 315deg );`. Rotates the element by 315 degrees.
+/// This is equivalent to `transform: rotate( 315deg );`.
+/// @example transform: rotate( 315deg );
 /// @name .k-rotate-315
 /// @group transform
 /// @contextType css

package/scss/transform/_scale.scss

@@ -1,14 +1,17 @@
-/// This is equivalent to `transform: scale( 0, 0 );`. The element is shrunk and no longer visible.
+/// This is equivalent to `transform: scale( 0, 0 );`.
+/// @example transform: scale( 0, 0 );
 /// @name .k-scale-0
 /// @group transform
 /// @contextType css
 
-/// This is equivalent to `transform: scale( 1, 1 );`. The element has its default scale.
+/// This is equivalent to `transform: scale( 1, 1 );`.
+/// @example transform: scale( 1, 1 );
 /// @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.
+/// This is equivalent to `transform: scale( 2, 2 );`.
+/// @example transform: scale( 2, 2 );
 /// @name .k-scale-2
 /// @group transform
 /// @contextType css

package/scss/transform/_skew.scss

@@ -1,4 +1,26 @@
-// TODO: docs
+/// This is equivalent to `transform: skewX(0deg);`.
+/// @example transform: skewX(0deg);
+/// @name .k-skew-x-0
+/// @group skew
+/// @contextType css
+
+/// This is equivalent to `transform: skewX(1deg);`.
+/// @example transform: skewX(1deg);
+/// @name .k-skew-x-1
+/// @group skew
+/// @contextType css
+
+/// This is equivalent to `transform: skewY(0deg);`.
+/// @example transform: skewY(0deg);
+/// @name .k-skew-y-0
+/// @group skew
+/// @contextType css
+
+/// This is equivalent to `transform: skewY(1deg);`.
+/// @example transform: skewY(1deg);
+/// @name .k-skew-y-1
+/// @group skew
+/// @contextType css
 
 // sass-lint:disable function-name-format
 @function __skew-x( $val ) {

package/scss/transform/_translate.scss

@@ -1,44 +1,53 @@
-/// This is equivalent to `transform: translate( 0, 0 );`. The element does not move.
+/// This is equivalent to `transform: translate( 0, 0 );`.
+/// @example transform: translate( 0, 0 );
 /// @name .k-translate-0
 /// @group transform
 /// @contextType css
 
-/// This is equivalent to `transform: translate( 0, 50% );`. The element moves vertically by 50% of its height.
+/// This is equivalent to `transform: translate( 0, 50% );`.
+/// @example transform: translate( 0, 50% );
 /// @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.
+/// This is equivalent to `transform: translate( 0, 100% );`.
+/// @example transform: translate( 0, 100% );
 /// @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.
+/// This is equivalent to `transform: translate( 50%, 0 );`.
+/// @example transform: translate( 50%, 0 );
 /// @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.
+/// This is equivalent to `transform: translate( 50%, 50% );`.
+/// @example transform: translate( 50%, 50% );
 /// @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.
+/// This is equivalent to `transform: translate( 50%, 100% );`.
+/// @example transform: translate( 50%, 100% );
 /// @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.
+/// This is equivalent to `transform: translate( 100%, 0 );`.
+/// @example transform: translate( 100%, 0 );
 /// @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.
+/// This is equivalent to `transform: translate( 100%, 50% );`.
+/// @example transform: translate( 100%, 50% );
 /// @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.
+/// This is equivalent to `transform: translate( 100%, 100% );`.
+/// @example transform: translate( 100%, 100% );
 /// @name .k-translate-100-100
 /// @group transform
 /// @contextType css

package/scss/typography/_font-size.scss

@@ -1,4 +1,32 @@
-// TODO: docs
+/// This is equivalent to `font-size: 10px;`.
+/// @example font-size: 10px;
+/// @name .k-font-xs
+/// @group font-size
+/// @contextType css
+
+/// This is equivalent to `font-size: 12px;`.
+/// @example font-size: 12px;
+/// @name .k-font-sm
+/// @group font-size
+/// @contextType css
+
+/// This is equivalent to `font-size: 14px;`.
+/// @example font-size: 14px;
+/// @name .k-font-md
+/// @group font-size
+/// @contextType css
+
+/// This is equivalent to `font-size: 16px;`.
+/// @example font-size: 16px;
+/// @name .k-font-lg
+/// @group font-size
+/// @contextType css
+
+/// This is equivalent to `font-size: 20px;`.
+/// @example font-size: 20px;
+/// @name .k-font-xl
+/// @group font-size
+/// @contextType css
 
 @mixin kendo-utils--typography--font-size() {
 

package/scss/typography/_font-style.scss

@@ -1,4 +1,14 @@
-// TODO: docs
+/// This is equivalent to `font-style: italic;`.
+/// @example font-style: italic;
+/// @name .k-font-italic
+/// @group font-style
+/// @contextType css
+
+/// This is equivalent to `font-style: normal;`.
+/// @example font-style: normal;
+/// @name .k-font-non-italic
+/// @group font-style
+/// @contextType css
 
 @mixin kendo-utils--typography--font-style() {
 

package/scss/typography/_font-weight.scss

@@ -1,4 +1,56 @@
-// TODO: docs
+/// This is equivalent to `font-weight: 100;`.
+/// @example font-weight: 100;
+/// @name .k-font-thin
+/// @group font-weight
+/// @contextType css
+
+/// This is equivalent to `font-weight: 200;`.
+/// @example font-weight: 200;
+/// @name .k-font-extralight
+/// @group font-weight
+/// @contextType css
+
+/// This is equivalent to `font-weight: 300;`.
+/// @example font-weight: 300;
+/// @name .k-font-light
+/// @group font-weight
+/// @contextType css
+
+/// This is equivalent to `font-weight: 400;`.
+/// @example font-weight: 400;
+/// @name .k-font-normal
+/// @group font-weight
+/// @contextType css
+
+/// This is equivalent to `font-weight: 500;`.
+/// @example font-weight: 500;
+/// @name .k-font-medium
+/// @group font-weight
+/// @contextType css
+
+/// This is equivalent to `font-weight: 600;`.
+/// @example font-weight: 600;
+/// @name .k-font-semibold
+/// @group font-weight
+/// @contextType css
+
+/// This is equivalent to `font-weight: 700;`.
+/// @example font-weight: 700;
+/// @name .k-font-bold
+/// @group font-weight
+/// @contextType css
+
+/// This is equivalent to `font-weight: 800;`.
+/// @example font-weight: 800;
+/// @name .k-font-extrabold
+/// @group font-weight
+/// @contextType css
+
+/// This is equivalent to `font-weight: 900;`.
+/// @example font-weight: 900;
+/// @name .k-font-black
+/// @group font-weight
+/// @contextType css
 
 @mixin kendo-utils--typography--font-weight() {
 

package/scss/typography/_list-style.scss

@@ -0,0 +1,25 @@
+/// This is equivalent to `list-style-type: none;`.
+/// @example list-style-type: none;
+/// @name .k-list-none
+/// @group list-style
+/// @contextType css
+
+/// This is equivalent to `list-style-type: disc;`.
+/// @example list-style-type: disc;
+/// @name .k-list-disc
+/// @group list-style
+/// @contextType css
+
+/// This is equivalent to `list-style-type: decimal;`.The marker of list items is a number.
+/// @example list-style-type: decimal;
+/// @name .k-list-decimal
+/// @group list-style
+/// @contextType css
+
+@mixin kendo-utils--typography--list-style-type() {
+
+    // list-style-type utility classes
+    $kendo-utils-list-style-type: k-map-get( $kendo-utils, "list-style-type" ) !default;
+    @include generate-utils( list, list-style-type, $kendo-utils-list-style-type );
+
+}

package/scss/typography/_text-align.scss

@@ -1,21 +1,23 @@
-// Text-align documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-align.
-
-/// This is equivalent to `text-align: left;`. The inline contents are aligned to the left edge of the line box.
+/// This is equivalent to `text-align: left;`.
+/// @example text-align: left;
 /// @name .k-text-left
 /// @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.
+/// This is equivalent to `text-align: right;`.
+/// @example text-align: right;
 /// @name .k-text-right
 /// @group text-align
 /// @contextType css
 
-/// This is equivalent to `text-align: center;`. The inline contents are centered within the line box.
+/// This is equivalent to `text-align: center;`.
+/// @example text-align: center;
 /// @name .k-text-center
 /// @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.
+/// This is equivalent to `text-align: justify;`.
+/// @example text-align: justify;
 /// @name .k-text-justify
 /// @group text-align
 /// @contextType css

package/scss/typography/_text-decoration.scss

@@ -0,0 +1,31 @@
+/// This is equivalent to `text-decoration: underline;`.
+/// @example text-decoration: underline;
+/// @name .k-underline
+/// @group text-decoration
+/// @contextType css
+
+/// This is equivalent to `text-decoration: overline;`.
+/// @example text-decoration: overline;
+/// @name .k-overline
+/// @group text-decoration
+/// @contextType css
+
+/// This is equivalent to `text-decoration: line-through;`.
+/// @example text-decoration: line-through;
+/// @name .k-line-through
+/// @group text-decoration
+/// @contextType css
+
+/// This is equivalent to `text-decoration: none-decoration;`.
+/// @example text-decoration: none-decoration;
+/// @name .k-none-decoration
+/// @group text-decoration
+/// @contextType css
+
+@mixin kendo-utils--typography--text-decoration() {
+
+    // text-decoration utility classes
+    $kendo-utils-text-decoration: k-map-get( $kendo-utils, "text-decoration" ) !default;
+    @include generate-utils( text, text-decoration, $kendo-utils-text-decoration );
+
+}

package/scss/typography/_text-overflow.scss

@@ -1,3 +1,15 @@
+/// This is equivalent to `text-overflow: clip;`.
+/// @example text-overflow: clip;
+/// @name .k-text-clip
+/// @group text-overflow
+/// @contextType css
+
+/// This is equivalent to `text-overflow: ellipsis; white-space: nowrap; overflow: hidden;`.
+/// @example text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
+/// @name .k-text-ellipsis
+/// @group text-overflow
+/// @contextType css
+
 @mixin kendo-utils--typography--text-overflow() {
 
     // Text overflow utility classes

package/scss/typography/_text-transform.scss

@@ -1,17 +1,18 @@
-// Text-transform documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform.
-
-/// This is equivalent to `text-transform: lowercase;`. Is a keyword that converts all characters to lowercase.
-/// @name k-text-lowercase
+/// This is equivalent to `text-transform: lowercase;`.
+/// @example text-transform: lowercase;
+/// @name .k-text-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
+/// This is equivalent to `text-transform: uppercase;`.
+/// @example text-transform: uppercase;
+/// @name .k-text-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
+/// This is equivalent to `text-transform: capitalize;`.
+/// @example text-transform: capitalize;
+/// @name .k-text-capitalize
 /// @group text-transform
 /// @contextType css
 

package/scss/typography/_vertical-align.scss

@@ -0,0 +1,55 @@
+/// This is equivalent to `vertical-align: baseline;`.
+/// @example vertical-align: baseline;
+/// @name .k-align-baseline
+/// @group vertical-align
+/// @contextType css
+
+/// This is equivalent to `vertical-align: top;`.
+/// @example vertical-align: top;
+/// @name .k-align-top
+/// @group vertical-align
+/// @contextType css
+
+/// This is equivalent to `vertical-align: middle;`.
+/// @example vertical-align: middle;
+/// @name .k-align-middle
+/// @group vertical-align
+/// @contextType css
+
+/// This is equivalent to `vertical-align: bottom;`.
+/// @example vertical-align: bottom;
+/// @name .k-align-bottom
+/// @group vertical-align
+/// @contextType css
+
+/// This is equivalent to `vertical-align: text-top;`.
+/// @example vertical-align: text-top;
+/// @name .k-align-text-top
+/// @group vertical-align
+/// @contextType css
+
+/// This is equivalent to `vertical-align: text-bottom;`.
+/// @example vertical-align: text-bottom;
+/// @name .k-align-text-bottom
+/// @group vertical-align
+/// @contextType css
+
+/// This is equivalent to `vertical-align: sub;`.
+/// @example vertical-align: sub;
+/// @name .k-align-sub
+/// @group vertical-align
+/// @contextType css
+
+/// This is equivalent to `vertical-align: super;`.
+/// @example vertical-align: super;
+/// @name .k-align-super
+/// @group vertical-align
+/// @contextType css
+
+@mixin kendo-utils--typography--vertical-align() {
+
+    // vertical-align utility classes
+    $kendo-utils-vertical-align: k-map-get( $kendo-utils, "vertical-align" ) !default;
+    @include generate-utils( align, vertical-align, $kendo-utils-vertical-align );
+
+}

package/scss/typography/_white-space.scss

@@ -1,31 +1,35 @@
-// White-space documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/white-space.
-
-/// 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.
+/// This is equivalent to `white-space: normal;`.
+/// @example white-space: normal;
 /// @name .k-white-space-normal
 /// @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.
+/// This is equivalent to `white-space: nowrap;`.
+/// @example white-space: nowrap;
 /// @name .k-white-space-nowrap
 /// @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.
+/// This is equivalent to `white-space: pre;`.
+/// @example white-space: pre;
 /// @name .k-white-space-pre
 /// @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.
+/// This is equivalent to `white-space: pre-wrap;`.
+/// @example white-space: pre-wrap;
 /// @name .k-white-space-pre-wrap
 /// @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.
+/// This is equivalent to `white-space: pre-line;`.
+/// @example white-space: pre-line;
 /// @name .k-white-space-pre-line
 /// @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.
+/// This is equivalent to `white-space: break-spaces;`.
+/// @example white-space: break-spaces;
 /// @name .k-white-space-break-spaces
 /// @group white-space
 /// @contextType css

package/scss/typography/index.import.scss

@@ -6,14 +6,14 @@
 // font variant
 // letter spacing
 // line height
-// list style
+@import "./_list-style.scss";
 @import "./_text-align.scss";
 @import "./_text-color.scss";
-// text decoration
+@import "./_text-decoration.scss";
 @import "./_text-overflow.scss";
 @import "./_text-transform.scss";
 // text indent
-// vertical align
+@import "./_vertical-align.scss";
 @import "./_white-space.scss";
 
 
@@ -21,9 +21,12 @@
     @include kendo-utils--typography--font-size();
     @include kendo-utils--typography--font-style();
     @include kendo-utils--typography--font-weight();
+    @include kendo-utils--typography--list-style-type();
     @include kendo-utils--typography--text-align();
     @include kendo-utils--typography--text-color();
+    @include kendo-utils--typography--text-decoration();
     @include kendo-utils--typography--text-overflow();
     @include kendo-utils--typography--text-transform();
+    @include kendo-utils--typography--vertical-align();
     @include kendo-utils--typography--white-space();
 }