@progress/kendo-theme-default 5.12.1-dev.0 → 5.12.1-dev.1

package/scss/utils/_position.scss

@@ -2,25 +2,35 @@
 
     // Position documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/position.
 
-    /// @name k-pos-static
-    /// @description 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;`. 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.
+    /// @name .k-pos-static
     /// @group position
+    /// @contextType css
+    _ {}
 
-    /// @name k-pos-relative
-    /// @description 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;`. 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.
+    /// @name .k-pos-relative
     /// @group position
+    /// @contextType css
+    _ {}
 
-    /// @name k-pos-absolute
-    /// @description 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;`. 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.
+    /// @name .k-pos-absolute
     /// @group position
+    /// @contextType css
+    _ {}
 
-    /// @name k-pos-fixed
-    /// @description 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;`. 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.
+    /// @name .k-pos-fixed
     /// @group position
+    /// @contextType css
+    _ {}
 
-    /// @name k-pos-sticky
-    /// @description 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;`. 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.
+    /// @name .k-pos-sticky
     /// @group position
+    /// @contextType css
+    _ {}
 
     @each $pos in (static, relative, absolute, fixed, sticky) {
         .k-#{$pos},
@@ -30,30 +40,39 @@
         .\!k-pos-#{$pos} { position: $pos !important; } // sass-lint:disable-line brace-style no-important
     }
 
-    /// @name k-pos-top
-    /// @description This is equivalent to `top: 0;`.
+    /// This is equivalent to `top: 0;`.
+    /// @name .k-pos-top
     /// @group position
+    /// @contextType css
+    _ {}
 
-    /// @name k-pos-right
-    /// @description This is equivalent to `right: 0;`.
+    /// This is equivalent to `right: 0;`.
+    /// @name .k-pos-right
     /// @group position
+    /// @contextType css
+    _ {}
 
-    /// @name k-pos-bottom
-    /// @description This is equivalent to `bottom: 0;`.
+    /// This is equivalent to `bottom: 0;`.
+    /// @name .k-pos-bottom
     /// @group position
+    /// @contextType css
+    _ {}
 
-    /// @name k-pos-left
-    /// @description This is equivalent to `left: 0;`.
+    /// This is equivalent to `left: 0;`.
+    /// @name .k-pos-left
     /// @group position
+    /// @contextType css
+    _ {}
 
     @each $side in (top, right, bottom, left) {
         .k-#{$side},
         .k-pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
     }
 
-    /// @name k-pos-top-start
-    /// @description This is equivalent to `top: 0; left: 0;`.
+    /// This is equivalent to `top: 0; left: 0;`.
+    /// @name .k-pos-top-start
     /// @group position
+    /// @contextType css
     .k-top-start,
     .k-pos-top-start {
         top: 0;
@@ -67,9 +86,10 @@
         }
     }
 
-    /// @name k-pos-top-center
-    /// @description This is equivalent to `top: 0; left: 50%; transform: translateX(-50%);`.
+    /// This is equivalent to `top: 0; left: 50%; transform: translateX(-50%);`.
+    /// @name .k-pos-top-center
     /// @group position
+    /// @contextType css
     .k-top-center,
     .k-pos-top-center {
         top: 0;
@@ -77,9 +97,10 @@
         transform: translateX(-50%);
     }
 
-    /// @name k-pos-top-end
-    /// @description This is equivalent to `top: 0; right: 0;`.
+    /// This is equivalent to `top: 0; right: 0;`.
+    /// @name .k-pos-top-end
     /// @group position
+    /// @contextType css
     .k-top-end,
     .k-pos-top-end {
         top: 0;
@@ -93,9 +114,10 @@
         }
     }
 
-    /// @name k-pos-middle-start
-    /// @description This is equivalent to `top: 50%; left: 0; transform: translateY(-50%);`.
+    /// This is equivalent to `top: 50%; left: 0; transform: translateY(-50%);`.
+    /// @name .k-pos-middle-start
     /// @group position
+    /// @contextType css
     .k-middle-start,
     .k-pos-middle-start {
         top: 50%;
@@ -110,9 +132,10 @@
         }
     }
 
-    /// @name k-pos-middle-center
-    /// @description This is equivalent to `top: 50%; left: 50%; transform: translate(-50%, -50%);`.
+    /// This is equivalent to `top: 50%; left: 50%; transform: translate(-50%, -50%);`.
+    /// @name .k-pos-middle-center
     /// @group position
+    /// @contextType css
     .k-middle-center,
     .k-pos-middle-center {
         top: 50%;
@@ -120,9 +143,10 @@
         transform: translate(-50%, -50%);
     }
 
-    /// @name k-pos-middle-end
-    /// @description This is equivalent to `top: 50%; right: 0; transform: translateY(-50%);`.
+    /// This is equivalent to `top: 50%; right: 0; transform: translateY(-50%);`.
+    /// @name .k-pos-middle-end
     /// @group position
+    /// @contextType css
     .k-middle-end,
     .k-pos-middle-end {
         top: 50%;
@@ -137,9 +161,10 @@
         }
     }
 
-    /// @name k-pos-bottom-start
-    /// @description This is equivalent to `bottom: 0; left: 0;`.
+    /// This is equivalent to `bottom: 0; left: 0;`.
+    /// @name .k-pos-bottom-start
     /// @group position
+    /// @contextType css
     .k-bottom-start,
     .k-pos-bottom-start {
         bottom: 0;
@@ -153,9 +178,10 @@
         }
     }
 
-    /// @name k-pos-bottom-center
-    /// @description This is equivalent to `bottom: 0; left: 50%; translateX(-50%);`.
+    /// This is equivalent to `bottom: 0; left: 50%; translateX(-50%);`.
+    /// @name .k-pos-bottom-center
     /// @group position
+    /// @contextType css
     .k-bottom-center,
     .k-pos-bottom-center {
         bottom: 0;
@@ -163,9 +189,10 @@
         transform: translateX(-50%);
     }
 
-    /// @name k-pos-bottom-end
-    /// @description This is equivalent to `bottom: 0; right: 0;`.
+    /// This is equivalent to `bottom: 0; right: 0;`.
+    /// @name .k-pos-bottom-end
     /// @group position
+    /// @contextType css
     .k-bottom-end,
     .k-pos-bottom-end {
         bottom: 0;

package/scss/utils/_resize.scss

@@ -2,22 +2,32 @@
 
     // Resize documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/resize.
 
-    // @name k-resize-none
-    // @description This is equivalent to `resize: none;`. The element offers no user-controllable method for resizing it.
-    // @group resize
-
-    // @name k-resize-both
-    // @description This is equivalent to `resize: both;`. The element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically.
-    // @group resize
-
-    // @name k-resize-horizontal
-    // @description This is equivalent to `resize: horizontal;`. The element displays a mechanism for allowing the user to resize it in the horizontal direction.
-    // @group resize
-
-    // @name k-resize-vertical
-    // @description This is equivalent to `resize: vertical;`. The element displays a mechanism for allowing the user to resize it in the vertical direction.
-    // @group resize
-
+    /// This is equivalent to `resize: none;`. The element offers no user-controllable method for resizing it.
+    /// @name .k-resize-none
+    /// @group resize
+    /// @contextType css
+    _ {}
+
+    /// This is equivalent to `resize: both;`. The element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically.
+    /// @name .k-resize-both
+    /// @group resize
+    /// @contextType css
+    _ {}
+
+    /// This is equivalent to `resize: horizontal;`. The element displays a mechanism for allowing the user to resize it in the horizontal direction.
+    /// @name .k-resize-horizontal
+    /// @group resize
+    /// @contextType css
+    _ {}
+
+    /// This is equivalent to `resize: vertical;`. The element displays a mechanism for allowing the user to resize it in the vertical direction.
+    /// @name .k-resize-vertical
+    /// @group resize
+    /// @contextType css
+    _ {}
+
+
+    // Resize utility classes
     $utils-resize: (
         none,
         both,

package/scss/utils/_spacer.scss

@@ -1,14 +1,14 @@
 @include exports( "utils/spacer" ) {
 
-    /// @name k-spacer
-    /// @description This is equivalent to `flex: 1 0 auto;`. If every other element has a fixed size in a flex container, the spacer will take up the remaining space.
+    /// This is equivalent to `flex: 1 0 auto;`. If every other element has a fixed size in a flex container, the spacer will take up the remaining space.
+    /// @name .k-spacer
     /// @group spacer
     .k-spacer {
         flex: 1 0 auto;
     }
 
-    /// @name k-spacer-sized
-    /// @description This is equivalent to `flex-grow: 0;`. The spacer will not take any of the remaining space in a flex container.
+    /// This is equivalent to `flex-grow: 0;`. The spacer will not take any of the remaining space in a flex container.
+    /// @name .k-spacer-sized
     /// @group spacer
     .k-spacer-sized {
         flex-grow: 0;

package/scss/utils/_spacing.scss

@@ -3,10 +3,6 @@
     // sass-lint:disable-block no-important
     // sass-lint:disable-block indentation
 
-    // @name Available Padding and Margin Values
-    // @description From `0`(0) to `24`(96px or 6rem), `xs`(4px or .25rem), `sm`(8px or .5rem), `md`(12px or .75rem), `lg`(16px or 1rem), `xl`(24px or 1.5rem), `thin`(2px or .125rem), and `hair`(1px or .0625rem). Numeric values examples - `1`(4px or .25rem), `5`(20px or 1.25rem), `10`(40px or 2.5rem), `20`(80px or 5rem).
-    // @group spacing
-
     $utils-margin: (
         m: margin,
         mt: margin-top,
@@ -23,36 +19,50 @@
         pl: padding-left
     ) !default;
 
-    // @name k-m-VALUE
-    // @description This is equivalent to `margin: VALUE;`. Margin area on all four sides of the element.
-    // @group spacing
-
-    // @name k-mt-VALUE
-    // @description This is equivalent to `margin-top: VALUE;`. Margin area on top of the element.
-    // @group spacing
-
-    // @name k-mr-VALUE
-    // @description This is equivalent to `margin-right: VALUE;`. Margin area on right of the element.
-    // @group spacing
-
-    // @name k-mb-VALUE
-    // @description This is equivalent to `margin-bottom: VALUE;`. Margin area on bottom of the element.
-    // @group spacing
-
-    // @name k-ml-VALUE
-    // @description This is equivalent to `margin-left: VALUE;`. Margin area on left of the element.
-    // @group spacing
-
-    // @name k-mx-VALUE
-    // @description This is equivalent to `margin-left: VALUE; margin-right: VALUE;`. Margin area on left and right of the element.
-    // @group spacing
-
-    // @name k-my-VALUE
-    // @description This is equivalent to `margin-top: VALUE; margin-bottom: VALUE;``. Margin area on top and bottom of the element.
-    // @group spacing
+    /// This is equivalent to `margin: VALUE;`. Margin area on all four sides of the element.
+    /// @name k-m-VALUE
+    /// @group spacing
+    /// @contextType css
+    _ {}
+
+    /// This is equivalent to `margin-top: VALUE;`. Margin area on top of the element.
+    /// @name k-mt-VALUE
+    /// @group spacing
+    /// @contextType css
+    _ {}
+
+    /// This is equivalent to `margin-right: VALUE;`. Margin area on right of the element.
+    /// @name k-mr-VALUE
+    /// @group spacing
+    /// @contextType css
+    _ {}
+
+    /// This is equivalent to `margin-bottom: VALUE;`. Margin area on bottom of the element.
+    /// @name k-mb-VALUE
+    /// @group spacing
+    /// @contextType css
+    _ {}
+
+    /// This is equivalent to `margin-left: VALUE;`. Margin area on left of the element.
+    /// @name k-ml-VALUE
+    /// @group spacing
+    /// @contextType css
+    _ {}
+
+    /// This is equivalent to `margin-left: VALUE; margin-right: VALUE;`. Margin area on left and right of the element.
+    /// @name k-mx-VALUE
+    /// @group spacing
+    /// @contextType css
+    _ {}
+
+    /// This is equivalent to `margin-top: VALUE; margin-bottom: VALUE;``. Margin area on top and bottom of the element.
+    /// @name k-my-VALUE
+    /// @group spacing
+    /// @contextType css
+    _ {}
 
     // Margin
-    @each $size, $val in $spacing {
+    @each $size, $val in $kendo-spacing {
         @each $name, $prop in $utils-margin {
             .k-#{$name}-#{$size} { #{$prop}: $val !important; }
         }
@@ -67,36 +77,50 @@
         }
     }
 
-    // @name k-p-VALUE
-    // @description This is equivalent to `padding: VALUE;`. Padding area on all four sides of the element.
-    // @group spacing
-
-    // @name k-pt-VALUE
-    // @description This is equivalent to `padding-top: VALUE;`. Padding area on top of the element.
-    // @group spacing
-
-    // @name k-pr-VALUE
-    // @description This is equivalent to `padding-right: VALUE;`. Padding area on right of the element.
-    // @group spacing
-
-    // @name k-pb-VALUE
-    // @description This is equivalent to `padding-bottom: VALUE;`. Padding area on bottom of the element.
-    // @group spacing
-
-    // @name k-pl-VALUE
-    // @description This is equivalent to `padding-left: VALUE;`. Padding area on left of the element.
-    // @group spacing
-
-    // @name k-px-VALUE
-    // @description This is equivalent to `padding-left: VALUE; padding-right: VALUE;`. Padding area on left and right of the element.
-    // @group spacing
-
-    // @name k-py-VALUE
-    // @description This is equivalent to `padding-top: VALUE; padding-bottom: VALUE;``. Padding area on top and bottom of the element.
-    // @group spacing
+    /// This is equivalent to `padding: VALUE;`. Padding area on all four sides of the element.
+    /// @name k-p-VALUE
+    /// @group spacing
+    /// @contextType css
+    _ {}
+
+    /// This is equivalent to `padding-top: VALUE;`. Padding area on top of the element.
+    /// @name k-pt-VALUE
+    /// @group spacing
+    /// @contextType css
+    _ {}
+
+    /// This is equivalent to `padding-right: VALUE;`. Padding area on right of the element.
+    /// @name k-pr-VALUE
+    /// @group spacing
+    /// @contextType css
+    _ {}
+
+    /// This is equivalent to `padding-bottom: VALUE;`. Padding area on bottom of the element.
+    /// @name k-pb-VALUE
+    /// @group spacing
+    /// @contextType css
+    _ {}
+
+    /// This is equivalent to `padding-left: VALUE;`. Padding area on left of the element.
+    /// @name k-pl-VALUE
+    /// @group spacing
+    /// @contextType css
+    _ {}
+
+    /// This is equivalent to `padding-left: VALUE; padding-right: VALUE;`. Padding area on left and right of the element.
+    /// @name k-px-VALUE
+    /// @group spacing
+    /// @contextType css
+    _ {}
+
+    /// This is equivalent to `padding-top: VALUE; padding-bottom: VALUE;``. Padding area on top and bottom of the element.
+    /// @name k-py-VALUE
+    /// @group spacing
+    /// @contextType css
+    _ {}
 
     // Padding
-    @each $size, $val in $spacing {
+    @each $size, $val in $kendo-spacing {
         @each $name, $prop in $utils-padding {
             .k-#{$name}-#{$size} { #{$prop}: $val !important; }
         }
@@ -111,22 +135,22 @@
         }
     }
 
-    // @name k-gap-VALUE
-    // @description This is equivalent to `gap: VALUE;`. Gap area between both rows and columns in grid and flexbox layouts.
-    // @group spacing
+    /// This is equivalent to `gap: VALUE;`. Gap area between both rows and columns in grid and flexbox layouts.
+    /// @name k-gap-VALUE
+    /// @group spacing
 
-    // @name k-gap-x-VALUE
-    // @description This is equivalent to `column-gap: VALUE;`. Gap area between columns in grid and flexbox layouts.
-    // @group spacing
+    /// This is equivalent to `column-gap: VALUE;`. Gap area between columns in grid and flexbox layouts.
+    /// @name k-gap-x-VALUE
+    /// @group spacing
 
-    // @name k-gap-y-VALUE
-    // @description This is equivalent to `row-gap: VALUE;`. Gap area between rows in grid and flexbox layouts.
-    // @group spacing
+    /// This is equivalent to `row-gap: VALUE;`. Gap area between rows in grid and flexbox layouts.
+    /// @name k-gap-y-VALUE
+    /// @group spacing
 
     // Gap
     .k-no-gap { gap: 0 !important; }
 
-    @each $size, $val in $spacing {
+    @each $size, $val in $kendo-spacing {
         .k-gap-#{$size}     { gap: $val; }
         .k-gap-x-#{$size}   { column-gap: $val; }
         .k-gap-y-#{$size}   { row-gap: $val; }

package/scss/utils/_table-layout.scss

@@ -5,12 +5,12 @@
 
     // Table-layout documentation sourced from https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout.
 
-    /// @name k-table-layout-fixed
-    /// @description 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.
+    /// 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
     /// @group table-layout
     .k-table-layout-fixed           { table-layout: fixed; }
-    /// @name k-table-layout-auto
-    /// @description 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.
+    /// 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
     /// @group table-layout
     .k-table-layout-auto            { table-layout: auto; }