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

package/scss/imageeditor/_index.scss

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

package/scss/imageeditor/_layout.scss

@@ -12,7 +12,7 @@
         font-size: $imageeditor-font-size;
         line-height: $imageeditor-line-height;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -25,7 +25,7 @@
     // Image editor toolbar
     .k-imageeditor-toolbar {
         border-width: 0;
-        border-bottom-width: $toolbar-border-width;
+        border-bottom-width: $kendo-toolbar-border-width;
     }
 
 
@@ -106,14 +106,14 @@
 
         .k-resize-n,
         .k-resize-s {
-            left: calc( 50% - (#{$imageeditor-resize-handle-size / 2}) );
+            left: calc( 50% - (#{k-math-div( $imageeditor-resize-handle-size, 2 )}) );
             width: $imageeditor-resize-handle-size;
             height: 0;
         }
 
         .k-resize-w,
         .k-resize-e {
-            top: calc( 50% - (#{$imageeditor-resize-handle-size / 2}) );
+            top: calc( 50% - (#{k-math-div( $imageeditor-resize-handle-size, 2 )}) );
             width: 0;
             height: $imageeditor-resize-handle-size;
         }
@@ -149,18 +149,3 @@
     }
 
 }
-
-
-
-
-@include exports("imageeditor/layout/IE") {
-
-    .k-ie {
-        .k-imageeditor-canvas {
-            flex-direction: row;
-            align-self: flex-start;
-        }
-    }
-
-}
-

package/scss/imageeditor/_variables.scss

@@ -11,9 +11,9 @@ $imageeditor-font-family: $font-family !default;
 
 $imageeditor-content-border-width: 1px !default;
 
-$imageeditor-action-pane-padding-y: map-get( $spacing, 8 ) !default;
-$imageeditor-action-pane-padding-x: map-get( $spacing, 4 ) !default;
-$imageeditor-action-pane-width: if( $imageeditor-content-border-width == null, 240px, calc(240px + #{$imageeditor-content-border-width}) );
+$imageeditor-action-pane-padding-y: k-map-get( $kendo-spacing, 8 ) !default;
+$imageeditor-action-pane-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$imageeditor-action-pane-width: if( $imageeditor-content-border-width == null, 240px, calc(240px + #{$imageeditor-content-border-width}) ) !default;
 
 $imageeditor-crop-border-width: 1px !default;
 $imageeditor-crop-border-style: dashed !default;
@@ -23,9 +23,9 @@ $imageeditor-resize-handle-margin-y: 1px !default;
 $imageeditor-resize-handle-border-width: 0 2px 2px 0 !default;
 $imageeditor-resize-handle-size: 15px !default;
 
-$imageeditor-bg: $component-bg !default;
-$imageeditor-text: $component-text !default;
-$imageeditor-border: $component-border !default;
+$imageeditor-bg: $kendo-component-bg !default;
+$imageeditor-text: $kendo-component-text !default;
+$imageeditor-border: $kendo-component-border !default;
 
 $imageeditor-content-bg: #c6c6c6 !default;
 $imageeditor-content-text: null !default;

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 & {
@@ -90,7 +87,7 @@
 
         &:disabled,
         &[disabled] {
-            @include disabled( $disabled-styling );
+            @include disabled( $kendo-disabled-styling );
 
             [disabled] &,
             .k-disabled & {
@@ -117,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 {
@@ -167,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;
     }
 
 
@@ -208,7 +201,7 @@
     .k-input-separator {
         margin: 0;
         width: 0;
-        height: $icon-size;
+        height: $kendo-icon-size;
         border-width: 0 0 0 1px;
         border-style: solid;
         border-color: inherit;
@@ -256,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;
@@ -281,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;
@@ -302,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 );
         }
     }
 
@@ -352,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} {
@@ -366,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 {
@@ -408,6 +399,9 @@
                 padding: $_padding-y;
             }
         }
+        select.k-picker-#{$size} {
+            padding: $_padding-y $_padding-x;
+        }
     }