@progress/kendo-theme-default 9.0.1-dev.2 → 9.1.0-dev.0

package/scss/pivotgrid/_theme.scss

@@ -134,25 +134,26 @@
 
 
     // Overlay mode
-    .k-pivotgrid-configurator-overlay {
-        .k-flex-row & {
+    .k-flex-row {
+        .k-pivotgrid-configurator-overlay {
             @include box-shadow( $kendo-pivotgrid-configurator-end-shadow );
         }
 
-        .k-flex-row-reverse & {
+        &-reverse .k-pivotgrid-configurator-overlay {
             @include box-shadow( $kendo-pivotgrid-configurator-start-shadow );
         }
+    }
 
-        .k-flex-col & {
+    .k-flex-col {
+        .k-pivotgrid-configurator-overlay {
             @include box-shadow( $kendo-pivotgrid-configurator-top-shadow );
         }
 
-        .k-flex-col-reverse & {
+        &-reverse .k-pivotgrid-configurator-overlay {
             @include box-shadow( $kendo-pivotgrid-configurator-bottom-shadow );
         }
     }
 
-
     // Legacy pivotgrid
     // TODO: remove
     .k-pivot {

package/scss/ripple/_layout.scss

@@ -24,10 +24,10 @@
         transition: opacity 100ms linear, transform 500ms cubic-bezier(.4, 0, .2, 1);
         opacity: .1;
         background-color: currentColor;
+    }
 
-        .k-primary & {
-            opacity: .2;
-        }
+    .k-primary .k-ripple-blob {
+        opacity: .2;
     }
 
     .k-ripple-focus::after {

package/scss/scroller/_layout.scss

@@ -62,12 +62,15 @@
         opacity: 0;
         transform-origin: 0 0;
         transition: opacity .3s linear;
+    }
 
-        .k-map &,
-        .k-diagram & {
+    .k-map,
+    .k-diagram {
+        .km-touch-scrollbar {
             display: none;
         }
     }
+
     .km-vertical-scrollbar {
         height: 100%;
         right: 2px;

package/scss/scrollview/_layout.scss

@@ -44,11 +44,6 @@
         transition-timing-function: $kendo-scrollview-transition-timing-function;
         transform: translateX( calc( -100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) );
 
-        [dir="rtl"] &,
-        .k-rtl & {
-            transform: translateX( calc( 100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) );
-        }
-
         .k-scrollview-view {
             width: calc( 100% / var(--kendo-scrollview-views, 1) );
             flex: 0 0 calc( 100% / var(--kendo-scrollview-views, 1) );
@@ -56,6 +51,10 @@
 
     }
 
+    :is([dir="rtl"], .k-rtl) .k-scrollview-wrap.k-scrollview-animate {
+        transform: translateX( calc( 100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) );
+    }
+
     .k-scrollview-nav-wrap {
         padding: 0;
         margin: 0;

package/scss/slider/_layout.scss

@@ -272,22 +272,21 @@
         margin: 0;
         padding: 0;
         position: absolute;
+    }
 
-        .k-slider-horizontal & {
-            height: $kendo-slider-track-thickness;
-            left: 0;
-            margin-top: - k-math-div( $kendo-slider-track-thickness, 2 );
-            top: 50%;
-        }
-
-        .k-slider-vertical & {
-            bottom: 0;
-            left: 50%;
-            margin-left: - k-math-div( $kendo-slider-track-thickness, 2 );
-            width: $kendo-slider-track-thickness;
-        }
+    .k-slider-horizontal :is(.k-slider-track, .k-slider-selection) {
+        height: $kendo-slider-track-thickness;
+        left: 0;
+        margin-top: - k-math-div( $kendo-slider-track-thickness, 2 );
+        top: 50%;
     }
 
+    .k-slider-vertical :is(.k-slider-track, .k-slider-selection) {
+        bottom: 0;
+        left: 50%;
+        margin-left: - k-math-div( $kendo-slider-track-thickness, 2 );
+        width: $kendo-slider-track-thickness;
+    }
 
     .k-draghandle {
         background-color: transparent;
@@ -301,34 +300,38 @@
         width: $kendo-slider-draghandle-size;
         height: $kendo-slider-draghandle-size;
 
-        .k-slider-transitions.k-slider-horizontal & {
-            transition: inset-inline-start $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-transition-speed $kendo-slider-transition-function, transform $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function;
-        }
-
-        .k-slider-transitions.k-slider-vertical & {
-            transition: bottom  $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-transition-speed $kendo-slider-transition-function, transform $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function;
-        }
-
         &.k-pressed {
             transition: none;
         }
     }
 
     .k-slider-selection {
-        .k-slider-transitions.k-slider-horizontal & {
-            transition: width $kendo-slider-transition-speed $kendo-slider-transition-function;
+        &.k-pressed {
+            transition: none;
         }
+    }
 
-        .k-slider-transitions.k-slider-vertical & {
-            transition: height $kendo-slider-transition-speed $kendo-slider-transition-function;
+    .k-slider-transitions {
+        &.k-slider-horizontal {
+            .k-draghandle {
+                transition: inset-inline-start $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-transition-speed $kendo-slider-transition-function, transform $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function;
+            }
+            .k-slider-selection {
+                transition: width $kendo-slider-transition-speed $kendo-slider-transition-function;
+            }
         }
 
-        &.k-pressed {
-            transition: none;
+        &.k-slider-vertical {
+            .k-draghandle {
+                transition: bottom  $kendo-slider-transition-speed $kendo-slider-transition-function, background-color $kendo-slider-transition-speed $kendo-slider-transition-function, transform $kendo-slider-draghandle-transition-speed $kendo-slider-draghandle-transition-function;
+            }
+
+            .k-slider-selection {
+                transition: height $kendo-slider-transition-speed $kendo-slider-transition-function;
+            }
         }
     }
 
-
     // Slider readonly
     .k-slider.k-readonly {
         .k-button,
@@ -384,7 +387,7 @@
     .k-slider kendo-resize-sensor {
         position: absolute;
     }
-    
+
     // Aliases
     .k-draghandle { @extend .k-slider-thumb !optional; }
     .k-draghandle-start { @extend .k-slider-thumb-start !optional; }

package/scss/splitter/_layout.scss

@@ -27,12 +27,6 @@
             overflow: hidden;
         }
 
-        // Nested
-        .k-pane > & {
-            border-width: 0;
-            overflow: hidden;
-        }
-
         // Loading
         .k-pane-loading {
             position: static;
@@ -128,9 +122,16 @@
         z-index: 1;
     }
 
-    .k-pane > .k-splitter-overlay {
-        opacity: 0;
-        position: absolute;
+    .k-pane > {
+        .k-splitter {
+            border-width: 0;
+            overflow: hidden;
+        }
+
+        .k-splitter-overlay {
+            opacity: 0;
+            position: absolute;
+        }
     }
 
     // flexbox-based splitter

package/scss/timeselector/_layout.scss

@@ -16,12 +16,11 @@
         user-select: none;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        .k-popup > & {
-            border-width: 0;
-        }
     }
 
+    .k-popup > .k-timeselector {
+        border-width: 0;
+    }
 
     // Time selector header
     .k-time-header,

package/scss/treelist/_layout.scss

@@ -81,14 +81,10 @@
         .k-table-row.k-group-footer + .k-table-row.k-group-footer td {
             border-top-width: 0;
         }
+    }
 
-        &[dir = "rtl"],
-        .k-rtl & {
-            thead.k-grid-header {
-                padding-left: 0;
-            }
-        }
-
+    :is(.k-treelist-scrollable[dir="rtl"], .k-rtl .k-treelist-scrollable) thead.k-grid-header {
+        padding-left: 0;
     }
 
     .k-drag-separator {

package/scss/window/_layout.scss

@@ -48,8 +48,10 @@
         flex-direction: row;
         flex-shrink: 0;
         align-items: center;
+    }
 
-        .k-window-minimized & {
+    .k-window-minimized {
+        .k-window-titlebar {
             border-width: 0;
         }
     }