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

package/scss/scrollview/_index.scss

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

package/scss/scrollview/_layout.scss

@@ -156,7 +156,8 @@
         user-select: none;
         cursor: pointer;
 
-        .k-icon {
+        .k-icon,
+        .k-svg-icon {
             display: table-cell;
             overflow: visible;
             margin: 0;
@@ -165,6 +166,11 @@
             font-size: $kendo-scrollview-arrow-icon-size;
             font-weight: normal;
         }
+        .k-svg-icon {
+            font-size: inherit;
+            width: $kendo-scrollview-arrow-icon-size;
+            height: $kendo-scrollview-arrow-icon-size;
+        }
     }
 
     .k-scrollview-prev {

package/scss/searchbox/_index.scss

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

package/scss/signature/_index.scss

@@ -1,9 +1,22 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "signature",
+    dependencies: (
+        "button",
+        "input",
+    )
+);
+
 
 // Dependencies
 @import "../button/_index.scss";
 @import "../input/_index.scss";
 
+
 // Component
 @import "./_variables.scss";
 @import "./_layout.scss";

package/scss/skeleton/_index.scss

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

package/scss/slider/_index.scss

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

package/scss/slider/_layout.scss

@@ -215,12 +215,12 @@
         flex-flow: column-reverse nowrap;
 
         .k-tick {
-            text-align: right;
+            text-align: end;
             margin-left: 2px;
         }
 
         .k-slider-topleft .k-tick {
-            text-align: left;
+            text-align: start;
         }
 
         // ticks
@@ -255,7 +255,7 @@
         // labels
 
         .k-label {
-            text-align: left;
+            text-align: start;
             left: 120%;
             top: 50%;
             transform: translateY(-50%);
@@ -338,7 +338,9 @@
             }
 
             .k-button-increase .k-icon,
-            .k-button-decrease .k-icon {
+            .k-button-increase .k-svg-icon,
+            .k-button-decrease .k-icon,
+            .k-button-decrease .k-svg-icon {
                 transform: scaleX(-1);
             }
         }

package/scss/split-button/_index.scss

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

package/scss/split-button/_layout.scss

@@ -3,21 +3,25 @@
 
     // Split button arrow
     .k-split-button .k-split-button-arrow {
-        padding: $kendo-split-button-arrow-padding-y $kendo-split-button-arrow-padding-x;
+        padding-block: $kendo-split-button-arrow-padding-y;
+        padding-inline: $kendo-split-button-arrow-padding-x;
         width: auto;
         aspect-ratio: auto;
         flex: none;
 
         &.k-button-sm {
-            padding: $kendo-split-button-sm-arrow-padding-y $kendo-split-button-sm-arrow-padding-x;
+            padding-block: $kendo-split-button-sm-arrow-padding-y;
+            padding-inline: $kendo-split-button-sm-arrow-padding-x;
         }
 
         &.k-button-md {
-            padding: $kendo-split-button-md-arrow-padding-y $kendo-split-button-md-arrow-padding-x;
+            padding-block: $kendo-split-button-md-arrow-padding-y;
+            padding-inline: $kendo-split-button-md-arrow-padding-x;
         }
 
         &.k-button-lg {
-            padding: $kendo-split-button-lg-arrow-padding-y $kendo-split-button-lg-arrow-padding-x;
+            padding-block: $kendo-split-button-lg-arrow-padding-y;
+            padding-inline: $kendo-split-button-lg-arrow-padding-x;
         }
 
         .k-button-icon {

package/scss/split-button/_variables.scss

@@ -7,13 +7,25 @@ $kendo-split-button-focus-shadow: $kendo-button-focus-shadow !default;
 /// Horizontal padding of the arrow button.
 /// @group split-button
 $kendo-split-button-arrow-padding-x: $kendo-button-padding-y !default;
+/// Horizontal padding of the small arrow button.
+/// @group split-button
 $kendo-split-button-sm-arrow-padding-x: $kendo-button-sm-padding-y !default;
+/// Horizontal padding of the medium arrow button.
+/// @group split-button
 $kendo-split-button-md-arrow-padding-x: $kendo-button-md-padding-y !default;
+/// Horizontal padding of the large arrow button.
+/// @group split-button
 $kendo-split-button-lg-arrow-padding-x: $kendo-button-lg-padding-y !default;
 
 /// Vertical padding of the arrow button.
 /// @group split-button
 $kendo-split-button-arrow-padding-y: $kendo-button-padding-y !default;
+/// Vertical padding of the small arrow button.
+/// @group split-button
 $kendo-split-button-sm-arrow-padding-y: $kendo-button-sm-padding-y !default;
+/// Vertical padding of the medium arrow button.
+/// @group split-button
 $kendo-split-button-md-arrow-padding-y: $kendo-button-md-padding-y !default;
+/// Vertical padding of the large arrow button.
+/// @group split-button
 $kendo-split-button-lg-arrow-padding-y: $kendo-button-lg-padding-y !default;

package/scss/splitter/_index.scss

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

package/scss/splitter/_layout.scss

@@ -61,6 +61,10 @@
         .k-icon {
             font-size: $kendo-splitter-resize-icon-size;
         }
+        .k-svg-icon {
+            width: $kendo-splitter-resize-icon-size;
+            height: $kendo-splitter-resize-icon-size;
+        }
 
     }
 

package/scss/spreadsheet/_index.scss

@@ -1,4 +1,28 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
+
+// Module meta
+$_kendo-module-meta: (
+    name: "spreadsheet",
+    dependencies: (
+        "button",
+        "checkbox",
+        "color-picker",
+        "combobox",
+        "date-time-picker",
+        "dropdown-list",
+        "icon",
+        "list",
+        "menu",
+        "radio",
+        "tabstrip",
+        "toolbar",
+        "treeview",
+        "upload",
+        "window",
+    )
+);
 
 
 // Dependencies

package/scss/spreadsheet/_layout.scss

@@ -122,7 +122,8 @@
         flex: 1;
 
         > .k-i-formula-fx {
-            padding: 0 $kendo-padding-md-y;
+            padding-block: 0;
+            padding-inline: $kendo-padding-md-y;
             box-sizing: content-box;
             border-width: 0 1px 0 0;
             border-style: solid;
@@ -137,7 +138,8 @@
         }
 
         .k-spreadsheet-formula-input {
-            padding: $kendo-input-padding-y $kendo-input-padding-x;
+            padding-block: $kendo-input-padding-y;
+            padding-inline: $kendo-input-padding-x;
             line-height: $kendo-input-line-height;
 
             &.k-spreadsheet-array-formula {
@@ -177,7 +179,8 @@
         min-width: 100px;
 
         .k-item {
-            padding: $kendo-list-md-item-padding-y $kendo-list-md-item-padding-x;
+            padding-block: $kendo-list-md-item-padding-y;
+            padding-inline: $kendo-list-md-item-padding-x;
         }
     }
     .k-syntax-func,
@@ -188,7 +191,8 @@
 
     // Cell editor
     .k-spreadsheet-cell-editor {
-        padding: 0 3px;
+        padding-block: 0;
+        padding-inline: 3px;
         line-height: 20px;
         display: none;
         overflow: hidden;
@@ -592,7 +596,8 @@
             .k-link {
                 padding-left: $kendo-filter-menu-padding-left;
             }
-            .k-icon {
+            .k-icon,
+            .k-svg-icon {
                 margin-left: calc(-1 * ( #{$kendo-icon-size} + #{$kendo-padding-md-y} ) );
                 margin-right: $kendo-padding-md-y;
             }
@@ -626,12 +631,14 @@
         }
         .k-details-summary,
         .k-columnmenu-item {
-            padding: $kendo-menu-popup-item-padding-y $kendo-menu-popup-item-padding-x;
+            padding-block: $kendo-menu-popup-item-padding-y;
+            padding-inline: $kendo-menu-popup-item-padding-x;
             display: flex;
             align-items: center;
             cursor: pointer;
 
-            > .k-icon {
+            > .k-icon,
+            > .k-svg-icon {
                 margin-right: $kendo-padding-md-y;
             }
         }
@@ -775,6 +782,10 @@
             .k-icon {
                 font-size: 6em;
             }
+            .k-svg-icon {
+                width: 6em;
+                height: 6em;
+            }
         }
     }
 

package/scss/stepper/_index.scss

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

package/scss/stepper/_layout.scss

@@ -2,8 +2,10 @@
 
     // Base
     .k-stepper {
-        margin: $kendo-stepper-margin-y $kendo-stepper-margin-x;
-        padding: $kendo-stepper-padding-y $kendo-stepper-padding-x;
+        margin-block: $kendo-stepper-margin-y;
+        margin-inline: $kendo-stepper-margin-x;
+        padding-block: $kendo-stepper-padding-y;
+        padding-inline: $kendo-stepper-padding-x;
         border-width: $kendo-stepper-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -32,6 +34,7 @@
             padding: 0;
             list-style: none;
             display: flex;
+            position: relative;
             z-index: 1;
         }
 
@@ -106,7 +109,8 @@
         }
         .k-step-label:only-child {
             @include border-radius( k-math-div( ( $kendo-stepper-indicator-height + 2 * $kendo-stepper-indicator-border-width ), 2 ) );
-            padding: $kendo-stepper-label-padding-y $kendo-stepper-label-padding-x;
+            padding-block: $kendo-stepper-label-padding-y;
+            padding-inline: $kendo-stepper-label-padding-x;
             border-width: 0;
         }
         .k-step-label .k-step-text {
@@ -116,7 +120,10 @@
             text-overflow: ellipsis;
             overflow: hidden;
         }
-        .k-step-label .k-icon { margin-left: $kendo-icon-spacing; }
+        .k-step-label .k-icon,
+        .k-step-label .k-svg-icon  {
+            margin-left: $kendo-icon-spacing;
+        }
 
         .k-step-current .k-step-label {
             font-weight: bold;
@@ -233,7 +240,8 @@
             flex-direction: column;
             justify-content: space-between;
             margin-left: $kendo-stepper-indicator-width + 2 * $kendo-stepper-indicator-border-width;
-            padding: $kendo-stepper-inline-content-padding-x $kendo-stepper-inline-content-padding-y;
+            padding-block: $kendo-stepper-inline-content-padding-x;
+            padding-inline: $kendo-stepper-inline-content-padding-y;
         }
     }
 }
@@ -245,7 +253,8 @@
     .k-stepper[dir="rtl"] {
         direction: rtl;
 
-        .k-step-label .k-icon {
+        .k-step-label .k-icon,
+        .k-step-label .k-svg-icon {
             margin-left: 0;
             margin-right: $kendo-icon-spacing;
         }

package/scss/stepper/_theme.scss

@@ -157,7 +157,8 @@
         .k-step-label {
             @include fill( $color: $kendo-stepper-label-text );
         }
-        .k-step-success .k-step-label .k-icon {
+        .k-step-success .k-step-label .k-icon,
+        .k-step-success .k-step-label .k-svg-icon {
             @include fill( $color: $kendo-stepper-label-success-text );
         }
         .k-step-error .k-step-label {

package/scss/switch/_index.scss

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

package/scss/table/_index.scss

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

package/scss/table/_layout.scss

@@ -8,7 +8,7 @@
         border-style: solid;
         font-size: $kendo-table-font-size;
         line-height: $kendo-table-line-height;
-        text-align: left;
+        text-align: start;
         border-collapse: collapse;
         border-spacing: 0;
         empty-cells: show;
@@ -38,7 +38,8 @@
     }
     .k-table-th,
     .k-table-td {
-        padding: $kendo-table-cell-padding-y $kendo-table-cell-padding-x;
+        padding-block: $kendo-table-cell-padding-y;
+        padding-inline: $kendo-table-cell-padding-x;
         border-width: 0 0 $kendo-table-cell-horizontal-border-width $kendo-table-cell-vertical-border-width;
         border-style: solid;
         border-color: inherit;
@@ -132,7 +133,8 @@
 
             &::before {
                 content: "\200b";
-                padding: $kendo-table-cell-padding-y 0;
+                padding-block: $kendo-table-cell-padding-y;
+                padding-inline: 0;
                 width: 0;
                 display: block;
                 overflow: hidden;
@@ -225,7 +227,8 @@
 
         .k-table-#{$size} .k-table-th,
         .k-table-#{$size} .k-table-td {
-            padding: $_cell-padding-y $_cell-padding-x;
+            padding-block: $_cell-padding-y;
+            padding-inline: $_cell-padding-x;
         }
 
         .k-table-#{$size} .k-table-list .k-table-group-td > span {
@@ -245,7 +248,6 @@
     [dir="rtl"] {
         &.k-table,
         .k-table {
-            text-align: right;
 
             .k-table-th,
             .k-table-td {

package/scss/tabstrip/_index.scss

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