@progress/kendo-theme-default 7.1.0-dev.1 → 7.1.0-dev.10

package/scss/fab/_theme.scss

@@ -7,7 +7,7 @@
             outline: $kendo-fab-border-width $kendo-fab-outline-style $color;
             outline-offset: -$kendo-fab-border-width;
             border-color: $color;
-            color: k-contrast-legacy( $color );
+            color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color ));
             background-color: $color;
         }
     }
@@ -16,8 +16,8 @@
     @each $name, $color in $kendo-fab-theme-colors {
         .k-hover.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:hover {
-            border-color: k-try-shade( $color, .5 );
-            background-color: k-try-shade( $color, .5 );
+            border-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 ));
+            background-color: if($kendo-enable-color-system, k-color( #{$name}-hover ), k-try-shade( $color, .5 ));
         }
     }
 
@@ -28,7 +28,7 @@
             @if $kendo-enable-focus-contrast {
                 @include box-shadow( inset 0 0 0 2px currentColor );
             } @else {
-                outline: $kendo-fab-outline-style $kendo-fab-outline-width rgba( $color, .3 );
+                outline: $kendo-fab-outline-style $kendo-fab-outline-width if($kendo-enable-color-system, rgba( k-color( $name, true ), .3 ), rgba( $color, .3 ));
             }
         }
     }
@@ -39,8 +39,8 @@
         .k-selected.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:active {
             @include box-shadow($kendo-fab-active-shadow);
-            border-color: k-try-shade( $color, 1.5);
-            background-color: k-try-shade( $color, 1.5);
+            border-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5));
+            background-color: if($kendo-enable-color-system, k-color( #{$name}-active ), k-try-shade( $color, 1.5));
         }
     }
 
@@ -49,8 +49,8 @@
         .k-disabled.k-fab-solid-#{$name},
         .k-fab-solid-#{$name}:disabled {
             @include box-shadow($kendo-fab-disabled-shadow);
-            background-color: k-try-tint( $color, 5 );
-            color: k-try-tint( k-contrast-legacy( $color ), 5 );
+            background-color: if($kendo-enable-color-system, rgba( k-color( $name, true ), .6 ), k-try-tint( $color, 5 ));
+            color: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .6 ), k-try-tint( k-contrast-legacy( $color ), 5 ));
             opacity: 1;
         }
     }
@@ -79,8 +79,8 @@
     // Hover state
     .k-fab-item.k-hover .k-fab-item-icon,
     .k-fab-item:hover .k-fab-item-icon {
-        border-color: k-try-shade( $kendo-fab-item-icon-border, .5 );
-        background-color: k-try-shade( $kendo-fab-item-icon-bg, .5 );
+        border-color: if($kendo-enable-color-system, k-color( border ), k-try-shade( $kendo-fab-item-icon-border, .5 ));
+        background-color: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-fab-item-icon-bg, .5 ));
     }
 
     // Focus state
@@ -89,7 +89,7 @@
     .k-fab-item.k-focus .k-fab-item-text,
     .k-fab-item.k-focus .k-fab-item-icon {
         @if $kendo-enable-focus-contrast {
-            @include box-shadow( inset 0 0 0 2px if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ) );
+            @include box-shadow( inset 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
         } @else {
             outline: $kendo-fab-item-outline-style $kendo-fab-item-outline-width $kendo-fab-item-outline-color;
         }
@@ -99,8 +99,8 @@
     .k-fab-item.k-active .k-fab-item-icon,
     .k-fab-item:active .k-fab-item-icon {
         @include box-shadow($kendo-fab-item-active-shadow);
-        border-color: k-try-shade( $kendo-fab-item-icon-border, 1);
-        background-color: k-try-shade( $kendo-fab-item-icon-bg, 1);
+        border-color: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-fab-item-icon-border, 1 ));
+        background-color: if($kendo-enable-color-system, k-color( base-active ), k-try-shade( $kendo-fab-item-icon-bg, 1 ));
     }
 
     // Disabled state
@@ -111,8 +111,8 @@
         .k-fab-item-text,
         .k-fab-item-icon {
             @include box-shadow($kendo-fab-item-disabled-shadow);
-            background-color: k-try-tint( $kendo-fab-item-bg, 5 );
-            color: k-try-tint( $kendo-fab-item-text, 5 );
+            background-color: if($kendo-enable-color-system, rgba( k-color( base, true ), .6 ), k-try-tint( $kendo-fab-item-bg, 5 ));
+            color: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .6 ), k-try-tint( $kendo-fab-item-text, 5 ));
         }
     }
 

package/scss/filemanager/_layout.scss

@@ -22,6 +22,7 @@
         border-bottom-width: $kendo-file-manager-toolbar-border-width;
         border-color: inherit;
         flex-shrink: 0;
+        z-index: 1;
     }
 
 
@@ -36,6 +37,10 @@
         overflow: hidden;
     }
 
+    .k-filemanager-splitter {
+        border-width: 0;
+    }
+
 
     // Navigation
     .k-filemanager-navigation {

package/scss/filemanager/_variables.scss

@@ -119,7 +119,7 @@ $kendo-file-manager-listview-item-border: null !default;
 $kendo-file-manager-listview-item-icon-bg: null !default;
 /// The text color of the FileManager ListView item icon.
 /// @group filemanager
-$kendo-file-manager-listview-item-icon-text: k-try-tint($kendo-file-manager-text, 4) !default;
+$kendo-file-manager-listview-item-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) !default;
 /// The border color of the FileManager ListView item icon.
 /// @group filemanager
 $kendo-file-manager-listview-item-icon-border: null !default;
@@ -176,7 +176,7 @@ $kendo-file-manager-preview-border: null !default;
 $kendo-file-manager-preview-icon-bg: null !default;
 /// The text color of the FileManager preview icon.
 /// @group filemanager
-$kendo-file-manager-preview-icon-text: k-try-tint($kendo-file-manager-text, 4) !default;
+$kendo-file-manager-preview-icon-text: if($kendo-enable-color-system, k-color( subtle ), k-try-tint($kendo-file-manager-text, 4)) !default;
 /// The border color of the FileManager preview icon.
 /// @group filemanager
 $kendo-file-manager-preview-icon-border: null !default;

package/scss/forms/_variables.scss

@@ -151,7 +151,7 @@ $kendo-fieldset-border: null !default;
 $kendo-fieldset-legend-bg: null !default;
 /// The text color of the Form legend.
 /// @group form
-$kendo-fieldset-legend-text: k-try-shade( $kendo-body-text, 2 ) !default;
+$kendo-fieldset-legend-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-try-shade( $kendo-body-text, 2 )) !default;
 /// The border color of the Form legend.
 /// @group form
 $kendo-fieldset-legend-border: null !default;

package/scss/gantt/_layout.scss

@@ -291,12 +291,20 @@
 
 
     // Timeline
-    .k-gantt-timeline {
+    .k-gantt-timeline-pane {
 
-        .k-timeline {
+        .k-gantt-timeline {
             height: 100%;
             border-width: 0;
             display: flex;
+
+            *,
+            *::before,
+            *::after,
+            &::before,
+            &::after {
+                box-sizing: border-box;
+            }
         }
         .k-grid-header {}
         .k-grid-content {
@@ -772,7 +780,7 @@
         }
 
         .k-gantt,
-        .k-gantt-timeline,
+        .k-gantt-timeline-pane,
         .k-gantt-dependencies {
             width: auto !important; // stylelint-disable-line declaration-no-important
             height: auto !important; // stylelint-disable-line declaration-no-important
@@ -817,7 +825,7 @@
             margin-inline: -26px;
         }
 
-        .k-gantt-timeline {
+        .k-gantt-timeline-pane {
             .k-header {
                 border-width: 0 $kendo-grid-cell-vertical-border-width 1px 0;
             }
@@ -877,7 +885,7 @@
             margin-right: $kendo-gantt-rtl-milestone-planned-moment-margin-x;
         }
 
-        .k-gantt-timeline .k-milestone-wrap .k-task-start {
+        .k-gantt-timeline-pane .k-milestone-wrap .k-task-start {
             right: $kendo-gantt-rtl-milestone-dot-start-margin-x;
         }
 

package/scss/gantt/_variables.scss

@@ -16,12 +16,12 @@ $kendo-gantt-treelist-bg: null !default;
 $kendo-gantt-treelist-text: null !default;
 $kendo-gantt-treelist-border: null !default;
 
-$kendo-gantt-nonwork-bg: rgba( k-contrast-legacy( $kendo-gantt-bg ), .025 ) !default;
+$kendo-gantt-nonwork-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .03 ), rgba( k-contrast-legacy( $kendo-gantt-bg ), .025 )) !default;
 $kendo-gantt-nonwork-text: null !default;
 $kendo-gantt-nonwork-border: null !default;
 
 $kendo-gantt-line-size: 2px !default;
-$kendo-gantt-line-fill: k-contrast-legacy( $kendo-gantt-bg ) !default;
+$kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $kendo-gantt-bg )) !default;
 $kendo-gantt-line-selected-fill: $kendo-color-primary !default;
 
 $kendo-gantt-dot-size: 8px !default;
@@ -36,19 +36,19 @@ $kendo-gantt-milestone-border: $kendo-gantt-border !default;
 $kendo-gantt-milestone-selected-bg: $kendo-selected-bg !default;
 $kendo-gantt-milestone-selected-border: $kendo-selected-border !default;
 
-$kendo-gantt-summary-bg: k-try-tint( $kendo-gantt-text, 1 ) !default;
-$kendo-gantt-summary-progress-bg: k-try-shade( $kendo-gantt-text, 5 ) !default;
-$kendo-gantt-summary-selected-bg: k-try-tint( $kendo-selected-bg, 6 ) !default;
+$kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 1 )) !default;
+$kendo-gantt-summary-progress-bg: if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-gantt-text, 5 )) !default;
+$kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) !default;
 $kendo-gantt-summary-progress-selected-bg: $kendo-selected-bg !default;
 
 $kendo-gantt-task-border-width: 0px !default;
 $kendo-gantt-task-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-gantt-task-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-gantt-task-bg: k-try-tint( $kendo-gantt-text, 2 ) !default;
-$kendo-gantt-task-text: k-contrast-legacy( $kendo-gantt-text ) !default;
+$kendo-gantt-task-bg: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 2 )) !default;
+$kendo-gantt-task-text: if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $kendo-gantt-text )) !default;
 $kendo-gantt-task-border: null !default;
 $kendo-gantt-task-progress-bg: $kendo-gantt-text !default;
-$kendo-gantt-task-selected-bg: k-try-tint( $kendo-selected-bg, 6 ) !default;
+$kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) !default;
 $kendo-gantt-task-selected-text: $kendo-selected-text !default;
 $kendo-gantt-task-selected-border: null !default;
 $kendo-gantt-task-progress-selected-bg: $kendo-selected-bg !default;
@@ -82,10 +82,10 @@ $kendo-gantt-planned-bg: $kendo-color-primary !default;
 $kendo-gantt-planned-border: $kendo-gantt-planned-bg !default;
 
 $kendo-gantt-delayed-bg: $kendo-color-error !default;
-$kendo-gantt-delayed-bg-lighter: k-color-tint($kendo-gantt-delayed-bg, 5) !default;
+$kendo-gantt-delayed-bg-lighter: if($kendo-enable-color-system, k-color( error-emphasis ), k-color-tint($kendo-gantt-delayed-bg, 5)) !default;
 
 $kendo-gantt-advanced-bg: $kendo-color-success !default;
-$kendo-gantt-advanced-bg-lighter: k-color-tint($kendo-gantt-advanced-bg, 5) !default;
+$kendo-gantt-advanced-bg-lighter: if($kendo-enable-color-system, k-color( success-emphasis ), k-color-tint($kendo-gantt-advanced-bg, 5)) !default;
 
 $kendo-gantt-action-on-offset-text: #000000 !default;
 $kendo-gantt-offset-resize-handler-top: 50% !default;

package/scss/grid/_layout.scss

@@ -778,6 +778,16 @@
         }
     }
 
+    .k-master-row .k-grid-content-sticky::before {
+        content: "";
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+    }
+
     kendo-grid {
         .k-table-row.k-grid-row-sticky {
             border: 0;

package/scss/grid/_theme.scss

@@ -270,14 +270,30 @@
         &.k-table-row.k-selected .k-table-td.k-grid-row-sticky,
         &.k-table-row td.k-grid-content-sticky.k-selected,
         &.k-table-row .k-table-td.k-grid-content-sticky.k-selected {
-            @include fill( $bg: $kendo-grid-sticky-selected-bg );
+            @if($kendo-enable-color-system) {
+                @include fill( $bg: $kendo-grid-sticky-bg );
+
+                &::before {
+                    @include fill( $bg: $kendo-grid-sticky-selected-bg );
+                }
+            } @else {
+                @include fill( $bg: $kendo-grid-sticky-selected-bg );
+            }
         }
 
         &.k-selected.k-table-alt-row td.k-grid-content-sticky,
         &.k-selected.k-table-alt-row .k-table-td.k-grid-row-sticky,
         &.k-table-alt-row td.k-grid-content-sticky.k-selected,
         &.k-table-alt-row .k-table-td.k-grid-content-sticky.k-selected {
-            @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+            @if($kendo-enable-color-system) {
+                @include fill( $bg: $kendo-grid-sticky-alt-bg );
+
+                &::before {
+                    @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+                }
+            } @else {
+                @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+            }
         }
 
 
@@ -299,7 +315,15 @@
         &.k-hover td.k-grid-content-sticky.k-selected,
         &:hover .k-table-td.k-grid-content-sticky.k-selected,
         &.k-hover .k-table-td.k-grid-content-sticky.k-selected {
-            background-color: $kendo-grid-sticky-selected-hover-bg;
+            @if($kendo-enable-color-system) {
+                background-color: $kendo-grid-sticky-hover-bg;
+
+                &::before {
+                    background-color: $kendo-grid-sticky-selected-hover-bg;
+                }
+            } @else {
+                background-color: $kendo-grid-sticky-selected-hover-bg;
+            }
         }
     }
 
@@ -345,14 +369,30 @@
         .k-selected.k-grid-row-sticky .k-table-td,
         .k-grid-row-sticky .k-table-td.k-selected,
         .k-selected.k-grid-content-sticky {
-            @include fill( $bg: $kendo-grid-sticky-selected-bg );
+            @if($kendo-enable-color-system) {
+                @include fill( $bg: $kendo-grid-sticky-bg );
+
+                &::before {
+                    @include fill( $bg: $kendo-grid-sticky-selected-bg );
+                }
+            } @else {
+                @include fill( $bg: $kendo-grid-sticky-selected-bg );
+            }
         }
 
         .k-table-row.k-selected.k-table-alt-row .k-grid-content-sticky,
         .k-selected.k-table-alt-row.k-grid-row-sticky td,
         .k-selected.k-table-alt-row.k-grid-row-sticky .k-table-td,
         .k-table-alt-row .k-selected.k-grid-content-sticky {
-            @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+            @if($kendo-enable-color-system) {
+                @include fill( $bg: $kendo-grid-sticky-alt-bg );
+
+                &::before {
+                    @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+                }
+            } @else {
+                @include fill( $bg: $kendo-grid-sticky-selected-alt-bg );
+            }
         }
 
         // Hover state
@@ -390,7 +430,15 @@
         .k-grid-row-sticky.k-hover .k-table-td.k-selected,
         .k-table-row:hover .k-grid-content-sticky.k-selected,
         .k-table-row.k-hover .k-grid-content-sticky.k-selected {
-            background-color: $kendo-grid-sticky-selected-hover-bg;
+            @if($kendo-enable-color-system) {
+                background-color: $kendo-grid-sticky-hover-bg;
+
+                &::before {
+                    background-color: $kendo-grid-sticky-selected-hover-bg;
+                }
+            } @else {
+                background-color: $kendo-grid-sticky-selected-hover-bg;
+            }
         }
     }
 

package/scss/grid/_variables.scss

@@ -222,7 +222,7 @@ $kendo-grid-grouping-row-bg: $kendo-base-bg !default;
 $kendo-grid-grouping-row-text: $kendo-grid-text !default;
 
 $kendo-grid-sorted-icon-spacing: calc( #{$kendo-padding-md-x} - 1px ) !default;
-$kendo-grid-sorted-bg: rgba( k-contrast-legacy( $kendo-grid-bg ), .02 ) !default;
+$kendo-grid-sorted-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), rgba( k-contrast-legacy( $kendo-grid-bg ), .02 )) !default;
 $kendo-grid-sorting-indicator-text: $kendo-color-primary !default;
 $kendo-grid-sorting-index-font-size: $kendo-font-size-sm !default;
 $kendo-grid-sorting-index-height: $kendo-icon-size !default;
@@ -236,11 +236,13 @@ $kendo-grid-command-cell-button-spacing: k-map-get( $kendo-spacing, 2 ) !default
 // be cautious when changing the next line; see https://github.com/MoOx/reduce-css-calc/issues/38
 $kendo-grid-command-cell-padding-y: calc( #{$kendo-grid-cell-padding-y} - (#{$kendo-button-calc-size} - #{$kendo-line-height-em}) / 2 ) !default;
 
+// Must be a solid color
 $kendo-grid-sticky-bg: $kendo-component-bg !default;
 $kendo-grid-sticky-text: $kendo-grid-text !default;
 $kendo-grid-sticky-border: rgba( black, .3 ) !default;
 
-$kendo-grid-sticky-alt-bg: k-color-shade($kendo-grid-bg, 3.5%) !default;
+// Must be a solid color
+$kendo-grid-sticky-alt-bg: if($kendo-enable-color-system, k-color( base ), k-color-shade($kendo-grid-bg, 3.5%)) !default;
 
 $kendo-grid-sticky-header-bg: $kendo-grid-header-bg !default;
 $kendo-grid-sticky-header-text: $kendo-grid-header-text !default;
@@ -249,11 +251,12 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
 $kendo-grid-sticky-footer-bg: $kendo-grid-header-bg !default;
 $kendo-grid-sticky-footer-hover-bg: $kendo-grid-hover-bg !default;
 
-$kendo-grid-sticky-selected-bg: k-color-mix($kendo-selected-bg, #ffffff, 25%) !default;
-$kendo-grid-sticky-selected-alt-bg: k-color-shade($kendo-grid-sticky-selected-bg, .4) !default;
+$kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), k-color-mix($kendo-selected-bg, #ffffff, 25%)) !default;
+$kendo-grid-sticky-selected-alt-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .24 ), k-color-shade($kendo-grid-sticky-selected-bg, .4)) !default;
 
-$kendo-grid-sticky-hover-bg: k-color-darken($kendo-grid-bg, 8%) !default;
-$kendo-grid-sticky-selected-hover-bg: k-color-shade($kendo-grid-sticky-selected-bg, .7) !default;
+// Must be a solid color
+$kendo-grid-sticky-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken($kendo-grid-bg, 8%)) !default;
+$kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .24 ), k-color-shade($kendo-grid-sticky-selected-bg, .7)) !default;
 
 $kendo-grid-column-menu-width: 230px !default;
 $kendo-grid-column-menu-max-width: 320px !default;
@@ -304,7 +307,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
 
 /// Background color of the grid row resize indicator
 /// @group grid
-$kendo-grid-row-resizer-hover-bg: rgba( k-contrast-color( $kendo-grid-bg ), .12 ) !default;
+$kendo-grid-row-resizer-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) !default;
 /// Active background color of the grid row resize indicator
 /// @group grid
 $kendo-grid-row-resizer-active-bg: $kendo-color-primary !default;

package/scss/index.scss

@@ -152,6 +152,7 @@
 @import "./pdf-viewer/_index.scss";
 @import "./scroller/_index.scss";
 @import "./scrollview/_index.scss";
+@import "./prompt/_index.scss";
 
 
 // Dataviz
@@ -323,6 +324,7 @@
     @include kendo-pdf-viewer--styles();
     @include kendo-scroller--styles();
     @include kendo-scrollview--styles();
+    @include kendo-prompt--styles();
 
 
     // Dataviz

package/scss/input/_layout.scss

@@ -190,12 +190,20 @@
     .k-input-suffix {
         border-color: inherit;
         display: flex;
-        flex-flow: row nowrap;
         align-items: center;
         flex: none;
 
         > * {
             flex-shrink: 0;
+            border: none;
+        }
+
+        &-vertical {
+            flex-flow: column wrap;
+        }
+
+        &-horizontal {
+            flex-flow: row wrap;
         }
     }
 
@@ -203,21 +211,32 @@
     // Input separator
     .k-input-separator {
         margin: 0;
-        width: 0;
-        height: $kendo-icon-size;
-        border-width: 0 0 0 1px;
         border-style: solid;
         border-color: inherit;
+        border-width: 0 0 0 1px;
+        height: $kendo-icon-size;
         align-self: center;
+
+        &-horizontal {
+            height: auto;
+            margin-inline: $kendo-input-md-padding-y;
+            align-self: stretch;
+            border-width: 1px 0 0;
+        }
+
+        &-vertical {
+            height: auto;
+            margin-block: $kendo-input-md-padding-y;
+            align-self: stretch;
+            border-width: 0 0 0 1px;
+        }
     }
 
 
     // Input with icon styles
     .k-input-icon,
     .k-input-validation-icon,
-    .k-input-loading-icon,
-    .k-input-prefix > .k-icon,
-    .k-input-suffix > .k-icon {
+    .k-input-loading-icon {
         flex: none;
         align-self: center;
         display: inline-flex;
@@ -435,12 +454,24 @@
             .k-input-loading-icon,
             .k-clear-value,
             .k-input-prefix > .k-icon,
-            .k-input-suffix > .k-icon {
+            .k-input-prefix > .k-input-prefix-text,
+            .k-input-suffix > .k-icon,
+            .k-input-suffix > .k-input-suffix-text {
                 padding-block: $_padding-y;
                 padding-inline: $_padding-y;
                 box-sizing: content-box;
             }
 
+            .k-input-separator {
+                &-horizontal {
+                    margin-inline: $_padding-y;
+                }
+
+                &-vertical {
+                    margin-block: $_padding-y;
+                }
+            }
+
             &.k-icon-picker .k-input-inner {
                 width: calc( #{ $_line-height * 1em } );
                 height: calc( #{ $_line-height * 1em } );