@progress/kendo-theme-material 6.4.0-dev.0 → 6.4.0-dev.1

package/dist/all.scss

@@ -7013,6 +7013,22 @@ $kendo-utils: (
         "black": black,
         "white": white
     )),
+    "background-position": (
+        center: center,
+        top: top,
+        right: right,
+        bottom: bottom,
+        left: left,
+        top-left: top left,
+        top-right: top right,
+        bottom-left: bottom left,
+        bottom-right: bottom right
+    ),
+    "background-size": (
+        auto,
+        cover,
+        contain
+    ),
 
     // Border
     "border-width": (
@@ -7422,25 +7438,25 @@ $kendo-utils: (
 /// This is equivalent to `clear: left;`.
 /// @example clear: left;
 /// @name .k-clear-left
-/// @group float
+/// @group clear
 /// @contextType css
 
 /// This is equivalent to `clear: right;`.
 /// @example clear: right;
 /// @name .k-clear-right
-/// @group float
+/// @group clear
 /// @contextType css
 
 /// This is equivalent to `clear: both;`.
 /// @example clear: both;
 /// @name .k-clear-both
-/// @group float
+/// @group clear
 /// @contextType css
 
 /// This is equivalent to `clear: none;`.
 /// @example clear: none;
 /// @name .k-clear-none
-/// @group float
+/// @group clear
 /// @contextType css
 
 @mixin kendo-utils--layout--clear() {
@@ -7885,91 +7901,91 @@ $kendo-utils: (
 /// This is equivalent to `top: 0;`.
 /// @example top: 0;
 /// @name .k-top-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `right: 0;`.
 /// @example right: 0;
 /// @name .k-right-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `bottom: 0;`.
 /// @example bottom: 0;
 /// @name .k-bottom-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `left: 0;`.
 /// @example left: 0;
 /// @name .k-left-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `top: 0;`.
 /// @example top: 0;
 /// @name .k-pos-top-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `right: 0;`.
 /// @example right: 0;
 /// @name .k-pos-right-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `bottom: 0;`.
 /// @example bottom: 0;
 /// @name .k-pos-bottom-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `left: 0;`.
 /// @example left: 0;
 /// @name .k-pos-left-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `top: 0; left: 0;`.
 /// @example top: 0; left: 0;
 /// @name .k-top-left-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `top: 0; right: 0;`.
 /// @example top: 0; right: 0;
 /// @name .k-top-right-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `bottom: 0; left: 0;`.
 /// @example bottom: 0; left: 0;
 /// @name .k-bottom-left-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `bottom: 0; right: 0;`.
 /// @example bottom: 0; right: 0;
 /// @name .k-bottom-right-0
-/// @group position
+/// @group placement
 /// @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.
+/// This is equivalent to `inset: 0;`.
 /// @example inset: 0;
 /// @name .k-inset-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `inset-inline: 0;`.
 /// @example inset-inline: 0;
 /// @name .k-inset-x-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `inset-block: 0;`.
 /// @example inset-block: 0;
 /// @name .k-inset-y-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 @mixin kendo-utils--layout--placement() {
@@ -7981,7 +7997,7 @@ $kendo-utils: (
     @include generate-utils( left, left, $kendo-utils-placement );
 
 
-    // Position length utility classes
+    // placement 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
@@ -8874,37 +8890,37 @@ $kendo-utils: (
 // #region @import "./_grid-auto-flow.scss"; -> node_modules/@progress/kendo-theme-utils/scss/flex-grid/_grid-auto-flow.scss
 /// This is equivalent to `grid-auto-flow: row;`.
 /// @example grid-auto-flow: row;
-/// @name .k-grid-auto-flow-row
+/// @name .k-grid-flow-row
 /// @group grid-auto-flow
 /// @contextType css
 
 /// This is equivalent to `grid-auto-flow: column;`.
 /// @example grid-auto-flow: column;
-/// @name .k-grid-auto-flow-column
+/// @name .k-grid-flow-column
 /// @group grid-auto-flow
 /// @contextType css
 
 /// This is equivalent to `grid-auto-flow: dense;`.
 /// @example grid-auto-flow: dense;
-/// @name .k-grid-auto-flow-dense
+/// @name .k-grid-flow-dense
 /// @group grid-auto-flow
 /// @contextType css
 
 /// This is equivalent to `grid-auto-flow: row dense;`.
 /// @example grid-auto-flow: row dense;
-/// @name .k-grid-auto-flow-row-dense
+/// @name .k-grid-flow-row-dense
 /// @group grid-auto-flow
 /// @contextType css
 
 /// This is equivalent to `grid-auto-flow: col dense;`.
 /// @example grid-auto-flow: col dense;
-/// @name .k-grid-auto-flow-col-dense
+/// @name .k-grid-flow-col-dense
 /// @group grid-auto-flow
 /// @contextType css
 
 /// This is equivalent to `grid-auto-flow: unset;`.
 /// @example grid-auto-flow: unset;
-/// @name .k-grid-auto-flow-unset
+/// @name .k-grid-flow-unset
 /// @group grid-auto-flow
 /// @contextType css
 
@@ -10276,7 +10292,7 @@ $kendo-utils: (
 
 /// This is equivalent to `padding: 0.75rem;`.
 /// @example padding: 0.75rem;
-/// @name .k-p-pd
+/// @name .k-p-md
 /// @group padding
 /// @contextType css
 
@@ -11671,12 +11687,106 @@ $kendo-utils: (
 
 }
 
+// #endregion
+// #region @import "./_background-position.scss"; -> node_modules/@progress/kendo-theme-utils/scss/background/_background-position.scss
+/// This is equivalent to `background-position: center;`.
+/// @example background-position: center;
+/// @name .k-bg-center
+/// @group background-position
+/// @contextType css
+
+/// This is equivalent to `background-position: top;`.
+/// @example background-position: top;
+/// @name .k-bg-top
+/// @group background-position
+/// @contextType css
+
+/// This is equivalent to `background-position: right;`.
+/// @example background-position: right;
+/// @name .k-bg-right
+/// @group background-position
+/// @contextType css
+
+/// This is equivalent to `background-position: bottom;`.
+/// @example background-position: bottom;
+/// @name .k-bg-bottom
+/// @group background-position
+/// @contextType css
+
+/// This is equivalent to `background-position: left;`.
+/// @example background-position: left;
+/// @name .k-bg-left
+/// @group background-position
+/// @contextType css
+
+/// This is equivalent to `background-position: top left;`.
+/// @example background-position: top left;
+/// @name .k-bg-top-left
+/// @group background-position
+/// @contextType css
+
+/// This is equivalent to `background-position: top right;`.
+/// @example background-position: top right;
+/// @name .k-bg-top-right
+/// @group background-position
+/// @contextType css
+
+/// This is equivalent to `background-position: bottom left;`.
+/// @example background-position: bottom left;
+/// @name .k-bg-bottom-left
+/// @group background-position
+/// @contextType css
+
+/// This is equivalent to `background-position: bottom right;`.
+/// @example background-position: bottom right;
+/// @name .k-bg-bottom-right
+/// @group background-position
+/// @contextType css
+
+@mixin kendo-utils--background--background-position() {
+
+    // Background position utility classes
+    $kendo-utils-background-position: k-map-get( $kendo-utils, "background-position" ) !default;
+    @include generate-utils( bg, background-position, $kendo-utils-background-position );
+
+}
+
+// #endregion
+// #region @import "./_background-size.scss"; -> node_modules/@progress/kendo-theme-utils/scss/background/_background-size.scss
+/// This is equivalent to `background-size: auto;`.
+/// @example background-size: auto;
+/// @name .k-bg-auto
+/// @group background-size
+/// @contextType css
+
+/// This is equivalent to `background-size: cover;`.
+/// @example background-size: cover;
+/// @name .k-bg-cover
+/// @group background-size
+/// @contextType css
+
+/// This is equivalent to `background-size: contain;`.
+/// @example background-size: contain;
+/// @name .k-bg-contain
+/// @group background-size
+/// @contextType css
+
+@mixin kendo-utils--background--background-size() {
+
+    // Background size utility classes
+    $kendo-utils-background-size: k-map-get( $kendo-utils, "background-size" ) !default;
+    @include generate-utils( bg, background-size, $kendo-utils-background-size );
+
+}
+
 // #endregion
 
 
 @mixin kendo-utils--background() {
     @include kendo-utils--background--background-clip();
     @include kendo-utils--background--background-color();
+    @include kendo-utils--background--background-position();
+    @include kendo-utils--background--background-size();
 }
 
 // #endregion
@@ -15712,13 +15822,16 @@ $ki-rotate-map: (
     }
 
     // RTL icons
-    .k-rtl .k-i-indent-increase,
-    .k-rtl .k-i-indent-decrease,
-    .k-rtl .k-i-caret-alt-right,
-    .k-rtl .k-i-caret-alt-left,
-    [dir="rtl"] .k-i-caret-alt-right,
-    [dir="rtl"] .k-i-caret-alt-left {
-        transform: scaleX(-1);
+    .k-rtl,
+    [dir="rtl"] {
+        .k-i-indent-increase,
+        .k-i-indent-decrease,
+        .k-i-caret-alt-right,
+        .k-i-caret-alt-left,
+        .k-svg-i-caret-alt-right,
+        .k-svg-i-caret-alt-left {
+            transform: scaleX(-1);
+        }
     }
 
     .k-sprite {
@@ -17562,7 +17675,7 @@ $kendo-listgroup-item-border-width: 1px !default;
                 flex: 0 0 auto;
                 position: absolute;
                 top: 50%;
-                right: 0;
+                inset-inline-end: 0;
                 transform: translateY(-50%);
             }
         }
@@ -24150,7 +24263,6 @@ $kendo-input-sizes: (
         padding-y: $kendo-input-sm-padding-y,
         font-size: $kendo-input-sm-font-size,
         line-height: $kendo-input-sm-line-height,
-        icon-size: calc( #{$kendo-icon-size} + #{$kendo-input-sm-padding-y * 2} ),
         button-padding-x: k-map-get( $kendo-spacing, 1 ),
         button-padding-y: k-map-get( $kendo-spacing, 1 )
     ),
@@ -24159,7 +24271,6 @@ $kendo-input-sizes: (
         padding-y: $kendo-input-md-padding-y,
         font-size: $kendo-input-md-font-size,
         line-height: $kendo-input-md-line-height,
-        icon-size: calc( #{$kendo-icon-size} + #{$kendo-input-md-padding-y * 2} ),
         button-padding-x: k-map-get( $kendo-spacing, 1 ),
         button-padding-y: k-map-get( $kendo-spacing, 1 )
     ),
@@ -24168,7 +24279,6 @@ $kendo-input-sizes: (
         padding-y: $kendo-input-lg-padding-y,
         font-size: $kendo-input-lg-font-size,
         line-height: $kendo-input-lg-line-height,
-        icon-size: calc( #{$kendo-icon-size} + #{$kendo-input-lg-padding-y * 2} ),
         button-padding-x: k-map-get( $kendo-spacing, 1 ),
         button-padding-y: k-map-get( $kendo-spacing, 1 )
     )
@@ -25702,8 +25812,8 @@ $_kendo-module-meta: (
             box-sizing: border-box;
         }
 
-        .k-input,
-        .k-picker {
+        > .k-input,
+        > .k-picker {
             border-width: 0 !important; // sass-lint:disable-line no-important
             color: inherit;
             background: none;
@@ -25895,6 +26005,7 @@ $_kendo-module-meta: (
         flex-flow: row nowrap;
         align-items: center;
         justify-content: center;
+        box-sizing: content-box;
     }
 
     // Input with SVG icon
@@ -26067,7 +26178,6 @@ $_kendo-module-meta: (
         $_padding-y: k-map-get( $size-props, padding-y );
         $_font-size: k-map-get( $size-props, font-size );
         $_line-height: k-map-get( $size-props, line-height );
-        $_icon-size: k-map-get( $size-props, icon-size );
         $_button-padding-x: k-map-get( $size-props, button-padding-x );
         $_button-padding-y: k-map-get( $size-props, button-padding-y );
 
@@ -26105,8 +26215,9 @@ $_kendo-module-meta: (
             .k-input-prefix > .k-svg-icon,
             .k-input-suffix > .k-icon,
             .k-input-suffix > .k-svg-icon {
-                width: $_icon-size;
-                height: $_icon-size;
+                padding-block: $_padding-y;
+                padding-inline: $_padding-y;
+                box-sizing: content-box;
             }
 
             &.k-icon-picker .k-input-inner {
@@ -27703,11 +27814,8 @@ $kendo-listbox-drop-hint-width: 2px !default;
         &[dir="rtl"],
         [dir="rtl"] & {
 
-            &.k-listbox-actions-left,
-            &.k-listbox-actions-right {
-                .k-listbox-actions {
-                    transform: scaleX(-1);
-                }
+            .k-listbox-actions .k-button-icon {
+                transform: scaleX(-1);
             }
         }
     }
@@ -36664,12 +36772,12 @@ $kendo-fab-sm-padding-y: k-math-div( $kendo-fab-padding-y, 2 ) !default;
 $kendo-fab-md-padding-y: $kendo-fab-padding-y !default;
 $kendo-fab-lg-padding-y: ( $kendo-fab-padding-y * 1.5 ) !default;
 
-/// FAB icon width.
+/// Horizontal padding of the FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-width: 20px !default;
-/// FAB icon height.
+$kendo-fab-icon-padding-x: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+/// Vertical padding of the FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-height: $kendo-fab-icon-width !default;
+$kendo-fab-icon-padding-y: $kendo-fab-icon-padding-x !default;
 /// FAB icon spacing.
 /// @group floating-action-button
 $kendo-fab-icon-spacing: k-map-get( $kendo-spacing, 1 ) * 1.5 !default;
@@ -36702,7 +36810,7 @@ $kendo-fab-item-text-line-height: 1.2 !default;
 
 /// FAB item icon horizontal padding.
 /// @group floating-action-button
-$kendo-fab-item-icon-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-fab-item-icon-padding-x: k-map-get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x !default;
 /// FAB item icon vertical padding.
 /// @group floating-action-button
 $kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-x !default;
@@ -36712,12 +36820,6 @@ $kendo-fab-item-icon-border-width: 0 !default;
 /// Border radius of the FAB item icon.
 /// @group floating-action-button
 $kendo-fab-item-icon-border-radius: 50% !default;
-/// Width of the FAB item icon.
-/// @group floating-action-button
-$kendo-fab-item-icon-width: 20px !default;
-/// Height of the FAB item icon.
-/// @group floating-action-button
-$kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
 
 /// Theme colors map for the FAB.
 /// @group floating-action-button
@@ -36821,8 +36923,9 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
 
     // FAB Icon
     .k-fab-icon {
-        width: $kendo-fab-icon-width;
-        height: $kendo-fab-icon-height;
+        padding-inline: $kendo-fab-icon-padding-x;
+        padding-block: $kendo-fab-icon-padding-y;
+        box-sizing: content-box;
 
         .k-icon-wrapper-host:not(:only-child) &,
         &:not(:only-child) {
@@ -36903,8 +37006,6 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
     }
 
     .k-fab-item-icon {
-        width: $kendo-fab-item-icon-width;
-        height: $kendo-fab-item-icon-height;
         padding-block: $kendo-fab-item-icon-padding-y;
         padding-inline: $kendo-fab-item-icon-padding-x;
         border-width: $kendo-fab-item-icon-border-width;
@@ -37067,7 +37168,7 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
     }
 
     // Popup
-    .k-animation-container > .k-fab-popup {
+    .k-fab-popup {
         @include box-shadow( none );
     }
 
@@ -37190,7 +37291,7 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
     }
 
     // Popup
-    .k-animation-container > .k-fab-popup {
+    .k-fab-popup {
         @include box-shadow( none );
     }
 
@@ -37551,7 +37652,7 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !de
         border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
         border-top-width: if( $kendo-actionsheet-border-width, 0, null );
         top: 0;
-        left: 50%;
+        inset-inline-start: 50%;
         transform: translateX( -50% );
     }
     .k-actionsheet-bottom {
@@ -37559,7 +37660,7 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !de
         border-width: if( $kendo-actionsheet-border-width, $kendo-actionsheet-border-width, null );
         border-bottom-width: if( $kendo-actionsheet-border-width, 0, null );
         bottom: 0;
-        left: 50%;
+        inset-inline-start: 50%;
         transform: translateX( -50% );
     }
     .k-actionsheet-left {
@@ -37718,6 +37819,15 @@ $kendo-adaptive-actionsheet-footer-padding-x: k-map-get( $kendo-spacing, 4 ) !de
         }
     }
 
+    // RTL
+    .k-rtl,
+    [dir="rtl"] {
+        .k-actionsheet-top,
+        .k-actionsheet-bottom {
+            transform: translateX( 50% );
+        }
+    }
+
 }
 
 
@@ -38461,6 +38571,8 @@ $kendo-drawer-item-level-padding-x: $kendo-drawer-item-padding-x !default;
 $kendo-drawer-item-level-count: 5 !default;
 
 $kendo-drawer-icon-size: $kendo-icon-size !default;
+$kendo-drawer-icon-padding-x: 0 !default;
+$kendo-drawer-icon-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 
 $kendo-drawer-mini-initial-width: calc(2 * #{$kendo-drawer-item-padding-x} + #{$kendo-drawer-icon-size}) !default;
 
@@ -38635,16 +38747,26 @@ $kendo-drawer-selected-hover-text: $kendo-color-secondary !default;
 
         .k-svg-icon,
         .k-icon {
-            height: auto;
-            font-size: $kendo-drawer-icon-size;
-            line-height: $kendo-drawer-item-line-height;
             flex-shrink: 0;
+            padding-inline: $kendo-drawer-icon-padding-x;
+            padding-block: $kendo-drawer-icon-padding-y;
+            box-sizing: content-box;
 
             &.k-i-none {
                 margin: 0;
             }
         }
 
+        .k-icon {
+            height: auto;
+            font-size: $kendo-drawer-icon-size;
+        }
+
+        .k-svg-icon {
+            width: $kendo-drawer-icon-size;
+            height: $kendo-drawer-icon-size;
+        }
+
         .k-item-text {
             display: inline-block;
             white-space: nowrap;
@@ -40992,18 +41114,7 @@ $kendo-pager-sizes: (
         .k-rtl &,
         &[dir="rtl"],
         [dir="rtl"] & {
-            .k-i-caret-alt-to-left,
-            .k-i-caret-alt-to-right,
-            .k-i-caret-alt-left,
-            .k-i-caret-alt-right,
-            .k-i-arrow-end-left,
-            .k-i-arrow-60-left,
-            .k-i-arrow-60-right,
-            .k-i-arrow-end-right,
-            .k-i-seek-w,
-            .k-i-arrow-w,
-            .k-i-arrow-e,
-            .k-i-seek-e {
+            .k-pager-nav .k-button-icon {
                 transform: scaleX(-1);
             }
         }
@@ -44662,15 +44773,11 @@ $kendo-adaptive-scheduler-subtle-text: $kendo-subtle-text !default;
         .k-task {
             display: flex;
             align-items: center;
+            gap: .5em;
 
             .k-scheduler-mark {
                 border-radius: 50%;
-            }
-
-            .k-i-reload,
-            .k-i-arrow-rotate-cw {
-                font-size: 1em;
-                margin-right: .5em;
+                margin: 0;
             }
 
             .k-scheduler-task-text {
@@ -44817,8 +44924,9 @@ $kendo-adaptive-scheduler-subtle-text: $kendo-subtle-text !default;
         &[dir="rtl"],
         [dir="rtl"] & {
 
-            .k-header-cancel .k-i-arrow-chevron-left,
-            .k-listgroup-item .k-select .k-i-arrow-chevron-right {
+            .k-header-cancel .k-button-icon,
+            .k-listgroup-item .k-select .k-svg-icon,
+            .k-listgroup-item .k-select .k-icon {
                 transform: scaleX( -1 );
             }
 
@@ -45433,6 +45541,7 @@ $kendo-grid-row-resizer-height: k-map-get( $kendo-spacing, .5 ) !default;
 
         .k-grid-header,
         .k-grid-content,
+        .k-grid-content-locked,
         .k-grid-footer {
             .k-table {
                 table-layout: fixed;
@@ -48196,7 +48305,8 @@ $kendo-spreadsheet-drawing-anchor-bg: rgba( $kendo-selected-bg, .25 ) !default;
         align-items: center;
         flex: 1;
 
-        > .k-i-formula-fx {
+        > .k-icon,
+        > .k-svg-icon {
             padding-block: 0;
             padding-inline: $kendo-padding-md-y;
             box-sizing: content-box;
@@ -59239,11 +59349,11 @@ $kendo-scrollview-transition-timing-function: ease-in-out !default;
     }
 
     .k-scrollview-prev {
-        left: 0;
+        inset-inline-start: 0;
     }
 
     .k-scrollview-next {
-        right: 0;
+        inset-inline-end: 0;
     }
 
 
@@ -59269,6 +59379,17 @@ $kendo-scrollview-transition-timing-function: ease-in-out !default;
         }
     }
 
+    .k-rtl,
+    [dir="rtl"] {
+        .k-scrollview-prev,
+        .k-scrollview-next {
+            .k-icon,
+            .k-svg-icon {
+                transform: scaleX(-1);
+            }
+        }
+    }
+
 }