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

package/scss/interactivity/_scroll.scss

@@ -1,4 +1,328 @@
-// TODO: docs
+/// This is equivalent to `scroll-behavior: auto;`.
+/// @example scroll-behavior: auto;
+/// @name .k-scroll-auto
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-behavior: smooth;`.
+/// @example scroll-behavior: smooth;
+/// @name .k-scroll-smooth
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-snap-type: x var(--k-scroll-snap-strictness);`.
+/// @example scroll-snap-type: x var(--k-scroll-snap-strictness);
+/// @name .k-scroll-snap-snap-x
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-snap-type: y var(--k-scroll-snap-strictness);`.
+/// @example scroll-snap-type: y var(--k-scroll-snap-strictness);
+/// @name .k-scroll-snap-snap-y
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `--k-scroll-snap-strictness: mandatory;`.
+/// @example --k-scroll-snap-strictness: mandatory;
+/// @name .k-scroll-snap-mandatory
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `--k-scroll-snap-strictness: proximity;`.
+/// @example --k-scroll-snap-strictness: proximity;
+/// @name .k-scroll-snap-proximity
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-snap-stop: normal;`.
+/// @example scroll-snap-stop: normal;
+/// @name .k-scroll-snap-stop-normal
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-snap-stop: always;`.
+/// @example scroll-snap-stop: always;
+/// @name .k-scroll-snap-stop-always
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-snap-align: start;`.
+/// @example scroll-snap-align: start;
+/// @name .k-scroll-snap-align-start
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-snap-align: end;`.
+/// @example scroll-snap-align: end;
+/// @name .k-scroll-snap-align-end
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-snap-align: center;`.
+/// @example scroll-snap-align: center;
+/// @name .k-scroll-snap-align-center
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-snap-align: none;`.
+/// @example scroll-snap-align: none;
+/// @name .k-scroll-snap-align-none
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin: 0;`.
+/// @example scroll-margin: 0;
+/// @name .k-scroll-m-0
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin: 1px;`.
+/// @example scroll-margin: 1px;
+/// @name .k-scroll-m-1px
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin: 0.25rem;`.
+/// @example scroll-margin: 0.25rem;
+/// @name .k-scroll-m-1
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin-top: 0;`.
+/// @example scroll-margin-top: 0;
+/// @name .k-scroll-m-0
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin-top: 1px;`.
+/// @example scroll-margin-top: 1px;
+/// @name .k-scroll-m-1px
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin-top: 0.25rem;`.
+/// @example scroll-margin-top: 0.25rem;
+/// @name .k-scroll-m-1
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin-right: 0;`.
+/// @example scroll-margin-right: 0;
+/// @name .k-scroll-mr-0
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin-right: 1px;`.
+/// @example scroll-margin-right: 1px;
+/// @name .k-scroll-mr-1px
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin-right: 0.25rem;`.
+/// @example scroll-margin-right: 0.25rem;
+/// @name .k-scroll-mr-1
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin-bottom: 0;`.
+/// @example scroll-margin-bottom: 0;
+/// @name .k-scroll-mb-0
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin-bottom: 1px;`.
+/// @example scroll-margin-bottom: 1px;
+/// @name .k-scroll-mb-1px
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin-bottom: 0.25rem;`.
+/// @example scroll-margin-bottom: 0.25rem;
+/// @name .k-scroll-mb-1
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin-left: 0;`.
+/// @example scroll-margin-left: 0;
+/// @name .k-scroll-ml-0
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin-left: 1px;`.
+/// @example scroll-margin-left: 1px;
+/// @name .k-scroll-ml-1px
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin-left: 0.25rem;`.
+/// @example scroll-margin-left: 0.25rem;
+/// @name .k-scroll-ml-1
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin-inline: 0;`.
+/// @example scroll-margin-inline: 0;
+/// @name .k-scroll-x-0
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin-inline: 1px;`.
+/// @example scroll-margin-inline: 1px;
+/// @name .k-scroll-x-1px
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin-inline: 0.25rem;`.
+/// @example scroll-margin-inline: 0.25rem;
+/// @name .k-scroll-x-1
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin-block: 0;`.
+/// @example scroll-margin-block: 0;
+/// @name .k-scroll-y-0
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin-block: 1px;`.
+/// @example scroll-margin-block: 1px;
+/// @name .k-scroll-y-1px
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-margin-block: 0.25rem;`.
+/// @example scroll-margin-block: 0.25rem;
+/// @name .k-scroll-y-1
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding: 0;`.
+/// @example scroll-padding: 0;
+/// @name .k-scroll-p-0
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding: 1px;`.
+/// @example scroll-padding: 1px;
+/// @name .k-scroll-p-1px
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding: 0.25rem;`.
+/// @example scroll-padding: 0.25rem;
+/// @name .k-scroll-p-1
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding-top: 0;`.
+/// @example scroll-padding-top: 0;
+/// @name .k-scroll-p-0
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding-top: 1px;`.
+/// @example scroll-padding-top: 1px;
+/// @name .k-scroll-p-1px
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding-top: 0.25rem;`.
+/// @example scroll-padding-top: 0.25rem;
+/// @name .k-scroll-p-1
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding-right: 0;`.
+/// @example scroll-padding-right: 0;
+/// @name .k-scroll-pr-0
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding-right: 1px;`.
+/// @example scroll-padding-right: 1px;
+/// @name .k-scroll-pr-1px
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding-right: 0.25rem;`.
+/// @example scroll-padding-right: 0.25rem;
+/// @name .k-scroll-pr-1
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding-bottom: 0;`.
+/// @example scroll-padding-bottom: 0;
+/// @name .k-scroll-pb-0
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding-bottom: 1px;`.
+/// @example scroll-padding-bottom: 1px;
+/// @name .k-scroll-pb-1px
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding-bottom: 0.25rem;`.
+/// @example scroll-padding-bottom: 0.25rem;
+/// @name .k-scroll-pb-1
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding-left: 0;`.
+/// @example scroll-padding-left: 0;
+/// @name .k-scroll-pl-0
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding-left: 1px;`.
+/// @example scroll-padding-left: 1px;
+/// @name .k-scroll-pl-1px
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding-left: 0.25rem;`.
+/// @example scroll-padding-left: 0.25rem;
+/// @name .k-scroll-pl-1
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding-inline: 0;`.
+/// @example scroll-padding-inline: 0;
+/// @name .k-scroll-x-0
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding-inline: 1px;`.
+/// @example scroll-padding-inline: 1px;
+/// @name .k-scroll-x-1px
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding-inline: 0.25rem;`.
+/// @example scroll-padding-inline: 0.25rem;
+/// @name .k-scroll-x-1
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding-block: 0;`.
+/// @example scroll-padding-block: 0;
+/// @name .k-scroll-y-0
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding-block: 1px;`.
+/// @example scroll-padding-block: 1px;
+/// @name .k-scroll-y-1px
+/// @group scroll
+/// @contextType css
+
+/// This is equivalent to `scroll-padding-block: 0.25rem;`.
+/// @example scroll-padding-block: 0.25rem;
+/// @name .k-scroll-y-1
+/// @group scroll
+/// @contextType css
+
+
 
 @mixin kendo-utils--interactivity--scroll() {
 

package/scss/interactivity/_touch-action.scss

@@ -1,15 +1,63 @@
-// TODO: docs
-
-/// This is equivalent to `touch-action: none;`. Disable browser handling of all panning and zooming gestures.
+/// This is equivalent to `touch-action: none;`.
+/// @example touch-action: none;
 /// @name .k-touch-action-none
 /// @group touch-action
 /// @contextType css
 
-/// This is equivalent to `touch-action: auto;`. Enable browser handling of all panning and zooming gestures.
+/// This is equivalent to `touch-action: auto;`.
+/// @example touch-action: auto;
 /// @name .k-touch-action-auto
 /// @group touch-action
 /// @contextType css
 
+/// This is equivalent to `touch-action: pan-x;`.
+/// @example touch-action: pan-x;
+/// @name .k-touch-action-pan-x
+/// @group touch-action
+/// @contextType css
+
+/// This is equivalent to `touch-action: pan-y;`.
+/// @example touch-action: pan-y;
+/// @name .k-touch-action-pan-y
+/// @group touch-action
+/// @contextType css
+
+/// This is equivalent to `touch-action: pan-left;`.
+/// @example touch-action: pan-left;
+/// @name .k-touch-action-pan-left
+/// @group touch-action
+/// @contextType css
+
+/// This is equivalent to `touch-action: pan-right;`.
+/// @example touch-action: pan-right;
+/// @name .k-touch-action-pan-right
+/// @group touch-action
+/// @contextType css
+
+/// This is equivalent to `touch-action: pan-up;`.
+/// @example touch-action: pan-up;
+/// @name .k-touch-action-pan-up
+/// @group touch-action
+/// @contextType css
+
+/// This is equivalent to `touch-action: pan-down;`.
+/// @example touch-action: pan-down;
+/// @name .k-touch-action-pan-down
+/// @group touch-action
+/// @contextType css
+
+/// This is equivalent to `touch-action: pinch-zoom;`.
+/// @example touch-action: pinch-zoom;
+/// @name .k-touch-action-pinch-zoom
+/// @group touch-action
+/// @contextType css
+
+/// This is equivalent to `touch-action: manipulation;`.
+/// @example touch-action: manipulation;
+/// @name .k-touch-action-manipulation
+/// @group touch-action
+/// @contextType css
+
 @mixin kendo-utils--interactivity--touch-action() {
 
     // Touch-action utility classes

package/scss/interactivity/_user-select.scss

@@ -1,26 +1,29 @@
-// User-select documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/user-select.
-
-/// This is equivalent to `user-select: none;`. The text of the element and its sub-elements is not selectable. Note that the Selection object can contain these elements.
+/// This is equivalent to `user-select: none;`.
+/// @example user-select: none;
 /// @name .k-user-select-none
 /// @group user-select
 /// @contextType css
 
-/// This is equivalent to `user-select: auto;`. This is the default value of the `user-select` property.
+/// This is equivalent to `user-select: auto;`.
+/// @example user-select: auto;
 /// @name .k-user-select-auto
 /// @group user-select
 /// @contextType css
 
-/// This is equivalent to `user-select: text;`. The text can be selected by the user.
+/// This is equivalent to `user-select: text;`.
+/// @example user-select: text;
 /// @name .k-user-select-text
 /// @group user-select
 /// @contextType css
 
-/// This is equivalent to `user-select: all;`. The content of the element shall be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants.  If a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.
+/// This is equivalent to `user-select: all;`.
+/// @example user-select: all;
 /// @name .k-user-select-all
 /// @group user-select
 /// @contextType css
 
-/// This is equivalent to `user-select: contain;`. Enables selection to start within the element; however, the selection will be contained by the bounds of that element.
+/// This is equivalent to `user-select: contain;`.
+/// @example user-select: contain;
 /// @name .k-user-select-contain
 /// @group user-select
 /// @contextType css

package/scss/layout/_aspect-ratio.scss

@@ -1,21 +1,23 @@
-// Aspect-ratio documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio.
-
-/// This is equivalent to `aspect-ratio: auto;`. Replaced elements with an intrinsic aspect ratio use that aspect ratio, otherwise the box has no preferred aspect ratio. Size calculations involving intrinsic aspect ratio always work with the content box dimensions.
+/// This is equivalent to `aspect-ratio: auto;`.
+/// @example aspect-ratio: auto;
 /// @name .k-aspect-ratio-auto
 /// @group aspect-ratio
 /// @contextType css
 
-/// This is equivalent to `aspect-ratio: 1;`. The box's preferred aspect ratio is the specified ratio of 1. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing.
+/// This is equivalent to `aspect-ratio: 1;`.
+/// @example aspect-ratio: 1;
 /// @name .k-aspect-ratio-1
 /// @group aspect-ratio
 /// @contextType css
 
-/// This is equivalent to `aspect-ratio: 1 / 1;`. The box's preferred aspect ratio is the specified ratio of 1. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing.
+/// This is equivalent to `aspect-ratio: 1 / 1;`.
+/// @example aspect-ratio: 1 / 1;
 /// @name .k-aspect-ratio-square
 /// @group aspect-ratio
 /// @contextType css
 
-/// This is equivalent to `aspect-ratio: 16 / 9;`. The box's preferred aspect ratio is the specified ratio of 16 : 9. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing.
+/// This is equivalent to `aspect-ratio: 16 / 9;`.
+/// @example aspect-ratio: 16 / 9;
 /// @name .k-aspect-ratio-video
 /// @group aspect-ratio
 /// @contextType css

package/scss/layout/_box-sizing.scss

@@ -0,0 +1,19 @@
+/// This is equivalent to `box-sizing: border-box;`.
+/// @example box-sizing: border-box;
+/// @name .k-box-sizing-border
+/// @group box-sizing
+/// @contextType css
+
+/// This is equivalent to `box-sizing: content-box;`.
+/// @example box-sizing: content-box;
+/// @name .k-box-sizing-content
+/// @group box-sizing
+/// @contextType css
+
+@mixin kendo-utils--layout--box-sizing() {
+
+    // box-sizing utility classes
+    $kendo-utils-box-sizing: k-map-get( $kendo-utils, "box-sizing" ) !default;
+    @include generate-utils( box-sizing, box-sizing, $kendo-utils-box-sizing );
+
+}

package/scss/layout/_clear.scss

@@ -1,21 +1,23 @@
-// Clear documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/clear.
-
-/// This is equivalent to `clear: left;`. Is a keyword indicating that the element is moved down to clear past left floats.
+/// This is equivalent to `clear: left;`.
+/// @example clear: left;
 /// @name .k-clear-left
 /// @group float
 /// @contextType css
 
-/// This is equivalent to `clear: right;`. Is a keyword indicating that the element is moved down to clear past right floats.
+/// This is equivalent to `clear: right;`.
+/// @example clear: right;
 /// @name .k-clear-right
 /// @group float
 /// @contextType css
 
-/// This is equivalent to `clear: both;`. Is a keyword indicating that the element is moved down to clear past both left and right floats.
+/// This is equivalent to `clear: both;`.
+/// @example clear: both;
 /// @name .k-clear-both
 /// @group float
 /// @contextType css
 
-/// This is equivalent to `clear: none;`. Is a keyword indicating that the element is not moved down to clear past floating elements.
+/// This is equivalent to `clear: none;`.
+/// @example clear: none;
 /// @name .k-clear-none
 /// @group float
 /// @contextType css

package/scss/layout/_columns.scss

@@ -0,0 +1,85 @@
+/// This is equivalent to `columns: 1;`.
+/// @example columns: 1;
+/// @name .k-columns-1
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 2;`.
+/// @example columns: 2;
+/// @name .k-columns-2
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 3;`.
+/// @example columns: 3;
+/// @name .k-columns-3
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 4;`.
+/// @example columns: 4;
+/// @name .k-columns-4
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 5;`.
+/// @example columns: 5;
+/// @name .k-columns-5
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 6;`.
+/// @example columns: 6;
+/// @name .k-columns-6
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 7;`.
+/// @example columns: 7;
+/// @name .k-columns-7
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 8;`.
+/// @example columns: 8;
+/// @name .k-columns-8
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 9;`.
+/// @example columns: 9;
+/// @name .k-columns-9
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 10;`.
+/// @example columns: 10;
+/// @name .k-columns-10
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 11;`.
+/// @example columns: 11;
+/// @name .k-columns-11
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: 12;`.
+/// @example columns: 12;
+/// @name .k-columns-12
+/// @group columns
+/// @contextType css
+
+/// This is equivalent to `columns: auto;`.The number of columns is determined by other CSS properties, such as column-width.
+/// @example columns: auto;
+/// @name .k-columns-auto
+/// @group columns
+/// @contextType css
+
+@mixin kendo-utils--layout--columns() {
+
+    // columns utility classes
+    $kendo-utils-columns: k-map-get( $kendo-utils, "columns" ) !default;
+    @include generate-utils( columns, columns, $kendo-utils-columns );
+
+}