@progress/kendo-theme-default 6.1.1-dev.5 → 6.1.1-dev.66

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,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // 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,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // 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,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // 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,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // 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,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // Dependencies

package/scss/dropdownlist/_index.scss

@@ -1,4 +1,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // Dependencies

package/scss/dropdowntree/_index.scss

@@ -1,4 +1,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // 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,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // 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,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // 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,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // 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

package/scss/fab/_index.scss

@@ -1,4 +1,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // 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,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // 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,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // 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,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // 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,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // 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,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // 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,5 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
 
 
 // Dependencies