@progress/kendo-theme-default 6.1.1-dev.8 → 6.2.0

package/scss/colorgradient/_layout.scss

@@ -4,7 +4,8 @@
     .k-colorgradient {
         @include border-radius( $kendo-color-gradient-border-radius );
         width: $kendo-color-gradient-width;
-        padding: $kendo-color-gradient-padding-y $kendo-color-gradient-padding-x;
+        padding-block: $kendo-color-gradient-padding-y;
+        padding-inline: $kendo-color-gradient-padding-x;
         border-style: solid;
         border-width: $kendo-color-gradient-border-width;
         box-sizing: border-box;
@@ -164,12 +165,14 @@
             align-items: center;
             gap: k-math-div( $kendo-color-gradient-contrast-spacer, 2 );
 
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 vertical-align: middle;
             }
 
             // Needed for the double check icons
             .k-icon + .k-icon,
+            .k-svg-icon + .k-svg-icon,
             .k-icon-wrapper-host + .k-icon-wrapper-host .k-icon {
                 margin-inline-start: -13px;
             }
@@ -184,4 +187,3 @@
     }
 
 }
-

package/scss/colorpalette/_index.scss

@@ -1,4 +1,14 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "color-palette",
+    dependencies: (
+        // "utils/flex-grid",
+    )
+);
 
 
 // Dependencies

package/scss/colorpicker/_index.scss

@@ -1,4 +1,18 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "color-picker",
+    dependencies: (
+        "button",
+        "color-editor",
+        "icon",
+        "input",
+        "popup",
+    )
+);
 
 
 // Dependencies

package/scss/colorpicker/_layout.scss

@@ -7,7 +7,7 @@
 
     // Alias
     .k-colorpicker {
-        @extend .k-color-picker;
+        @extend .k-color-picker !optional;
     }
 
 }

package/scss/combobox/_index.scss

@@ -1,4 +1,17 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "combobox",
+    dependencies: (
+        "icon",
+        "input",
+        "list",
+        "popup",
+    )
+);
 
 
 // Dependencies

package/scss/common/_base.scss

@@ -118,8 +118,7 @@
 
     // Disabled state
     .k-disabled,
-    .k-widget[disabled],
-    .k-disabled {
+    .k-widget[disabled] {
         @include disabled( $kendo-disabled-styling );
 
 

package/scss/common/_dragdrop.scss

@@ -3,7 +3,8 @@
     // Layout
     .k-drag-clue {
         @include border-radius( $kendo-drag-hint-border-radius );
-        padding: $kendo-drag-hint-padding-y $kendo-drag-hint-padding-x;
+        padding-block: $kendo-drag-hint-padding-y;
+        padding-inline: $kendo-drag-hint-padding-x;
         border-width: $kendo-drag-hint-border-width;
         border-style: if( $kendo-drag-hint-border-width == null, null, solid );
         box-sizing: border-box;

package/scss/dataviz/_index.scss

@@ -1,4 +1,16 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "dataviz",
+    dependencies: (
+        "icon",
+        "popup",
+        "tooltip",
+    )
+);
 
 
 // Dependencies

package/scss/dataviz/_layout.scss

@@ -85,7 +85,8 @@
         @include border-radius( $kendo-border-radius-md );
         font-size: $kendo-chart-tooltip-font-size;
         line-height: $kendo-line-height-md;
-        padding: $kendo-tooltip-padding-y $kendo-tooltip-padding-x;
+        padding-block: $kendo-tooltip-padding-y;
+        padding-inline: $kendo-tooltip-padding-x;
     }
 
     .k-chart-tooltip th {
@@ -96,8 +97,9 @@
 
     .k-chart-tooltip td {
         width: auto;
-        text-align: left;
-        padding: $kendo-padding-sm-y $kendo-padding-sm-x;
+        text-align: start;
+        padding-block: $kendo-padding-sm-y;
+        padding-inline: $kendo-padding-sm-x;
         line-height: $kendo-line-height-md;
         vertical-align: middle;
     }
@@ -303,7 +305,8 @@
 
         // Title
         .k-treemap-title {
-            padding: $kendo-padding-sm-y $kendo-padding-sm-x;
+            padding-block: $kendo-padding-sm-y;
+            padding-inline: $kendo-padding-sm-x;
             border-width: 0 0 1px;
             border-style: solid;
             border-color: inherit;
@@ -312,7 +315,8 @@
             background-repeat: repeat-x;
         }
         .k-treemap-title-vertical {
-            padding: $kendo-padding-sm-x $kendo-padding-sm-y;
+            padding-block: $kendo-padding-sm-x;
+            padding-inline: $kendo-padding-sm-y;
             width: $kendo-line-height-em;
             white-space: nowrap;
             overflow: hidden;
@@ -361,7 +365,7 @@
 @include exports("dataviz/gauge/layout") {
 
     .k-gauge {
-        text-align: left;
+        text-align: start;
         position: relative;
     }
 

package/scss/dateinput/_index.scss

@@ -1,4 +1,15 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "date-input",
+    dependencies: (
+        "icon",
+        "input",
+    )
+);
 
 
 // Dependencies

package/scss/datepicker/_index.scss

@@ -1,4 +1,17 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "date-picker",
+    dependencies: (
+        "calendar",
+        "icon",
+        "input",
+        "popup",
+    )
+);
 
 
 // Dependencies

package/scss/daterangepicker/_index.scss

@@ -1,4 +1,21 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "date-range-picker",
+    dependencies: (
+        "calendar",
+        "date-input",
+        "date-picker",
+        "icon",
+        "input",
+        "popup",
+    )
+);
+
+
 
 
 // Dependencies

package/scss/daterangepicker/_layout.scss

@@ -22,7 +22,7 @@
 
     // Angular specific
     kendo-daterange {
-        // @extend .k-daterangepicker;
+        // @extend .k-daterangepicker !optional;
     }
 
 
@@ -37,7 +37,7 @@
 
     // Alias
     .k-daterangepicker {
-        @extend .k-daterange-picker;
+        @extend .k-daterange-picker !optional;
     }
 
 }

package/scss/datetimepicker/_index.scss

@@ -1,4 +1,21 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "date-time-picker",
+    dependencies: (
+        "calendar",
+        "date-input",
+        "date-picker",
+        "icon",
+        "input",
+        "list",
+        "popup",
+        "time-selector",
+    )
+);
 
 
 // Dependencies

package/scss/datetimepicker/_layout.scss

@@ -15,7 +15,8 @@
         overflow: hidden;
 
         .k-datetime-buttongroup {
-            padding: $kendo-actions-padding-y $kendo-actions-padding-x;
+            padding-block: $kendo-actions-padding-y;
+            padding-inline: $kendo-actions-padding-x;
         }
 
         .k-calendar,

package/scss/dialog/_index.scss

@@ -1,4 +1,16 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "dialog",
+    dependencies: (
+        "button",
+        "icon",
+        "window",
+    )
+);
 
 
 // Dependencies

package/scss/dialog/_layout.scss

@@ -53,7 +53,8 @@
     // Buttons
     .k-dialog-actions {
         @include border-bottom-radius( $kendo-window-border-radius );
-        padding: $kendo-dialog-buttongroup-padding-y $kendo-dialog-buttongroup-padding-x;
+        padding-block: $kendo-dialog-buttongroup-padding-y;
+        padding-inline: $kendo-dialog-buttongroup-padding-x;
         border-width: $kendo-dialog-buttongroup-border-width 0 0;
         border-style: solid;
         border-color: inherit;

package/scss/draggable/_index.scss

@@ -1,4 +1,12 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "draggable",
+    dependencies: ()
+);
 
 
 // Dependencies

package/scss/draggable/_layout.scss

@@ -3,7 +3,8 @@
     // Layout
     .k-drag-clue {
         @include border-radius( $kendo-drag-hint-border-radius );
-        padding: $kendo-drag-hint-padding-y $kendo-drag-hint-padding-x;
+        padding-block: $kendo-drag-hint-padding-y;
+        padding-inline: $kendo-drag-hint-padding-x;
         border-width: $kendo-drag-hint-border-width;
         border-style: if( $kendo-drag-hint-border-width == null, null, solid );
         box-sizing: border-box;

package/scss/drawer/_index.scss

@@ -1,4 +1,16 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "drawer",
+    dependencies: (
+        "icon",
+        "list",
+        "overlay",
+    )
+);
 
 
 // Dependencies

package/scss/drawer/_layout.scss

@@ -130,7 +130,8 @@
         align-items: stretch;
     }
     .k-drawer-item {
-        padding: $kendo-drawer-item-padding-y $kendo-drawer-item-padding-x;
+        padding-block: $kendo-drawer-item-padding-y;
+        padding-inline: $kendo-drawer-item-padding-x;
         outline: 0;
         color: inherit;
         font-size: $kendo-drawer-item-font-size;
@@ -141,8 +142,10 @@
         cursor: pointer;
 
         > .k-drawer-link {
-            margin: (-$kendo-drawer-item-padding-y) (-$kendo-drawer-item-padding-x);
-            padding: $kendo-drawer-item-padding-y $kendo-drawer-item-padding-x;
+            margin-block: (-$kendo-drawer-item-padding-y);
+            margin-inline: (-$kendo-drawer-item-padding-x);
+            padding-block: $kendo-drawer-item-padding-y;
+            padding-inline: $kendo-drawer-item-padding-x;
             color: inherit;
             display: flex;
             flex-flow: row nowrap;

package/scss/dropdowngrid/_index.scss

@@ -1,4 +1,17 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "dropdown-grid",
+    dependencies: (
+        "icon",
+        "input",
+        "popup",
+        "table",
+    )
+);
 
 
 // Dependencies

package/scss/dropdownlist/_index.scss

@@ -1,4 +1,17 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "dropdown-list",
+    dependencies: (
+        "icon",
+        "input",
+        "list",
+        "popup",
+    )
+);
 
 
 // Dependencies

package/scss/dropdowntree/_index.scss

@@ -1,4 +1,17 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "dropdown-tree",
+    dependencies: (
+        "icon",
+        "input",
+        "popup",
+        "treeview",
+    )
+);
 
 
 // Dependencies

package/scss/dropdowntree/_layout.scss

@@ -12,7 +12,8 @@
         }
 
         .k-treeview {
-            padding: $kendo-dropdowntree-popup-padding-y $kendo-dropdowntree-popup-padding-x;
+            padding-block: $kendo-dropdowntree-popup-padding-y;
+            padding-inline: $kendo-dropdowntree-popup-padding-x;
         }
     }
 

package/scss/dropzone/_index.scss

@@ -1,4 +1,12 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "drop-zone",
+    dependencies: ()
+);
 
 
 // Dependencies

package/scss/dropzone/_layout.scss

@@ -9,7 +9,8 @@
 
     // Dropzpne inner
     .k-dropzone-inner {
-        padding: $kendo-dropzone-padding-y $kendo-dropzone-padding-x;
+        padding-block: $kendo-dropzone-padding-y;
+        padding-inline: $kendo-dropzone-padding-x;
         border-width: $kendo-dropzone-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -22,7 +23,6 @@
         align-items: center;
         justify-content: center;
         position: relative;
-        cursor: pointer;
 
         .k-icon,
         .k-dropzone-icon {
@@ -30,6 +30,11 @@
             font-size: $kendo-dropzone-icon-size;
         }
 
+        .k-svg-icon {
+            width: $kendo-dropzone-icon-size;
+            height: $kendo-dropzone-icon-size;
+        }
+
         .k-dropzone-hint {
             margin-bottom: $kendo-dropzone-hint-spacing;
             font-size: $kendo-dropzone-hint-font-size;

package/scss/editor/_index.scss

@@ -1,4 +1,23 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "editor",
+    dependencies: (
+        "button",
+        "checkbox",
+        "color-picker",
+        "combobox",
+        "dropdown-list",
+        "file-manager",
+        "icon",
+        "toolbar",
+        "upload",
+        "window",
+    )
+);
 
 
 // Dependencies

package/scss/editor/_layout.scss

@@ -31,7 +31,8 @@
     // Inline editor
     .k-editor-inline {
         @include border-radius( $kendo-border-radius-md );
-        padding: $kendo-padding-sm-y $kendo-padding-sm-x;
+        padding-block: $kendo-padding-sm-y;
+        padding-inline: $kendo-padding-sm-x;
         border: 1px solid transparent;
         word-wrap: break-word;
         overflow: auto;
@@ -138,11 +139,13 @@
         flex-shrink: 0;
 
         .k-editor-export {
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 margin-right: $kendo-editor-export-tool-icon-margin-x;
             }
 
             .k-icon,
+            .k-svg-icon,
             .k-export-tool-text {
                 vertical-align: middle;
             }
@@ -229,7 +232,8 @@
         th {
             min-width: 1em;
             border: 1px solid;
-            padding: 3px 5px;
+            padding-block: 3px;
+            padding-inline: 5px;
             vertical-align: top;
             box-sizing: border-box;
             position: relative;
@@ -237,7 +241,10 @@
 
         th {
             font-weight: bold;
-            text-align: left;
+            text-align: start;
+        }
+        td {
+            text-align: start;
         }
 
         // Give selected cells a blue overlay
@@ -257,8 +264,10 @@
     .k-edit-form-content {
         flex: 1 1 auto;
         overflow: auto;
-        margin: (-$kendo-window-inner-padding-y) (-$kendo-window-inner-padding-x);
-        padding: $kendo-window-inner-padding-y $kendo-window-inner-padding-x;
+        margin-block: (-$kendo-window-inner-padding-y);
+        margin-inline: (-$kendo-window-inner-padding-x);
+        padding-block: $kendo-window-inner-padding-y;
+        padding-inline: $kendo-window-inner-padding-x;
     }
 
 
@@ -377,7 +386,8 @@
                 flex: 1;
                 width: 100px; // fix width for Edge
             }
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 margin: 0;
                 position: static;
             }
@@ -413,7 +423,8 @@
             height: 390px;
             max-height: 50vh;
             margin: 0 0 k-map-get( $kendo-spacing, 4 ) 0;
-            padding: $kendo-padding-md-y $kendo-padding-md-x;
+            padding-block: $kendo-padding-md-y;
+            padding-inline: $kendo-padding-md-x;
             border-top-width: 0;
             overflow: auto;
         }
@@ -421,7 +432,8 @@
         .k-tile {
             width: 33%;
             height: 90px;
-            padding: $kendo-padding-md-y $kendo-padding-md-x;
+            padding-block: $kendo-padding-md-y;
+            padding-inline: $kendo-padding-md-x;
             box-sizing: border-box;
             white-space: nowrap;
             overflow: hidden;
@@ -473,7 +485,8 @@
             left: $kendo-input-padding-x;
             top: $kendo-input-padding-y;
 
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 position: static;
                 margin-top: 0;
             }
@@ -540,7 +553,8 @@
 
             td {
                 min-width: 1px;
-                padding: $kendo-padding-sm-y $kendo-padding-sm-x;
+                padding-block: $kendo-padding-sm-y;
+                padding-inline: $kendo-padding-sm-x;
             }
         }
 
@@ -604,7 +618,8 @@
                 .k-column-resize-marker {
                     width: 2px;
                     height: 100%;
-                    margin: 0 auto;
+                    margin-block: 0;
+                    margin-inline: auto;
                     display: none;
                     opacity: .8;
                 }

package/scss/expansion-panel/_index.scss

@@ -1,4 +1,16 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "expander",
+    dependencies: (
+        "icon",
+        "list",
+        // "utils/layout/display",
+    )
+);
 
 
 // Dependencies

package/scss/expansion-panel/_layout.scss

@@ -34,7 +34,8 @@
 
     // Header
     .k-expander-header {
-        padding: $kendo-expander-header-padding-y $kendo-expander-header-padding-x;
+        padding-block: $kendo-expander-header-padding-y;
+        padding-inline: $kendo-expander-header-padding-x;
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -59,7 +60,8 @@
 
     // Expander content
     .k-expander-content {
-        padding: $kendo-expander-content-padding-y $kendo-expander-content-padding-x;
+        padding-block: $kendo-expander-content-padding-y;
+        padding-inline: $kendo-expander-content-padding-x;
     }
 
     // Multiple expanders