@progress/kendo-theme-default 5.12.0 → 5.12.1-dev.1

package/scss/index.scss

@@ -1,161 +1,160 @@
-@import "core/_index.scss";
-@import "common/_index.scss";
+@import "./core/_index.scss";
+@import "./common/_index.scss";
 
 
 // Typography and utils
-@import "typography/_index.scss";
-@import "utils/_index.scss";
-@import "cursor/_index.scss";
+@import "./typography/_index.scss";
+@import "./utils/_index.scss";
 
 
 // Generic content
-@import "styling/_index.scss";
-@import "icons/_index.scss";
-@import "messagebox/_index.scss";
+@import "./icons/_index.scss";
+@import "./messagebox/_index.scss";
 
 
 // Primitive components
-@import "list/_index.scss";
-@import "listgroup/_index.scss";
-@import "overlay/_index.scss";
-@import "popup/_index.scss";
-@import "ripple/_index.scss";
-@import "table/_index.scss";
-@import "virtual-scroller/_index.scss";
+@import "./draggable/_index.scss";
+@import "./list/_index.scss";
+@import "./listgroup/_index.scss";
+@import "./overlay/_index.scss";
+@import "./popup/_index.scss";
+@import "./ripple/_index.scss";
+@import "./table/_index.scss";
+@import "./virtual-scroller/_index.scss";
 
 
 // Indicators
-@import "avatar/_index.scss";
-@import "badge/_index.scss";
-@import "chip/_index.scss";
-@import "color-preview/_index.scss";
-@import "loader/_index.scss";
-// @import "loading/_index.scss";
-@import "skeleton/_index.scss";
+@import "./avatar/_index.scss";
+@import "./badge/_index.scss";
+@import "./chip/_index.scss";
+@import "./color-preview/_index.scss";
+@import "./loader/_index.scss";
+// @import "./loading/_index.scss";
+@import "./skeleton/_index.scss";
 
 
 // Form helpers
-@import "forms/_index.scss";
-@import "validator/_index.scss";
-@import "floating-label/_index.scss";
+@import "./forms/_index.scss";
+@import "./validator/_index.scss";
+@import "./floating-label/_index.scss";
 
 
 // Native forms
-@import "button/_index.scss";
-@import "split-button/_index.scss";
-@import "menu-button/_index.scss";
-@import "input/_index.scss";
-@import "textbox/_index.scss";
-@import "textarea/_index.scss";
-@import "checkbox/_index.scss";
-@import "listbox/_index.scss";
-@import "progressbar/_index.scss";
-@import "radio/_index.scss";
-@import "slider/_index.scss";
+@import "./button/_index.scss";
+@import "./split-button/_index.scss";
+@import "./menu-button/_index.scss";
+@import "./input/_index.scss";
+@import "./textbox/_index.scss";
+@import "./textarea/_index.scss";
+@import "./checkbox/_index.scss";
+@import "./listbox/_index.scss";
+@import "./progressbar/_index.scss";
+@import "./radio/_index.scss";
+@import "./slider/_index.scss";
 
 
 // Form requirements
-@import "calendar/_index.scss";
-@import "timeselector/_index.scss";
+@import "./calendar/_index.scss";
+@import "./timeselector/_index.scss";
 
 
 // Augmented forms
-@import "autocomplete/_index.scss";
-@import "captcha/_index.scss";
-@import "colorpalette/_index.scss";
-@import "colorgradient/_index.scss";
-@import "coloreditor/_index.scss";
-@import "colorpicker/_index.scss";
-@import "combobox/_index.scss";
-@import "dateinput/_index.scss";
-@import "datepicker/_index.scss";
-@import "timepicker/_index.scss";
-@import "datetimepicker/_index.scss";
-@import "timedurationpicker/_index.scss";
-@import "daterangepicker/_index.scss";
-@import "dropdowngrid/_index.scss";
-@import "dropdownlist/_index.scss";
-@import "dropdowntree/_index.scss";
-@import "maskedtextbox/_index.scss";
-@import "multiselect/_index.scss";
-@import "numerictextbox/_index.scss";
-@import "rating/_index.scss";
-@import "searchbox/_index.scss";
-@import "switch/_index.scss";
-@import "upload/_index.scss";
-@import "dropzone/_index.scss";
+@import "./autocomplete/_index.scss";
+@import "./captcha/_index.scss";
+@import "./colorpalette/_index.scss";
+@import "./colorgradient/_index.scss";
+@import "./coloreditor/_index.scss";
+@import "./colorpicker/_index.scss";
+@import "./combobox/_index.scss";
+@import "./dateinput/_index.scss";
+@import "./datepicker/_index.scss";
+@import "./timepicker/_index.scss";
+@import "./datetimepicker/_index.scss";
+@import "./timedurationpicker/_index.scss";
+@import "./daterangepicker/_index.scss";
+@import "./dropdowngrid/_index.scss";
+@import "./dropdownlist/_index.scss";
+@import "./dropdowntree/_index.scss";
+@import "./maskedtextbox/_index.scss";
+@import "./multiselect/_index.scss";
+@import "./numerictextbox/_index.scss";
+@import "./rating/_index.scss";
+@import "./searchbox/_index.scss";
+@import "./switch/_index.scss";
+@import "./upload/_index.scss";
+@import "./dropzone/_index.scss";
 
 
 // Command interfaces
-@import "action-buttons/_index.scss";
-@import "appbar/_index.scss";
-@import "fab/_index.scss";
-@import "menu/_index.scss";
-@import "toolbar/_index.scss";
+@import "./action-buttons/_index.scss";
+@import "./appbar/_index.scss";
+@import "./fab/_index.scss";
+@import "./menu/_index.scss";
+@import "./toolbar/_index.scss";
 
 
 // Popups and modals
-@import "action-sheet/_index.scss";
-@import "dialog/_index.scss";
-@import "drawer/_index.scss";
-@import "notification/_index.scss";
-@import "popover/_index.scss";
-@import "responsivepanel/_index.scss";
-@import "tooltip/_index.scss";
-@import "window/_index.scss";
+@import "./action-sheet/_index.scss";
+@import "./dialog/_index.scss";
+@import "./drawer/_index.scss";
+@import "./notification/_index.scss";
+@import "./popover/_index.scss";
+@import "./responsivepanel/_index.scss";
+@import "./tooltip/_index.scss";
+@import "./window/_index.scss";
 
 
 // Navigation
-@import "bottom-navigation/_index.scss";
-@import "breadcrumb/_index.scss";
-@import "pager/_index.scss";
-@import "stepper/_index.scss";
-@import "tabstrip/_index.scss";
-@import "treeview/_index.scss";
-@import "wizard/_index.scss";
+@import "./bottom-navigation/_index.scss";
+@import "./breadcrumb/_index.scss";
+@import "./pager/_index.scss";
+@import "./stepper/_index.scss";
+@import "./tabstrip/_index.scss";
+@import "./treeview/_index.scss";
+@import "./wizard/_index.scss";
 
 
 // Layout & containers
-@import "card/_index.scss";
-@import "expansion-panel/_index.scss";
-@import "panelbar/_index.scss";
-@import "splitter/_index.scss";
-@import "tilelayout/_index.scss";
+@import "./card/_index.scss";
+@import "./expansion-panel/_index.scss";
+@import "./panelbar/_index.scss";
+@import "./splitter/_index.scss";
+@import "./tilelayout/_index.scss";
 
 
 // Data management
-@import "grid/_index.scss";
-@import "listview/_index.scss";
-@import "spreadsheet/_index.scss";
-@import "pivotgrid/_index.scss";
-@import "treelist/_index.scss";
-@import "filter/_index.scss";
-@import "filemanager/_index.scss";
-@import "taskboard/_index.scss";
+@import "./grid/_index.scss";
+@import "./listview/_index.scss";
+@import "./spreadsheet/_index.scss";
+@import "./pivotgrid/_index.scss";
+@import "./treelist/_index.scss";
+@import "./filter/_index.scss";
+@import "./filemanager/_index.scss";
+@import "./taskboard/_index.scss";
 
 
 // Editors
-@import "editor/_index.scss";
-@import "imageeditor/_index.scss";
+@import "./editor/_index.scss";
+@import "./imageeditor/_index.scss";
 
 
 // Scheduling
-@import "gantt/_index.scss";
-@import "scheduler/_index.scss";
+@import "./gantt/_index.scss";
+@import "./scheduler/_index.scss";
 
 
 // Misc
-@import "adaptive/_index.scss";
-@import "chat/_index.scss";
-@import "mediaplayer/_index.scss";
-@import "timeline/_index.scss";
-@import "pdf-viewer/_index.scss";
-@import "scroller/_index.scss";
-@import "scrollview/_index.scss";
+@import "./adaptive/_index.scss";
+@import "./chat/_index.scss";
+@import "./mediaplayer/_index.scss";
+@import "./timeline/_index.scss";
+@import "./pdf-viewer/_index.scss";
+@import "./scroller/_index.scss";
+@import "./scrollview/_index.scss";
 
 
 // Dataviz
-@import "dataviz/_index.scss";
-@import "map/_index.scss";
-@import "orgchart/_index.scss";
-@import "signature/_index.scss";
+@import "./dataviz/_index.scss";
+@import "./map/_index.scss";
+@import "./orgchart/_index.scss";
+@import "./signature/_index.scss";

package/scss/input/_index.scss

@@ -7,6 +7,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/input/_layout.scss

@@ -53,9 +53,6 @@
             opacity: $kendo-input-placeholder-opacity;
             user-select: none;
         }
-        &:-ms-input-placeholder {
-            color: $kendo-input-placeholder-text;
-        }
     }
 
     // Input and Textarea
@@ -66,7 +63,7 @@
 
         &:disabled,
         &[disabled] {
-            @include disabled( $disabled-styling );
+            @include disabled( $kendo-disabled-styling );
 
             [disabled] &,
             .k-disabled & {
@@ -75,6 +72,9 @@
             }
         }
     }
+    textarea.k-textarea {
+        overflow: auto;
+    }
 
 
     // Picker
@@ -87,7 +87,7 @@
 
         &:disabled,
         &[disabled] {
-            @include disabled( $disabled-styling );
+            @include disabled( $kendo-disabled-styling );
 
             [disabled] &,
             .k-disabled & {
@@ -114,18 +114,12 @@
         text-overflow: ellipsis;
         -webkit-appearance: none;
 
-        // Hide clear icon
-        &::-ms-clear { display: none; }
-
         // Placeholder text
         &::placeholder {
             color: $kendo-input-placeholder-text;
             opacity: $kendo-input-placeholder-opacity;
             user-select: none;
         }
-        &:-ms-input-placeholder {
-            color: $kendo-input-placeholder-text;
-        }
 
         // Invalid
         &:invalid {
@@ -164,13 +158,15 @@
 
     // Input multiple values
     .k-input-values {
+        min-width: 0px;
         width: 100%;
-        padding: $kendo-input-values-margin-y $kendo-input-values-margin-x;
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
         cursor: text;
     }
-    .k-input-values > .k-searchbar,
-    .k-input-values > .k-input-inner {
-        margin: (-$kendo-input-values-margin-y) (-$kendo-input-values-margin-x);
+    .k-input-values .k-chip-list {
+        display: contents;
     }
 
 
@@ -253,7 +249,7 @@
 
     // Input button
     .k-input-button {
-        width: if( $use-input-button-width, $kendo-input-button-width, auto );
+        width: if( $kendo-use-input-button-width, $kendo-input-button-width, auto );
         border-width: 0;
         border-inline-start-width: $kendo-input-button-border-width;
         flex: none;
@@ -278,7 +274,7 @@
 
     // Input spinner
     .k-input-spinner {
-        width: if( $use-input-spinner-width, $kendo-input-spinner-width, auto );
+        width: if( $kendo-use-input-spinner-width, $kendo-input-spinner-width, auto );
         flex: none;
         display: flex;
         flex-flow: column nowrap;
@@ -299,10 +295,10 @@
             }
         }
         .k-spinner-increase .k-icon {
-            bottom: if( $use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto );
+            bottom: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto );
         }
         .k-spinner-decrease .k-icon {
-            top: if( $use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto );
+            top: if( $kendo-use-input-spinner-icon-offset, calc( -1 * #{$kendo-input-spinner-icon-offset}), auto );
         }
     }
 
@@ -349,13 +345,13 @@
 
     // Sizing
     @each $size, $size-props in $kendo-input-sizes {
-        $_padding-x: map-get( $size-props, padding-x );
-        $_padding-y: map-get( $size-props, padding-y );
-        $_font-size: map-get( $size-props, font-size );
-        $_line-height: map-get( $size-props, line-height );
-        $_icon-size: map-get( $size-props, icon-size );
-        $_button-padding-x: map-get( $size-props, button-padding-x );
-        $_button-padding-y: map-get( $size-props, button-padding-y );
+        $_padding-x: k-map-get( $size-props, padding-x );
+        $_padding-y: k-map-get( $size-props, padding-y );
+        $_font-size: k-map-get( $size-props, font-size );
+        $_line-height: k-map-get( $size-props, line-height );
+        $_icon-size: k-map-get( $size-props, icon-size );
+        $_button-padding-x: k-map-get( $size-props, button-padding-x );
+        $_button-padding-y: k-map-get( $size-props, button-padding-y );
 
         .k-input-#{$size},
         .k-picker-#{$size} {
@@ -363,14 +359,12 @@
             line-height: $_line-height;
 
             .k-input-values {
-                width: 100%;
-                padding: ($_padding-y / 2);
-                gap: ($_padding-y / 2);
-                cursor: text;
+                padding: k-math-div( $_padding-y, 2 );
+                gap: k-math-div( $_padding-y, 2 );
             }
             .k-input-values > .k-searchbar,
             .k-input-values > .k-input-inner {
-                margin: -($_padding-y / 2);
+                margin: - k-math-div( $_padding-y, 2 );
             }
 
             .k-input-inner {
@@ -405,6 +399,9 @@
                 padding: $_padding-y;
             }
         }
+        select.k-picker-#{$size} {
+            padding: $_padding-y $_padding-x;
+        }
     }
 
 

package/scss/input/_theme.scss

@@ -58,7 +58,7 @@
             @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
-                color: $invalid-text;
+                color: $kendo-invalid-text;
             }
 
             &:focus,
@@ -135,7 +135,7 @@
             @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
-                color: $invalid-text;
+                color: $kendo-invalid-text;
             }
 
             &:focus,
@@ -219,7 +219,7 @@
             @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
-                color: $invalid-text;
+                color: $kendo-invalid-text;
             }
 
             &:focus,
@@ -302,7 +302,7 @@
             @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
-                color: $invalid-text;
+                color: $kendo-invalid-text;
             }
 
             &:focus,
@@ -373,7 +373,7 @@
             @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
-                color: $invalid-text;
+                color: $kendo-invalid-text;
             }
 
             &:focus,
@@ -455,7 +455,7 @@
             @include fill( $border: $kendo-input-invalid-border );
 
             .k-input-validation-icon {
-                color: $invalid-text;
+                color: $kendo-invalid-text;
             }
 
             &:focus,

package/scss/input/_variables.scss

@@ -14,10 +14,10 @@ $kendo-input-border-radius: null !default;
 
 /// Horizontal padding of input components.
 /// @group input
-$kendo-input-padding-x: map-get( $spacing, 2 ) !default;
+$kendo-input-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of input components.
 /// @group input
-$kendo-input-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-input-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 /// Font family of input components.
 /// @group input
 $kendo-input-font-family: $font-family !default;
@@ -28,18 +28,18 @@ $kendo-input-font-size: $font-size-md !default;
 /// @group input
 $kendo-input-line-height: $line-height-md !default;
 
-$kendo-input-padding-x-sm: map-get( $spacing, 2 ) !default;
-$kendo-input-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-input-padding-x-sm: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-input-padding-y-sm: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 $kendo-input-font-size-sm: $font-size-md !default;
 $kendo-input-line-height-sm: $line-height-md !default;
 
-$kendo-input-padding-x-md: map-get( $spacing, 2 ) !default;
-$kendo-input-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-input-padding-x-md: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-input-padding-y-md: k-map-get( $kendo-spacing, 1 ) !default;
 $kendo-input-font-size-md: $font-size-md !default;
 $kendo-input-line-height-md: $line-height-md !default;
 
-$kendo-input-padding-x-lg: map-get( $spacing, 3 ) !default;
-$kendo-input-padding-y-lg: map-get( $spacing, 2 ) !default;
+$kendo-input-padding-x-lg: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-input-padding-y-lg: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-input-font-size-lg: $font-size-lg !default;
 $kendo-input-line-height-lg: $line-height-lg !default;
 
@@ -73,9 +73,9 @@ $kendo-input-sizes: (
     )
 ) !default;
 
-$kendo-input-bg: $component-bg !default;
-$kendo-input-text: $component-text !default;
-$kendo-input-border: $component-border !default;
+$kendo-input-bg: $kendo-component-bg !default;
+$kendo-input-text: $kendo-component-text !default;
+$kendo-input-border: $kendo-component-border !default;
 $kendo-input-shadow: null !default;
 
 $kendo-input-hover-bg: null !default;
@@ -149,7 +149,7 @@ $kendo-picker-outline-text: $kendo-button-text !default;
 $kendo-picker-outline-border: rgba( $kendo-picker-outline-text, .5) !default;
 
 $kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default;
-$kendo-picker-outline-hover-text: contrast-wcag( $kendo-picker-outline-hover-bg ) !default;
+$kendo-picker-outline-hover-text: k-contrast-legacy( $kendo-picker-outline-hover-bg ) !default;
 $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default;
 
 $kendo-picker-outline-focus-bg: null !default;
@@ -178,7 +178,7 @@ $kendo-picker-flat-hover-focus-bg: null !default;
 $kendo-picker-flat-hover-focus-text: null !default;
 $kendo-picker-flat-hover-focus-border: null !default;
 
-$kendo-input-placeholder-text: $subtle-text !default;
+$kendo-input-placeholder-text: $kendo-subtle-text !default;
 $kendo-input-placeholder-opacity: 1 !default;
 
 $kendo-input-selected-bg: null !default;
@@ -189,7 +189,7 @@ $kendo-input-clear-value-opacity: .5 !default;
 $kendo-input-clear-value-hover-text: null !default;
 $kendo-input-clear-value-hover-opacity: 1 !default;
 
-$kendo-input-values-margin-y: map-get( $spacing, thin ) !default;
+$kendo-input-values-margin-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 $kendo-input-values-margin-x: $kendo-input-values-margin-y !default;
 
 
@@ -206,5 +206,5 @@ $kendo-input-separator-opacity: .5 !default;
 
 
 // Invalid
-$kendo-input-invalid-border: $invalid-border !default;
-$kendo-input-invalid-shadow: $invalid-shadow !default;
+$kendo-input-invalid-border: $kendo-invalid-border !default;
+$kendo-input-invalid-shadow: $kendo-invalid-shadow !default;

package/scss/list/_index.scss

@@ -7,6 +7,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/list/_layout.scss

@@ -66,7 +66,6 @@
         flex: 1 1 auto;
         overflow: hidden;
         overflow-y: auto;
-        -webkit-overflow-scrolling: touch;
         position: relative;
     }
 
@@ -149,15 +148,6 @@
         position: absolute;
         top: 0;
         inset-inline-end: 0;
-
-        .k-ie & {
-            right: 0;
-        }
-        .k-ie .k-rtl &,
-        .k-ie [dir="rtl"] & {
-            right: auto;
-            left: 0;
-        }
     }
 
 
@@ -189,7 +179,7 @@
     .k-list-filter {
         display: block;
         position: relative;
-        padding: $padding-x;
+        padding: $kendo-padding-md-x;
         box-sizing: border-box;
         flex: none;
     }
@@ -197,22 +187,22 @@
 
     // Switch sizes
     @each $size, $size-props in $kendo-list-sizes {
-        $_font-size: map-get( $size-props, font-size );
-        $_line-height: map-get( $size-props, line-height );
-        $_font-size: map-get( $size-props, font-size );
-        $_line-height: map-get( $size-props, line-height );
-        $_header-padding-x: map-get( $size-props, header-padding-x );
-        $_header-padding-y: map-get( $size-props, header-padding-y );
-        $_header-font-size: map-get( $size-props, header-font-size );
-        $_header-line-height: map-get( $size-props, header-line-height );
-        $_item-padding-x: map-get( $size-props, item-padding-x );
-        $_item-padding-y: map-get( $size-props, item-padding-y );
-        $_item-font-size: map-get( $size-props, item-font-size );
-        $_item-line-height: map-get( $size-props, item-line-height );
-        $_group-item-padding-x: map-get( $size-props, group-item-padding-x );
-        $_group-item-padding-y: map-get( $size-props, group-item-padding-y );
-        $_group-item-font-size: map-get( $size-props, group-item-font-size );
-        $_group-item-line-height: map-get( $size-props, group-item-line-height );
+        $_font-size: k-map-get( $size-props, font-size );
+        $_line-height: k-map-get( $size-props, line-height );
+        $_font-size: k-map-get( $size-props, font-size );
+        $_line-height: k-map-get( $size-props, line-height );
+        $_header-padding-x: k-map-get( $size-props, header-padding-x );
+        $_header-padding-y: k-map-get( $size-props, header-padding-y );
+        $_header-font-size: k-map-get( $size-props, header-font-size );
+        $_header-line-height: k-map-get( $size-props, header-line-height );
+        $_item-padding-x: k-map-get( $size-props, item-padding-x );
+        $_item-padding-y: k-map-get( $size-props, item-padding-y );
+        $_item-font-size: k-map-get( $size-props, item-font-size );
+        $_item-line-height: k-map-get( $size-props, item-line-height );
+        $_group-item-padding-x: k-map-get( $size-props, group-item-padding-x );
+        $_group-item-padding-y: k-map-get( $size-props, group-item-padding-y );
+        $_group-item-font-size: k-map-get( $size-props, group-item-font-size );
+        $_group-item-line-height: k-map-get( $size-props, group-item-line-height );
 
         .k-list-#{$size} {
             font-size: $_font-size;

package/scss/list/_theme.scss

@@ -58,7 +58,7 @@
         &.k-selected:hover,
         &.k-selected.k-hover {
             color: $kendo-list-item-selected-text;
-            background-color: shade( $kendo-list-item-selected-bg );
+            background-color: k-color-shade( $kendo-list-item-selected-bg );
         }
     }