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

package/scss/pdf-viewer/_index.scss

@@ -1,4 +1,20 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "pdf-viewer",
+    dependencies: (
+        "combobox",
+        "dialog",
+        "dropzone",
+        "icon",
+        "pager",
+        "toolbar",
+        "window",
+    )
+);
 
 
 // Dependencies

package/scss/pdf-viewer/_layout.scss

@@ -65,7 +65,8 @@
 
         .k-page {
             position: relative;
-            margin: $kendo-pdf-viewer-page-spacing auto;
+            margin-block: $kendo-pdf-viewer-page-spacing;
+            margin-inline: auto;
 
             canvas {
                 direction: ltr;
@@ -115,6 +116,10 @@
             > .k-icon {
                 font-size: $kendo-pdf-viewer-icon-size;
             }
+            > .k-svg-icon {
+                width: $kendo-pdf-viewer-icon-size;
+                height: $kendo-pdf-viewer-icon-size;
+            }
         }
 
     }
@@ -125,7 +130,8 @@
     }
 
     .k-search-panel {
-        padding: $kendo-pdf-viewer-search-dialog-padding-y $kendo-pdf-viewer-search-dialog-padding-x;
+        padding-block: $kendo-pdf-viewer-search-dialog-padding-y;
+        padding-inline: $kendo-pdf-viewer-search-dialog-padding-x;
         display: flex;
         gap: $kendo-pdf-viewer-search-dialog-spacing;
         flex-flow: row nowrap;

package/scss/pdf-viewer/_theme.scss

@@ -40,7 +40,8 @@
             @include box-shadow( $kendo-pdf-viewer-page-shadow );
         }
 
-        .k-blank-page > .k-icon {
+        .k-blank-page > .k-icon,
+        .k-blank-page > .k-svg-icon {
             @include fill( $color: $kendo-pdf-viewer-icon-text );
         }
 

package/scss/pivotgrid/_index.scss

@@ -1,4 +1,18 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "pivotgrid",
+    dependencies: (
+        "dialog",
+        "grid",
+        "icon",
+        "list",
+        "treeview",
+    )
+);
 
 
 // Dependencies

package/scss/pivotgrid/_layout.scss

@@ -2,14 +2,15 @@
 
     // Pivotgrid
     .k-pivotgrid {
-        padding: $kendo-pivotgrid-padding-y $kendo-pivotgrid-padding-x;
+        padding-block: $kendo-pivotgrid-padding-y;
+        padding-inline: $kendo-pivotgrid-padding-x;
         border-width: $kendo-pivotgrid-border-width;
         border-style: solid;
         box-sizing: content-box;
         font-size: $kendo-pivotgrid-font-size;
         font-family: $kendo-pivotgrid-font-family;
         line-height: $kendo-pivotgrid-line-height;
-        text-align: left;
+        text-align: start;
         vertical-align: top;
         display: grid;
         grid-template-columns: $kendo-pivotgrid-row-header-width auto;
@@ -25,6 +26,7 @@
             border-collapse: separate;
             border-spacing: 0;
             outline: 0;
+            text-align: inherit;
             empty-cells: show;
         }
 
@@ -34,6 +36,7 @@
         tr,
         td {
             border-color: inherit;
+            text-align: inherit;
         }
     }
 
@@ -129,7 +132,8 @@
     }
 
     .k-pivotgrid-cell {
-        padding: $kendo-pivotgrid-cell-padding-y $kendo-pivotgrid-cell-padding-x;
+        padding-block: $kendo-pivotgrid-cell-padding-y;
+        padding-inline: $kendo-pivotgrid-cell-padding-x;
         text-overflow: ellipsis;
         white-space: nowrap;
         vertical-align: top;
@@ -140,7 +144,8 @@
         }
     }
 
-    .k-pivotgrid-cell .k-icon {
+    .k-pivotgrid-cell .k-icon,
+    .k-pivotgrid-cell .k-svg-icon {
         cursor: pointer;
         padding-inline-end: $kendo-pivotgrid-icon-spacing;
     }
@@ -151,7 +156,8 @@
 
     // Column menus
     .k-column-menu .k-treeview {
-        padding: $kendo-pivotgrid-treeview-padding-y $kendo-pivotgrid-treeview-padding-x;
+        padding-block: $kendo-pivotgrid-treeview-padding-y;
+        padding-inline: $kendo-pivotgrid-treeview-padding-x;
         overflow: auto;
     }
 
@@ -167,7 +173,8 @@
     }
 
     .k-pivotgrid-configurator-panel {
-        padding: $kendo-pivotgrid-configurator-padding-y $kendo-pivotgrid-configurator-padding-x;
+        padding-block: $kendo-pivotgrid-configurator-padding-y;
+        padding-inline: $kendo-pivotgrid-configurator-padding-x;
         border-width: $kendo-pivotgrid-configurator-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -179,7 +186,8 @@
 
     // Configurator Button
     .k-pivotgrid-configurator-button {
-        padding: $kendo-pivotgrid-configurator-button-padding-y $kendo-pivotgrid-configurator-button-padding-x;
+        padding-block: $kendo-pivotgrid-configurator-button-padding-y;
+        padding-inline: $kendo-pivotgrid-configurator-button-padding-x;
         border-width: $kendo-pivotgrid-configurator-button-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -194,7 +202,8 @@
             span {
                 writing-mode: vertical-rl;
             }
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 vertical-align: baseline;
             }
         }
@@ -232,7 +241,8 @@
 
     // Panel Content
     .k-pivotgrid-configurator-header {
-        padding: $kendo-pivotgrid-configurator-header-padding-y $kendo-pivotgrid-configurator-header-padding-x;
+        padding-block: $kendo-pivotgrid-configurator-header-padding-y;
+        padding-inline: $kendo-pivotgrid-configurator-header-padding-x;
         font-size: $kendo-pivotgrid-configurator-header-font-size;
         font-weight: $kendo-pivotgrid-configurator-header-font-weight;
         display: flex;
@@ -246,7 +256,8 @@
     }
 
     .k-pivotgrid-configurator-content {
-        padding: $kendo-pivotgrid-configurator-content-padding-y $kendo-pivotgrid-configurator-content-padding-x;
+        padding-block: $kendo-pivotgrid-configurator-content-padding-y;
+        padding-inline: $kendo-pivotgrid-configurator-content-padding-x;
         flex: 1 1 auto;
         overflow: auto;
 
@@ -274,7 +285,8 @@
 
         // Values
         .k-value-fields {
-            margin: $kendo-pivotgrid-configurator-fields-margin-y $kendo-pivotgrid-configurator-fields-margin-x;
+            margin-block: $kendo-pivotgrid-configurator-fields-margin-y;
+            margin-inline: $kendo-pivotgrid-configurator-fields-margin-x;
             display: flex;
             flex-direction: column;
             gap: k-math-div( $kendo-pivotgrid-spacer, 2 );
@@ -299,7 +311,8 @@
         }
 
         .k-treeview {
-            padding: $kendo-pivotgrid-treeview-padding-y $kendo-pivotgrid-treeview-padding-x;
+            padding-block: $kendo-pivotgrid-treeview-padding-y;
+            padding-inline: $kendo-pivotgrid-treeview-padding-x;
             overflow: auto;
         }
     }
@@ -307,7 +320,8 @@
 
     // Calculated field
     .k-calculated-field {
-        padding: $kendo-pivotgrid-calculated-field-padding-y $kendo-pivotgrid-calculated-field-padding-x;
+        padding-block: $kendo-pivotgrid-calculated-field-padding-y;
+        padding-inline: $kendo-pivotgrid-calculated-field-padding-x;
         border-width: $kendo-pivotgrid-calculated-field-border-width;
         border-radius: $kendo-pivotgrid-calculated-field-border-radius;
         border-style: solid;
@@ -346,7 +360,8 @@
         flex-direction: row;
         align-items: center;
 
-        .k-icon {
+        .k-icon,
+        .k-svg-icon {
             margin-right: k-map-get( $kendo-spacing, 2 );
         }
         .k-dropdown-list {
@@ -506,12 +521,13 @@
         table-layout: auto;
 
         .k-grid-footer,
-        .k-grid .k-alt {
+        .k-grid .k-table-alt-row {
             font-weight: bold;
         }
     }
 
     .k-pivot-layout > tbody,
+    .k-pivot .k-table-td,
     .k-pivot td {
         vertical-align: top;
     }

package/scss/pivotgrid/_theme.scss

@@ -194,7 +194,7 @@
         }
     }
 
-    .k-alt {
+    .k-pivot .k-alt {
         background-color: $kendo-pivotgrid-alt-bg;
     }
 

package/scss/popover/_index.scss

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

package/scss/popover/_layout.scss

@@ -34,7 +34,8 @@
     // Header
     .k-popover-header {
         @include border-top-radius( $kendo-popover-border-radius );
-        padding: $kendo-popover-header-padding-y $kendo-popover-header-padding-x;
+        padding-block: $kendo-popover-header-padding-y;
+        padding-inline: $kendo-popover-header-padding-x;
         border-width: 0 0 $kendo-popover-header-border-width;
         border-style: $kendo-popover-header-border-style;
         border-color: inherit;
@@ -42,7 +43,8 @@
 
     // Body
     .k-popover-body {
-        padding: $kendo-popover-body-padding-y $kendo-popover-body-padding-x;
+        padding-block: $kendo-popover-body-padding-y;
+        padding-inline: $kendo-popover-body-padding-x;
     }
 
     // Actions

package/scss/popup/_index.scss

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

package/scss/popup/_layout.scss

@@ -4,7 +4,8 @@
         @include border-radius( $kendo-popup-border-radius );
         margin: 0;
         padding: 0;
-        // padding: $kendo-popup-padding-y $kendo-popup-padding-x;
+        // padding-block: $kendo-popup-padding-y;
+        // padding-inline: $kendo-popup-padding-x;
         border-width: $kendo-popup-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -27,7 +28,8 @@
     }
 
     .k-popup > .k-colorpalette {
-        padding: $kendo-popup-content-padding-y $kendo-popup-content-padding-x;
+        padding-block: $kendo-popup-content-padding-y;
+        padding-inline: $kendo-popup-content-padding-x;
     }
 
     // Transparent popup

package/scss/popup/_variables.scss

@@ -1,16 +1,39 @@
-// Popup
+/// Horizontal padding of the popup.
+/// @group popup
 $kendo-popup-padding-x: null !default;
+/// Vertical padding of the popup.
+/// @group popup
 $kendo-popup-padding-y: null !default;
+/// Width of the border around the popup.
+/// @group popup
 $kendo-popup-border-width: 1px !default;
+/// Border radius of the popup.
+/// @group popup
 $kendo-popup-border-radius: null !default;
 
+/// Font size of the popup.
+/// @group popup
 $kendo-popup-font-size: $kendo-font-size-md !default;
+/// Line height of the popup.
+/// @group popup
 $kendo-popup-line-height: $kendo-line-height-md !default;
 
+/// Horizontal padding of the popup content.
+/// @group popup
 $kendo-popup-content-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+/// Vertical padding of the popup content.
+/// @group popup
 $kendo-popup-content-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
 
+/// Background color of the popup.
+/// @group popup
 $kendo-popup-bg: $kendo-component-bg !default;
+/// Text color of the popup.
+/// @group popup
 $kendo-popup-text: $kendo-component-text !default;
+/// Border color of the popup.
+/// @group popup
 $kendo-popup-border: $kendo-component-border !default;
+/// Box shadow of the popup.
+/// @group popup
 $kendo-popup-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !default;

package/scss/progressbar/_index.scss

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

package/scss/progressbar/_layout.scss

@@ -208,7 +208,7 @@
 
     .k-circular-progressbar {
         display: inline-block;
-        text-align: left;
+        text-align: start;
         position: relative;
     }
 

package/scss/radio/_index.scss

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

package/scss/radio/_layout.scss

@@ -134,7 +134,8 @@
     }
     .k-radio-item,
     .k-radio-list-item {
-        padding: $kendo-radio-list-item-padding-y $kendo-radio-list-item-padding-x;
+        padding-block: $kendo-radio-list-item-padding-y;
+        padding-inline: $kendo-radio-list-item-padding-x;
         display: flex;
         flex-flow: row nowrap;
         align-items: center;

package/scss/rating/_index.scss

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

package/scss/rating/_layout.scss

@@ -28,12 +28,14 @@
     .k-rating-container {
         flex: 0 1 auto;
         position: relative;
-        margin: 0 $kendo-rating-container-margin-x;
+        margin-block: 0;
+        margin-inline: $kendo-rating-container-margin-x;
 
         .k-rating-item {
             display: inline-flex;
             position: relative;
-            padding: $kendo-rating-item-padding-y $kendo-rating-item-padding-x;
+            padding-block: $kendo-rating-item-padding-y;
+            padding-inline: $kendo-rating-item-padding-x;
             align-items: center;
             vertical-align: middle;
             margin: 0;
@@ -48,6 +50,10 @@
             .k-icon {
                 font-size: $kendo-rating-icon-size;
             }
+            .k-svg-icon {
+                width: $kendo-rating-icon-size;
+                height: $kendo-rating-icon-size;
+            }
 
             .k-rating-precision-part,
             .k-rating-precision-complement {
@@ -73,7 +79,8 @@
         align-items: center;
         vertical-align: middle;
         line-height: $kendo-rating-label-line-height;
-        margin: $kendo-rating-label-margin-y $kendo-rating-label-margin-x;
+        margin-block: $kendo-rating-label-margin-y;
+        margin-inline: $kendo-rating-label-margin-x;
     }
 
     .k-rtl,

package/scss/rating/_theme.scss

@@ -10,10 +10,16 @@
                 > .k-icon {
                     text-shadow: $kendo-rating-icon-focus-shadow;
                 }
+                > .k-svg-icon {
+                    filter: drop-shadow( $kendo-rating-icon-focus-shadow );
+                }
 
                 &.k-selected > .k-icon {
                     text-shadow: $kendo-rating-icon-focus-selected-shadow;
                 }
+                &.k-selected > .k-svg-icon {
+                    filter: drop-shadow( $kendo-rating-icon-focus-selected-shadow );
+                }
             }
         }
     }

package/scss/responsivepanel/_index.scss

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

package/scss/ripple/_index.scss

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

package/scss/scheduler/_index.scss

@@ -1,4 +1,20 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "scheduler",
+    dependencies: (
+        "adaptive",
+        "button",
+        "date-time-picker",
+        "dialog",
+        "dropdown-list",
+        "icon",
+        "tooltip",
+    )
+);
 
 
 // Dependencies

package/scss/scheduler/_layout.scss

@@ -46,7 +46,8 @@
 
         td,
         th {
-            padding: $kendo-scheduler-cell-padding-y $kendo-scheduler-cell-padding-x;
+            padding-block: $kendo-scheduler-cell-padding-y;
+            padding-inline: $kendo-scheduler-cell-padding-x;
             height: $kendo-scheduler-cell-height;
             overflow: hidden;
             white-space: nowrap;
@@ -140,7 +141,8 @@
         .k-scheduler-cell {
             display: flex;
             flex: 1 1 100%;
-            padding: $kendo-scheduler-cell-padding-y $kendo-scheduler-cell-padding-y;
+            padding-block: $kendo-scheduler-cell-padding-y;
+            padding-inline: $kendo-scheduler-cell-padding-y;
             min-height: 1.5em;
             overflow: hidden;
             white-space: nowrap;
@@ -342,7 +344,7 @@
 
         th {
             border-width: 0 1px 1px 0;
-            text-align: right;
+            text-align: end;
         }
 
         .k-slot-cell,
@@ -389,7 +391,7 @@
         border-width: 0;
         border-style: solid;
         border-radius: $kendo-scheduler-event-border-radius;
-        text-align: left;
+        text-align: start;
         outline: 0;
         cursor: default;
         position: absolute;
@@ -404,7 +406,8 @@
         // Template
         .k-event-template {
             line-height: $kendo-scheduler-event-line-height;
-            padding: $kendo-padding-md-y $kendo-padding-md-x;
+            padding-block: $kendo-padding-md-y;
+            padding-inline: $kendo-padding-md-x;
             // TODO: incompatible units
             // padding-right: $kendo-padding-sm-x + k-map-get( $kendo-spacing, 4 );
         }
@@ -437,7 +440,8 @@
                 }
             }
 
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 line-height: normal;
                 font-size: inherit;
             }
@@ -542,7 +546,8 @@
         position: absolute;
         justify-content: center;
 
-        > .k-icon {
+        > .k-icon,
+        > .k-svg-icon {
             position: absolute;
             top: 50%;
             left: 50%;
@@ -692,7 +697,7 @@
         }
         .k-scheduler-table td {
             height: 80px;
-            text-align: right;
+            text-align: end;
         }
         .k-scheduler-body .k-scheduler-cell {
             min-height: 80px;
@@ -807,7 +812,8 @@
     // Year view
     .k-scheduler-yearview {
         .k-scheduler-body {
-            padding: $kendo-scheduler-yearview-padding-y $kendo-scheduler-yearview-padding-x;
+            padding-block: $kendo-scheduler-yearview-padding-y;
+            padding-inline: $kendo-scheduler-yearview-padding-x;
             justify-content: center;
         }
 
@@ -850,7 +856,8 @@
 @include exports("scheduler-tooltip/layout") {
 
     .k-scheduler-tooltip {
-        padding: $kendo-scheduler-tooltip-padding-y $kendo-scheduler-tooltip-padding-x;
+        padding-block: $kendo-scheduler-tooltip-padding-y;
+        padding-inline: $kendo-scheduler-tooltip-padding-x;
         border-width: $kendo-scheduler-tooltip-border-width;
         color: inherit;
 
@@ -879,7 +886,8 @@
         }
 
         .k-tooltip-event {
-            padding: $kendo-scheduler-tooltip-event-padding-y $kendo-scheduler-tooltip-event-padding-x;
+            padding-block: $kendo-scheduler-tooltip-event-padding-y;
+            padding-inline: $kendo-scheduler-tooltip-event-padding-x;
             border-radius: $kendo-scheduler-tooltip-event-border-radius;
             box-sizing: border-box;
             display: flex;
@@ -983,7 +991,6 @@
         }
 
         .k-event {
-            text-align: right;
             padding-right: 0;
             padding-left: $kendo-padding-md-x;
 

package/scss/scroller/_index.scss

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

package/scss/scroller/_layout.scss

@@ -31,7 +31,7 @@
     .km-scroller-pull .km-template {
         display: inline-block;
         min-width: 200px;
-        text-align: left;
+        text-align: start;
     }
     .km-load-more .km-icon,
     .km-widget .km-scroller-pull .km-icon {