@progress/kendo-theme-default 9.0.1-dev.1 → 9.0.1-dev.3

package/scss/multiselect/_index.scss

@@ -8,10 +8,11 @@ $_kendo-module-meta: (
     dependencies: (
         "button",
         "chip",
+        "floating-label",
         "icon",
         "input",
         "list",
-        "popup",
+        "popup"
     )
 );
 

package/scss/notification/_index.scss

@@ -6,8 +6,9 @@
 $_kendo-module-meta: (
     name: "notification",
     dependencies: (
+        "button",
         "icon",
-        "popup",
+        "popup"
     )
 );
 

package/scss/numerictextbox/_index.scss

@@ -6,8 +6,10 @@
 $_kendo-module-meta: (
     name: "numeric-textbox",
     dependencies: (
-        "input",
+        "button",
+        "floating-label",
         "icon",
+        "input"
     )
 );
 

package/scss/orgchart/_index.scss

@@ -7,14 +7,18 @@
 $_kendo-module-meta: (
     name: "orgchart",
     dependencies: (
+        "action-buttons",
+        "avatar",
+        "button",
         "card",
         "dropdown-list",
         "form",
         "icon",
         "menu",
+        "menu-button",
         "textbox",
         "upload",
-        "window",
+        "window"
     )
 );
 

package/scss/pager/_index.scss

@@ -8,7 +8,7 @@ $_kendo-module-meta: (
     dependencies: (
         "button",
         "dropdown-list",
-        "icon",
+        "icon"
     )
 );
 

package/scss/pager/_layout.scss

@@ -88,9 +88,13 @@
         @if ($kendo-pager-item-spacing) {
             margin-left: $kendo-pager-item-spacing;
         }
+    }
 
-        .k-rtl &,
-        [dir="rtl"] & {
+    .k-rtl,
+    [dir="rtl"] {
+        .k-pager-nav + .k-pager-nav,
+        .k-pager-nav + .k-pager-numbers-wrap,
+        .k-pager-numbers-wrap + .k-pager-nav {
             @if ($kendo-pager-item-spacing) {
                 margin-left: 0;
                 margin-right: $kendo-pager-item-spacing;

package/scss/panelbar/_index.scss

@@ -7,7 +7,7 @@ $_kendo-module-meta: (
     name: "panelbar",
     dependencies: (
         "icon",
-        "list",
+        "list"
     )
 );
 

package/scss/panelbar/_layout.scss

@@ -116,24 +116,22 @@
         .k-panelbar-group .k-panelbar-toggle {
             margin-inline-end: calc( #{$kendo-panelbar-header-padding-x} - #{$kendo-panelbar-item-padding-x} );
         }
+    }
 
-
-        .k-rtl &,
-        &.k-rtl,
-        &[dir = "rtl"] {
-            .k-panelbar-group > .k-panelbar-item {
-                // Hierarchy items
-                @for $i from 1 through $kendo-panelbar-item-level-count {
-                    &.k-level-#{$i} {
-                        .k-link {
-                            padding-left: $kendo-panelbar-item-padding-x;
-                            padding-right: calc( #{$kendo-panelbar-item-padding-x} * #{$i} );
-                        }
+    .k-rtl .k-panelbar,
+    .k-panelbar.k-rtl,
+    .k-panelbar [dir = "rtl"] {
+        .k-panelbar-group > .k-panelbar-item {
+            // Hierarchy items
+            @for $i from 1 through $kendo-panelbar-item-level-count {
+                &.k-level-#{$i} {
+                    .k-link {
+                        padding-left: $kendo-panelbar-item-padding-x;
+                        padding-right: calc( #{$kendo-panelbar-item-padding-x} * #{$i} );
                     }
                 }
             }
         }
-
     }
 
 }

package/scss/pdf-viewer/_index.scss

@@ -7,13 +7,15 @@
 $_kendo-module-meta: (
     name: "pdf-viewer",
     dependencies: (
+        "button",
         "combobox",
         "dialog",
         "dropzone",
         "icon",
         "pager",
+        "textbox",
         "toolbar",
-        "window",
+        "window"
     )
 );
 

package/scss/pivotgrid/_index.scss

@@ -6,11 +6,15 @@
 $_kendo-module-meta: (
     name: "pivotgrid",
     dependencies: (
+        "action-buttons",
+        "button",
+        "chip",
+        "form",
         "dialog",
         "grid",
         "icon",
         "list",
-        "treeview",
+        "treeview"
     )
 );
 

package/scss/pivotgrid/_layout.scss

@@ -188,25 +188,9 @@
         cursor: pointer;
         user-select: none;
 
-        .k-flex-row &,
-        .k-flex-row-reverse & {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            writing-mode: vertical-rl;
-
-            .k-icon {
-                vertical-align: baseline;
-            }
-        }
         .k-flex-row-reverse & > span {
             transform: rotate(-180deg);
         }
-
-        .k-flex-col &,
-        .k-flex-col-reverse & {
-            text-align: center;
-        }
     }
 
 
@@ -215,22 +199,8 @@
         position: absolute;
         overflow: hidden;
         z-index: 2;
-
-        .k-flex-row & {
-            right: $kendo-pivotgrid-configurator-button-size;
-        }
-        .k-flex-row-reverse & {
-            left: $kendo-pivotgrid-configurator-button-size;
-        }
-        .k-flex-col & {
-            bottom: $kendo-pivotgrid-configurator-button-size;
-        }
-        .k-flex-col-reverse & {
-            top: $kendo-pivotgrid-configurator-button-size;
-        }
     }
 
-
     // Panel Content
     .k-pivotgrid-configurator-header {
         padding-block: $kendo-pivotgrid-configurator-header-padding-y;
@@ -371,15 +341,35 @@
         min-width: $kendo-pivotgrid-configurator-vertical-width;
     }
 
-    .k-pivotgrid-configurator-vertical.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel {
-        .k-flex-row &,
-        .k-flex-row-reverse & {
+    .k-flex-row {
+        .k-pivotgrid-configurator-overlay {
+            right: $kendo-pivotgrid-configurator-button-size;
+        }
+
+        &-reverse .k-pivotgrid-configurator-overlay {
+            left: $kendo-pivotgrid-configurator-button-size;
+        }
+    }
+
+    .k-flex-row,
+    .k-flex-row-reverse {
+        .k-pivotgrid-configurator-button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            writing-mode: vertical-rl;
+
+            .k-icon {
+                vertical-align: baseline;
+            }
+        }
+
+        .k-pivotgrid-configurator-vertical.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel {
             border-right-width: 0;
             border-left-width: 0;
         }
     }
 
-
     // Horizontal Layout
     .k-pivotgrid-configurator-horizontal {
         width: 100%;
@@ -426,17 +416,31 @@
                 overflow-y: auto;
             }
         }
+    }
 
-        &.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel {
-            .k-flex-col &,
-            .k-flex-col-reverse & {
-                border-top-width: 0;
-                border-bottom-width: 0;
-            }
+    .k-flex-col {
+        .k-pivotgrid-configurator-overlay {
+            bottom: $kendo-pivotgrid-configurator-button-size;
+        }
+
+        &-reverse .k-pivotgrid-configurator-overlay {
+            top: $kendo-pivotgrid-configurator-button-size;
         }
     }
 
 
+    .k-flex-col,
+    .k-flex-col-reverse {
+        .k-pivotgrid-configurator-button {
+            text-align: center;
+        }
+
+        .k-pivotgrid-configurator-horizontal.k-pivotgrid-configurator-push .k-pivotgrid-configurator-panel {
+            border-top-width: 0;
+            border-bottom-width: 0;
+        }
+    }
+
 
     // Pivotgrid export
     .k-pdf-export-shadow {

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/popover/_index.scss

@@ -6,8 +6,11 @@
 $_kendo-module-meta: (
     name: "popover",
     dependencies: (
+        "action-buttons",
+        "button",
         "card",
-        "popup",
+        "icon",
+        "popup"
     )
 );
 

package/scss/rating/_index.scss

@@ -6,7 +6,7 @@
 $_kendo-module-meta: (
     name: "rating",
     dependencies: (
-        "icon",
+        "icon"
     )
 );
 

package/scss/responsivepanel/_index.scss

@@ -6,7 +6,7 @@
 $_kendo-module-meta: (
     name: "responsive-panel",
     dependencies: (
-        "icon",
+        "icon"
     )
 );
 

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/scheduler/_index.scss

@@ -7,14 +7,24 @@
 $_kendo-module-meta: (
     name: "scheduler",
     dependencies: (
+        "action-buttons",
         "adaptive",
         "button",
+        "calendar",
+        "checkbox",
         "date-time-picker",
         "dialog",
         "dropdown-list",
+        "form",
         "icon",
+        "numeric-textbox",
+        "radio",
+        "textarea",
+        "textbox",
+        "toolbar",
         "tooltip",
-        "time-marker"
+        "time-marker",
+        "window"
     )
 );
 

package/scss/scroller/_index.scss

@@ -6,7 +6,7 @@
 $_kendo-module-meta: (
     name: "scroller",
     dependencies: (
-        "icon",
+        "icon"
     )
 );
 

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/_index.scss

@@ -7,7 +7,7 @@ $_kendo-module-meta: (
     name: "scrollview",
     dependencies: (
         "button",
-        "icon",
+        "icon"
     )
 );
 

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/searchbox/_index.scss

@@ -7,8 +7,9 @@ $_kendo-module-meta: (
     name: "searchbox",
     dependencies: (
         "button",
+        "floating-label",
         "icon",
-        "input",
+        "input"
     )
 );
 

package/scss/signature/_index.scss

@@ -7,7 +7,10 @@ $_kendo-module-meta: (
     name: "signature",
     dependencies: (
         "button",
+        "color-picker",
+        "icon",
         "input",
+        "split-button"
     )
 );
 

package/scss/slider/_index.scss

@@ -8,7 +8,7 @@ $_kendo-module-meta: (
     dependencies: (
         "button",
         "icon",
-        "tooltip",
+        "tooltip"
     )
 );
 

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/slider/_theme.scss

@@ -1,10 +1,5 @@
 @mixin kendo-slider--theme-base() {
 
-    // TODO: move to variables
-    $kendo-slider-tick-horizontal-image: k-map-get($_kendo-data-uris, "slider-h.gif") !default;
-    $kendo-slider-tick-vertical-image: k-map-get($_kendo-data-uris, "slider-v.gif") !default;
-
-
     // Slider
     .k-slider {
         // TODO: extract variables

package/scss/slider/_variables.scss

@@ -1,7 +1,3 @@
-@import "./images/slider-h.scss";
-@import "./images/slider-v.scss";
-
-
 // Slider
 /// The default size of the Slider.
 /// @group slider
@@ -117,3 +113,10 @@ $kendo-slider-selection-bg: $kendo-color-primary !default;
 /// @group slider
 /// The opacity of the disabled Slider.
 $kendo-slider-disabled-opacity: null !default;
+
+/// The background image of the horizontal Slider tick.
+/// @group slider
+$kendo-slider-tick-horizontal-image: "data:image/gif;base64,R0lGODlhAQC0AIABALi4uAAAACH5BAEAAAEALAAAAAABALQAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default;
+/// The background image of the vertical Slider tick.
+/// @group slider
+$kendo-slider-tick-vertical-image: "data:image/gif;base64,R0lGODlhtAABAIABALi4uAAAACH5BAEAAAEALAAAAAC0AAEAAAIWjIGJxqzazlux2ovlzND2rAHgSIZWAQA7" !default;

package/scss/split-button/_index.scss

@@ -8,7 +8,7 @@ $_kendo-module-meta: (
     dependencies: (
         "button",
         "icon",
-        "menu",
+        "menu"
     )
 );
 

package/scss/splitter/_index.scss

@@ -7,8 +7,7 @@ $_kendo-module-meta: (
     name: "splitter",
     dependencies: (
         "draggable",
-        "icon",
-        // "resizable",
+        "icon"
     )
 );