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

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

package/scss/ripple/_index.scss

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

package/scss/scheduler/_index.scss

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

package/scss/scrollview/_index.scss

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

package/scss/signature/_index.scss

@@ -1,9 +1,12 @@
 @import "../core/_index.scss";
+@import "../utils/_index.scss";
+
 
 // Dependencies
 @import "../button/_index.scss";
 @import "../input/_index.scss";
 
+
 // Component
 @import "./_variables.scss";
 @import "./_layout.scss";

package/scss/skeleton/_index.scss

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

package/scss/slider/_index.scss

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

package/scss/table/_index.scss

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