@progress/kendo-theme-core 8.1.0-dev.0 → 8.1.0-dev.2

package/dist/all.scss

@@ -3328,13 +3328,26 @@ $kendo-invalid-border: null !default;
 $kendo-invalid-shadow: null !default;
 
 // Disabled Styling
+
+/// The background color of disabled items.
 $kendo-disabled-bg: null !default;
+/// The text color of disabled items.
 $kendo-disabled-text: null !default;
+/// The border color of disabled items.
 $kendo-disabled-border: null !default;
+/// The opacity of disabled items.
+$kendo-disabled-opacity: null !default;
+/// The filter of disabled items.
+$kendo-disabled-filter: null !default;
+
+$kendo-disabled-styling: (
+    bg: $kendo-disabled-bg,
+    color: $kendo-disabled-text,
+    border: $kendo-disabled-border,
+    opacity: $kendo-disabled-opacity,
+    filter: $kendo-disabled-filter
+) !default;
 
-// Loading
-$kendo-loading-bg: null !default;
-$kendo-loading-text: null !default;
 
 $kendo-palettes: () !default;
 $kendo-theme-colors: () !default;
@@ -3462,21 +3475,15 @@ $_kendo-data-uris: () !default;
 // #endregion
 // #region @import "./_disabled.scss"; -> scss/mixins/_disabled.scss
 // Disabled
-@mixin disabled( $kendo-disabled-styling ) {
-    outline: none;
-    cursor: default;
-    opacity: k-map-get($kendo-disabled-styling, opacity);
-    filter: k-map-get($kendo-disabled-styling, filter);
-    pointer-events: none;
-    box-shadow: none;
-}
 
-@mixin disabled-color( $color: null, $bg: null, $border: null ) {
+@mixin disabled( $color: null, $bg: null, $border: null, $opacity: null, $filter: null ) {
     outline: none;
     cursor: default;
-    background-color: $bg;
     color: $color;
+    background-color: $bg;
     border-color: $border;
+    opacity: $opacity;
+    filter: $filter;
     pointer-events: none;
     box-shadow: none;
 }
@@ -3648,6 +3655,7 @@ $kendo-components: (
     "loader",
     "skeleton",
     "tooltip",
+    "time-marker",
 
     // Native forms
     "button",
@@ -3724,6 +3732,7 @@ $kendo-components: (
     // Layout & containers
     "card",
     "expander",
+    "panel",
     "panelbar",
     "splitter",
     "tile-layout",
@@ -3967,7 +3976,8 @@ $_kendo-dependencies: (
         "splitter",
         "treelist",
         "validator",
-        "window"
+        "window",
+        "time-marker"
     ),
     grid: (
         "actions",
@@ -4066,6 +4076,7 @@ $_kendo-dependencies: (
         "list",
         "toolbar"
     ),
+    panel: (),
     panelbar: (
         "icon"
     ),
@@ -4107,7 +4118,8 @@ $_kendo-dependencies: (
         "dialog",
         "dropdown-list",
         "toolbar",
-        "tooltip"
+        "tooltip",
+        "time-marker"
     ),
     scroller: (),
     scrollview: (
@@ -4179,6 +4191,7 @@ $_kendo-dependencies: (
     tile-layout: (
         "card"
     ),
+    time-marker: (),
     time-duration-picker: (
         "button",
         "icon",
@@ -4323,6 +4336,702 @@ $_imported: () !default;
 
 }
 
+// #endregion
+// #region @import "./_animations.scss"; -> scss/styles/_animations.scss
+@mixin kendo-core--styles--animations() {
+
+    // Animations
+    .k-push-right {
+        &-enter,
+        &-appear {
+            transform: translate(-100%, 0);
+        }
+
+        &-enter-active,
+        &-appear-active {
+            transform: translate(0, 0);
+            transition: transform 300ms ease-in-out;
+        }
+
+        &-exit {
+            transform: translate(0, 0);
+        }
+
+        &-exit-active {
+            transform: translate(100%, 0);
+            transition: transform 300ms ease-in-out;
+        }
+    }
+
+    .k-push-left {
+        &-enter,
+        &-appear {
+            transform: translate(100%, 0);
+        }
+
+        &-enter-active,
+        &-appear-active {
+            transform: translate(0, 0);
+            transition: transform 300ms ease-in-out;
+        }
+
+        &-exit {
+            transform: translate(0, 0);
+        }
+
+        &-exit-active {
+            transform: translate(-100%, 0);
+            transition: transform 300ms ease-in-out;
+        }
+    }
+
+    .k-push-down {
+        &-enter,
+        &-appear {
+            transform: translate(0, -100%);
+        }
+
+        &-enter-active,
+        &-appear-active {
+            transform: translate(0, 0);
+            transition: transform 300ms ease-in-out;
+        }
+
+        &-exit {
+            transform: translate(0, 0);
+        }
+
+        &-exit-active {
+            transform: translate(0, 100%);
+            transition: transform 300ms ease-in-out;
+        }
+    }
+
+    .k-push-up {
+        &-enter,
+        &-appear {
+            transform: translate(0, 100%);
+        }
+
+        &-enter-active,
+        &-appear-active {
+            transform: translate(0, 0);
+            transition: transform 300ms ease-in-out;
+        }
+
+        &-exit {
+            transform: translate(0, 0);
+        }
+
+        &-exit-active {
+            transform: translate(0, -100%);
+            transition: transform 300ms ease-in-out;
+        }
+    }
+
+    .k-expand-vertical {
+        &-enter,
+        &-appear {
+            transform: scaleY(0);
+        }
+
+        &-enter-active,
+        &-appear-active {
+            transform: scaleY(1);
+            transition: transform 300ms ease-in-out;
+        }
+
+        &-exit {
+            transform: scaleY(1);
+        }
+
+        &-exit-active {
+            transform: scaleY(0);
+            transition: transform 300ms ease-in-out;
+        }
+    }
+
+    .k-expand-horizontal {
+        &-enter,
+        &-appear {
+            transform: scaleX(0);
+        }
+
+        &-enter-active,
+        &-appear-active {
+            transform: scaleX(1);
+            transition: transform 300ms ease-in-out;
+        }
+
+        &-exit {
+            transform: scaleX(1);
+        }
+
+        &-exit-active {
+            transform: scaleX(0);
+            transition: transform 300ms ease-in-out;
+        }
+    }
+
+    .k-fade {
+        &-enter,
+        &-appear {
+            opacity: 0;
+        }
+
+        &-enter-active,
+        &-appear-active {
+            opacity: 1;
+            transition: opacity 500ms ease-in-out;
+        }
+
+        &-exit {
+            opacity: 1;
+        }
+
+        &-exit-active {
+            opacity: 0;
+            transition: opacity 500ms ease-in-out;
+        }
+
+        &-exit-active + &-exit-active,
+        &-enter-active + &-enter-active {
+            display: none;
+        }
+    }
+
+    .k-zoom-in {
+        &-enter,
+        &-appear {
+            opacity: 0;
+            transform: scale(0);
+        }
+
+        &-enter-active,
+        &-appear-active {
+            opacity: 1;
+            transform: scale(1);
+            transition: transform, opacity 300ms ease-in-out;
+        }
+
+        &-exit {
+            opacity: 1;
+            transform: scale(1);
+        }
+
+        &-exit-active {
+            opacity: 0;
+            transform: scale(2);
+            transition: transform, opacity 300ms ease-in-out;
+        }
+    }
+
+    .k-zoom-out {
+        &-enter,
+        &-appear {
+            opacity: 0;
+            transform: scale(2);
+        }
+
+        &-enter-active,
+        &-appear-active {
+            opacity: 1;
+            transform: scale(1);
+            transition: transform, opacity 300ms ease-in-out;
+        }
+
+        &-exit {
+            opacity: 1;
+            transform: scale(1);
+        }
+
+        &-exit-active {
+            opacity: 0;
+            transform: scale(0);
+            transition: transform, opacity 300ms ease-in-out;
+        }
+    }
+
+    .k-slide-in {
+        &-appear {
+            opacity: .1;
+            transform: translate(0, -3em);
+
+            .k-centered {
+                transform: translate(-50%, -60%);
+            }
+        }
+
+        &-appear-active {
+            opacity: 1;
+            transform: translate(0, 0);
+            transition: transform .3s cubic-bezier(.2, .6, .4, 1), opacity .3s cubic-bezier(.2, 1, .2, 1);
+
+            .k-centered {
+                transform: translate(-50%, -50%);
+            }
+        }
+    }
+
+    .k-slide-down {
+        &-enter,
+        &-appear {
+            transform: translateY(-100%);
+        }
+
+        &-enter-active,
+        &-appear-active {
+            transform: translateY(0);
+            transition: transform 300ms ease-in-out;
+        }
+
+        &-exit {
+            transform: translateY(0);
+        }
+
+        &-exit-active {
+            transform: translateY(-100%);
+            transition: transform 300ms ease-in-out;
+        }
+    }
+
+    .k-slide-up {
+        &-enter,
+        &-appear {
+            transform: translateY(100%);
+        }
+
+        &-enter-active,
+        &-appear-active {
+            transform: translateY(0);
+            transition: transform 300ms ease-in-out;
+        }
+
+        &-exit {
+            transform: translateY(0);
+        }
+
+        &-exit-active {
+            transform: translateY(100%);
+            transition: transform 300ms ease-in-out;
+        }
+    }
+
+    .k-slide-right {
+        &-enter,
+        &-appear {
+            transform: translateX(-100%);
+        }
+
+        &-enter-active,
+        &-appear-active {
+            transform: translateX(0);
+            transition: transform 300ms ease-in-out;
+        }
+
+        &-exit {
+            transform: translateX(0);
+        }
+
+        &-exit-active {
+            transform: translateX(-100%);
+            transition: transform 300ms ease-in-out;
+        }
+    }
+
+    .k-slide-left {
+        &-enter,
+        &-appear {
+            transform: translateX(100%);
+        }
+
+        &-enter-active,
+        &-appear-active {
+            transform: translateX(0);
+            transition: transform 300ms ease-in-out;
+        }
+
+        &-exit {
+            transform: translateX(0);
+        }
+
+        &-exit-active {
+            transform: translateX(100%);
+            transition: transform 300ms ease-in-out;
+        }
+    }
+
+    .k-reveal-vertical {
+        &-enter,
+        &-appear {
+            max-height: 0;
+        }
+
+        &-enter-active,
+        &-appear-active {
+            transition: max-height 300ms ease-in-out;
+        }
+
+        &-exit-active {
+            // override any max-height set to element to allow animation
+            max-height: 0 !important; // stylelint-disable-line declaration-no-important
+            transition: max-height 300ms ease-in-out;
+        }
+    }
+
+    .k-reveal-horizontal {
+        &-enter,
+        &-appear {
+            max-width: 0;
+        }
+
+        &-enter-active,
+        &-appear-active {
+            transition: max-width 300ms ease-in-out;
+        }
+
+        &-exit-active {
+            // override any max-height set to element to allow animation
+            max-width: 0 !important; // stylelint-disable-line declaration-no-important
+            transition: max-width 300ms ease-in-out;
+        }
+    }
+
+
+    // FX
+    $fx-duration: 350ms;
+
+    .k-fx-end .k-fx-next,
+    .k-fx-end .k-fx-current {
+        transition: all $fx-duration ease-out;
+    }
+
+    .k-fx {
+        position: relative;
+
+        .k-fx-current {
+            z-index: 0;
+        }
+
+        .k-fx-next {
+            z-index: 1;
+        }
+    }
+
+    .k-fx-hidden,
+    .k-fx-hidden * {
+        visibility: hidden !important; // stylelint-disable-line declaration-no-important
+    }
+
+    .k-fx-reverse {
+        .k-fx-current {
+            z-index: 1;
+        }
+
+        .k-fx-next {
+            z-index: 0;
+        }
+    }
+
+    // Zoom
+    // stylelint-disable declaration-no-important
+    .k-fx-zoom {
+        &.k-fx-start .k-fx-next {
+            transform: scale(0) !important;
+        }
+
+        &.k-fx-end .k-fx-next {
+            transform: scale(1) !important;
+        }
+
+        &.k-fx-reverse {
+            &.k-fx-start .k-fx-next,
+            &.k-fx-end .k-fx-next {
+                transform: scale(1) !important;
+            }
+
+            &.k-fx-start .k-fx-current {
+                transform: scale(1) !important;
+            }
+
+            &.k-fx-end .k-fx-current {
+                transform: scale(0) !important;
+            }
+        }
+    }
+    // stylelint-enable declaration-no-important
+
+    // Fade
+    .k-fx-fade {
+        &.k-fx-start .k-fx-next {
+            will-change: opacity;
+            opacity: 0;
+        }
+
+        &.k-fx-end .k-fx-next {
+            opacity: 1;
+        }
+
+        &.k-fx-reverse {
+            &.k-fx-start .k-fx-current {
+                will-change: opacity;
+                opacity: 1;
+            }
+
+            &.k-fx-end .k-fx-current {
+                opacity: 0;
+            }
+        }
+    }
+
+    // Slide
+    .k-fx-slide {
+        &.k-fx-end .k-fx-next .k-content,
+        &.k-fx-end .k-fx-next .k-header,
+        &.k-fx-end .k-fx-next .k-footer,
+        &.k-fx-end .k-fx-current .k-content,
+        &.k-fx-end .k-fx-current .k-header,
+        &.k-fx-end .k-fx-current .k-footer,
+        &.k-fx-end .k-fx-next .km-content,
+        &.k-fx-end .k-fx-next .km-header,
+        &.k-fx-end .k-fx-next .km-footer,
+        &.k-fx-end .k-fx-current .km-content,
+        &.k-fx-end .k-fx-current .km-header,
+        &.k-fx-end .k-fx-current .km-footer {
+            transition: all $fx-duration ease-out;
+        }
+
+        // left
+        &.k-fx-start .k-fx-next .k-content,
+        &.k-fx-start .k-fx-next .km-content {
+            will-change: transform;
+            transform: translateX(100%);
+        }
+
+        &.k-fx-start .k-fx-next .k-header,
+        &.k-fx-start .k-fx-next .k-footer,
+        &.k-fx-start .k-fx-next .km-header,
+        &.k-fx-start .k-fx-next .km-footer {
+            will-change: opacity;
+            opacity: 0;
+        }
+
+        &.k-fx-end .k-fx-current .k-content,
+        &.k-fx-end .k-fx-current .km-content {
+            transform: translateX(-100%);
+        }
+
+        &.k-fx-end .k-fx-next .k-header,
+        &.k-fx-end .k-fx-next .k-footer,
+        &.k-fx-end .k-fx-next .km-header,
+        &.k-fx-end .k-fx-next .km-footer {
+            opacity: 1;
+        }
+
+        // left reverse
+        &.k-fx-reverse {
+            &.k-fx-start .k-fx-current .k-content,
+            &.k-fx-start .k-fx-current .km-content {
+                will-change: transform;
+                transform: translateX(0);
+            }
+
+            &.k-fx-end .k-fx-current .k-content,
+            &.k-fx-end .k-fx-current .km-content {
+                transform: translateX(100%);
+            }
+
+            &.k-fx-start .k-fx-next .k-content,
+            &.k-fx-start .k-fx-next .km-content {
+                transform: translateX(-100%);
+            }
+
+            &.k-fx-end .k-fx-next .k-content,
+            &.k-fx-end .k-fx-next .km-content {
+                transform: translateX(0);
+            }
+
+            &.k-fx-start .k-fx-current .k-header,
+            &.k-fx-start .k-fx-current .k-footer,
+            &.k-fx-start .k-fx-current .km-header,
+            &.k-fx-start .k-fx-current .km-footer {
+                will-change: opacity;
+                opacity: 1;
+            }
+
+            &.k-fx-start .k-fx-next .k-header,
+            &.k-fx-start .k-fx-next .k-footer,
+            &.k-fx-start .k-fx-next .km-header,
+            &.k-fx-start .k-fx-next .km-footer {
+                opacity: 1;
+            }
+
+            &.k-fx-end .k-fx-current .k-header,
+            &.k-fx-end .k-fx-current .k-footer,
+            &.k-fx-end .k-fx-current .km-header,
+            &.k-fx-end .k-fx-current .km-footer {
+                opacity: 0;
+            }
+
+            &.k-fx-end .k-fx-next .k-header,
+            &.k-fx-end .k-fx-next .k-footer,
+            &.k-fx-end .k-fx-next .km-header,
+            &.k-fx-end .k-fx-next .km-footer {
+                opacity: 1;
+            }
+        }
+
+        // right
+        &.k-fx-right {
+            &.k-fx-start .k-fx-next .k-content,
+            &.k-fx-start .k-fx-next .km-content {
+                transform: translateX(-100%);
+            }
+
+            &.k-fx-end .k-fx-current .k-content,
+            &.k-fx-end .k-fx-current .km-content {
+                transform: translateX(100%);
+            }
+
+            // right reverse
+            &.k-fx-reverse {
+                &.k-fx-start .k-fx-current .k-content,
+                &.k-fx-start .k-fx-current .km-content {
+                    transform: translateX(0);
+                }
+
+                &.k-fx-end .k-fx-current .k-content,
+                &.k-fx-end .k-fx-current .km-content {
+                    transform: translateX(-100%);
+                }
+
+                &.k-fx-start .k-fx-next .k-content,
+                &.k-fx-start .k-fx-next .km-content {
+                    transform: translateX(100%);
+                }
+
+                &.k-fx-end .k-fx-next .k-content,
+                &.k-fx-end .k-fx-next .km-content {
+                    transform: translateX(0%);
+                }
+            }
+        }
+    }
+
+    // Tile
+    .k-fx-tile {
+        // left
+        &.k-fx-start .k-fx-next {
+            will-change: transform;
+            transform: translateX(100%);
+        }
+
+        &.k-fx-end .k-fx-current {
+            transform: translateX(-100%);
+        }
+
+        // left reverse
+        &.k-fx-reverse {
+            &.k-fx-start .k-fx-current {
+                will-change: transform;
+                transform: translateX(0);
+            }
+
+            &.k-fx-end .k-fx-current {
+                transform: translateX(100%);
+            }
+
+            &.k-fx-start .k-fx-next {
+                transform: translateX(-100%);
+            }
+
+            &.k-fx-end .k-fx-next {
+                transform: translateX(0);
+            }
+        }
+
+        // right
+        &.k-fx-right {
+            &.k-fx-start .k-fx-next {
+                transform: translateX(-100%);
+            }
+
+            &.k-fx-end .k-fx-current {
+                transform: translateX(100%);
+            }
+
+            // right reverse
+            &.k-fx-reverse {
+                &.k-fx-start .k-fx-current {
+                    transform: translateX(0);
+                }
+
+                &.k-fx-end .k-fx-current {
+                    transform: translateX(-100%);
+                }
+
+                &.k-fx-start .k-fx-next {
+                    transform: translateX(100%);
+                }
+
+                &.k-fx-end .k-fx-next {
+                    transform: translateX(0%);
+                }
+            }
+        }
+    }
+
+    // Overlay
+    .k-fx.k-fx-overlay {
+        &.k-fx-start .k-fx-next,
+        &.k-fx-left.k-fx-start .k-fx-next {
+            will-change: transform;
+            transform: translateX(100%);
+        }
+
+        &.k-fx-right.k-fx-start .k-fx-next {
+            transform: translateX(-100%);
+        }
+
+        &.k-fx-up.k-fx-start .k-fx-next {
+            transform: translateY(100%);
+        }
+
+        &.k-fx-down.k-fx-start .k-fx-next {
+            transform: translateY(-100%);
+        }
+
+        &.k-fx-reverse {
+            &.k-fx-start .k-fx-next {
+                transform: none;
+            }
+
+            &.k-fx-start .k-fx-current {
+                will-change: transform;
+                transform: none;
+            }
+
+            &.k-fx-end .k-fx-current,
+            &.k-fx-left.k-fx-end .k-fx-current {
+                transform: translateX(100%);
+            }
+
+            &.k-fx-right.k-fx-end .k-fx-current {
+                transform: translateX(-100%);
+            }
+
+            &.k-fx-up.k-fx-end .k-fx-current {
+                transform: translateY(100%);
+            }
+
+            &.k-fx-down.k-fx-end .k-fx-current {
+                transform: translateY(-100%);
+            }
+        }
+    }
+
+}
+
 // #endregion
 // #region @import "./_asp-fallback.scss"; -> scss/styles/_asp-fallback.scss
 @mixin kendo-core--styles--asp-fallback() {
@@ -4452,19 +5161,32 @@ $_imported: () !default;
 // #endregion
 // #region @import "./_base.scss"; -> scss/styles/_base.scss
 @mixin kendo-core--styles--base() {
+
     // Disabled state
     .k-disabled,
     .k-widget[disabled],
     .k-disabled {
-        @include disabled-color(
-            $color: var( --kendo-disabled-text, inherit ),
-            $border: var( --kendo-disabled-border, inherit )
+        @include disabled(
+            $color: var( --kendo-disabled-text, #{$kendo-disabled-text}),
+            $bg: var( --kendo-disabled-bg, #{$kendo-disabled-bg}),
+            $border: var( --kendo-disabled-border, #{$kendo-disabled-border}),
+            $opacity: var( --kendo-disabled-opacity, #{$kendo-disabled-opacity}),
+            $filter: var( --kendo-disabled-filter, #{$kendo-disabled-filter})
         );
 
         .k-link {
             cursor: default;
             outline: 0;
         }
+
+        // Nested disabled
+        [disabled],
+        .k-disabled {
+            @if $kendo-nested-disabled {
+                --kendo-disabled-opacity: 1;
+                --kendo-disabled-filter: grayscale(0);
+            }
+        }
     }
 
     // Horizontal line
@@ -4474,7 +5196,7 @@ $_imported: () !default;
         height: 0;
         border-width: 1px 0 0;
         border-style: solid;
-        border-color: var( --kendo-component-border, inherit );
+        border-color: var( --kendo-component-border, #{$kendo-component-border} );
         display: block;
         float: none;
         clear: both;
@@ -4586,162 +5308,201 @@ $_imported: () !default;
 }
 
 // #endregion
-// #region @import "./_loading.scss"; -> scss/styles/_loading.scss
-@mixin kendo-core--styles--loading() {
-    // Loading mask
-    .k-loading-mask,
-    .k-loading-image,
-    .k-loading-color {
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
+// #region @import "./_selection.scss"; -> scss/styles/_selection.scss
+@mixin kendo-core--styles--selection() {
+
+    // Marquee
+    .k-marquee {
+        position: absolute;
+        z-index: 100000;
+    }
+
+    .k-marquee-color,
+    .k-marquee-text {
         position: absolute;
         top: 0;
         left: 0;
-
-        *,
-        *::before,
-        *::after,
-        &::before,
-        &::after {
-            box-sizing: border-box;
-        }
+        width: 100%;
+        height: 100%;
     }
 
-    .k-loading-mask {
-        z-index: $kendo-zindex-loading;
+    .k-marquee-color {
+        color: k-get-theme-color-var( neutral-160, #{$kendo-selected-text} );
+        background-color: k-get-theme-color-var( primary-60, #{$kendo-selected-bg} );
+        border-color: k-get-theme-color-var( primary-100, #{$kendo-selected-border} );
+        opacity: .6;
+    }
+    .k-marquee-text {
+        color: k-get-theme-color-var( neutral-160, #{$kendo-selected-text} );
+    }
 
-        &.k-opaque {
-            .k-loading-color {
-                opacity: 1;
-            }
+    // Text selection
+    .k-text-selection {
+        ::selection {
+            background-color:  if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 ));
+            color: if($kendo-enable-color-system, k-color( on-primary ), $kendo-selected-text);
         }
     }
-    .k-loading-text {
-        text-indent: -4000px;
-        text-align: center;
+
+}
+
+// #endregion
+// #region @import "./_scrollbar.scss"; -> scss/styles/_scrollbar.scss
+@mixin kendo-core--styles--scrollbar() {
+
+    // virtual scrollbar
+    .k-scrollbar {
         position: absolute;
-        color: $kendo-loading-text;
+        overflow: scroll;
     }
-    .k-loading-image {
-        z-index: 2;
-        color: $kendo-loading-text;
+
+    .k-scrollbar-vertical {
+        top: 0;
+        right: 0;
+        width: 17px; // scrollbar width
+        height: 100%;
+        overflow-x: hidden;
     }
-    .k-loading-color {
-        background-color: $kendo-loading-bg;
-        opacity: $kendo-loading-opacity;
+
+    .k-touch-scrollbar {
+        display: none;
+        position: absolute;
+        z-index: 200000;
+        height: 8px;
+        width: 8px;
+        border: 1px solid #8a8a8a;
+        background-color: #858585;
     }
 
-    // Loading indicator
-    .k-i-loading {
-        width: 1em;
-        height: 1em;
-        line-height: 1;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        align-items: center;
-        justify-content: center;
-        vertical-align: middle;
-        position: relative;
-        background-color: transparent;
-        box-sizing: border-box;
-        color: $kendo-loading-text;
+}
 
-        &::before,
-        &::after {
-            box-sizing: border-box;
-        }
-    }
+// #endregion
+// #region @import "./_resizing.scss"; -> scss/styles/_resizing.scss
+@mixin kendo-core--styles--resizing() {
 
-    .k-i-loading::before,
-    .k-i-loading::after,
-    .k-loading-image::before,
-    .k-loading-image::after {
+    // Resize handle
+    .k-resize-handle,
+    .k-resize-hint {
         position: absolute;
-        top: 50%;
-        left: 50%;
-        display: inline-block;
-        content: "";
-        box-sizing: inherit;
-        border-radius: 50%;
-        border-width: .05em;
-        border-style: solid;
-        border-color: currentColor;
-        border-top-color: transparent;
-        border-bottom-color: transparent;
-        background-color: transparent;
+        border-color: inherit;
+        z-index: 200;
     }
-
-    .k-icon.k-i-loading::before,
-    .k-icon.k-i-loading::after {
+    .k-resize-handle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .k-resize-handle::before {
         content: "";
+        border: 0 solid;
+        border-color: inherit;
+    }
+    .k-resize-n {
+        width: 100%;
+        height: 6px;
+        flex-direction: row;
+        left: 0;
+        top: -3px;
+        cursor: n-resize;
+    }
+    .k-resize-s {
+        width: 100%;
+        height: 6px;
+        flex-direction: row;
+        left: 0;
+        bottom: -3px;
+        cursor: s-resize;
+    }
+    .k-resize-w {
+        width: 6px;
+        height: 100%;
+        flex-direction: column;
+        top: 0;
+        left: -3px;
+        cursor: w-resize;
+    }
+    .k-resize-e {
+        width: 6px;
+        height: 100%;
+        flex-direction: column;
+        top: 0;
+        right: -3px;
+        cursor: e-resize;
     }
 
-    .k-i-loading::before,
-    .k-loading-image::before {
-        margin-top: -.5em;
-        margin-left: -.5em;
-        width: 1em;
-        height: 1em;
-        animation: k-loading-animation .7s linear infinite;
+    .k-resize-sw,
+    .k-resize-se,
+    .k-resize-nw,
+    .k-resize-ne {
+        width: 5px;
+        height: 5px;
     }
 
-    .k-i-loading::after,
-    .k-loading-image::after {
-        margin-top: -.25em;
-        margin-left: -.25em;
-        width: .5em;
-        height: .5em;
-        animation: k-loading-animation reverse 1.4s linear infinite;
+    .k-resize-sw {
+        cursor: sw-resize;
+        bottom: 0;
+        left: 0;
+    }
+    .k-resize-se {
+        cursor: se-resize;
+        bottom: 0;
+        right: 0;
+    }
+    .k-resize-nw {
+        cursor: nw-resize;
+        top: 0;
+        left: 0;
+    }
+    .k-resize-ne {
+        cursor: ne-resize;
+        top: 0;
+        right: 0;
     }
 
-    .k-loading-image::before,
-    .k-loading-image::after {
-        content: "";
-        // See https://github.com/telerik/kendo-themes/issues/1925
-        border-width: 1px; // TODO: Remove once we drop IE support
-        border-width: clamp( .015em, 1px, 1px );
-        font-size: 4em;
+    .k-vertical-resize {
+        cursor: row-resize;
+    }
+    .k-horizontal-resize {
+        cursor: col-resize;
     }
 
-    // Loading animation
-    @keyframes k-loading-animation {
-        0% {
-            transform: rotate(0deg);
+    // Resize hint
+    .k-resize-hint {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        .k-resize-hint-handle {
+            width: auto;
+            height: 20px;
+            align-self: stretch;
         }
-        100% {
-            transform: rotate(360deg);
+        .k-resize-hint-marker {
+            width: 2px;
+            height: auto;
+            flex: 1 1 auto;
         }
     }
-}
+    .k-resize-hint-vertical {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
 
-// #endregion
-// #region @import "./_selection.scss"; -> scss/styles/_selection.scss
-@mixin kendo-core--styles--selection() {
-    .k-marquee {
-        position: absolute;
-        z-index: 100000;
-    }
+        .k-resize-hint-handle {
+            width: 20px;
+            height: auto;
+            align-self: stretch;
+        }
 
-    .k-marquee-color,
-    .k-marquee-text {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
+        .k-resize-hint-marker {
+            width: auto;
+            height: 2px;
+            flex: 1 1 auto;
+        }
     }
 
-    .k-marquee-color {
-        color: $kendo-selected-text;
-        background-color: k-get-theme-color-var( primary-60, #{$kendo-selected-bg} );
-        border-color: k-get-theme-color-var( primary-100, #{$kendo-selected-border} );
-        opacity: .6;
-    }
-    .k-marquee-text {
-        color: $kendo-selected-text;
-    }
 }
+
 // #endregion
 // #region @import "./_colors.scss"; -> scss/styles/_colors.scss
 @mixin kendo-core--styles--colors() {
@@ -4755,12 +5516,14 @@ $_imported: () !default;
 @mixin kendo-core--styles() {
     @include kendo-core--styles--colors();
     @include kendo-core--styles--accessibility();
+    @include kendo-core--styles--animations();
     @include kendo-core--styles--asp-fallback();
     @include kendo-core--styles--layout();
     @include kendo-core--styles--normalize();
     @include kendo-core--styles--base();
-    @include kendo-core--styles--loading();
     @include kendo-core--styles--selection();
+    @include kendo-core--styles--scrollbar();
+    @include kendo-core--styles--resizing();
 }
 
 // #endregion
@@ -5249,6 +6012,7 @@ $kendo-enable-shadows: true !default;
 $kendo-enable-rounded: true !default;
 $kendo-enable-gradients: true !default;
 $kendo-enable-transitions: true !default;
+$kendo-nested-disabled: false !default;
 
 // Equilateral triangle variables
 // stylelint-disable number-max-precision
@@ -5256,10 +6020,6 @@ $equilateral-index: 1.7320508076 !default;
 $equilateral-height: 0.8660254038 !default;
 // stylelint-enable number-max-precision
 
-// Loading
-$kendo-loading-opacity: .3 !default;
-$kendo-zindex-loading: 100 !default;
-
 // #endregion
 
 // #endregion