@progress/kendo-theme-classic 4.43.1-dev.5 → 4.44.0

package/modules/@progress/kendo-theme-default/scss/common/_loading.scss

@@ -1,26 +1,23 @@
 @include exports( "common/loading" ) {
 
-    // Loading indicator
-    .k-loading {
-        width: 64px;
-        height: 64px;
-        display: block;
-
-        .animate {
-            animation: loading 2s infinite linear;
-        }
-    }
-
-
     // Loading mask
     .k-loading-mask,
     .k-loading-image,
     .k-loading-color {
         width: 100%;
         height: 100%;
+        box-sizing: border-box;
         position: absolute;
         top: 0;
         left: 0;
+
+        *,
+        *::before,
+        *::after,
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
     }
 
     .k-loading-mask {
@@ -51,6 +48,11 @@
         background-color: transparent;
         box-sizing: border-box;
         color: currentColor;
+
+        &::before,
+        &::after {
+            box-sizing: border-box;
+        }
     }
 
     .k-i-loading::before,
@@ -100,7 +102,7 @@
         content: "";
         // See https://github.com/telerik/kendo-themes/issues/1925
         border-width: 1px; // TODO: Remove once we drop IE support
-        border-width: #{"max( 1px, .015em )"}; // sass-lint:disable-line no-duplicate-properties
+        border-width: clamp( .015em, 1px, 1px ); // sass-lint:disable-line no-duplicate-properties
         font-size: 4em;
     }
 }

package/modules/@progress/kendo-theme-default/scss/dateinput/_layout.scss

@@ -22,6 +22,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {}
@@ -46,7 +52,7 @@
         }
         .k-link {
             padding: 0 $picker-select-padding-x;
-            min-width: $icon-size;
+            min-width: $spinner-min-width;
             flex: 1 1 auto;
             display: block;
             overflow: hidden;

package/modules/@progress/kendo-theme-default/scss/datepicker/_layout.scss

@@ -22,6 +22,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {}

package/modules/@progress/kendo-theme-default/scss/daterangepicker/_layout.scss

@@ -7,6 +7,12 @@
         flex-flow: row nowrap;
         align-items: flex-start;
         gap: map-get( $spacing, 2 );
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
 

package/modules/@progress/kendo-theme-default/scss/datetimepicker/_layout.scss

@@ -22,6 +22,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {}
@@ -32,7 +38,6 @@
             border-width: 0;
             border-inline-start-width: $picker-select-border-width;
             border-style: solid;
-            box-sizing: border-box;
             outline: 0;
             display: flex;
             align-items: stretch;
@@ -51,7 +56,6 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            box-sizing: border-box;
         }
     }
 

package/modules/@progress/kendo-theme-default/scss/drawer/_layout.scss

@@ -26,6 +26,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         // Borders
         .k-drawer-mini &.k-drawer-start,
         .k-drawer-expanded &.k-drawer-start,

package/modules/@progress/kendo-theme-default/scss/dropdownlist/_layout.scss

@@ -22,6 +22,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {}
@@ -42,7 +48,6 @@
             border-inline-start-width: $picker-select-border-width;
             border-style: solid;
             border-color: transparent;
-            box-sizing: border-box;
             outline: 0;
             display: flex;
             flex-flow: row nowrap;

package/modules/@progress/kendo-theme-default/scss/expansion-panel/_layout.scss

@@ -15,6 +15,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-rtl &,
         &.k-rtl,
         &[dir = "rtl"] {
@@ -54,7 +60,6 @@
     // Expander content
     .k-expander-content {
         padding: $expander-content-padding-y $expander-content-padding-x;
-        box-sizing: border-box;
     }
 
     // Multiple expanders

package/modules/@progress/kendo-theme-default/scss/fab/_layout.scss

@@ -23,6 +23,12 @@
         cursor: pointer;
         outline: none;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         &:focus {
             outline: none;
         }

package/modules/@progress/kendo-theme-default/scss/filter/_layout.scss

@@ -1,9 +1,17 @@
 @include exports("filter/layout") {
+
     .k-filter {
+        box-sizing: border-box;
         border-width: 0;
         display: inline-block;
         background-color: transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         ul {
             padding: 0;
 

package/modules/@progress/kendo-theme-default/scss/floating-label/_layout.scss

@@ -6,12 +6,19 @@
     .k-floating-label-container {
         padding-top: $floating-label-height;
         width: $input-default-width;
+        box-sizing: border-box;
         display: inline-flex;
         vertical-align: middle;
         position: relative;
         flex-direction: column;
         justify-content: stretch;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         > .k-label {
             max-width: 90%;
             font-size: $floating-label-font-size;

package/modules/@progress/kendo-theme-default/scss/grid/_layout.scss

@@ -1061,11 +1061,12 @@
     }
 
     .k-grid-norecords-template {
+        box-sizing: border-box;
+        margin: 0 auto;
         width: 20em;
         height: 4em;
-        line-height: 4em;
-        margin: 0 auto;
         border: 1px solid;
+        line-height: 4em;
     }
 
     .k-header > .k-cell-inner {
@@ -1337,7 +1338,7 @@
             padding: $grid-column-menu-popup-padding-y $grid-column-menu-popup-padding-x;
         }
         .k-popup > & {
-            width: 100%;
+            max-width: 100%;
         }
 
         .k-actions {

package/modules/@progress/kendo-theme-default/scss/grid/_theme.scss

@@ -73,8 +73,8 @@
         }
 
         // Hover state
-        tbody tr:hover,
-        tbody tr.k-state-hover {
+        tbody tr:not(.k-detail-row):hover,
+        tbody tr:not(.k-detail-row).k-state-hover {
             color: $grid-hovered-text;
             background-color: $grid-hovered-bg;
         }
@@ -144,12 +144,6 @@
                 @include fill( $bg: $grid-sticky-selected-alt-bg );
             }
 
-            // Hovered state
-            .k-state-hover td,
-            tr:hover td {
-                @include fill( $bg: $grid-sticky-hovered-bg );
-            }
-
             // Selected hover
             .k-state-selected:hover td,
             .k-state-selected.k-state-hover td {

package/modules/@progress/kendo-theme-default/scss/imageeditor/_layout.scss

@@ -13,6 +13,12 @@
         line-height: $imageeditor-line-height;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
 

package/modules/@progress/kendo-theme-default/scss/list/_layout.scss

@@ -66,7 +66,7 @@
         display: flex;
         align-items: center;
         align-content: center;
-        gap: map-get( $spacing, 1 );
+        gap: $icon-spacing;
         cursor: default;
         position: relative;
         transition-property: color, background-color, outline-color, box-shadow;
@@ -120,21 +120,6 @@
         }
     }
 
-    .k-dropdown-button .k-popup {
-        .k-item {
-            cursor: pointer;
-        }
-    }
-
-    // SplitButton
-    // TODO: Wait for final design + revise
-    .k-split-button,
-    .k-dropdown-button {
-        .k-list .k-item:focus {
-            outline: none;
-        }
-    }
-
     .k-virtual-content {
         overflow-y: scroll;
         -webkit-overflow-scrolling: touch;
@@ -157,18 +142,15 @@
 
 
     // No data
-    .k-list-container {
-        .k-no-data {
-            min-height: 138px;
-            width: 100%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-transform: uppercase;
-            font-weight: lighter;
-            text-align: center;
-            white-space: normal;
-        }
+    .k-no-data {
+        min-height: 140px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: lighter;
+        text-align: center;
+        white-space: normal;
     }
 
 

package/modules/@progress/kendo-theme-default/scss/list/_theme.scss

@@ -94,12 +94,12 @@
             background: transparent;
         }
 
+    }
 
-        // No data
-        .k-no-data {
-            color: $list-no-data-text;
-        }
 
+    // No data
+    .k-no-data {
+        color: $list-no-data-text;
     }
 
 }

package/modules/@progress/kendo-theme-default/scss/listbox/_layout.scss

@@ -72,9 +72,18 @@
 
         .k-list-scroller {
             width: 100%;
+            height: inherit;
             border-width: $listbox-border-width;
             border-style: solid;
             box-sizing: border-box;
+
+            .k-list-scroller {
+                border-width: 0;
+            }
+
+            .k-list {
+                height: inherit;
+            }
         }
 
         .k-drop-hint {

package/modules/@progress/kendo-theme-default/scss/map/_layout.scss

@@ -3,12 +3,19 @@
     // Layout
     .k-map {
         height: 600px;
+        box-sizing: border-box;
         border-width: $map-border-width;
         border-style: solid;
         font-size: $map-font-size;
         line-height: $map-line-height;
         font-family: $map-font-family;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Scroll
         .km-scroll-wrapper {

package/modules/@progress/kendo-theme-default/scss/maskedtextbox/_layout.scss

@@ -22,6 +22,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {}

package/modules/@progress/kendo-theme-default/scss/mediaplayer/_layout.scss

@@ -14,6 +14,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         > iframe {
             width: 100%;
             height: 100%;
@@ -62,6 +68,9 @@
         padding: 0 (14px / 2);
         align-items: center;
     }
+    .k-mediaplayer-volume {
+        width: 100px;
+    }
 
 
     // Seekbar
@@ -69,8 +78,9 @@
         width: 100%;
         position: absolute;
         z-index: 3;
-        top: -17px;
+        top: 0;
         left: 0;
+        transform: translateY( -50% );
     }
     .k-mediaplayer-seekbar .k-slider-track {
         // sass-lint:disable no-important
@@ -78,6 +88,9 @@
         // sass-lint:enable no-important
         border-radius: 0;
     }
+    .k-mediaplayer-seekbar .k-slider-selection {
+        border-radius: 0;
+    }
 
     .k-mediaplayer-fullscreen {
         z-index: 10000;

package/modules/@progress/kendo-theme-default/scss/multiselect/_layout.scss

@@ -19,6 +19,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-loading-hidden {
             visibility: hidden;
         }
@@ -64,8 +70,8 @@
 
             // Token
             .k-button {
-                min-height: calc( #{$form-line-height-em} + #{$button-padding-y-sm} + 2px );
-                padding: ($button-padding-y-sm / 2) ($button-padding-x / 2);
+                min-height: calc( #{$form-line-height-em} + #{$button-padding-y /2} + 2px );
+                padding: ($button-padding-y / 4) ($button-padding-x / 2);
                 margin: $padding-y-sm 0 0 $padding-y-sm;
                 cursor: default;
                 display: inline-flex;

package/modules/@progress/kendo-theme-default/scss/notification/_layout.scss

@@ -33,6 +33,12 @@
         display: block;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     .k-notification-wrap {

package/modules/@progress/kendo-theme-default/scss/numerictextbox/_layout.scss

@@ -22,6 +22,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Input
         .k-input {
@@ -36,7 +42,6 @@
             border-width: 0;
             border-inline-start-width: $picker-select-border-width;
             border-style: solid;
-            box-sizing: border-box;
             outline: 0;
             display: flex;
             flex-direction: column;
@@ -50,7 +55,6 @@
         .k-link {
             padding: 0 $picker-select-padding-x;
             min-width: $spinner-min-width;
-            box-sizing: border-box;
             flex: 1 1 auto;
             display: block;
             overflow: hidden;

package/modules/@progress/kendo-theme-default/scss/orgchart/_layout.scss

@@ -9,6 +9,12 @@
         font-family: $orgchart-font-family;
         line-height: $orgchart-line-height;
         overflow: auto;
+
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
     }
 
     .k-orgchart-container {

package/modules/@progress/kendo-theme-default/scss/pager/_layout.scss

@@ -18,6 +18,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
         .k-link {
             text-decoration: none;
             outline: 0;
@@ -70,7 +76,6 @@
     %base-pager-item {
         min-width: $button-calc-size;
         height: $button-calc-size;
-        box-sizing: border-box;
         color: inherit;
         text-align: center;
         display: inline-flex;
@@ -230,7 +235,6 @@
             }
 
             height: $button-calc-size;
-            box-sizing: border-box;
             border-color: inherit;
         }
 

package/modules/@progress/kendo-theme-default/scss/panelbar/_layout.scss

@@ -16,6 +16,12 @@
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
+        *,
+        *::before,
+        *::after {
+            box-sizing: border-box;
+        }
+
 
         // Root
         > .k-item,