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

package/scss/spacing/_padding.scss

@@ -1,4 +1,548 @@
-// TODO: docs
+/// This is equivalent to `padding: 0;`.
+/// @example padding: 0;
+/// @name .k-p-0
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding: 1px;`.
+/// @example padding: 1px;
+/// @name .k-p-1px
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding: 0.25rem;`.
+/// @example padding: 0.25rem;
+/// @name .k-p-1
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding: -1px;`.
+/// @example padding: -1px;
+/// @name .k-p--1px
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding: -0.25rem;`.
+/// @example padding: -0.25rem;
+/// @name .k-p--1
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding: 0.25rem;`.
+/// @example padding: 0.25rem;
+/// @name .k-p-xs
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding: 0.5rem;`.
+/// @example padding: 0.5rem;
+/// @name .k-p-sm
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding: 0.75rem;`.
+/// @example padding: 0.75rem;
+/// @name .k-p-pd
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding: 1rem;`.
+/// @example padding: 1rem;
+/// @name .k-p-lg
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding: 1.5rem;`.
+/// @example padding: 1.5rem;
+/// @name .k-p-xl
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding: 0.125rem;`.
+/// @example padding: 0.125rem;
+/// @name .k-p-thin
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding: 1px;`.
+/// @example padding: 1px;
+/// @name .k-p-hair
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding: auto;`.
+/// @example padding: auto;
+/// @name .k-p-auto
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-top: 0;`.
+/// @example padding-top: 0;
+/// @name .k-pt-0
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-top: 1px;`.
+/// @example padding-top: 1px;
+/// @name .k-pt-1px
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-top: 0.25rem;`.
+/// @example padding-top: 0.25rem;
+/// @name .k-pt-1
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-top: -1px;`.
+/// @example padding-top: -1px;
+/// @name .k-pt--1px
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-top: -0.25rem;`.
+/// @example padding-top: -0.25rem;
+/// @name .k-pt--1
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-top: 0.25rem;`.
+/// @example padding-top: 0.25rem;
+/// @name .k-pt-xs
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-top: 0.5rem;`.
+/// @example padding-top: 0.5rem;
+/// @name .k-pt-sm
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-top: 0.75rem;`.
+/// @example padding-top: 0.75rem;
+/// @name .k-pt-md
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-top: 1rem;`.
+/// @example padding-top: 1rem;
+/// @name .k-pt-lg
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-top: 1.5rem;`.
+/// @example padding-top: 1.5rem;
+/// @name .k-pt-xl
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-top: 0.125rem;`.
+/// @example padding-top: 0.125rem;
+/// @name .k-pt-thin
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-top: 1px;`.
+/// @example padding-top: 1px;
+/// @name .k-pt-hair
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-top: auto;`.
+/// @example padding-top: auto;
+/// @name .k-pt-auto
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-right: 0;`.
+/// @example padding-right: 0;
+/// @name .k-pr-0
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-right: 1px;`.
+/// @example padding-right: 1px;
+/// @name .k-pr-1px
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-right: 0.25rem;`.
+/// @example padding-right: 0.25rem;
+/// @name .k-pr-1
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-right: -1px;`.
+/// @example padding-right: -1px;
+/// @name .k-pr--1px
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-right: -0.25rem;`.
+/// @example padding-right: -0.25rem;
+/// @name .k-pr--1
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-right: 0.25rem;`.
+/// @example padding-right: 0.25rem;
+/// @name .k-pr-xs
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-right: 0.5rem;`.
+/// @example padding-right: 0.5rem;
+/// @name .k-pr-sm
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-right: 0.75rem;`.
+/// @example padding-right: 0.75rem;
+/// @name .k-pr-md
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-right: 1rem;`.
+/// @example padding-right: 1rem;
+/// @name .k-pr-lg
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-right: 1.5rem;`.
+/// @example padding-right: 1.5rem;
+/// @name .k-pr-xl
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-right: 0.125rem;`.
+/// @example padding-right: 0.125rem;
+/// @name .k-pr-thin
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-right: 1px;`.
+/// @example padding-right: 1px;
+/// @name .k-pr-hair
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-right: auto;`.
+/// @example padding-right: auto;
+/// @name .k-pr-auto
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-bottom: 0;`.
+/// @example padding-bottom: 0;
+/// @name .k-pb-0
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-bottom: 1px;`.
+/// @example padding-bottom: 1px;
+/// @name .k-pb-1px
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-bottom: 0.25rem;`.
+/// @example padding-bottom: 0.25rem;
+/// @name .k-pb-1
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-bottom: -1px;`.
+/// @example padding-bottom: -1px;
+/// @name .k-pb--1px
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-bottom: -0.25rem;`.
+/// @example padding-bottom: -0.25rem;
+/// @name .k-pb--1
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-bottom: 0.25rem;`.
+/// @example padding-bottom: 0.25rem;
+/// @name .k-pb-xs
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-bottom: 0.5rem;`.
+/// @example padding-bottom: 0.5rem;
+/// @name .k-pb-sm
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-bottom: 0.75rem;`.
+/// @example padding-bottom: 0.75rem;
+/// @name .k-pb-md
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-bottom: 1rem;`.
+/// @example padding-bottom: 1rem;
+/// @name .k-pb-lg
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-bottom: 1.5rem;`.
+/// @example padding-bottom: 1.5rem;
+/// @name .k-pb-xl
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-bottom: 0.125rem;`.
+/// @example padding-bottom: 0.125rem;
+/// @name .k-pb-thin
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-bottom: 1px;`.
+/// @example padding-bottom: 1px;
+/// @name .k-pb-hair
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-bottom: auto;`.
+/// @example padding-bottom: auto;
+/// @name .k-pb-auto
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-left: 0;`.
+/// @example padding-left: 0;
+/// @name .k-pl-0
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-left: 1px;`.
+/// @example padding-left: 1px;
+/// @name .k-pl-1px
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-left: 0.25rem;`.
+/// @example padding-left: 0.25rem;
+/// @name .k-pl-1
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-left: -1px;`.
+/// @example padding-left: -1px;
+/// @name .k-pl--1px
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-left: -0.25rem;`.
+/// @example padding-left: -0.25rem;
+/// @name .k-pl--1
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-left: 0.25rem;`.
+/// @example padding-left: 0.25rem;
+/// @name .k-pl-xs
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-left: 0.5rem;`.
+/// @example padding-left: 0.5rem;
+/// @name .k-pl-sm
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-left: 0.75rem;`.
+/// @example padding-left: 0.75rem;
+/// @name .k-pl-md
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-left: 1rem;`.
+/// @example padding-left: 1rem;
+/// @name .k-pl-lg
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-left: 1.5rem;`.
+/// @example padding-left: 1.5rem;
+/// @name .k-pl-xl
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-left: 0.125rem;`.
+/// @example padding-left: 0.125rem;
+/// @name .k-pl-thin
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-left: 1px;`.
+/// @example padding-left: 1px;
+/// @name .k-pl-hair
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-left: auto;`.
+/// @example padding-left: auto;
+/// @name .k-pl-auto
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-inline: 0;`.
+/// @example padding-inline: 0;
+/// @name .k-px-0
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-inline: 1px;`.
+/// @example padding-inline: 1px;
+/// @name .k-px-1px
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-inline: 0.25rem;`.
+/// @example padding-inline: 0.25rem;
+/// @name .k-px-1
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-inline: -1px;`.
+/// @example padding-inline: -1px;
+/// @name .k-px--1px
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-inline: -0.25rem;`.
+/// @example padding-inline: -0.25rem;
+/// @name .k-px--1
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-inline: 0.25rem;`.
+/// @example padding-inline: 0.25rem;
+/// @name .k-px-xs
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-inline: 0.5rem;`.
+/// @example padding-inline: 0.5rem;
+/// @name .k-px-sm
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-inline: 0.75rem;`.
+/// @example padding-inline: 0.75rem;
+/// @name .k-px-md
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-inline: 1rem;`.
+/// @example padding-inline: 1rem;
+/// @name .k-px-lg
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-inline: 1.5rem;`.
+/// @example padding-inline: 1.5rem;
+/// @name .k-px-xl
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-inline: 0.125rem;`.
+/// @example padding-inline: 0.125rem;
+/// @name .k-px-thin
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-inline: 1px;`.
+/// @example padding-inline: 1px;
+/// @name .k-px-hair
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-inline: auto;`.
+/// @example padding-inline: auto;
+/// @name .k-px-auto
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-block: 0;`.
+/// @example padding-block: 0;
+/// @name .k-py-0
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-block: 1px;`.
+/// @example padding-block: 1px;
+/// @name .k-py-1px
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-block: 0.25rem;`.
+/// @example padding-block: 0.25rem;
+/// @name .k-py-1
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-block: -1px;`.
+/// @example padding-block: -1px;
+/// @name .k-py--1px
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-block: -0.25rem;`.
+/// @example padding-block: -0.25rem;
+/// @name .k-py--1
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-block: 0.25rem;`.
+/// @example padding-block: 0.25rem;
+/// @name .k-py-xs
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-block: 0.5rem;`.
+/// @example padding-block: 0.5rem;
+/// @name .k-py-sm
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-block: 0.75rem;`.
+/// @example padding-block: 0.75rem;
+/// @name .k-py-md
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-block: 1rem;`.
+/// @example padding-block: 1rem;
+/// @name .k-py-lg
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-block: 1.5rem;`.
+/// @example padding-block: 1.5rem;
+/// @name .k-py-xl
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-block: 0.125rem;`.
+/// @example padding-block: 0.125rem;
+/// @name .k-py-thin
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-block: 1px;`.
+/// @example padding-block: 1px;
+/// @name .k-py-hair
+/// @group padding
+/// @contextType css
+
+/// This is equivalent to `padding-block: auto;`.
+/// @example padding-block: auto;
+/// @name .k-py-auto
+/// @group padding
+/// @contextType css
 
 @mixin kendo-utils--spacing--padding() {
 

package/scss/svg/_fill.scss

@@ -0,0 +1,43 @@
+/// This is equivalent to `fill: none;`.
+/// @example fill: none;
+/// @name .k-fill-none
+/// @group fill
+/// @contextType css
+
+/// This is equivalent to `fill: inherit;`.
+/// @example fill: inherit;
+/// @name .k-fill-inherit
+/// @group fill
+/// @contextType css
+
+/// This is equivalent to `fill: currentColor;`.
+/// @example fill: currentColor;
+/// @name .k-fill-currentColor
+/// @group fill
+/// @contextType css
+
+/// This is equivalent to `fill: transparent;`.
+/// @example fill: transparent;
+/// @name .k-fill-transparent
+/// @group fill
+/// @contextType css
+
+/// This is equivalent to `fill: black;`.
+/// @example fill: black;
+/// @name .k-fill-black
+/// @group fill
+/// @contextType css
+
+/// This is equivalent to `fill: white;`.
+/// @example fill: white;
+/// @name .k-fill-white
+/// @group fill
+/// @contextType css
+
+@mixin kendo-utils--svg--fill() {
+
+    // fill utility classes
+    $kendo-utils-fill: k-map-get( $kendo-utils, "fill-stroke" ) !default;
+    @include generate-utils( fill, fill, $kendo-utils-fill );
+
+}

package/scss/svg/_stroke.scss

@@ -0,0 +1,43 @@
+/// This is equivalent to `stroke: none;`.
+/// @example stroke: none;
+/// @name .k-stroke-none
+/// @group stroke
+/// @contextType css
+
+/// This is equivalent to `stroke: inherit;`.
+/// @example stroke: inherit;
+/// @name .k-stroke-inherit
+/// @group stroke
+/// @contextType css
+
+/// This is equivalent to `stroke: currentColor;`.
+/// @example stroke: currentColor;
+/// @name .k-stroke-currentColor
+/// @group stroke
+/// @contextType css
+
+/// This is equivalent to `stroke: transparent;`.
+/// @example stroke: transparent;
+/// @name .k-stroke-transparent
+/// @group stroke
+/// @contextType css
+
+/// This is equivalent to `stroke: black;`.
+/// @example stroke: black;
+/// @name .k-stroke-black
+/// @group stroke
+/// @contextType css
+
+/// This is equivalent to `stroke: white;`.
+/// @example stroke: white;
+/// @name .k-stroke-white
+/// @group stroke
+/// @contextType css
+
+@mixin kendo-utils--svg--stroke() {
+
+    // stroke utility classes
+    $kendo-utils-stroke: k-map-get( $kendo-utils, "stroke-stroke" ) !default;
+    @include generate-utils( stroke, stroke, $kendo-utils-stroke );
+
+}

package/scss/svg/index.import.scss

@@ -0,0 +1,7 @@
+@import "./_fill.scss";
+@import "./_stroke.scss";
+
+@mixin kendo-utils--svg() {
+    @include kendo-utils--svg--fill();
+    @include kendo-utils--svg--stroke();
+}

package/scss/table/_border-collapse.scss

@@ -1,4 +1,14 @@
-// TODO: docs
+/// This is equivalent to `border-collapse: collapse;`.
+/// @example border-collapse: collapse;
+/// @name .k-border-collapse
+/// @group border-collapse
+/// @contextType css
+
+/// This is equivalent to `border-collapse: separate;`.
+/// @example border-collapse: separate;
+/// @name .k-border-separate
+/// @group border-collapse
+/// @contextType css
 
 @mixin kendo-utils--table--border-collapse() {
 

package/scss/table/_table-layout.scss

@@ -1,12 +1,12 @@
-// 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
+/// This is equivalent to `table-layout: auto;`.
+/// @example table-layout: auto;
+/// @name .k-table-auto
 /// @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
+/// This is equivalent to `table-layout: fixed;`.
+/// @example table-layout: fixed;
+/// @name .k-table-fixed
 /// @group table-layout
 /// @contextType css
 

package/scss/transform/_flip.scss

@@ -1,9 +1,11 @@
-/// This is equivalent to `transform: scaleX( -1 );`. Flips the element horizontally.
+/// This is equivalent to `transform: scaleX( -1 );`.
+/// @example transform: scaleX( -1 );
 /// @name .k-flip-h
 /// @group transform
 /// @contextType css
 
-/// This is equivalent to `transform: scaleY( -1 );`. Flips the element vertically.
+/// This is equivalent to `transform: scaleY( -1 );`.
+/// @example transform: scaleY( -1 );
 /// @name .k-flip-v
 /// @group transform
 /// @contextType css