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

package/scss/loader/_layout.scss

@@ -444,8 +444,11 @@
         }
     }
 
+}
 
-
+// Legacy implementation of the loading icon inside inputs and pickers
+// Replace with loader component
+@mixin kendo-loading--layout-base() {
 
     // Loading mask
     .k-loading-mask,
@@ -491,9 +494,91 @@
         opacity: $kendo-loading-opacity;
     }
 
-}
+    // 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;
+        }
+    }
+
+    .k-i-loading::before,
+    .k-i-loading::after,
+    .k-loading-image::before,
+    .k-loading-image::after {
+        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;
+    }
 
+    .k-icon.k-i-loading::before,
+    .k-icon.k-i-loading::after {
+        content: "";
+    }
+
+    .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-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-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;
+    }
+
+    // Loading animation
+    @keyframes k-loading-animation {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
+}
 
 @mixin kendo-loader--layout() {
     @include kendo-loader--layout-base();
+    @include kendo-loading--layout-base();
 }

package/scss/loader/_variables.scss

@@ -124,3 +124,6 @@ $kendo-loading-text: currentColor !default;
 /// The opacity of the Loading indicator.
 /// @group loading
 $kendo-loading-opacity: .3 !default;
+/// The z-index of the Loading indicator.
+/// @group loading
+$kendo-zindex-loading: 100 !default;

package/scss/map/_index.scss

@@ -15,7 +15,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 // @import "../utils/_position.scss";
 @import "../button/_index.scss";
 @import "../scroller/_index.scss";

package/scss/maskedtextbox/_index.scss

@@ -13,7 +13,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../input/_index.scss";
 @import "../floating-label/_index.scss";
 @import "../icons/_index.scss";

package/scss/mediaplayer/_index.scss

@@ -14,7 +14,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../slider/_index.scss";
 @import "../toolbar/_index.scss";
 @import "../icons/_index.scss";

package/scss/menu/_index.scss

@@ -15,7 +15,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../popup/_index.scss";
 @import "../list/_index.scss";
 @import "../icons/_index.scss";

package/scss/messagebox/_index.scss

@@ -12,7 +12,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../icons/_index.scss";
 
 

package/scss/multiselect/_index.scss

@@ -17,7 +17,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../button/_index.scss";
 @import "../input/_index.scss";
 @import "../chip/_index.scss";

package/scss/notification/_index.scss

@@ -13,7 +13,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../popup/_index.scss";
 @import "../icons/_index.scss";
 

package/scss/numerictextbox/_index.scss

@@ -13,7 +13,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../input/_index.scss";
 @import "../floating-label/_index.scss";
 @import "../icons/_index.scss";

package/scss/orgchart/_index.scss

@@ -20,7 +20,6 @@ $_kendo-module-meta: (
 
 // Dependencies
 // @import "../utils/_index.scss";
-@import "../common/_index.scss";
 @import "../icons/_index.scss";
 @import "../forms/_index.scss";
 @import "../textbox/_index.scss";

package/scss/pager/_index.scss

@@ -14,7 +14,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../icons/_index.scss";
 @import "../button/_index.scss";

package/scss/panel/_index.scss

@@ -0,0 +1,36 @@
+@import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "panel",
+    dependencies: ()
+);
+
+
+// Dependencies
+
+
+// Component
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";
+
+
+// Register
+@import "../core/module-system/index.import.scss";
+@include module-register( $_kendo-module-meta... );
+
+
+// Expose
+@mixin kendo-panel--styles() {
+    @include module-render( "panel" ) {
+        @include kendo-panel--layout();
+        @include kendo-panel--theme();
+    }
+}
+
+@if $kendo-auto-bootstrap {
+    @include kendo-panel--styles();
+}

package/scss/panel/_layout.scss

@@ -0,0 +1,30 @@
+@mixin kendo-panel--layout--base() {
+        // Panels
+        .k-block,
+        .k-panel {
+            @include border-radius( $kendo-panel-border-radius );
+            padding: 0;
+            border-width: $kendo-panel-border-width;
+            border-style: $kendo-panel-border-style;
+            box-sizing: border-box;
+
+            > .k-header {
+                @include border-top-radius( $kendo-panel-border-radius );
+                @include fill(
+                    var( --kendo-component-text, #{$kendo-component-text} ),
+                    var( --kendo-component-bg, #{$kendo-component-bg} ),
+                    var( --kendo-component-border, #{$kendo-component-border} )
+                );
+                padding-inline: $kendo-panel-header-padding-inline;
+                padding-block: $kendo-panel-header-padding-block;
+            }
+            > .k-content {
+                padding-inline: $kendo-panel-content-padding-inline;
+                padding-block: $kendo-panel-content-padding-block;
+            }
+        }
+}
+
+@mixin kendo-panel--layout() {
+    @include kendo-panel--layout--base();
+}

package/scss/panel/_theme.scss

@@ -0,0 +1,23 @@
+@mixin kendo-panel--theme--base() {
+    // Panels
+    .k-block,
+    .k-panel {
+        @include fill(
+            $kendo-panel-text,
+            $kendo-panel-bg,
+            $kendo-panel-border
+        );
+    }
+
+    :where(.k-content) {
+        @include fill(
+            $kendo-panel-text,
+            $kendo-panel-bg,
+            $kendo-panel-border
+        );
+    }
+}
+
+@mixin kendo-panel--theme() {
+    @include kendo-panel--theme--base();
+}

package/scss/panel/_variables.scss

@@ -0,0 +1,34 @@
+
+/// The border radius of the Panel.
+/// @group panel
+$kendo-panel-border-radius: k-border-radius(md);
+/// The width of the border around the Panel.
+/// @group panel
+$kendo-panel-border-width: 1px;
+/// The style of the border around the Panel.
+/// @group panel
+$kendo-panel-border-style: solid;
+
+/// The inline padding of the Panel header.
+/// @group panel
+$kendo-panel-header-padding-inline: k-spacing(2);
+/// The block padding of the Panel header.
+/// @group panel
+$kendo-panel-header-padding-block: k-spacing(1);
+
+/// The inline padding of the Panel content.
+/// @group panel
+$kendo-panel-content-padding-inline: k-spacing(2);
+/// The block padding of the Panel content.
+/// @group panel
+$kendo-panel-content-padding-block: k-spacing(1);
+
+/// The text color of the Panel.
+/// @group panel
+$kendo-panel-text: var(--kendo-component-text, #{$kendo-component-text});
+/// The background color of the Panel.
+/// @group panel
+$kendo-panel-bg: var(--kendo-component-bg, #{$kendo-component-bg});
+/// The color of the border around the Panel.
+/// @group panel
+$kendo-panel-border: var(--kendo-component-border, #{$kendo-component-border});

package/scss/panelbar/_index.scss

@@ -13,7 +13,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../icons/_index.scss";
 @import "../list/_index.scss";
 

package/scss/pdf-viewer/_index.scss

@@ -18,7 +18,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 // @import "../utils/_index.scss";
 @import "../combobox/_index.scss";
 @import "../toolbar/_index.scss";

package/scss/pivotgrid/_index.scss

@@ -16,7 +16,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../dialog/_index.scss";
 @import "../treeview/_index.scss";
 @import "../grid/_index.scss";

package/scss/popover/_index.scss

@@ -13,7 +13,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../card/_index.scss";
 @import "../popup/_index.scss";
 

package/scss/popup/_index.scss

@@ -10,7 +10,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 
 
 // Component

package/scss/popup/_layout.scss

@@ -1,5 +1,30 @@
 @mixin kendo-popup--layout-base() {
 
+    // Animation Container
+    .k-animation-container {
+        position: absolute;
+        overflow: hidden;
+        z-index: 100;
+
+        &-fixed {
+            position: fixed;
+        }
+
+        &-relative {
+            position: relative;
+            display: inline-block;
+        }
+    }
+
+    .k-animation-container {
+        @include border-bottom-radius-only( $kendo-border-radius-md );
+    }
+
+    .k-animation-container-shown {
+        overflow: visible;
+    }
+
+    // Popup
     .k-popup {
         @include border-radius( $kendo-popup-border-radius );
         margin: 0;
@@ -19,13 +44,6 @@
             outline: none;
         }
     }
-    .k-animation-container {
-        @include border-bottom-radius-only( k-border-radius(md) );
-    }
-
-    .k-animation-container-shown {
-        overflow: visible;
-    }
 
     .k-popup > .k-colorpalette {
         padding-block: $kendo-popup-content-padding-y;
@@ -50,7 +68,6 @@
         border-width: 0;
     }
 
-
     // Legacy shadow
     .k-shadow {
         box-shadow: $kendo-popup-shadow;

package/scss/progressbar/_index.scss

@@ -10,7 +10,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 
 
 // Component

package/scss/prompt/_index.scss

@@ -8,11 +8,6 @@ $_kendo-module-meta: (
     dependencies: ()
 );
 
-
-// Dependencies
-@import "../common/_index.scss";
-
-
 // Component
 @import "./_variables.scss";
 @import "./_layout.scss";

package/scss/radio/_layout.scss

@@ -57,7 +57,7 @@
     // Disabled state
     .k-radio:disabled,
     .k-radio.k-disabled {
-        @include disabled( $kendo-disabled-styling );
+        @include disabled( $kendo-disabled-styling... );
     }
     .k-radio:disabled:checked,
     .k-radio.k-disabled.k-checked {

package/scss/rating/_index.scss

@@ -12,7 +12,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../icons/_index.scss";
 
 

package/scss/responsivepanel/_index.scss

@@ -12,7 +12,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../icons/_index.scss";
 
 

package/scss/ripple/_index.scss

@@ -10,7 +10,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 
 
 // Component

package/scss/scheduler/_index.scss

@@ -13,12 +13,12 @@ $_kendo-module-meta: (
         "dropdown-list",
         "icon",
         "tooltip",
+        "time-marker"
     )
 );
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../icons/_index.scss";
 @import "../adaptive/_index.scss";
 @import "../button/_index.scss";

package/scss/scroller/_index.scss

@@ -12,7 +12,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../icons/_index.scss";
 
 

package/scss/scrollview/_index.scss

@@ -13,7 +13,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../button/_index.scss";
 @import "../icons/_index.scss";
 

package/scss/slider/_index.scss

@@ -14,7 +14,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../button/_index.scss";
 @import "../tooltip/_index.scss";
 @import "../icons/_index.scss";

package/scss/splitter/_index.scss

@@ -14,7 +14,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../icons/_index.scss";
 
 

package/scss/spreadsheet/_index.scss

@@ -26,7 +26,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../button/_index.scss";
 @import "../checkbox/_index.scss";
 @import "../radio/_index.scss";

package/scss/stepper/_index.scss

@@ -13,7 +13,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../icons/_index.scss";
 @import "../progressbar/_index.scss";
 

package/scss/stepper/_variables.scss

@@ -103,7 +103,7 @@ $kendo-stepper-indicator-hover-border: null !default;
 $kendo-stepper-indicator-disabled-bg: null !default;
 /// The text color of the disabled Stepper indicator.
 /// @group stepper
-$kendo-stepper-indicator-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), $kendo-disabled-text) !default;
+$kendo-stepper-indicator-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), #8f8f8f) !default;
 /// The border color of the disabled Stepper indicator.
 /// @group stepper
 $kendo-stepper-indicator-disabled-border: null !default;
@@ -182,7 +182,7 @@ $kendo-stepper-label-error-text: $kendo-color-error !default;
 $kendo-stepper-label-hover-text: if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-stepper-text, 2 )) !default;
 /// The text color of the disabled Stepper label.
 /// @group stepper
-$kendo-stepper-label-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), $kendo-disabled-text) !default;
+$kendo-stepper-label-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), #8f8f8f) !default;
 
 /// The text color of the optional Stepper label.
 /// @group stepper

package/scss/switch/_index.scss

@@ -10,7 +10,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 // @import "../utils/_border.scss";
 
 

package/scss/table/_index.scss

@@ -10,7 +10,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 
 
 // Component

package/scss/tabstrip/_index.scss

@@ -14,7 +14,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../button/_index.scss";
 @import "../icons/_index.scss";
 @import "../list/_index.scss";

package/scss/taskboard/_index.scss

@@ -19,7 +19,6 @@ $_kendo-module-meta: (
 
 // Dependencies
 // @import "../utils/_index.scss";
-@import "../common/_index.scss";
 @import "../icons/_index.scss";
 @import "../forms/_index.scss";
 @import "../input/_index.scss";

package/scss/taskboard/_theme.scss

@@ -93,7 +93,7 @@
         }
 
         &.k-disabled {
-            @include disabled( $kendo-disabled-styling );
+            @include disabled( $kendo-disabled-styling... );
         }
     }
 

package/scss/textarea/_index.scss

@@ -13,7 +13,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../input/_index.scss";
 @import "../floating-label/_index.scss";
 

package/scss/textbox/_index.scss

@@ -13,7 +13,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../input/_index.scss";
 @import "../floating-label/_index.scss";
 

package/scss/tilelayout/_index.scss

@@ -13,7 +13,6 @@ $_kendo-module-meta: (
 
 
 // Dependencies
-@import "../common/_index.scss";
 @import "../card/_index.scss";
 @import "../icons/_index.scss";