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

package/scss/layout/_zindex.scss

@@ -1,4 +1,44 @@
-// TODO: docs
+/// This is equivalent to `z-index: 0;`.
+/// @example z-index: 0;
+/// @name .k-zindex-0
+/// @group zindex
+/// @contextType css
+
+/// This is equivalent to `z-index: 10;`.
+/// @example z-index: 10;
+/// @name .k-zindex-10
+/// @group zindex
+/// @contextType css
+
+/// This is equivalent to `z-index: 20;`.
+/// @example z-index: 20;
+/// @name .k-zindex-20
+/// @group zindex
+/// @contextType css
+
+/// This is equivalent to `z-index: 30;`.
+/// @example z-index: 30;
+/// @name .k-zindex-30
+/// @group zindex
+/// @contextType css
+
+/// This is equivalent to `z-index: 40;`.
+/// @example z-index: 40;
+/// @name .k-zindex-40
+/// @group zindex
+/// @contextType css
+
+/// This is equivalent to `z-index: 50;`.
+/// @example z-index: 50;
+/// @name .k-zindex-50
+/// @group zindex
+/// @contextType css
+
+/// This is equivalent to `z-index: auto;`.
+/// @example z-index: auto;
+/// @name .k-zindex-auto
+/// @group zindex
+/// @contextType css
 
 @mixin kendo-utils--layout--zindex() {
 

package/scss/layout/index.import.scss

@@ -1,8 +1,13 @@
 @import "./_aspect-ratio.scss";
+@import "./_box-sizing.scss";
 @import "./_clear.scss";
+@import "./_columns.scss";
 @import "./_display.scss";
 @import "./_float.scss";
+@import "./_object-fit.scss";
+@import "./_object-position.scss";
 @import "./_overflow.scss";
+@import "./_placement.scss";
 @import "./_position.scss";
 @import "./_visibility.scss";
 @import "./_zindex.scss";
@@ -10,10 +15,15 @@
 
 @mixin kendo-utils--layout() {
     @include kendo-utils--layout--aspect-ratio();
+    @include kendo-utils--layout--box-sizing();
     @include kendo-utils--layout--clear();
+    @include kendo-utils--layout--columns();
     @include kendo-utils--layout--display();
     @include kendo-utils--layout--float();
+    @include kendo-utils--layout--object-fit();
+    @include kendo-utils--layout--object-position();
     @include kendo-utils--layout--overflow();
+    @include kendo-utils--layout--placement();
     @include kendo-utils--layout--position();
     @include kendo-utils--layout--visibility();
     @include kendo-utils--layout--zindex();

package/scss/sizing/_height.scss

@@ -1,4 +1,146 @@
-// TODO: docs
+/// This is equivalent to `height: 0;`.
+/// @example height: 0;
+/// @name .k-h-0
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `height: 1px;`.
+/// @example height: 1px;
+/// @name .k-h-1px
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `height: 0.25rem;`.
+/// @example height: 0.25rem;
+/// @name .k-h-1
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `min-height: 100%;`.
+/// @example min-height: 100%;
+/// @name .k-h-full
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `height: 100vh;`.
+/// @example height: 100vh;
+/// @name .k-h-screen
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `height: min-content;`.
+/// @example height: min-content;
+/// @name .k-h-min
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `height: max-content;`.
+/// @example height: max-content;
+/// @name .k-h-max
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `height: fit-content;`.
+/// @example height: fit-content;
+/// @name .k-h-fit
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `min-height: 0;`.
+/// @example min-height: 0;
+/// @name .k-min-h-0
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `min-height: 1px;`.
+/// @example min-height: 1px;
+/// @name .k-min-h-1px
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `min-height: 0.25rem;`.
+/// @example min-height: 0.25rem;
+/// @name .k-min-h-1
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `min-height: 100%;`.
+/// @example min-height: 100%;
+/// @name .k-min-h-full
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `min-height: 100vh;`.
+/// @example min-height: 100vh;
+/// @name .k-min-h-screen
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `min-height: min-content;`.
+/// @example min-height: min-content;
+/// @name .k-min-h-min
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `min-height: max-content;`.
+/// @example min-height: max-content;
+/// @name .k-min-h-max
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `min-height: fit-content;`.
+/// @example min-height: fit-content;
+/// @name .k-min-h-fit
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `max-height: 0;`.
+/// @example max-height: 0;
+/// @name .k-max-h-0
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `max-height: 1px;`.
+/// @example max-height: 1px;
+/// @name .k-max-h-1px
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `max-height: 0.25rem;`.
+/// @example max-height: 0.25rem;
+/// @name .k-max-h-1
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `max-height: 100%;`.
+/// @example max-height: 100%;
+/// @name .k-max-h-full
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `max-height: 100vh;`.
+/// @example max-height: 100vh;
+/// @name .k-max-h-screen
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `max-height: min-content;`.
+/// @example max-height: min-content;
+/// @name .k-max-h-min
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `max-height: max-content;`.
+/// @example max-height: max-content;
+/// @name .k-max-h-max
+/// @group height
+/// @contextType css
+
+/// This is equivalent to `max-height: fit-content;`.
+/// @example max-height: fit-content;
+/// @name .k-max-h-fit
+/// @group height
+/// @contextType css
 
 @mixin kendo-utils--sizing--height() {
 

package/scss/sizing/_width.scss

@@ -1,4 +1,146 @@
-// TODO: docs
+/// This is equivalent to `width: 0;`.
+/// @example width: 0;
+/// @name .k-w-0
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `width: 1px;`.
+/// @example width: 1px;
+/// @name .k-w-1px
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `width: 0.25rem;`.
+/// @example width: 0.25rem;
+/// @name .k-w-1
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `min-width: 100%;`.
+/// @example min-width: 100%;
+/// @name .k-w-full
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `width: 100vw;`.
+/// @example width: 100vw;
+/// @name .k-w-screen
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `width: min-content;`.
+/// @example width: min-content;
+/// @name .k-w-min
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `width: max-content;`.
+/// @example width: max-content;
+/// @name .k-w-max
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `width: fit-content;`.
+/// @example width: fit-content;
+/// @name .k-w-fit
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `min-width: 0;`.
+/// @example min-width: 0;
+/// @name .k-min-w-0
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `min-width: 1px;`.
+/// @example min-width: 1px;
+/// @name .k-min-w-1px
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `min-width: 0.25rem;`.
+/// @example min-width: 0.25rem;
+/// @name .k-min-w-1
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `min-width: 100%;`.
+/// @example min-width: 100%;
+/// @name .k-min-w-full
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `min-width: 100vw;`.
+/// @example min-width: 100vw;
+/// @name .k-min-w-screen
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `min-width: min-content;`.
+/// @example min-width: min-content;
+/// @name .k-min-w-min
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `min-width: max-content;`.
+/// @example min-width: max-content;
+/// @name .k-min-w-max
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `min-width: fit-content;`.
+/// @example min-width: fit-content;
+/// @name .k-min-w-fit
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `max-width: 0;`.
+/// @example max-width: 0;
+/// @name .k-max-w-0
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `max-width: 1px;`.
+/// @example max-width: 1px;
+/// @name .k-max-w-1px
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `max-width: 0.25rem;`.
+/// @example max-width: 0.25rem;
+/// @name .k-max-w-1
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `max-width: 100%;`.
+/// @example max-width: 100%;
+/// @name .k-max-w-full
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `max-width: 100vh;`.
+/// @example max-width: 100vh;
+/// @name .k-max-w-screen
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `max-width: min-content;`.
+/// @example max-width: min-content;
+/// @name .k-max-w-min
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `max-width: max-content;`.
+/// @example max-width: max-content;
+/// @name .k-max-w-max
+/// @group width
+/// @contextType css
+
+/// This is equivalent to `max-width: fit-content;`.
+/// @example max-width: fit-content;
+/// @name .k-max-w-fit
+/// @group width
+/// @contextType css
 
 @mixin kendo-utils--sizing--width() {