@progress/kendo-theme-default 6.4.0-dev.3 → 6.4.0-dev.5

package/scss/menu/_layout.scss

@@ -90,7 +90,7 @@
         flex-direction: row;
 
         > .k-menu-item + .k-menu-item {
-            margin-left: $kendo-menu-item-spacing;
+            margin-inline-start: $kendo-menu-item-spacing;
         }
 
         > .k-separator {
@@ -115,7 +115,7 @@
         > .k-menu-item > .k-menu-link {
             padding-block: $kendo-menu-popup-item-padding-y;
             padding-inline: $kendo-menu-popup-item-padding-x;
-            padding-right: $kendo-menu-popup-item-padding-end;
+            padding-inline-end: $kendo-menu-popup-item-padding-end;
         }
 
         > .k-menu-item > .k-menu-link > .k-menu-expand-arrow {
@@ -268,7 +268,7 @@
     }
     .k-animation-container .k-context-menu.k-menu-horizontal {
         // kendo-jquery adds `display: block` via js and we need to override it.
-        display: flex !important; // sass-lint:disable-line no-important
+        display: flex !important; // stylelint-disable-line declaration-no-important
         flex-wrap: nowrap;
     }
     .k-context-menu-popup {
@@ -307,28 +307,28 @@
 
             &.k-scroll-left {
                 top: 0;
-                left: 0;
+                inset-inline-start: 0;
                 height: 100%;
                 width: 16px;
                 border-right-width: 1px;
             }
             &.k-scroll-right {
                 top: 0;
-                right: 0;
+                inset-inline-end: 0;
                 height: 100%;
                 width: 16px;
                 border-left-width: 1px;
             }
             &.k-scroll-up {
                 top: 0;
-                left: 0;
+                inset-inline-start: 0;
                 width: 100%;
                 height: 16px;
                 border-bottom-width: 1px;
             }
             &.k-scroll-down {
                 bottom: 0;
-                left: 0;
+                inset-inline-start: 0;
                 width: 100%;
                 height: 16px;
                 border-top-width: 1px;
@@ -336,43 +336,6 @@
         }
     }
 
-
-    // RTL
-    .k-rtl,
-    [dir="rtl"] {
-
-        // Orientation -- horizontal
-        .k-menu-horizontal {
-
-            > .k-menu-item + .k-menu-item {
-                margin-right: $kendo-menu-item-spacing;
-                margin-left: 0;
-            }
-        }
-
-
-        // Orientation -- vertical
-        .k-menu-vertical {
-
-            > .k-menu-item > .k-menu-link {
-                padding-right: $kendo-menu-popup-item-padding-x;
-                padding-left: $kendo-menu-popup-item-padding-end;
-            }
-        }
-
-
-        // Sub menu
-        .k-menu-group {
-
-            .k-menu-link {
-                padding-right: $kendo-menu-popup-item-padding-x;
-                padding-left: $kendo-menu-popup-item-padding-end;
-            }
-
-        }
-
-    }
-
 }
 
 

package/scss/menu/_variables.scss

@@ -101,7 +101,7 @@ $kendo-menu-popup-lg-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of the menu item in popup.
 /// @group menu
 $kendo-menu-popup-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-menu-popup-sm-item-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-menu-popup-sm-item-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default;
 $kendo-menu-popup-md-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 $kendo-menu-popup-lg-item-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
 

package/scss/notification/_variables.scss

@@ -42,7 +42,6 @@ $kendo-notification-border: $kendo-component-border !default;
 @function notification-theme( $colors ) {
     $_theme: ();
 
-    // sass-lint:disable-block indentation
     @each $name, $color in $colors {
         $_theme: k-map-merge(( $name: (
             color: k-contrast-legacy( $color ),

package/scss/pager/_layout.scss

@@ -24,15 +24,6 @@
         *::after {
             box-sizing: border-box;
         }
-
-        .k-rtl &,
-        &[dir="rtl"],
-        [dir="rtl"] & {
-            .k-pager-nav .k-button-icon {
-                transform: scaleX(-1);
-            }
-        }
-
     }
 
 

package/scss/pdf-viewer/_layout.scss

@@ -105,7 +105,7 @@
             height: 100%;
             align-items: center;
             justify-content: center;
-            background-color: inherit !important; // sass-lint:disable-line no-important
+            background-color: inherit !important; // stylelint-disable-line declaration-no-important
 
             .k-upload,
             .k-dropzone,
@@ -119,7 +119,7 @@
 
     // Search
     .k-pdf-viewer-search-dialog {
-        padding: 0 !important; // sass-lint:disable-line no-important
+        padding: 0 !important; // stylelint-disable-line declaration-no-important
     }
 
     .k-search-panel {
@@ -159,6 +159,7 @@
         border-style: solid;
         border-radius: $kendo-pdf-viewer-search-panel-border-radius;
         z-index: 10;
+        cursor: default;
     }
 
     // Alias

package/scss/pivotgrid/_layout.scss

@@ -446,7 +446,7 @@
     .k-pdf-export-shadow {
 
         .k-pivotgrid {
-            height: auto !important; // sass-lint:disable-line no-important
+            height: auto !important; // stylelint-disable-line declaration-no-important
         }
 
         .k-pivotgrid-values  {

package/scss/progressbar/_layout.scss

@@ -94,7 +94,7 @@
         }
 
         > .k-progressbar-value {
-            width: calc( var( --kendo-progressbar-value, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
+            width: calc( var( --kendo-progressbar-value, 0 ) * 1% );
             flex-direction: row;
 
             > .k-progress-status-wrap {
@@ -139,13 +139,13 @@
         }
 
         > .k-progressbar-value {
-            height: calc( var( --kendo-progressbar-value, 0 ) * 1% ); // sass-lint:disable-line no-duplicate-properties
+            height: calc( var( --kendo-progressbar-value, 0 ) * 1% );
             flex-direction: column-reverse;
             align-self: flex-end;
             align-items: flex-end;
 
             > .k-progress-status-wrap {
-                height: calc( 100% * ( 100 / var( --kendo-progressbar-value, 1 ) ) ); // sass-lint:disable-line no-duplicate-properties
+                height: calc( 100% * ( 100 / var( --kendo-progressbar-value, 1 ) ) );
             }
         }
 

package/scss/radio/_layout.scss

@@ -102,7 +102,7 @@
 
         .k-ripple {
             // Hide ripple temporarily
-            visibility: hidden !important; // sass-lint:disable-line no-important
+            visibility: hidden !important; // stylelint-disable-line declaration-no-important
         }
     }
     .k-radio + .k-label,
@@ -116,7 +116,7 @@
 
     // Empty label
     .k-radio-label:empty {
-        display: none !important; // sass-lint:disable-line no-important
+        display: none !important; // stylelint-disable-line declaration-no-important
     }
     .k-radio-label.k-no-text {
         min-width: 1px;
@@ -171,7 +171,7 @@
 
         .k-radio:focus,
         .k-radio.k-focus {
-            box-shadow: none !important; // sass-lint:disable-line no-important
+            box-shadow: none !important; // stylelint-disable-line declaration-no-important
         }
 
         .k-radio:disabled::after,

package/scss/responsivepanel/_layout.scss

@@ -36,9 +36,7 @@
     }
     .k-rpanel-top.k-rpanel-expanded {
         max-height: 568px;
-        // sass-lint:disable no-important
-        overflow: visible !important;
-        // sass-lint:enable no-important
+        overflow: visible !important; // stylelint-disable-line declaration-no-important
     }
 
     // Toggle button

package/scss/scheduler/_layout.scss

@@ -611,8 +611,8 @@
         }
     }
 
-    // sass-lint:disable no-important
     // remove scrollbars during PDF export
+    // stylelint-disable declaration-no-important
     .k-pdf-export-shadow .k-scheduler,
     .k-scheduler-pdf-export .k-scheduler-content,
     .k-scheduler-pdf-export .k-scheduler-times {
@@ -636,7 +636,7 @@
             width: 100% !important;
         }
     }
-    // sass-lint:enable no-important
+    // stylelint-enable declaration-no-important
 
 
     // TODO: add this class to jQuery rendering
@@ -655,9 +655,7 @@
 
 
     // Workweek view
-    // sass-lint:disable class-name-format
-    .k-scheduler-workWeekview {}
-    // sass-lint:enable class-name-format
+    .k-scheduler-workWeekview {} // stylelint-disable-line
 
 
     // Week view
@@ -678,14 +676,12 @@
             min-height: 80px;
         }
 
-        // sass-lint:disable no-important
         // hidden cells must have no layout
         .k-hidden {
-            padding-left: 0 !important;
-            padding-right: 0 !important;
-            border-right-width: 0 !important;
+            padding-left: 0 !important; // stylelint-disable-line declaration-no-important
+            padding-right: 0 !important; // stylelint-disable-line declaration-no-important
+            border-right-width: 0 !important; // stylelint-disable-line declaration-no-important
         }
-        // sass-lint:enable no-important
 
         .k-scheduler-table-auto,
         .k-scheduler-table-auto td,
@@ -1011,13 +1007,6 @@
 
         .k-scheduler,
         &.k-scheduler {
-            .k-i-caret-alt-left,
-            .k-i-caret-alt-right,
-            .k-i-arrow-60-left,
-            .k-i-arrow-60-right,
-            .k-current-time-arrow-right {
-                transform: scaleX(-1);
-            }
 
             .k-scheduler-header-wrap {
                 border-right-width: 0;

package/scss/scheduler/_theme.scss

@@ -53,7 +53,7 @@
     }
 
 
-    //Scheduler navigation
+    // Scheduler navigation
     .k-scheduler-navigation {}
 
 
@@ -125,12 +125,14 @@
             );
             @include box-shadow( $kendo-scheduler-event-selected-shadow );
         }
-    }
-    .k-event-inverse {
-        color: k-contrast-legacy( $kendo-scheduler-event-text );
-    }
-    .k-event-ongoing {
-        @include box-shadow( $kendo-scheduler-event-ongoing-shadow );
+
+        &.k-event-inverse {
+            color: k-contrast-legacy( $kendo-scheduler-event-text );
+        }
+
+        &.k-event-ongoing {
+            @include box-shadow( $kendo-scheduler-event-ongoing-shadow );
+        }
     }
 
 
@@ -159,9 +161,7 @@
 
 
     // Workweek view
-    // sass-lint:disable class-name-format
-    .k-scheduler-workWeekview {}
-    // sass-lint:enable class-name-format
+    .k-scheduler-workWeekview {} // stylelint-disable-line
 
 
     // Week view

package/scss/scrollview/_layout.scss

@@ -198,17 +198,6 @@
         }
     }
 
-    .k-rtl,
-    [dir="rtl"] {
-        .k-scrollview-prev,
-        .k-scrollview-next {
-            .k-icon,
-            .k-svg-icon {
-                transform: scaleX(-1);
-            }
-        }
-    }
-
 }
 
 

package/scss/signature/_variables.scss

@@ -7,7 +7,7 @@ $kendo-signature-maximized-width: 750px !default;
 $kendo-signature-maximized-height: 252px !default;
 
 $kendo-signature-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-signature-sm-padding-x: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-signature-sm-padding-x: k-map-get( $kendo-spacing, 0.5 ) !default;
 $kendo-signature-md-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
 $kendo-signature-lg-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 

package/scss/slider/_layout.scss

@@ -51,16 +51,6 @@
                 cursor: default;
             }
         }
-
-        .k-rtl &,
-        &.k-rtl,
-        [dir="rtl"] &,
-        &[dir="rtl"] {
-            .k-slider-selection {
-                left: auto;
-                right: 0;
-            }
-        }
     }
 
 
@@ -143,36 +133,13 @@
 
                 .k-slider-selection {
                     width: calc( (var(--kendo-slider-end, 0) - var(--kendo-slider-start, 0)) * 1% );
-                    left: calc( var(--kendo-slider-start, 0) * 1% );
+                    inset-inline-start: calc( var(--kendo-slider-start, 0) * 1% );
                 }
                 .k-draghandle-start {
-                    left: calc( var(--kendo-slider-start, 0) * 1% );
+                    inset-inline-start: calc( var(--kendo-slider-start, 0) * 1% );
                 }
                 .k-draghandle-end {
-                    left: calc( var(--kendo-slider-end, 0) * 1% );
-                }
-
-                [dir="rtl"] & {
-                    .k-slider-selection {
-                        left: unset;
-                        right: calc( var(--kendo-slider-start, 0) * 1% );
-                    }
-                    .k-draghandle-start {
-                        left: unset;
-                        right: calc( var(--kendo-slider-start, 0) * 1% );
-                    }
-                    .k-draghandle-end {
-                        left: unset;
-                        right: calc( var(--kendo-slider-end, 0) * 1% );
-                    }
-
-                    .k-draghandle {
-                        transform: translate(50%, -50%);
-                    }
-                    .k-draghandle:focus,
-                    .k-draghandle:active {
-                        transform: translate(50%, -50%) scale($kendo-slider-draghandle-active-scale);
-                    }
+                    inset-inline-start: calc( var(--kendo-slider-end, 0) * 1% );
                 }
             }
         }
@@ -256,7 +223,7 @@
 
         .k-label {
             text-align: start;
-            left: 120%;
+            inset-inline-start: 120%;
             top: 50%;
             transform: translateY(-50%);
         }
@@ -264,23 +231,8 @@
         .k-last .k-label { top: 0; }
 
         .k-slider-topleft .k-label {
-            left: auto;
-            right: 120%;
-        }
-
-        .k-rtl &,
-        &.k-rtl,
-        [dir="rtl"] &,
-        &[dir="rtl"] {
-            .k-label {
-                left: auto;
-                right: 120%;
-            }
-
-            .k-slider-topleft .k-label {
-                left: 120%;
-                right: auto;
-            }
+            inset-inline-start: auto;
+            inset-inline-end: 120%;
         }
 
     }
@@ -316,34 +268,16 @@
         // labels
 
         .k-label {
-            left: 50%;
+            inset-inline-start: 50%;
             bottom: -1.2em;
             transform: translateX(-50%);
         }
-        .k-first .k-label { left: 0; }
-        .k-last .k-label { left: 100%; }
+        .k-first .k-label { inset-inline-start: 0; }
+        .k-last .k-label { inset-inline-start: 100%; }
 
         .k-slider-topleft .k-label {
             top: -1.2em;
         }
-
-        .k-rtl &,
-        &.k-rtl,
-        [dir="rtl"] &,
-        &[dir="rtl"] {
-            .k-slider-track,
-            .k-slider-selection {
-                right: 0;
-                left: auto;
-            }
-
-            .k-button-increase .k-icon,
-            .k-button-increase .k-svg-icon,
-            .k-button-decrease .k-icon,
-            .k-button-decrease .k-svg-icon {
-                transform: scaleX(-1);
-            }
-        }
     }
 
     .k-slider-track,
@@ -423,7 +357,7 @@
     .k-slider-tooltip {
         .k-callout-n,
         .k-callout-s {
-            margin-left: - k-math-div( $kendo-tooltip-callout-size, 2 );
+            margin-inline-start: - k-math-div( $kendo-tooltip-callout-size, 2 );
         }
 
         .k-callout-w,
@@ -432,20 +366,50 @@
         }
     }
 
+    // RTL
+    .k-slider-rtl {
+        &.k-slider-horizontal {
+
+            .k-draghandle {
+                transform: translate(50%, -50%);
+            }
+
+            .k-draghandle:focus,
+            .k-draghandle:active {
+                transform: if( $kendo-slider-draghandle-active-scale, translate(50%, -50%) scale($kendo-slider-draghandle-active-scale), null );
+            }
+
+            .k-label {
+                transform: translateX(50%);
+            }
+        }
+    }
+
+    .k-slider[dir="rtl"],
+    [dir="rtl"] .k-slider,
+    .k-slider.k-rtl,
+    .k-rtl .k-slider {
+        @extend .k-slider-rtl !optional;
+    }
+
 
     // Angular specific
     .k-slider kendo-resize-sensor {
         position: absolute;
     }
     .k-slider-horizontal .k-slider-wrap:not(.k-slider-buttons) {
-        padding-left: calc( #{$kendo-slider-draghandle-size} / 2 );
-        padding-right: calc( #{$kendo-slider-draghandle-size} / 2 );
+        padding-inline-start: calc( #{$kendo-slider-draghandle-size} / 2 );
+        padding-inline-end: calc( #{$kendo-slider-draghandle-size} / 2 );
     }
     .k-slider-vertical .k-slider-wrap:not(.k-slider-buttons) {
         padding-top: calc( #{$kendo-slider-draghandle-size} / 2 );
         padding-bottom: calc( #{$kendo-slider-draghandle-size} / 2 );
     }
 
+    // Aliases
+    .k-draghandle { @extend .k-slider-thumb !optional; }
+    .k-draghandle-start { @extend .k-slider-thumb-start !optional; }
+    .k-draghandle-end { @extend .k-slider-thumb-end !optional; }
 }
 
 

package/scss/splitter/_layout.scss

@@ -166,25 +166,15 @@
         .k-pane-flex {
             &.k-hidden,
             &[hidden] {
-                // sass-lint:disable-block no-important
                 // hidden panes need to be zero-width to allow pane animation
-                flex: 0 1 0% !important;
-                overflow: hidden !important;
-                display: block !important;
+                flex: 0 1 0% !important; // stylelint-disable-line declaration-no-important
+                overflow: hidden !important; // stylelint-disable-line declaration-no-important
+                display: block !important; // stylelint-disable-line declaration-no-important
             }
         }
 
         &.k-splitter-horizontal {
             flex-direction: row;
-
-            &[dir="rtl"] {
-                > .k-splitbar {
-                    > .k-collapse-next,
-                    > .k-collapse-prev {
-                        transform: scaleX(-1);
-                    }
-                }
-            }
         }
         &.k-splitter-vertical {
             flex-direction: column;