@progress/kendo-theme-material 5.3.2-dev.1 → 5.3.2-dev.4

package/dist/all.scss

@@ -10061,7 +10061,7 @@ $kendo-input-sizes: (
 
 $kendo-input-bg: try-shade( $component-bg, .5 ) !default;
 $kendo-input-text: $component-text !default;
-$kendo-input-border: $component-border !default;
+$kendo-input-border: rgba( $component-border, .54 ) !default;
 $kendo-input-shadow: null !default;
 
 $kendo-input-hover-bg: null !default;
@@ -10080,6 +10080,29 @@ $kendo-input-disabled-border: rgba( $component-border, (alpha( $component-border
 $kendo-input-disabled-gradient: null !default;
 $kendo-input-disabled-shadow: null !default;
 
+$kendo-input-outline-bg: null !default;
+$kendo-input-outline-text: null !default;
+$kendo-input-outline-border: null !default;
+
+$kendo-input-outline-hover-bg: null !default;
+$kendo-input-outline-hover-text: null !default;
+$kendo-input-outline-hover-border: null !default;
+
+$kendo-input-outline-focus-bg: null !default;
+$kendo-input-outline-focus-text: null !default;
+$kendo-input-outline-focus-border: null !default;
+$kendo-input-outline-focus-shadow: null !default;
+
+$kendo-input-flat-bg: transparent !default;
+$kendo-input-flat-text: null !default;
+$kendo-input-flat-border: null !default;
+
+$kendo-input-flat-focus-bg: null !default;
+$kendo-input-flat-focus-text: null !default;
+$kendo-input-flat-focus-border: null !default;
+
+$kendo-input-flat-border-radius: null !default;
+
 $kendo-picker-bg: $kendo-input-bg !default;
 $kendo-picker-text: $kendo-input-text !default;
 $kendo-picker-border: $kendo-input-border !default;
@@ -10104,6 +10127,40 @@ $kendo-picker-disabled-border: $kendo-input-disabled-border !default;
 $kendo-picker-disabled-gradient: null !default;
 $kendo-picker-disabled-shadow: null !default;
 
+$kendo-picker-outline-bg: transparent !default;
+$kendo-picker-outline-text: null !default;
+$kendo-picker-outline-border: null !default;
+
+$kendo-picker-outline-hover-bg: null !default;
+$kendo-picker-outline-hover-text: null !default;
+$kendo-picker-outline-hover-border: null !default;
+
+$kendo-picker-outline-focus-bg: nul !default;
+$kendo-picker-outline-focus-text: null !default;
+$kendo-picker-outline-focus-border: null !default;
+$kendo-picker-outline-focus-shadow: null !default;
+
+$kendo-picker-outline-hover-focus-bg: null !default;
+$kendo-picker-outline-hover-focus-text: null !default;
+$kendo-picker-outline-hover-focus-border: null !default;
+
+$kendo-picker-flat-bg: transparent !default;
+$kendo-picker-flat-text: null !default;
+$kendo-picker-flat-border: null !default;
+
+$kendo-picker-flat-hover-bg: null !default;
+$kendo-picker-flat-hover-text: null !default;
+$kendo-picker-flat-hover-border: null !default;
+
+$kendo-picker-flat-focus-bg: null !default;
+$kendo-picker-flat-focus-text: null !default;
+$kendo-picker-flat-focus-border: null !default;
+$kendo-picker-flat-focus-shadow: null !default;
+
+$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-opacity: 1 !default;
 
@@ -10121,7 +10178,7 @@ $kendo-input-values-margin-x: $kendo-input-values-margin-y !default;
 
 // Input actions
 $kendo-input-button-width: null !default;
-$kendo-input-button-border-width: 0px !default;
+$kendo-input-button-border-width: 1px !default;
 $kendo-input-spinner-width: null !default;
 $kendo-input-spinner-icon-offset: null !default;
 
@@ -10481,19 +10538,25 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         @include border-radius( 0 !important ); // sass-lint:disable-line no-important
         border-width: $kendo-input-border-width 0;
         border-top-color: transparent !important; // sass-lint:disable-line no-important
-        background: none !important; // sass-lint:disable-line no-important
+        background-image: none !important; // sass-lint:disable-line no-important
 
-        .k-input-inner {
-            padding-left: 0 !important; // sass-lint:disable-line no-important
-            padding-right: 0 !important; // sass-lint:disable-line no-important
+        &:focus,
+        &.k-focus {
+            @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
+        }
+        &:focus-within {
+            @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
         }
     }
 
-    .k-input-outline,
-    .k-picker-outline {
+    .k-input-outline {
         background: none !important; // sass-lint:disable-line no-important
     }
 
+    .k-picker.k-picker-flat {
+        @include border-radius( $kendo-input-flat-border-radius !important ); // sass-lint:disable-line no-important
+    }
+
 
     // Sizing
     @each $size, $size-props in $kendo-input-sizes {
@@ -10608,6 +10671,20 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         }
     }
 
+    .k-input-solid:focus,
+    .k-input-solid.k-focus {
+        border-width: $kendo-input-border-width;
+        border-top-color: $kendo-input-focus-border !important; // sass-lint:disable-line no-important
+
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            border-top-color: $invalid-border !important; // sass-lint:disable-line no-important
+        }
+    }
+
+
+
     .k-input-flat,
     .k-picker-flat {
 
@@ -10802,6 +10879,218 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
         }
     }
 
+    // Outline
+    .k-input-outline {
+        @include fill (
+            $kendo-input-outline-text,
+            $kendo-input-outline-bg,
+            $kendo-input-outline-border
+        );
+
+        & > .k-input-button {
+            border-color: inherit;
+        }
+
+        & > .k-input-spinner {
+            border-color: inherit;
+
+            & > .k-spinner-increase,
+            & > .k-spinner-decrease {
+                border-color: inherit;
+           }
+        }
+
+        &:hover,
+        &.k-hover {
+            @include fill (
+                $kendo-input-outline-hover-text,
+                $kendo-input-outline-hover-bg,
+                $kendo-input-outline-hover-border
+            );
+        }
+
+        &:focus,
+        &.k-focus {
+            @include fill (
+                $kendo-input-outline-focus-text,
+                $kendo-input-outline-focus-bg,
+                $kendo-input-outline-focus-border
+             );
+            @include box-shadow ( $kendo-input-outline-focus-shadow );
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            @include fill( $border: $invalid-border );
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow($invalid-shadow);
+            }
+            &:focus-within {
+                @include box-shadow($invalid-shadow);
+            }
+        }
+
+    }
+
+    .k-picker-outline {
+        @include fill (
+            $kendo-picker-outline-text,
+            $kendo-picker-outline-bg,
+            $kendo-picker-outline-border
+        );
+
+        &:hover,
+        &.k-hover {
+            @include fill (
+                $kendo-picker-outline-hover-text,
+                $kendo-picker-outline-hover-bg,
+                $kendo-picker-outline-hover-border
+            );
+        }
+
+        &:focus,
+        &.k-focus {
+            @include fill (
+                $kendo-picker-outline-focus-text,
+                $kendo-picker-outline-focus-bg,
+                $kendo-picker-outline-focus-border
+            );
+            @include box-shadow ( $kendo-picker-outline-focus-shadow );
+        }
+
+        &:focus:hover,
+        &:focus.k-hover,
+        &.k-focus:hover,
+        &.k-focus.k-hover {
+            @include fill (
+                $kendo-picker-outline-hover-focus-text,
+                $kendo-picker-outline-hover-focus-bg,
+                $kendo-picker-outline-hover-focus-border
+            );
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            @include fill( $border: $invalid-border );
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow($invalid-shadow);
+            }
+            &:focus-within {
+                @include box-shadow($invalid-shadow);
+            }
+        }
+    }
+
+    // Flat
+    .k-input-flat {
+        @include fill (
+            $kendo-input-flat-text,
+            $kendo-input-flat-bg,
+            $kendo-input-flat-border
+        );
+
+        &:focus,
+        &.k-focus {
+            @include fill (
+                $kendo-input-flat-focus-text,
+                $kendo-input-flat-focus-bg,
+                $kendo-input-flat-focus-border
+            );
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            @include fill( $border: $kendo-input-invalid-border );
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow( $kendo-input-invalid-shadow );
+            }
+            &:focus-within {
+                @include box-shadow( $kendo-input-invalid-shadow );
+            }
+        }
+    }
+
+    .k-picker-flat {
+        @include fill (
+            $kendo-picker-flat-text,
+            $kendo-picker-flat-bg,
+            $kendo-picker-flat-border
+        );
+
+        &:hover,
+        &.k-hover {
+            @include fill (
+                $kendo-picker-flat-hover-text,
+                $kendo-picker-flat-hover-bg,
+                $kendo-picker-flat-hover-border
+            );
+        }
+
+        &:focus,
+        &.k-focus {
+            @include fill (
+                $kendo-picker-flat-focus-text,
+                $kendo-picker-flat-focus-bg,
+                $kendo-picker-flat-focus-border
+            );
+            @include box-shadow( $kendo-picker-flat-focus-shadow );
+        }
+
+        &:focus:hover,
+        &:focus.k-hover,
+        &.k-focus:hover,
+        &.k-focus.k-hover {
+            @include fill (
+                $kendo-picker-flat-hover-focus-text,
+                $kendo-picker-flat-hover-focus-bg,
+                $kendo-picker-flat-hover-focus-border
+            );
+        }
+
+        // Invalid
+        &.k-invalid,
+        &.ng-invalid.ng-touched,
+        &.ng-invalid.ng-dirty {
+            @include fill( $border: $kendo-input-invalid-border );
+
+            .k-input-validation-icon {
+                color: $invalid-text;
+            }
+
+            &:focus,
+            &.k-focus {
+                @include box-shadow( $kendo-input-invalid-shadow );
+            }
+            &:focus-within {
+                @include box-shadow( $kendo-input-invalid-shadow );
+            }
+        }
+    }
+
 }
 
 // #endregion
@@ -10992,6 +11281,7 @@ $floating-label-focus-text: $primary !default;
             );
         }
 
+        &.k-focus > .k-label,
         &.k-state-focused > .k-label {
             @include fill(
                 $color: $floating-label-focus-text,
@@ -11011,6 +11301,8 @@ $floating-label-focus-text: $primary !default;
     // Floating label
     .k-floating-label-container {
 
+        &.k-invalid + .k-label,
+        .k-invalid + .k-label,
         &.k-state-invalid + .k-label,
         .k-state-invalid + .k-label,
         .ng-invalid.ng-touched + .k-label,
@@ -12288,7 +12580,7 @@ $kendo-chip-sizes: (
 
 /// The base background of the chip.
 /// @group chip
-$kendo-chip-base-bg: $kendo-button-text !default;
+$kendo-chip-base-bg: $base-text !default;
 
 /// Theme colors map for the chip.
 /// @group chip
@@ -14169,9 +14461,9 @@ $tooltip-error-border: $tooltip-error-bg !default;
             }
         }
 
-        .k-item {
-            &:focus,
-            &.k-focus {
+        .k-item:focus,
+        .k-item.k-focus {
+            > .k-link {
                 @include box-shadow( $kendo-menu-popup-item-focus-shadow );
             }
         }
@@ -18553,9 +18845,11 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
             color: $calendar-today-nav-text;
 
             &:hover,
+            &.k-hover,
             &.k-state-hover,
             &:focus,
-            &.k-state-focus {
+            &.k-state-focus,
+            &.k-focus {
                 color: $calendar-today-nav-hover-text;
             }
         }
@@ -18576,7 +18870,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
                 .k-link {
                     box-shadow: inset 0 0 0 1px $calendar-today-color;
                 }
-                &.k-state-focused .k-link {
+                &.k-state-focused .k-link,
+                &.k-focus .k-link {
                     box-shadow: inset 0 0 0 1px $calendar-today-color, $calendar-cell-focused-shadow;
                 }
             } @else if $calendar-today-style == color {
@@ -18611,7 +18906,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
 
         // Interactive states
         .k-calendar-td:hover .k-link,
-        .k-calendar-td.k-state-hover .k-link {
+        .k-calendar-td.k-state-hover .k-link,
+        .k-calendar-td.k-hover .k-link {
             @include fill(
                 $calendar-cell-hover-text,
                 $calendar-cell-hover-bg,
@@ -18619,7 +18915,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
                 $calendar-cell-hover-gradient
             );
         }
-        .k-calendar-td.k-state-selected .k-link {
+        .k-calendar-td.k-state-selected .k-link,
+        .k-calendar-td.k-selected .k-link {
             @include fill(
                 $calendar-cell-selected-text,
                 $calendar-cell-selected-bg,
@@ -18628,7 +18925,9 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
             );
         }
         .k-calendar-td.k-state-selected:hover .k-link,
-        .k-calendar-td.k-state-selected.k-state-hover .k-link {
+        .k-calendar-td.k-state-selected.k-state-hover .k-link,
+        .k-calendar-td.k-selected:hover .k-link,
+        .k-calendar-td.k-selected.k-hover .k-link {
             @include fill(
                 $calendar-cell-selected-hover-text,
                 $calendar-cell-selected-hover-bg,
@@ -18637,11 +18936,14 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
             );
         }
         .k-calendar-td.k-state-focused .k-link,
-        .k-calendar-td.k-state-focus .k-link {
+        .k-calendar-td.k-state-focus .k-link,
+        .k-calendar-td.k-focus .k-link {
             box-shadow: $calendar-cell-focused-shadow;
         }
         .k-calendar-td.k-state-selected.k-state-focused .k-link,
-        .k-calendar-td.k-state-selected.k-state-focus .k-link {
+        .k-calendar-td.k-state-selected.k-state-focus .k-link,
+        .k-calendar-td.k-selected:focus .k-link,
+        .k-calendar-td.k-selected.k-focus .k-link {
             box-shadow: $calendar-cell-selected-focus-shadow;
         }
 
@@ -18655,7 +18957,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
             box-shadow: inset -1px 0 $calendar-navigation-border;
 
             li:hover,
-            li.k-state-hover {
+            li.k-state-hover,
+            li.k-hover {
                 color: $calendar-today-nav-hover-text;
             }
         }
@@ -18738,7 +19041,8 @@ $infinite-calendar-view-height: ( $calendar-cell-size * 9 ) !default;
         }
 
         .k-range-start.k-state-active,
-        .k-range-end.k-state-active {
+        .k-range-end.k-state-active,
+        .k-range-end.k-active {
             .k-link {
                 box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, .2);
             }
@@ -20794,10 +21098,15 @@ $kendo-treeview-font-family: $font-family !default;
 /// Font size of the treeview component.
 /// @group treeview
 $kendo-treeview-font-size: $font-size-lg !default;
+$kendo-treeview-font-size-sm: $font-size-lg !default;
+$kendo-treeview-font-size-md: $font-size-lg !default;
+$kendo-treeview-font-size-lg: $font-size-lg !default;
 /// Line height of the treeview component.
 /// @group treeview
 $kendo-treeview-line-height: 1.25 !default;
-
+$kendo-treeview-line-height-sm: 1.25 !default;
+$kendo-treeview-line-height-md: 1.25 !default;
+$kendo-treeview-line-height-lg: 1.25 !default;
 /// Indentation of child groups in treeview component.
 /// @group treeview
 $kendo-treeview-indent: 16px !default;
@@ -20805,9 +21114,15 @@ $kendo-treeview-indent: 16px !default;
 /// Horizontal padding of treeview items.
 /// @group treeview
 $kendo-treeview-item-padding-x: map-get( $spacing, 4 ) !default;
+$kendo-treeview-item-padding-x-sm: map-get( $spacing, 4 ) !default;
+$kendo-treeview-item-padding-x-md: map-get( $spacing, 4 ) !default;
+$kendo-treeview-item-padding-x-lg: map-get( $spacing, 4 ) !default;
 /// Vertical padding of treeview items.
 /// @group treeview
 $kendo-treeview-item-padding-y: map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
+$kendo-treeview-item-padding-y-md: map-get( $spacing, 2 ) !default;
+$kendo-treeview-item-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
 /// Border width of treeview items.
 /// @group treeview
 $kendo-treeview-item-border-width: 0px !default;
@@ -20820,22 +21135,22 @@ $kendo-treeview-item-border-radius: null !default;
 /// @group treeview
 $kendo-treeview-sizes: (
     sm: (
-        font-size: $font-size-lg,
-        line-height: 1.25,
-        item-padding-x: map-get( $spacing, 4 ),
-        item-padding-y: map-get( $spacing, 2 ) - map-get( $spacing, thin )
+        font-size: $kendo-treeview-font-size-sm,
+        line-height: $kendo-treeview-line-height-sm,
+        item-padding-x: $kendo-treeview-item-padding-x-sm,
+        item-padding-y: $kendo-treeview-item-padding-y-sm
     ),
     md: (
-        font-size: $font-size-lg,
-        line-height: 1.25,
-        item-padding-x: map-get( $spacing, 4 ),
-        item-padding-y: map-get( $spacing, 2 )
+        font-size: $kendo-treeview-font-size-md,
+        line-height: $kendo-treeview-line-height-md,
+        item-padding-x: $kendo-treeview-item-padding-x-md,
+        item-padding-y: $kendo-treeview-item-padding-y-md
     ),
     lg: (
-        font-size: $font-size-lg,
-        line-height: 1.25,
-        item-padding-x: map-get( $spacing, 4 ),
-        item-padding-y: map-get( $spacing, 2 ) + map-get( $spacing, thin )
+        font-size: $kendo-treeview-font-size-lg,
+        line-height: $kendo-treeview-line-height-lg,
+        item-padding-x: $kendo-treeview-item-padding-x-lg,
+        item-padding-y: $kendo-treeview-item-padding-y-lg
     )
 ) !default;
 
@@ -25518,6 +25833,7 @@ $card-focus-callout-box-shadow-w: null !default;
         @include box-shadow( $card-shadow );
 
         &:focus,
+        &.k-focus,
         &.k-state-focus {
             @include fill(
                 $card-focus-text,
@@ -25526,6 +25842,11 @@ $card-focus-callout-box-shadow-w: null !default;
             );
             @include box-shadow( $card-focus-shadow );
         }
+
+        &.k-selected,
+        &.k-state-selected {
+            @include box-shadow( $card-focus-shadow );
+        }
     }
 
 
@@ -25576,7 +25897,10 @@ $card-focus-callout-box-shadow-w: null !default;
 
     .k-card-wrap {
         &.k-state-focused,
-        &.k-state-selected {
+        &.k-focus,
+        &:focus,
+        &.k-state-selected,
+        &.k-selected {
             > .k-card {
                 @include box-shadow( $card-focus-shadow );
             }
@@ -25598,6 +25922,7 @@ $card-focus-callout-box-shadow-w: null !default;
     .k-card-callout.k-callout-w { @include box-shadow( $card-callout-box-shadow-w ); }
 
     .k-card:focus .k-card-callout,
+    .k-card.k-focus .k-card-callout,
     .k-card.k-state-focus .k-card-callout {
         @include fill(
             $bg: $card-focus-bg,
@@ -28645,6 +28970,8 @@ $panelbar-font-family: $font-family !default;
 $panelbar-font-size: $font-size !default;
 $panelbar-line-height: (20 / 14) !default;
 $panelbar-border-width: 1px !default;
+$panelbar-item-border-width: 1px !default;
+$panelbar-item-border-style: solid !default;
 
 $panelbar-header-padding-x: map-get( $spacing, 6 ) !default;
 $panelbar-header-padding-y: map-get( $spacing, 3 ) !default;
@@ -28774,7 +29101,7 @@ $panelbar-header-expanded-gradient: null !default;
         > .k-panelbar-header {
             // TODO
             border-width: 0;
-            border-style: solid;
+            border-style: $panelbar-item-border-style;
             border-color: inherit;
             display: block;
 
@@ -28797,7 +29124,7 @@ $panelbar-header-expanded-gradient: null !default;
         }
         > .k-item + .k-item,
         > .k-panelbar-header + .k-panelbar-header {
-            border-top-width: 1px;
+            border-top-width: $panelbar-item-border-width;
         }
 
 
@@ -29545,6 +29872,7 @@ $tilelayout-hint-border: $component-border !default;
     }
 
     .k-tilelayout-item:focus,
+    .k-tilelayout-item.k-focus,
     .k-tilelayout-item.k-state-focus,
     .k-tilelayout-item.k-state-focused {
         @include box-shadow($tilelayout-card-focus-shadow);
@@ -31565,6 +31893,7 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
         kendo-numeric-filter-menu,
         kendo-grid-string-filter-menu,
         kendo-grid-date-filter-menu,
+        kendo-grid-numeric-filter-menu,
         kendo-grid-filter-menu-input-wrapper {
             display: flex;
             flex-flow: column nowrap;
@@ -36593,8 +36922,10 @@ $taskboard-drag-placeholder-border: $component-border !default;
             overflow-wrap: anywhere;
 
             &:focus,
+            &.k-focus,
             &.k-state-focus,
             &:hover,
+            &.k-hover,
             &.k-state-hover {
                 text-decoration: underline;
             }
@@ -36725,32 +37056,38 @@ $taskboard-drag-placeholder-border: $component-border !default;
             @include fill( $color: $taskboard-card-header-text );
 
             &:focus,
+            &.k-focus,
             &.k-state-focus {
                 @include fill( $color: $taskboard-card-header-focus-text );
             }
 
             &:hover,
+            &.k-hover,
             &.k-state-hover {
                 @include fill( $color: $taskboard-card-header-hover-text );
             }
         }
 
         &:focus,
+        &.k-focus,
         &.k-state-focus {
             @include fill( $border: $taskboard-card-focus-border );
             @include box-shadow( $taskboard-card-focus-shadow );
         }
 
         &:hover,
+        &.k-hover,
         &.k-state-hover {
             @include fill( $border: $taskboard-card-hover-border );
         }
 
+        &.k-selected,
         &.k-state-selected {
             @include fill( $border: $taskboard-card-selected-border );
             @include box-shadow( $taskboard-card-selected-shadow );
         }
 
+        &.k-disabled,
         &.k-state-disabled {
             @include disabled( $disabled-styling );
         }
@@ -38126,6 +38463,7 @@ $gantt-action-on-offset-text: #000000 !default;
 $gantt-offset-resize-handler-top: 50% !default;
 
 $gantt-validation-tooltip-width: 200px !default;
+$gantt-validation-tooltip-label-width: 50px !default;
 $gantt-validation-tooltip-border: #656565 !default;
 $gantt-validation-tooltip-valid-border: $success !default;
 $gantt-validation-tooltip-invalid-border: $error !default;
@@ -38866,13 +39204,17 @@ $gantt-validation-tooltip-invalid-border: $error !default;
     }
     .k-gantt-tooltip-validation-label {
         display: inline-flex;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+        min-width: $gantt-validation-tooltip-label-width;
     }
     .k-gantt-tooltip-validation-value {
         font-weight: $font-weight-bold;
     }
+    .k-gantt-tooltip-validation-label,
+    .k-gantt-tooltip-validation-value {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }
 
 @include exports("gantt/export") {
@@ -44636,6 +44978,7 @@ $orgchart-line-v-height: 25px !default;
         }
 
         &:focus,
+        &.k-focus,
         &.k-state-focus {
             @include box-shadow( $orgchart-card-focus-shadow );
         }
@@ -44650,6 +44993,7 @@ $orgchart-line-v-height: 25px !default;
         );
     }
     .k-orgchart-node-group-container:focus,
+    .k-orgchart-node-group-container.k-focus,
     .k-orgchart-node-group-container.k-state-focus,
     .k-orgchart-node-group-container.k-state-focused {
         @include box-shadow( $orgchart-node-group-focus-shadow );