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

package/scss/fab/_index.scss

@@ -1,4 +1,17 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "fab",
+    dependencies: (
+        "badge",
+        "button",
+        "icon",
+        // "utils/layout/position",
+    )
+);
 
 
 // Dependencies

package/scss/fab/_layout.scss

@@ -48,19 +48,23 @@
 
     // Sizes
     .k-fab-sm {
-        padding: $kendo-fab-sm-padding-y $kendo-fab-sm-padding-x;
+        padding-block: $kendo-fab-sm-padding-y;
+        padding-inline: $kendo-fab-sm-padding-x;
     }
     .k-fab-md {
-        padding: $kendo-fab-padding-y $kendo-fab-padding-x;
+        padding-block: $kendo-fab-padding-y;
+        padding-inline: $kendo-fab-padding-x;
     }
     .k-fab-lg {
-        padding: $kendo-fab-lg-padding-y $kendo-fab-lg-padding-x;
+        padding-block: $kendo-fab-lg-padding-y;
+        padding-inline: $kendo-fab-lg-padding-x;
     }
 
     // Items
     .k-fab-items {
         margin: 0;
-        padding: $kendo-fab-items-padding-y $kendo-fab-items-padding-x;
+        padding-block: $kendo-fab-items-padding-y;
+        padding-inline: $kendo-fab-items-padding-x;
         display: flex;
     }
 
@@ -105,7 +109,8 @@
     }
 
     .k-fab-item-text {
-        padding: $kendo-fab-item-text-padding-y $kendo-fab-item-text-padding-x;
+        padding-block: $kendo-fab-item-text-padding-y;
+        padding-inline: $kendo-fab-item-text-padding-x;
         border-width: $kendo-fab-item-text-border-width;
         border-radius: $kendo-fab-item-text-border-radius;
         font-size: $kendo-fab-item-text-font-size;
@@ -115,7 +120,8 @@
     .k-fab-item-icon {
         width: $kendo-fab-item-icon-width;
         height: $kendo-fab-item-icon-height;
-        padding: $kendo-fab-item-icon-padding-y $kendo-fab-item-icon-padding-x;
+        padding-block: $kendo-fab-item-icon-padding-y;
+        padding-inline: $kendo-fab-item-icon-padding-x;
         border-width: $kendo-fab-item-icon-border-width;
         border-radius: $kendo-fab-item-icon-border-radius;
         box-sizing: content-box;

package/scss/filemanager/_index.scss

@@ -1,4 +1,24 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "file-manager",
+    dependencies: (
+        "breadcrumb",
+        "dialog",
+        "grid",
+        "input",
+        "listview",
+        "menu",
+        "splitter",
+        "switch",
+        "toolbar",
+        "treeview",
+        "upload",
+    )
+);
 
 
 // Dependencies

package/scss/filemanager/_layout.scss

@@ -39,7 +39,8 @@
 
     // Navigation
     .k-filemanager-navigation {
-        padding: $kendo-file-manager-navigation-padding-y $kendo-file-manager-navigation-padding-x;
+        padding-block: $kendo-file-manager-navigation-padding-y;
+        padding-inline: $kendo-file-manager-navigation-padding-x;
         width: $kendo-file-manager-navigation-width;
         border-width: 0;
         border-right-width: $kendo-file-manager-navigation-border-width;
@@ -73,7 +74,8 @@
     .k-filemanager-breadcrumb {
         border-width: 0;
         border-bottom-width: $kendo-file-manager-breadcrumb-border-width;
-        padding: $kendo-file-manager-breadcrumb-padding-y $kendo-file-manager-breadcrumb-padding-x;
+        padding-block: $kendo-file-manager-breadcrumb-padding-y;
+        padding-inline: $kendo-file-manager-breadcrumb-padding-x;
         flex-shrink: 0;
     }
 
@@ -85,7 +87,8 @@
 
         // Listview item
         .k-listview-item {
-            padding: $kendo-file-manager-listview-item-padding-y $kendo-file-manager-listview-item-padding-x;
+            padding-block: $kendo-file-manager-listview-item-padding-y;
+            padding-inline: $kendo-file-manager-listview-item-padding-x;
             width: $kendo-file-manager-listview-item-width;
             height: $kendo-file-manager-listview-item-height;
             text-align: center;
@@ -231,9 +234,7 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-    }
-    .k-filemanager-drag-hint .k-icon {
-        margin-right: $kendo-icon-spacing;
+        gap: $kendo-icon-spacing;
     }
 
 }

package/scss/filter/_index.scss

@@ -1,4 +1,20 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "filter",
+    dependencies: (
+        "button",
+        "checkbox",
+        "date-time-picker",
+        "dropdown-list",
+        "input",
+        "numeric-textbox",
+        "toolbar",
+    )
+);
 
 
 // Dependencies

package/scss/filter/_layout.scss

@@ -33,7 +33,8 @@
         .k-filter-toolbar {
             display: inline-flex;
             position: relative;
-            padding: $kendo-filter-padding-y 0;
+            padding-block: $kendo-filter-padding-y;
+            padding-inline: 0;
 
             &::before {
                 content: "";

package/scss/floating-label/_index.scss

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

package/scss/floating-label/_layout.scss

@@ -18,7 +18,7 @@
         }
 
         > .k-label {
-            max-width: 90%;
+            max-width: $kendo-floating-label-max-width;
             font-size: $kendo-floating-label-font-size;
             line-height: $kendo-floating-label-line-height;
             white-space: nowrap;

package/scss/floating-label/_variables.scss

@@ -1,6 +1,7 @@
 // Floating label
 $kendo-floating-label-scale: 1 !default;
 $kendo-floating-label-font-size: $kendo-input-font-size !default;
+$kendo-floating-label-max-width: 90% !default;
 $kendo-floating-label-line-height: $kendo-input-line-height !default;
 $kendo-floating-label-height: calc( #{$kendo-floating-label-line-height} * #{$kendo-floating-label-font-size} ) !default;
 $kendo-floating-label-offset-x: calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} ) !default;

package/scss/forms/_index.scss

@@ -1,4 +1,16 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "form",
+    dependencies: (
+        "actions",
+        "icon",
+        "toolbar",
+    )
+);
 
 
 // Dependencies // TODO: extract variables

package/scss/forms/_layout.scss

@@ -132,7 +132,8 @@
             display: inline-block;
             font-size: $kendo-font-size-xs;
             line-height: 1;
-            margin: 0 $kendo-padding-md-x;
+            margin-block: 0;
+            margin-inline: $kendo-padding-md-x;
         }
 
 
@@ -147,7 +148,7 @@
 
     // Form Buttons Container
     .k-form-buttons {
-        @extend .k-actions;
+        @extend .k-actions !optional;
         padding: 0;
         overflow: visible;
     }
@@ -268,7 +269,7 @@
 
         legend {
             font-size: $kendo-font-size-sm;
-            text-align: left;
+            text-align: start;
             font-weight: 600;
             line-height: 1;
             margin-bottom: $kendo-padding-lg-y * 2;
@@ -280,12 +281,12 @@
         .k-form-field {
             display: flex;
             align-items: flex-start;
-            text-align: left;
+            text-align: start;
             margin-bottom: $kendo-padding-lg-y * 2;
 
             > span:not(.k-widget) {
                 width: $kendo-inline-form-element-width;
-                text-align: right;
+                text-align: end;
                 line-height: $kendo-line-height-md;
                 // TODO: do we need the input variable?
                 padding: calc( #{$kendo-padding-md-y} + #{$kendo-input-border-width} ) 0;
@@ -346,7 +347,7 @@
         padding: calc( #{$kendo-input-padding-y} + #{$kendo-input-border-width} ) 0;
         width: 30%;
         line-height: $kendo-form-line-height;
-        text-align: right;
+        text-align: end;
         float: left;
         clear: both;
     }

package/scss/gantt/_index.scss

@@ -1,4 +1,22 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "gantt",
+    dependencies: (
+        "button",
+        "date-time-picker",
+        "icon",
+        "input",
+        "numeric-textbox",
+        "splitter",
+        "treelist",
+        "validator",
+        "window",
+    )
+);
 
 
 // Dependencies

package/scss/gantt/_layout.scss

@@ -81,7 +81,8 @@
             }
             .k-grid-header th:last-child {
                 .k-header {
-                    padding: $kendo-grid-header-padding-y $kendo-grid-header-padding-x;
+                    padding-block: $kendo-grid-header-padding-y;
+                    padding-inline: $kendo-grid-header-padding-x;
                     border-width: 0 0 1px $kendo-grid-cell-vertical-border-width;
                     white-space: nowrap;
                 }
@@ -108,7 +109,8 @@
                 }
             }
             .k-task-content {
-                padding: $kendo-gantt-task-padding-y $kendo-gantt-task-padding-x;
+                padding-block: $kendo-gantt-task-padding-y;
+                padding-inline: $kendo-gantt-task-padding-x;
                 display: block;
                 line-height: normal;
                 flex: 1 1 auto;
@@ -301,7 +303,8 @@
             overflow-x: scroll;
         }
         .k-header {
-            padding: $kendo-grid-header-padding-y $kendo-grid-header-padding-x;
+            padding-block: $kendo-grid-header-padding-y;
+            padding-inline: $kendo-grid-header-padding-x;
             border-width: 0 0 1px $kendo-grid-cell-vertical-border-width;
             white-space: nowrap;
         }
@@ -389,8 +392,10 @@
     }
 
     .k-task-wrap {
-        margin: 0 -21px;
-        padding: 5px 21px;
+        margin-block: 0;
+        margin-inline: -21px;
+        padding-block: 5px;
+        padding-inline: 21px;
         display: inline-flex;
         flex-direction: row;
         align-items: center;
@@ -457,7 +462,8 @@
 
     // Milestone
     .k-milestone-wrap {
-        margin: 0 -2em;
+        margin-block: 0;
+        margin-inline: -2em;
     }
     .k-task-milestone {
         width: 1em;
@@ -564,7 +570,8 @@
         white-space: nowrap;
     }
     .k-task-template {
-        padding: $kendo-gantt-task-padding-y $kendo-gantt-task-padding-x;
+        padding-block: $kendo-gantt-task-padding-y;
+        padding-inline: $kendo-gantt-task-padding-x;
         line-height: normal;
         flex: 1;
         overflow: hidden;
@@ -594,14 +601,16 @@
         white-space: nowrap;
 
         .k-resource {
-            margin: 0 5px;
+            margin-block: 0;
+            margin-inline: 5px;
         }
     }
 
 
     // Task tooltip
     .k-task-details {
-        padding: $kendo-padding-md-y $kendo-padding-md-x;
+        padding-block: $kendo-padding-md-y;
+        padding-inline: $kendo-padding-md-x;
         white-space: nowrap;
 
         strong {
@@ -807,14 +816,11 @@
         }
 
         .k-task-wrap:not(.k-milestone-wrap) {
-            margin: 0 -26px;
+            margin-block: 0;
+            margin-inline: -26px;
         }
 
         .k-gantt-timeline {
-
-            .k-gantt-tasks tbody {
-                text-align: left;
-            }
             .k-header {
                 border-width: 0 $kendo-grid-cell-vertical-border-width 1px 0;
             }
@@ -834,7 +840,7 @@
         }
 
         .k-task-content {
-            text-align: right;
+            text-align: end;
         }
 
         .k-task-complete {

package/scss/grid/_index.scss

@@ -1,4 +1,36 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "grid",
+    dependencies: (
+        "actions",
+        "autocomplete",
+        "badge",
+        "button",
+        "checkbox",
+        "chip",
+        "date-time-picker",
+        "dialog",
+        "dropdown-list",
+        "icon",
+        "input",
+        "list",
+        "menu",
+        "numeric-textbox",
+        "pager",
+        "progressbar",
+        "radio",
+        "skeleton",
+        "table",
+        "textbox",
+        "toolbar",
+        "validator",
+        "utils/layout/float",
+    )
+);
 
 
 // Dependencies

package/scss/grid/_layout.scss

@@ -189,7 +189,8 @@
                 }
             }
 
-            .k-cell-inner > .k-link > .k-sort-icon .k-icon {
+            .k-cell-inner > .k-link > .k-sort-icon .k-icon,
+            .k-cell-inner > .k-link > .k-sort-icon .k-svg-icon {
                 display: flex;
             }
 
@@ -279,7 +280,8 @@
             text-overflow: clip;
         }
 
-        .k-grouping-row .k-icon {
+        .k-grouping-row .k-icon,
+        .k-grouping-row .k-svg-icon {
             margin-inline-start: calc( #{k-math-div( $kendo-icon-size, 2 )} - #{$kendo-grid-cell-padding-x} );
             margin-inline-end: k-math-div( $kendo-icon-size, 2 );
             text-decoration: none;
@@ -302,7 +304,8 @@
             overflow: visible;
 
             > .k-icon {
-                padding: $kendo-grid-cell-padding-y 0;
+                padding-block: $kendo-grid-cell-padding-y;
+                padding-inline: 0;
                 width: 100%;
                 height: 100%;
                 // That causes an issue with grid material. Commenting it for now
@@ -519,8 +522,10 @@
     .k-grid-column-menu-standalone a.k-grid-filter {
         position: initial;
         display: inline-block;
-        margin: -4px 0;
-        padding: 4px 8px;
+        margin-block: -4px;
+        margin-inline: 0;
+        padding-block: 4px;
+        padding-inline: 8px;
     }
 
     // Filter row
@@ -791,9 +796,9 @@
         }
 
         .k-grid-row-sticky td.k-grid-content-sticky,
-        .k-grid-row-sticky.k-alt td.k-grid-content-sticky,
+        .k-grid-row-sticky.k-table-alt-row td.k-grid-content-sticky,
         .k-grid-row-sticky .k-table-td.k-grid-content-sticky,
-        .k-grid-row-sticky.k-alt .k-table-td.k-grid-content-sticky {
+        .k-grid-row-sticky.k-table-alt-row .k-table-td.k-grid-content-sticky {
             z-index: 3;
         }
 
@@ -865,7 +870,8 @@
 
     .k-grid-norecords-template {
         box-sizing: border-box;
-        margin: 0 auto;
+        margin-block: 0;
+        margin-inline: auto;
         width: 20em;
         height: 4em;
         border: 1px solid;
@@ -901,16 +907,19 @@
         .k-grid-#{$size} {
 
             .k-table-th {
-                padding: $_header-padding-y $_header-padding-x;
+                padding-block: $_header-padding-y;
+                padding-inline: $_header-padding-x;
             }
 
             td,
             .k-table-td {
-                padding: $_cell-padding-y $_cell-padding-x;
+                padding-block: $_cell-padding-y;
+                padding-inline: $_cell-padding-x;
             }
 
             .k-grouping-header {
-                padding: $_grouping-header-padding-y $_grouping-header-padding-x;
+                padding-block: $_grouping-header-padding-y;
+                padding-inline: $_grouping-header-padding-x;
                 gap: $_grouping-header-padding-y;
 
                 &::before {
@@ -920,8 +929,10 @@
 
             .k-grid-header {
                 .k-table-th > .k-link {
-                    margin: (-$_header-padding-y) (-$_header-padding-x);
-                    padding: $_header-padding-y $_header-padding-x;
+                    margin-block: (-$_header-padding-y);
+                    margin-inline: (-$_header-padding-x);
+                    padding-block: $_header-padding-y;
+                    padding-inline: $_header-padding-x;
                 }
 
                 .k-grid-filter,
@@ -937,15 +948,18 @@
 
             .k-table-th {
                 > .k-cell-inner {
-                    margin: (-$_header-padding-y) (-$_header-padding-x);
+                    margin-block: (-$_header-padding-y);
+                    margin-inline: (-$_header-padding-x);
 
                     > .k-link {
-                        padding: $_header-padding-y $_header-padding-x;
+                        padding-block: $_header-padding-y;
+                        padding-inline: $_header-padding-x;
                     }
                 }
             }
 
-            .k-grouping-row .k-icon {
+            .k-grouping-row .k-icon,
+            .k-grouping-row .k-svg-icon {
                 margin-inline-start: calc( #{k-math-div( $kendo-icon-size, 2 )} - #{$_cell-padding-x} );
             }
 
@@ -957,8 +971,10 @@
             .k-drag-cell {
                 padding: 0;
 
-                > .k-icon {
-                    padding: $_cell-padding-y 0;
+                > .k-icon,
+                > .k-svg-icon {
+                    padding-block: $_cell-padding-y;
+                    padding-inline: 0;
                 }
             }
 
@@ -968,7 +984,8 @@
             .k-command-cell,
             .k-grid-edit-row td,
             .k-grid-edit-row .k-table-td {
-                padding: $_edit-cell-padding-y $_edit-cell-padding-x;
+                padding-block: $_edit-cell-padding-y;
+                padding-inline: $_edit-cell-padding-x;
             }
 
 
@@ -977,7 +994,8 @@
                 td,
                 .k-table-td,
                 .k-table-th {
-                    padding: $_filter-cell-padding-y $_filter-cell-padding-x;
+                    padding-block: $_filter-cell-padding-y;
+                    padding-inline: $_filter-cell-padding-x;
                 }
             }
 
@@ -1097,7 +1115,11 @@
         kendo-grid-string-filter-menu,
         kendo-grid-date-filter-menu,
         kendo-grid-numeric-filter-menu,
-        kendo-grid-filter-menu-input-wrapper {
+        kendo-grid-filter-menu-input-wrapper,
+        kendo-treelist-string-filter-menu,
+        kendo-treelist-date-filter-menu,
+        kendo-treelist-numeric-filter-menu,
+        kendo-treelist-filter-menu-input-wrapper {
             display: flex;
             flex-flow: column nowrap;
             align-items: stretch;
@@ -1125,7 +1147,8 @@
 
         .k-item,
         .k-check-all-wrap {
-            padding: $kendo-grid-column-menu-list-item-padding-y $kendo-grid-column-menu-list-item-padding-x;
+            padding-block: $kendo-grid-column-menu-list-item-padding-y;
+            padding-inline: $kendo-grid-column-menu-list-item-padding-x;
             display: flex;
             flex-flow: row nowrap;
         }
@@ -1166,7 +1189,8 @@
         box-sizing: border-box;
 
         &.k-popup {
-            padding: $kendo-grid-column-menu-popup-padding-y $kendo-grid-column-menu-popup-padding-x;
+            padding-block: $kendo-grid-column-menu-popup-padding-y;
+            padding-inline: $kendo-grid-column-menu-popup-padding-x;
             max-width: 100%;
         }
 
@@ -1204,7 +1228,8 @@
 
     .k-column-chooser-title,
     .k-column-list-item {
-        padding: $kendo-grid-column-menu-list-item-padding-y $kendo-grid-column-menu-list-item-padding-x;
+        padding-block: $kendo-grid-column-menu-list-item-padding-y;
+        padding-inline: $kendo-grid-column-menu-list-item-padding-x;
     }
 
     .k-column-list-item {
@@ -1222,15 +1247,18 @@
     }
 
     .k-columns-items-wrap {
-        padding: $kendo-grid-column-menu-items-wrap-padding-y $kendo-grid-column-menu-items-wrap-padding-x;
+        padding-block: $kendo-grid-column-menu-items-wrap-padding-y;
+        padding-inline: $kendo-grid-column-menu-items-wrap-padding-x;
     }
 
     .k-columnmenu-item {
-        padding: $kendo-grid-column-menu-item-padding-y $kendo-grid-column-menu-item-padding-x;
+        padding-block: $kendo-grid-column-menu-item-padding-y;
+        padding-inline: $kendo-grid-column-menu-item-padding-x;
         outline: 0;
         cursor: pointer;
 
-        > .k-icon {
+        > .k-icon,
+        > .k-svg-icon {
             margin-inline-end: $kendo-icon-spacing;
         }
     }
@@ -1245,7 +1273,8 @@
     }
 
     .k-column-menu-group-header {
-        padding: $kendo-grid-column-menu-group-header-padding-y $kendo-grid-column-menu-group-header-padding-x;
+        padding-block: $kendo-grid-column-menu-group-header-padding-y;
+        padding-inline: $kendo-grid-column-menu-group-header-padding-x;
         display: flex;
         flex: 0 0 auto;
         position: relative;

package/scss/grid/_theme.scss

@@ -113,14 +113,16 @@
         .k-grid-filter,
         .k-header-column-menu,
         .k-grid-header-menu,
-        .k-hierarchy-cell .k-icon {
+        .k-hierarchy-cell .k-icon,
+        .k-hierarchy-cell .k-svg-icon {
             color: $kendo-grid-header-text;
         }
 
         .k-grouping-row {
             background-color: $kendo-grid-grouping-row-bg;
 
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 color: $kendo-grid-header-text;
             }
 
@@ -192,7 +194,8 @@
         .k-grid-filter,
         .k-header-column-menu,
         .k-grid-header-menu,
-        .k-hierarchy-cell .k-icon {
+        .k-hierarchy-cell .k-icon,
+        .k-hierarchy-cell .k-svg-icon {
             &:hover {
                 color: $kendo-button-hover-text;
                 background-color: $kendo-button-hover-bg;