@progress/kendo-theme-default 5.1.2-dev.3 → 5.1.2-dev.7

package/scss/input/_layout.scss

@@ -185,7 +185,9 @@
     // Input with icon styles
     .k-input-icon,
     .k-input-validation-icon,
-    .k-input-loading-icon {
+    .k-input-loading-icon,
+    .k-input-prefix > .k-icon,
+    .k-input-suffix > .k-icon {
         flex: none;
         align-self: center;
         display: inline-flex;
@@ -359,7 +361,9 @@
             .k-input-icon,
             .k-input-validation-icon,
             .k-input-loading-icon,
-            .k-clear-value {
+            .k-clear-value,
+            .k-input-prefix > .k-icon,
+            .k-input-suffix > .k-icon {
                 width: $_icon-size;
                 height: $_icon-size;
             }

package/scss/list/_layout.scss

@@ -99,6 +99,14 @@
             right: 0;
         }
     }
+    .k-list-item-text,
+    .k-list-optionlabel {
+        &::before {
+            content: "\200b";
+            width: 0px;
+            overflow: hidden;
+        }
+    }
     .k-list-optionlabel {
         @extend .k-list-item;
     }

package/scss/listgroup/_variables.scss

@@ -1,6 +1,6 @@
 // Listgroup
 $listgroup-border-width: 1px !default;
-$listgroup-border-radius: $border-radius !default;
+$listgroup-border-radius: $kendo-border-radius-md !default;
 
 $listgroup-font-size: $font-size !default;
 $listgroup-line-height: $line-height !default;

package/scss/loader/_variables.scss

@@ -27,7 +27,7 @@ $loader-secondary-bg: #656565 !default;
 $loader-container-panel-border-width: 1px !default;
 $loader-container-panel-border-style: solid !default;
 $loader-container-panel-border-color: $component-border !default;
-$loader-container-panel-border-radius: $border-radius !default;
+$loader-container-panel-border-radius: $kendo-border-radius-md !default;
 $loader-container-panel-bg: $white !default;
 
 $loader-container-padding-sm: map-get( $spacing, 4 ) !default;

package/scss/notification/_theme.scss

@@ -17,11 +17,13 @@
         box-shadow: $notification-shadow;
     }
 
-    @each $theme, $props in $notification-themes {
-        .k-notification-#{$theme} {
-            border-color: map-get( $props, border );
-            color: map-get( $props, color );
-            background-color: map-get( $props, bg );
+    @each $name, $props in $kendo-notification-theme {
+        .k-notification-#{$name} {
+            @include fill(
+                map-get( $props, color ),
+                map-get( $props, background-color ),
+                map-get( $props, border )
+            );
         }
     }
 

package/scss/notification/_variables.scss

@@ -2,7 +2,7 @@
 $notification-padding-x: 8px !default;
 $notification-padding-y: 4px !default;
 $notification-border-width: 1px !default;
-$notification-border-radius: $border-radius !default;
+$notification-border-radius: $kendo-border-radius-md !default;
 
 $notification-shadow: $popup-shadow !default;
 
@@ -17,18 +17,20 @@ $notification-bg: $component-bg !default;
 $notification-text: $component-text !default;
 $notification-border: $component-border !default;
 
-$notification-themes: () !default;
+@function notification-theme( $colors ) {
+    $_theme: ();
 
-@function notification-theme($name: null, $color: null) {
-    // sass-lint:disable indentation
-    @return (
-        border: $color,
-        color: contrast-wcag( $color ),
-        bg: $color
-    );
-    // sass-lint:enable indentation
-}
+    // sass-lint:disable-block indentation
+    @each $name, $color in $colors {
+        $_theme: map-merge(( $name: (
+            color: contrast-wcag( $color ),
+            background-color: $color,
+            border: $color,
+        )), $_theme );
+    }
 
-@each $theme, $props in $kendo-theme-colors {
-    $notification-themes: map-merge($notification-themes, ($theme: notification-theme($theme, $props)) );
+    @return $_theme;
 }
+
+$kendo-notification-theme-colors: $kendo-theme-colors !default;
+$kendo-notification-theme: notification-theme( $kendo-notification-theme-colors ) !default;

package/scss/orgchart/_variables.scss

@@ -16,7 +16,7 @@ $orgchart-node-container-gap: $orgchart-spacer !default;
 $orgchart-node-group-padding-y: $orgchart-spacer !default;
 $orgchart-node-group-padding-x: $orgchart-node-group-padding-y !default;
 $orgchart-node-group-border-width: 1px !default;
-$orgchart-node-group-border-radius: $border-radius !default;
+$orgchart-node-group-border-radius: $kendo-border-radius-md !default;
 $orgchart-node-group-bg: $base-bg !default;
 $orgchart-node-group-text: $base-text !default;
 $orgchart-node-group-border: $base-border !default;

package/scss/pivotgrid/_layout.scss

@@ -134,6 +134,7 @@
 
     .k-pivotgrid-cell .k-icon {
         cursor: pointer;
+        padding-inline-end: $pivotgrid-icon-spacing;
     }
 
     .k-pivotgrid-total {

package/scss/pivotgrid/_variables.scss

@@ -6,6 +6,7 @@ $pivotgrid-font-family: $font-family !default;
 $pivotgrid-font-size: $font-size !default;
 $pivotgrid-line-height: $line-height !default;
 $pivotgrid-border-width: 1px !default;
+$pivotgrid-icon-spacing: 8px !default;
 
 $pivotgrid-row-header-width: 300px !default;
 $pivotgrid-column-header-height: 75px !default;
@@ -79,7 +80,7 @@ $pivotgrid-configurator-button-size: calc( #{$pivotgrid-line-height * 1em} + #{$
 $pivotgrid-calculated-field-padding-x: $pivotgrid-spacer !default;
 $pivotgrid-calculated-field-padding-y: $pivotgrid-spacer !default;
 $pivotgrid-calculated-field-border-width: 1px !default;
-$pivotgrid-calculated-field-border-radius: $border-radius !default;
+$pivotgrid-calculated-field-border-radius: $kendo-border-radius-md !default;
 $pivotgrid-calculated-field-gap: $pivotgrid-spacer !default;
 
 $pivotgrid-calculated-field-bg: $component-bg !default;

package/scss/popup/_layout.scss

@@ -19,7 +19,7 @@
         }
     }
     .k-animation-container {
-        @include border-bottom-radius-only( $border-radius );
+        @include border-bottom-radius-only( $kendo-border-radius-md );
 
         .k-popup {}
     }

package/scss/popup/_theme.scss

@@ -10,7 +10,7 @@
     }
 
     .k-animation-container {
-        @include border-bottom-radius-only( $border-radius );
+        @include border-bottom-radius-only( $kendo-border-radius );
     }
 
 }

package/scss/progressbar/_layout.scss

@@ -2,7 +2,7 @@
 
     // Base
     .k-progressbar {
-        @include border-radius( $border-radius );
+        @include border-radius( $kendo-border-radius );
         --kendo-progressbar-progress: 0;
         border-width: $progressbar-border-width;
         border-style: solid;

package/scss/scheduler/_layout.scss

@@ -393,7 +393,7 @@
     // Appointments
     kendo-scheduler .k-event,
     .k-event {
-        @include border-radius( $border-radius );
+        @include border-radius( $kendo-border-radius );
         min-height: $scheduler-event-min-height;
         box-sizing: border-box;
         border-width: 0;

package/scss/scheduler/_variables.scss

@@ -19,7 +19,7 @@ $scheduler-footer-border: $toolbar-border !default;
 $scheduler-footer-gradient: $toolbar-gradient !default;
 
 $scheduler-event-min-height: 25px !default;
-$scheduler-event-border-radius: $border-radius !default;
+$scheduler-event-border-radius: $kendo-border-radius-md !default;
 $scheduler-event-line-height: calc( #{$scheduler-event-min-height} - (2 * #{$padding-y}) ) !default;
 
 $scheduler-event-bg: tint( $selected-bg, 2 ) !default;
@@ -86,7 +86,7 @@ $scheduler-tooltip-events-gap: $padding-y !default;
 
 $scheduler-tooltip-event-padding-x: $padding-x !default;
 $scheduler-tooltip-event-padding-y: $padding-y !default;
-$scheduler-tooltip-event-border-radius: $border-radius !default;
+$scheduler-tooltip-event-border-radius: $kendo-border-radius-md !default;
 $scheduler-tooltip-event-gap: $padding-x-sm !default;
 
 $scheduler-tooltip-callout-text: $scheduler-tooltip-bg !default;

package/scss/skeleton/_variables.scss

@@ -1,6 +1,6 @@
 // Skeleton
 $skeleton-text-transform: scale( 1, .6 ) !default;
-$skeleton-text-border-radius: $border-radius !default;
+$skeleton-text-border-radius: $kendo-border-radius-md !default;
 
 $skeleton-rect-border-radius: 0 !default;
 

package/scss/slider/_theme.scss

@@ -7,7 +7,7 @@
 
         .k-slider-track,
         .k-slider-selection {
-            @include border-radius( $border-radius );
+            @include border-radius( $kendo-border-radius );
         }
 
         .k-slider-track {

package/scss/spreadsheet/_layout.scss

@@ -569,7 +569,7 @@
         box-sizing: border-box;
     }
     .k-spreadsheet-filter {
-        @include border-radius( $border-radius );
+        @include border-radius( $kendo-border-radius );
         line-height: 1;
         position: absolute;
         cursor: pointer;

package/scss/spreadsheet/_variables.scss

@@ -15,9 +15,9 @@ $spreadsheet-insert-image-dialog-preview-width: 355px !default;
 $spreadsheet-insert-image-dialog-preview-height: 230px !default;
 $spreadsheet-insert-image-dialog-preview-img: "image-default.png" !default;
 $spreadsheet-insert-image-dialog-preview-border: $component-border !default;
-$spreadsheet-insert-image-dialog-preview-border-radius: $border-radius !default;
+$spreadsheet-insert-image-dialog-preview-border-radius: $kendo-border-radius-md !default;
 $spreadsheet-insert-image-dialog-preview-overlay-shadow: inset 0 0 0 2000px rgba(0, 0, 0, .5) !default;
-$spreadsheet-insert-image-dialog-preview-overlay-border-radius: $border-radius !default;
+$spreadsheet-insert-image-dialog-preview-overlay-border-radius: $kendo-border-radius-md !default;
 $spreadsheet-insert-image-dialog-overlay-hovered-text: $component-bg !default;
 
 $spreadsheet-drawing-handle-width: 6px !default;
@@ -27,7 +27,7 @@ $spreadsheet-drawing-handle-border-width: 1px !default;
 $spreadsheet-drawing-handle-outline-color: $primary !default;
 $spreadsheet-drawing-handle-border-color: $selected-bg !default;
 $spreadsheet-drawing-handle-bg: $primary !default;
-$spreadsheet-drawing-handle-border-radius: $border-radius-lg !default;
+$spreadsheet-drawing-handle-border-radius: $kendo-border-radius-lg !default;
 
 $spreadsheet-drawing-outline-style: solid !default;
 $spreadsheet-drawing-outline-width: 2px !default;

package/scss/stepper/_layout.scss

@@ -101,7 +101,7 @@
 
         // Step label
         .k-step-label {
-            max-width: 10em;
+            max-width: calc(min(100%, 10em));
             display: inline-flex;
             flex-wrap: wrap;
             align-items: center;

package/scss/tabstrip/_variables.scss

@@ -33,7 +33,7 @@ $tabstrip-item-padding-y: $nav-item-padding-y !default;
 $tabstrip-item-border-width: 1px !default;
 /// Border radius of tabs
 /// @group tabstrip
-$tabstrip-item-border-radius: $border-radius !default;
+$tabstrip-item-border-radius: $kendo-border-radius-md !default;
 /// Spacing between tabs
 /// @group tabstrip
 $tabstrip-item-gap: $nav-item-margin !default;

package/scss/taskboard/_variables.scss

@@ -26,7 +26,7 @@ $taskboard-columns-container-gap: $taskboard-spacer !default;
 
 $taskboard-column-width: 320px !default;
 $taskboard-column-border-width: 1px !default;
-$taskboard-column-border-radius: $border-radius !default;
+$taskboard-column-border-radius: $kendo-border-radius-md !default;
 $taskboard-column-bg: $base-bg !default;
 $taskboard-column-text: null !default;
 $taskboard-column-border: transparent !default;
@@ -68,7 +68,7 @@ $taskboard-pane-actions-padding-x: $taskboard-spacer !default;
 $taskboard-card-padding-y: $taskboard-spacer !default;
 $taskboard-card-padding-x: $taskboard-card-padding-y !default;
 $taskboard-card-border-width: $card-border-width !default;
-$taskboard-card-border-radius: $border-radius !default;
+$taskboard-card-border-radius: $kendo-border-radius-md !default;
 $taskboard-card-shadow: $card-shadow !default;
 $taskboard-card-bg: $card-bg !default;
 $taskboard-card-text: $card-text !default;

package/scss/textarea/_layout.scss

@@ -1,8 +1,6 @@
 @include exports( "textarea/layout" ) {
 
     // Textarea
-    .k-textarea {
-        display: flex;
-    }
+    .k-textarea {}
 
 }

package/scss/tilelayout/_variables.scss

@@ -4,7 +4,7 @@ $tilelayout-card-border-width: $card-border-width !default;
 $tilelayout-card-focus-shadow: $card-focus-shadow !default;
 
 $tilelayout-hint-border-width: 1px !default;
-$tilelayout-hint-border-radius: $border-radius-lg !default;
+$tilelayout-hint-border-radius: $kendo-border-radius-lg !default;
 
 $tilelayout-bg: $base-bg !default;
 

package/scss/timeline/_layout.scss

@@ -32,7 +32,7 @@
             display: inline-block;
             text-align: center;
             padding: $timeline-flag-padding-y $timeline-flag-padding-x;
-            border-radius: $border-radius;
+            border-radius: $kendo-border-radius;
             line-height: $timeline-flag-line-height;
             min-width: $timeline-flag-min-width;
             max-width: $timeline-flag-max-width;
@@ -96,7 +96,7 @@
                 }
 
                 &::-webkit-scrollbar-thumb {
-                    border-radius: $border-radius;
+                    border-radius: $kendo-border-radius;
                 }
             }
         }
@@ -140,7 +140,7 @@
             height: 100%;
             width: $timeline-track-size;
             transform: translateX(-50%);
-            border-radius: $border-radius-lg;
+            border-radius: $kendo-border-radius-lg;
         }
 
         .k-timeline-flag-wrap {

package/scss/tooltip/_variables.scss

@@ -3,7 +3,7 @@ $tooltip-padding-y: $padding-y !default;
 $tooltip-padding-x: $padding-x !default;
 $tooltip-max-width: null !default;
 $tooltip-border-width: 0px !default;
-$tooltip-border-radius: $border-radius !default;
+$tooltip-border-radius: $kendo-border-radius-md !default;
 
 $tooltip-font-family: $font-family !default;
 $tooltip-font-size: $font-size !default;

package/scss/treeview/_variables.scss

@@ -25,7 +25,7 @@ $kendo-treeview-item-padding-y: map-get( $spacing, 1 ) !default;
 $kendo-treeview-item-border-width: 0px !default;
 /// Border radius of treeview items.
 /// @group treeview
-$kendo-treeview-item-border-radius: $border-radius !default;
+$kendo-treeview-item-border-radius: $kendo-border-radius-md !default;
 
 
 /// The sizes of the treeview.

package/scss/utils/_border.scss

@@ -41,11 +41,11 @@
     ) !default;
 
     $utils-border-radius: (
-        default: map-get( $spacing, 1 ),
+        default: $kendo-border-radius-md,
         0: 0,
-        sm: ( map-get( $spacing, 1 ) / 4 ),
-        md: ( map-get( $spacing, 1 ) / 2 ),
-        lg: map-get( $spacing, 1 ),
+        sm: $kendo-border-radius-sm,
+        md: $kendo-border-radius-md,
+        lg: $kendo-border-radius-lg,
         full: 9999px
     ) !default;