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

package/scss/layout/_display.scss

@@ -1,58 +1,87 @@
-/// This is equivalent to `display: none;`. Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). All descendant elements also have their display turned off.
+/// This is equivalent to `display: none;`.
+/// @example display: none;
 /// @name .k-d-none
 /// @group display
 /// @contextType css
 
-/// This is equivalent to `display: block;`. The element generates a block element box, generating line breaks both before and after the element when in the normal flow.
+/// This is equivalent to `display: contents;`.
+/// @example display: contents;
+/// @name .k-d-contents
+/// @group display
+/// @contextType css
+
+/// This is equivalent to `display: block;`.
+/// @example display: block;
 /// @name .k-d-block
 /// @group display
 /// @contextType css
 
-/// This is equivalent to `display: inline;`. The element generates one or more inline element boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space.
+/// This is equivalent to `display: inline;`.
+/// @example display: inline;
 /// @name .k-d-inline
 /// @group display
 /// @contextType css
 
-/// This is equivalent to `display: inline-block;`. The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).
+/// This is equivalent to `display: inline-block;`.
+/// @example display: inline-block;
 /// @name .k-d-inline-block
 /// @group display
 /// @contextType css
 
-/// This is equivalent to `display: flex;`. The element behaves like a block element and lays out its content according to the flexbox model.
+/// This is equivalent to `display: flex;`.
+/// @example display: flex;
 /// @name .k-d-flex
 /// @group display
 /// @contextType css
 
-/// This is equivalent to `display: inline-flex;`. The element behaves like an inline element and lays out its content according to the flexbox model.
+/// This is equivalent to `display: inline-flex;`.
+/// @example display: inline-flex;
 /// @name .k-d-inline-flex
 /// @group display
 /// @contextType css
 
 /// This is equivalent to `display: grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents.
+/// @example display: grid
 /// @name .k-d-grid
 /// @group display
 /// @contextType css
 
 /// This is equivalent to `display: inline-grid`. It defines the element as a grid container and establishes a new grid formatting context for its contents.
+/// @example display: inline-grid
 /// @name .k-d-inline-grid
 /// @group display
 /// @contextType css
 
-/// This is equivalent to `display: table;`. These elements behave like HTML `<table>` elements. It defines a block-level box.
+/// This is equivalent to `display: table;`.
+/// @example display: table;
 /// @name .k-d-table
 /// @group display
 /// @contextType css
 
-/// This is equivalent to `display: inline-table;`. The inline-table value does not have a direct mapping in HTML. It behaves like an HTML `<table>` element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.
+/// This is equivalent to `display: inline-table;`.
+/// @example display: inline-table;
 /// @name .k-d-inline-table
 /// @group display
 /// @contextType css
 
-/// This is equivalent to `display: list-item;`. These elements behave like HTML `<LI>` elements. It defines a block-level box.
+/// This is equivalent to `display: list-item;`.
+/// @example display: list-item;
 /// @name .k-d-list-item
 /// @group display
 /// @contextType css
 
+/// This is equivalent to `display: table-row;`.
+/// @example display: table-row;
+/// @name .k-d-table-row
+/// @group display
+/// @contextType css
+
+/// This is equivalent to `display: table-cell;`.
+/// @example display: table-cell;
+/// @name .k-d-table-cell
+/// @group display
+/// @contextType css
+
 @mixin kendo-utils--layout--display() {
 
     // Display utility classes

package/scss/layout/_float.scss

@@ -1,16 +1,17 @@
-// Float documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/float.
-
-/// This is equivalent to `float: left;`. The element must float on the left side of its containing block.
+/// This is equivalent to `float: left;`.
+/// @example float: left;
 /// @name .k-float-left
 /// @group float
 /// @contextType css
 
-/// This is equivalent to `float: right;`. The element must float on the right side of its containing block.
+/// This is equivalent to `float: right;`.
+/// @example float: right;
 /// @name .k-float-right
 /// @group float
 /// @contextType css
 
-/// This is equivalent to `float: none;`. The element must not float.
+/// This is equivalent to `float: none;`.
+/// @example float: none;
 /// @name .k-float-none
 /// @group float
 /// @contextType css

package/scss/layout/_object-fit.scss

@@ -0,0 +1,43 @@
+/// This is equivalent to `object-fit: contain;`.
+/// @example object-fit: contain;
+/// @name .k-object-fit-contain
+/// @group object-fit
+/// @contextType css
+
+/// This is equivalent to `object-fit: cover;`.
+/// @example object-fit: cover;
+/// @name .k-object-fit-cover
+/// @group object-fit
+/// @contextType css
+
+/// This is equivalent to `object-fit: fill;`.
+/// @example object-fit: fill;
+/// @name .k-object-fit-fill
+/// @group object-fit
+/// @contextType css
+
+/// This is equivalent to `object-fit: scale-down;`.
+/// @example object-fit: scale-down;
+/// @name .k-object-fit-scale-down
+/// @group object-fit
+/// @contextType css
+
+/// This is equivalent to `object-fit: initial;`.
+/// @example object-fit: initial;
+/// @name .k-object-fit-initial
+/// @group object-fit
+/// @contextType css
+
+/// This is equivalent to `object-fit: none;`.
+/// @example object-fit: none;
+/// @name .k-object-fit-none
+/// @group object-fit
+/// @contextType css
+
+@mixin kendo-utils--layout--object-fit() {
+
+    // object-fit utility classes
+    $kendo-utils-object-fit: k-map-get( $kendo-utils, "object-fit" ) !default;
+    @include generate-utils( object-fit, object-fit, $kendo-utils-object-fit );
+
+}

package/scss/layout/_object-position.scss

@@ -0,0 +1,61 @@
+/// This is equivalent to `object-position: center;`.
+/// @example object-position: center;
+/// @name .k-object-position-center
+/// @group object-position
+/// @contextType css
+
+/// This is equivalent to `object-position: top;`.
+/// @example object-position: top;
+/// @name .k-object-position-top
+/// @group object-position
+/// @contextType css
+
+/// This is equivalent to `object-position: right;`.
+/// @example object-position: right;
+/// @name .k-object-position-right
+/// @group object-position
+/// @contextType css
+
+/// This is equivalent to `object-position: bottom;`.
+/// @example object-position: bottom;
+/// @name .k-object-position-bottom
+/// @group object-position
+/// @contextType css
+
+/// This is equivalent to `object-position: left;`.
+/// @example object-position: left;
+/// @name .k-object-position-left
+/// @group object-position
+/// @contextType css
+
+/// This is equivalent to `object-position: top left;`.
+/// @example object-position: top left;
+/// @name .k-object-position-top-left
+/// @group object-position
+/// @contextType css
+
+/// This is equivalent to `object-position: top right;`.
+/// @example object-position: top right;
+/// @name .k-object-position-top-right
+/// @group object-position
+/// @contextType css
+
+/// This is equivalent to `object-position: bottom left;`.
+/// @example object-position: bottom left;
+/// @name .k-object-position-bottom-left
+/// @group object-position
+/// @contextType css
+
+/// This is equivalent to `object-position: bottom right;`.
+/// @example object-position: bottom right;
+/// @name .k-object-position-bottom-right
+/// @group object-position
+/// @contextType css
+
+@mixin kendo-utils--layout--object-position() {
+
+    // object-position utility classes
+    $kendo-utils-object-position: k-map-get( $kendo-utils, "object-position" ) !default;
+    @include generate-utils( object-position, object-position, $kendo-utils-object-position );
+
+}

package/scss/layout/_overflow.scss

@@ -1,74 +1,89 @@
-/// This is equivalent to `overflow: auto;`. Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block formatting context. Desktop browsers provide scrollbar if content overflows.
+/// This is equivalent to `overflow: auto;`.
+/// @example overflow: auto;
 /// @name .k-overflow-auto
 /// @group overflow
 /// @contextType css
 
-/// This is equivalent to `overflow: hidden;`. Content is clipped if necessary to fit the padding box. No scrollbar is provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. The content can be scrolled programmatically (for example, by setting the value of a property such as offsetLeft), so the element is still a scroll container.
+/// This is equivalent to `overflow: hidden;`.
+/// @example overflow: hidden;
 /// @name .k-overflow-hidden
 /// @group overflow
 /// @contextType css
 
-/// This is equivalent to `overflow: visible;`. Content is not clipped and may be rendered outside the padding box.
+/// This is equivalent to `overflow: visible;`.
+/// @example overflow: visible;
 /// @name .k-overflow-visible
 /// @group overflow
 /// @contextType css
 
-/// This is equivalent to `overflow: scroll;`. Content is clipped if necessary to fit the padding box. Browsers always display scrollbar whether or not any content is actually clipped, preventing scrollbar from appearing or disappearing as content changes. Printers may still print overflowing content.
+/// This is equivalent to `overflow: scroll;`.
+/// @example overflow: scroll;
 /// @name .k-overflow-scroll
 /// @group overflow
 /// @contextType css
 
-/// This is equivalent to `overflow: clip;`. Like for hidden, the content is clipped to the element's padding box. The difference between clip and hidden is that the clip keyword also forbids all scrolling, including programmatic scrolling.
+/// This is equivalent to `overflow: clip;`.
+/// @example overflow: clip;
 /// @name .k-overflow-clip
 /// @group overflow
 /// @contextType css
 
 /// This is equivalent to `overflow-x: auto;`.
+/// @example overflow-x: auto;
 /// @name .k-overflow-x-auto
 /// @group overflow
 /// @contextType css
 
 /// This is equivalent to `overflow-x: hidden;`.
+/// @example overflow-x: hidden;
 /// @name .k-overflow-x-hidden
 /// @group overflow
 /// @contextType css
 
 /// This is equivalent to `overflow-x: visible;`.
+/// @example overflow-x: visible;
 /// @name .k-overflow-x-visible
 /// @group overflow
 /// @contextType css
 
 /// This is equivalent to `overflow-x: scroll;`.
+/// @example overflow-x: scroll;
 /// @name .k-overflow-x-scroll
 /// @group overflow
 /// @contextType css
 
 /// This is equivalent to `overflow-x: clip;`.
+/// @example overflow-x: clip;
 /// @name .k-overflow-x-clip
 /// @group overflow
 /// @contextType css
 
 /// This is equivalent to `overflow-y: auto;`.
+/// @example overflow-y: auto;
 /// @name .k-overflow-y-auto
 /// @group overflow
 /// @contextType css
 
 /// This is equivalent to `overflow-y: hidden;`.
+/// @example overflow-y: hidden;
 /// @name .k-overflow-y-hidden
 /// @group overflow
 /// @contextType css
 
 /// This is equivalent to `overflow-y: visible;`.
+/// @example overflow-y: visible;
 /// @name .k-overflow-y-visible
 /// @group overflow
 /// @contextType css
 
 /// This is equivalent to `overflow-y: scroll;`.
+/// @example overflow-y: scroll;
 /// @name .k-overflow-y-scroll
 /// @group overflow
 /// @contextType css
 
 /// This is equivalent to `overflow-y: clip;`.
+/// @example overflow-y: clip;
 /// @name .k-overflow-y-clip
 /// @group overflow
 /// @contextType css
@@ -78,5 +93,6 @@
     // Overflow utility classes
     $kendo-utils-overflow: k-map-get( $kendo-utils, "overflow" ) !default;
     @include generate-utils( overflow, overflow, $kendo-utils-overflow );
-
+    @include generate-utils( overflow-x, overflow-x, $kendo-utils-overflow );
+    @include generate-utils( overflow-y, overflow-y, $kendo-utils-overflow );
 }

package/scss/layout/_placement.scss

@@ -0,0 +1,174 @@
+/// This is equivalent to `top: 0;`.
+/// @example top: 0;
+/// @name .k-top-0
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `right: 0;`.
+/// @example right: 0;
+/// @name .k-right-0
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `bottom: 0;`.
+/// @example bottom: 0;
+/// @name .k-bottom-0
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `left: 0;`.
+/// @example left: 0;
+/// @name .k-left-0
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `top: 0;`.
+/// @example top: 0;
+/// @name .k-pos-top-0
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `right: 0;`.
+/// @example right: 0;
+/// @name .k-pos-right-0
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `bottom: 0;`.
+/// @example bottom: 0;
+/// @name .k-pos-bottom-0
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `left: 0;`.
+/// @example left: 0;
+/// @name .k-pos-left-0
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `top: 0; left: 0;`.
+/// @example top: 0; left: 0;
+/// @name .k-top-left-0
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `top: 0; right: 0;`.
+/// @example top: 0; right: 0;
+/// @name .k-top-right-0
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `bottom: 0; left: 0;`.
+/// @example bottom: 0; left: 0;
+/// @name .k-bottom-left-0
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `bottom: 0; right: 0;`.
+/// @example bottom: 0; right: 0;
+/// @name .k-bottom-right-0
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `inset: 0;`.This is a shorthand that corresponds to the top: 0; right: 0; bottom: 0; and/or left: 0 properties. It has the same multi-value syntax of the margin shorthand.
+/// @example inset: 0;
+/// @name .k-inset-0
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `inset-inline: 0;`.
+/// @example inset-inline: 0;
+/// @name .k-inset-x-0
+/// @group position
+/// @contextType css
+
+/// This is equivalent to `inset-block: 0;`.
+/// @example inset-block: 0;
+/// @name .k-inset-y-0
+/// @group position
+/// @contextType css
+
+@mixin kendo-utils--layout--placement() {
+    // Top / right / bottom / left
+    $kendo-utils-placement: k-map-get( $kendo-utils, "placement" ) !default;
+    @include generate-utils( top, top, $kendo-utils-placement );
+    @include generate-utils( right, right, $kendo-utils-placement );
+    @include generate-utils( bottom, bottom, $kendo-utils-placement );
+    @include generate-utils( left, left, $kendo-utils-placement );
+
+
+    // Position length utility classes
+    @each $side in (top, right, bottom, left) {
+        .#{$kendo-prefix}#{$side},
+        .#{$kendo-prefix}pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
+    }
+
+    // Inset utility classes
+    $kendo-utils-inset: k-map-get( $kendo-utils, "inset" ) !default;
+    @include generate-utils( inset, inset, $kendo-utils-inset );
+    @include generate-utils( inset-x, inset-inline, $kendo-utils-inset );
+    @include generate-utils( inset-y, inset-block, $kendo-utils-inset );
+    @include generate-utils( top-left, ( top, left ), $kendo-utils-inset );
+    @include generate-utils( top-right, ( top, right ), $kendo-utils-inset );
+    @include generate-utils( bottom-left, ( bottom, left ), $kendo-utils-inset );
+    @include generate-utils( bottom-right, ( bottom, right ), $kendo-utils-inset );
+
+
+    // Legacy aliases
+    .#{$kendo-prefix}top-start,
+    .#{$kendo-prefix}pos-top-start {
+        top: 0;
+        inset-inline-start: 0;
+    }
+
+    .#{$kendo-prefix}top-end,
+    .#{$kendo-prefix}pos-top-end {
+        top: 0;
+        inset-inline-end: 0;
+    }
+
+    .#{$kendo-prefix}bottom-start,
+    .#{$kendo-prefix}pos-bottom-start {
+        bottom: 0;
+        inset-inline-start: 0;
+    }
+
+    .#{$kendo-prefix}bottom-end,
+    .#{$kendo-prefix}pos-bottom-end {
+        bottom: 0;
+        inset-inline-end: 0;
+    }
+
+    .#{$kendo-prefix}top-center,
+    .#{$kendo-prefix}pos-top-center {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    .#{$kendo-prefix}middle-left,
+    .#{$kendo-prefix}middle-start,
+    .#{$kendo-prefix}pos-middle-start {
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+    }
+    .#{$kendo-prefix}middle-center {
+        top: 50%;
+        left: 50%;
+        transform: translateY(-50%);
+    }
+    .#{$kendo-prefix}middle-right,
+    .#{$kendo-prefix}middle-end,
+    .#{$kendo-prefix}pos-middle-end {
+        top: 50%;
+        right: 0;
+        transform: translateY(-50%);
+    }
+    .#{$kendo-prefix}bottom-center,
+    .#{$kendo-prefix}pos-bottom-center {
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+}

package/scss/layout/_position.scss

@@ -1,54 +1,33 @@
-// Position documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/position.
-
-/// This is equivalent to `position: static;`. The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect. This is the default value.
+/// This is equivalent to `position: static;`.
+/// @example position: static;
 /// @name .k-pos-static
 /// @group position
 /// @contextType css
 
-/// This is equivalent to `position: relative;`. The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.
+/// This is equivalent to `position: relative;`.
+/// @example position: relative;
 /// @name .k-pos-relative
 /// @group position
 /// @contextType css
 
-/// This is equivalent to `position: absolute;`. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.
+/// This is equivalent to `position: absolute;`.
+/// @example position: absolute;
 /// @name .k-pos-absolute
 /// @group position
 /// @contextType css
 
-/// This is equivalent to `position: fixed;`. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.
+/// This is equivalent to `position: fixed;`.
+/// @example position: fixed;
 /// @name .k-pos-fixed
 /// @group position
 /// @contextType css
 
-/// This is equivalent to `position: sticky;`. The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
+/// This is equivalent to `position: sticky;`.
+/// @example position: sticky;
 /// @name .k-pos-sticky
 /// @group position
 /// @contextType css
 
-
-// TODO: inset docs
-
-
-/// This is equivalent to `top: 0;`.
-/// @name .k-pos-top
-/// @group position
-/// @contextType css
-
-/// This is equivalent to `right: 0;`.
-/// @name .k-pos-right
-/// @group position
-/// @contextType css
-
-/// This is equivalent to `bottom: 0;`.
-/// @name .k-pos-bottom
-/// @group position
-/// @contextType css
-
-/// This is equivalent to `left: 0;`.
-/// @name .k-pos-left
-/// @group position
-/// @contextType css
-
 @mixin kendo-utils--layout--position() {
 
     // Position utility classes
@@ -68,84 +47,4 @@
     .#{$kendo-prefix}sticky { @extend .#{$kendo-prefix}pos-sticky !optional; }
     .\!#{$kendo-prefix}sticky { @extend .\!#{$kendo-prefix}pos-sticky !optional; }
 
-
-    // Inset utility classes
-    $kendo-utils-inset: k-map-get( $kendo-utils, "inset" ) !default;
-    @include generate-utils( inset, inset, $kendo-utils-inset );
-    @include generate-utils( inset-x, inset-inline, $kendo-utils-inset );
-    @include generate-utils( inset-y, inset-block, $kendo-utils-inset );
-    @include generate-utils( top, top, $kendo-utils-inset );
-    @include generate-utils( right, right, $kendo-utils-inset );
-    @include generate-utils( bottom, bottom, $kendo-utils-inset );
-    @include generate-utils( left, left, $kendo-utils-inset );
-    @include generate-utils( top-left, ( top, left ), $kendo-utils-inset );
-    @include generate-utils( top-right, ( top, right ), $kendo-utils-inset );
-    @include generate-utils( bottom-left, ( bottom, left ), $kendo-utils-inset );
-    @include generate-utils( bottom-right, ( bottom, right ), $kendo-utils-inset );
-
-
-    // Legacy aliases
-    .#{$kendo-prefix}top-start,
-    .#{$kendo-prefix}pos-top-start {
-        top: 0;
-        inset-inline-start: 0;
-    }
-
-    .#{$kendo-prefix}top-end,
-    .#{$kendo-prefix}pos-top-end {
-        top: 0;
-        inset-inline-end: 0;
-    }
-
-    .#{$kendo-prefix}bottom-start,
-    .#{$kendo-prefix}pos-bottom-start {
-        bottom: 0;
-        inset-inline-start: 0;
-    }
-
-    .#{$kendo-prefix}bottom-end,
-    .#{$kendo-prefix}pos-bottom-end {
-        bottom: 0;
-        inset-inline-end: 0;
-    }
-
-    .#{$kendo-prefix}top-center,
-    .#{$kendo-prefix}pos-top-center {
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-    .#{$kendo-prefix}middle-left,
-    .#{$kendo-prefix}middle-start,
-    .#{$kendo-prefix}pos-middle-start {
-        top: 50%;
-        left: 0;
-        transform: translateY(-50%);
-    }
-    .#{$kendo-prefix}middle-center {
-        top: 50%;
-        left: 50%;
-        transform: translateY(-50%);
-    }
-    .#{$kendo-prefix}middle-right,
-    .#{$kendo-prefix}middle-end,
-    .#{$kendo-prefix}pos-middle-end {
-        top: 50%;
-        right: 0;
-        transform: translateY(-50%);
-    }
-    .#{$kendo-prefix}bottom-center,
-    .#{$kendo-prefix}pos-bottom-center {
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-    }
-
-
-    // Position length utility classes
-    @each $side in (top, right, bottom, left) {
-        .#{$kendo-prefix}#{$side},
-        .#{$kendo-prefix}pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
-    }
-
 }

package/scss/layout/_visibility.scss

@@ -1,5 +1,20 @@
-// TODO: docs
-// TODO: consider visible and invisible vs visibility-visible and visibility-hidden
+/// This is equivalent to `visibility: visble;`.
+/// @example visibility: visble;
+/// @name .k-visible
+/// @group visibility
+/// @contextType css
+
+/// This is equivalent to `visibility: hidden;`.
+/// @example visibility: hidden;
+/// @name .k-invisible
+/// @group visibility
+/// @contextType css
+
+/// This is equivalent to `visibility: collapse;`.
+/// @example visibility: collapse;
+/// @name .k-collapse
+/// @group visibility
+/// @contextType css
 
 @mixin kendo-utils--layout--visibility() {