@progress/kendo-theme-bootstrap 5.0.0-next.2 → 5.0.0

package/scss/fab/_theme.scss

@@ -1,12 +1,11 @@
 @include exports( "fab/theme/bootstrap" ) {
-    // FAB
-    .k-fab {
-        @include box-shadow($fab-shadow);
-    }
 
     // Normal state
-    @each $name, $color in $fab-theme-colors {
-        .k-fab-#{$name} {
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-fab-solid-#{$name} {
+            @include box-shadow($kendo-fab-shadow);
+            outline: $kendo-fab-border-width solid $color;
+            outline-offset: -$kendo-fab-border-width;
             border-color: $color;
             color: contrast-wcag( $color );
             background-color: $color;
@@ -14,10 +13,9 @@
     }
 
     // Hover state
-    @each $name, $color in $fab-theme-colors {
-        .k-state-hover.k-fab-#{$name},
-        .k-state-hovered.k-fab-#{$name},
-        .k-fab-#{$name}:hover {
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-hover.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:hover {
             border-color: try-darken( $color, 10% );
             color: contrast-wcag( try-darken( $color, 7.5% ) );
             background-color: try-darken( $color, 7.5% );
@@ -25,17 +23,21 @@
     }
 
     // Focus state
-    .k-fab.k-state-focus,
-    .k-fab.k-state-focused,
-    .k-fab:focus {
-        @include box-shadow($fab-focus-shadow);
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-fab-solid-#{$name}.k-focus,
+        .k-fab-solid-#{$name}:focus {
+            outline-style: solid;
+            outline-width: 3px;
+            outline-color: rgba( $color, .5 );
+        }
     }
 
     // Active state
-    @each $name, $color in $fab-theme-colors {
-        .k-state-active.k-fab-#{$name},
-        .k-state-selected.k-fab-#{$name},
-        .k-fab-#{$name}:active {
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-active.k-fab-solid-#{$name},
+        .k-selected.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:active {
+            @include box-shadow($kendo-fab-active-shadow);
             border-color: try-darken( $color, 12.5% );
             color: contrast-wcag( try-darken( $color, 10% ) );
             background-color: try-darken( $color, 10% );
@@ -43,86 +45,78 @@
     }
 
     // Disabled state
-    .k-fab.k-state-disabled,
-    .k-fab:disabled {
-        @include box-shadow($fab-disabled-shadow);
-        opacity: 1;
-    }
-
-    @each $name, $color in $fab-theme-colors {
-        .k-state-disabled.k-fab-#{$name},
-        .k-fab-#{$name}:disabled {
-            background-color: tint( $color, 5 );
-        }
-    }
-
-    // Disabled + Focus state
-    .k-fab-item:focus,
-    .k-fab-item.k-state-focus,
-    .k-fab-item.k-state-focused {
-        &:disabled,
-        &.k-state-disabled {
-            .k-fab-item-text,
-            .k-fab-item-icon {
-                @include box-shadow($fab-item-disabled-focus-shadow);
-            }
+    @each $name, $color in $kendo-fab-theme-colors {
+        .k-disabled.k-fab-solid-#{$name},
+        .k-fab-solid-#{$name}:disabled {
+            @include box-shadow($kendo-fab-disabled-shadow);
+            background-color: try-tint( $color, 4.5 );
+            color: try-tint( contrast-wcag( $color ), 5 );
+            opacity: 1;
         }
     }
 
     // Items
     .k-fab-item-text {
         @include fill(
-            $fab-item-text,
-            $fab-item-bg,
-            $fab-item-border
+            $kendo-fab-item-text,
+            $kendo-fab-item-bg,
+            $kendo-fab-item-border
         );
-        @include box-shadow($fab-item-shadow);
+        @include box-shadow($kendo-fab-item-shadow);
     }
     .k-fab-item-icon {
         @include fill(
-            $fab-item-icon-text,
-            $fab-item-icon-bg,
-            $fab-item-icon-border
+            $kendo-fab-item-icon-text,
+            $kendo-fab-item-icon-bg,
+            $kendo-fab-item-icon-border
         );
-        @include box-shadow($fab-item-shadow);
+        @include box-shadow($kendo-fab-item-shadow);
+        outline: $kendo-fab-border-width solid $kendo-button-bg;
+        outline-offset: -$kendo-fab-border-width;
     }
 
     // Hover state
-    .k-fab-item.k-state-hover .k-fab-item-icon,
-    .k-fab-item.k-state-hovered .k-fab-item-icon,
+    .k-fab-item.k-hover .k-fab-item-icon,
     .k-fab-item:hover .k-fab-item-icon {
-        border-color: try-darken( $fab-item-icon-border, 10% );
-        color: contrast-wcag( try-darken( $fab-item-icon-bg, 7.5% ) );
-        background-color: try-darken( $fab-item-icon-bg, 7.5% );
+        @include box-shadow($kendo-fab-item-shadow);
+        outline: $kendo-fab-border-width solid try-darken( $kendo-fab-item-icon-border, 10% );
+        outline-offset: -$kendo-fab-border-width;
+        border-color: try-darken( $kendo-fab-item-icon-border, 10% );
+        color: contrast-wcag( try-darken( $kendo-fab-item-icon-bg, 7.5% ) );
+        background-color: try-darken( $kendo-fab-item-icon-bg, 7.5% );
     }
 
     // Focus state
     .k-fab-item:focus .k-fab-item-text,
     .k-fab-item:focus .k-fab-item-icon,
-    .k-fab-item.k-state-focus .k-fab-item-text,
-    .k-fab-item.k-state-focus .k-fab-item-icon,
-    .k-fab-item.k-state-focused .k-fab-item-text,
-    .k-fab-item.k-state-focused .k-fab-item-icon {
-        @include box-shadow($fab-item-focus-shadow);
+    .k-fab-item.k-focus .k-fab-item-text,
+    .k-fab-item.k-focus .k-fab-item-icon {
+        outline-style: solid;
+        outline-width: 3px;
+        outline-color: rgba( $kendo-fab-item-icon-border, .5 );
     }
 
     // Active state
-    .k-fab-item.k-state-active .k-fab-item-icon,
+    .k-fab-item.k-active .k-fab-item-icon,
     .k-fab-item:active .k-fab-item-icon {
-        border-color: try-darken( $fab-item-icon-border, 12.5% );
-        color: contrast-wcag( try-darken( $fab-item-icon-bg, 10% ) );
-        background-color: try-darken( $fab-item-icon-bg, 10% );
+        @include box-shadow($kendo-fab-item-active-shadow);
+        outline: $kendo-fab-border-width solid try-darken( $kendo-fab-item-icon-border, 12.5% );
+        outline-offset: -$kendo-fab-border-width;
+        border-color: try-darken( $kendo-fab-item-icon-border, 12.5% );
+        color: contrast-wcag( try-darken( $kendo-fab-item-icon-bg, 10% ) );
+        background-color: try-darken( $kendo-fab-item-icon-bg, 10% );
     }
 
     // Disabled state
-    .k-fab-item.k-state-disabled,
+    .k-fab-item.k-disabled,
     .k-fab-item:disabled {
         opacity: 1;
 
         .k-fab-item-text,
         .k-fab-item-icon {
-            color: tint( $fab-item-text, 8 );
-            @include box-shadow($fab-item-disabled-shadow);
+            @include box-shadow($kendo-fab-item-disabled-shadow);
+            background-color: try-tint( $kendo-fab-item-bg, 8 );
+            color: try-tint( $kendo-fab-item-text, 8 );
         }
     }
 

package/scss/fab/_variables.scss

@@ -1,77 +1,130 @@
 // Floating Action Button
-$fab-padding-x: $padding-x !default;
-$fab-padding-y: $fab-padding-x !default;
-$fab-border-width: 0px !default;
-$fab-border-radius: $border-radius !default;
-$fab-font-family: $font-family !default;
-$fab-font-size: $font-size !default;
-$fab-line-height: (20 / 16) !default;
 
-$fab-padding-x-sm: ( $fab-padding-x / 2 ) !default;
-$fab-padding-y-sm: ( $fab-padding-y / 2 ) !default;
-
-$fab-padding-x-md: $fab-padding-x !default;
-$fab-padding-y-md: $fab-padding-y !default;
-
-$fab-padding-x-lg: ( $fab-padding-x * 1.5 ) !default;
-$fab-padding-y-lg: ( $fab-padding-y * 1.5 ) !default;
-
-$fab-icon-width: 20px !default;
-$fab-icon-height: $fab-icon-width !default;
-$fab-icon-spacing: map-get( $spacing, 1 ) !default;
-
-$fab-items-padding-x: 0px !default;
-$fab-items-padding-y: map-get( $spacing, 4 ) !default;
-
-$fab-item-text-padding-x: map-get( $spacing, 1 ) !default;
-$fab-item-text-padding-y: $fab-item-text-padding-x !default;
-$fab-item-text-border-width: 1px !default;
-$fab-item-text-border-radius: 2px !default;
-$fab-item-text-font-size: $font-size-xs !default;
-$fab-item-text-line-height: 1 !default;
-
-$fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
-$fab-item-icon-padding-y: $fab-item-icon-padding-x !default;
-$fab-item-icon-border-width: 0 !default;
-$fab-item-icon-border-radius: 50% !default;
-
-$fab-sizes: () !default;
-// sass-lint:disable indentation
-$fab-sizes: map-merge((
-    sm: map-get( $spacing, 4 ),
-    md: map-get( $spacing, 8 ),
-    lg: map-get( $spacing, 16 )
-), $fab-sizes);
-// sass-lint:enable indentation
-
-$fab-theme-colors: () !default;
-$fab-theme-colors: map-merge( $fab-theme-colors, $theme-colors );
-
-$fab-shadow: 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2) !default;
-$fab-focus-shadow: 0 1px 10px rgba(#000000, .22), 0 4px 5px rgba(#000000, .24), 0 2px 4px rgba(#000000, .2) !default;
-$fab-disabled-shadow: 0 6px 10px rgba(0, 0, 0, .06), 0 1px 18px rgba(0, 0, 0, .06), 0 3px 5px rgba(0, 0, 0, .08) !default;
-
-$fab-item-text: $component-text !default;
-$fab-item-bg: $component-bg !default;
-$fab-item-border: $component-border !default;
-
-$fab-item-icon-text: contrast-wcag( $light ) !default;
-$fab-item-icon-bg: $light !default;
-$fab-item-icon-border: $light !default;
-
-$fab-item-shadow: $fab-shadow !default;
-$fab-item-focus-shadow: $fab-focus-shadow !default;
-$fab-item-disabled-shadow: $fab-disabled-shadow !default;
-$fab-item-disabled-focus-shadow: 0 1px 10px rgba(#000000, .12), 0 4px 5px rgba(#000000, .12), 0 2px 4px rgba(#000000, .08) !default;
-
-$fab-border-width-sm: $fab-border-width !default;
-$fab-line-height-sm: $fab-line-height !default;
-$fab-size-sm: calc( #{$fab-line-height-sm * 1em} + #{$fab-padding-y-sm * 2} + #{$fab-border-width-sm * 2} ) !default;
-
-$fab-border-width-md: $fab-border-width !default;
-$fab-line-height-md: $fab-line-height !default;
-$fab-size-md: calc( #{$fab-line-height-md * 1em} + #{$fab-padding-y-md * 2} + #{$fab-border-width-md * 2} ) !default;
-
-$fab-border-width-lg: $fab-border-width !default;
-$fab-line-height-lg: $fab-line-height !default;
-$fab-size-lg: calc( #{$fab-line-height-lg * 1em} + #{$fab-padding-y-lg * 2} + #{$fab-border-width-lg * 2} ) !default;
+/// Width of the border around the FAB.
+/// @group floating-action-button
+$kendo-fab-border-width: 1px !default;
+/// Border radius of the FAB.
+/// @group floating-action-button
+$kendo-fab-border-radius: $border-radius / 2 !default;
+/// Font family of the FAB.
+/// @group floating-action-button
+$kendo-fab-font-family: $font-family !default;
+/// Font size of the FAB.
+/// @group floating-action-button
+$kendo-fab-font-size: $font-size !default;
+/// Line height of the FAB.
+/// @group floating-action-button
+$kendo-fab-line-height: $line-height !default;
+
+/// Horizontal padding of the FAB.
+/// @group floating-action-button
+$kendo-fab-padding-x: $padding-x !default;
+$kendo-fab-padding-x-sm: ( $kendo-fab-padding-x / 2 ) !default;
+$kendo-fab-padding-x-md: $kendo-fab-padding-x !default;
+$kendo-fab-padding-x-lg: ( $kendo-fab-padding-x * 1.5 ) !default;
+
+/// Vertical padding of the FAB.
+/// @group floating-action-button
+$kendo-fab-padding-y: $kendo-fab-padding-x !default;
+$kendo-fab-padding-y-sm: ( $kendo-fab-padding-y / 2 ) !default;
+$kendo-fab-padding-y-md: $kendo-fab-padding-y !default;
+$kendo-fab-padding-y-lg: ( $kendo-fab-padding-y * 1.5 ) !default;
+
+/// FAB icon width.
+/// @group floating-action-button
+$kendo-fab-icon-width: 24px !default;
+/// FAB icon height.
+/// @group floating-action-button
+$kendo-fab-icon-height: $kendo-fab-icon-width !default;
+/// FAB icon spacing.
+/// @group floating-action-button
+$kendo-fab-icon-spacing: map-get( $spacing, 1 ) / 2 !default;
+
+/// FAB items horizontal padding.
+/// @group floating-action-button
+$kendo-fab-items-padding-x: 0px !default;
+/// FAB items vertical padding.
+/// @group floating-action-button
+$kendo-fab-items-padding-y: map-get( $spacing, 4 ) !default;
+
+/// FAB item text horizontal padding.
+/// @group floating-action-button
+$kendo-fab-item-text-padding-x: map-get( $spacing, 1 ) !default;
+/// FAB item text vertical padding.
+/// @group floating-action-button
+$kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-x !default;
+/// Width of the FAB item text border.
+/// @group floating-action-button
+$kendo-fab-item-text-border-width: 1px !default;
+/// Border radius of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-border-radius: 4px !default;
+/// Font size of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-font-size: $font-size-xs !default;
+/// Line height of the FAB item text.
+/// @group floating-action-button
+$kendo-fab-item-text-line-height: 14px !default;
+
+/// FAB item icon horizontal padding.
+/// @group floating-action-button
+$kendo-fab-item-icon-padding-x: map-get( $spacing, 2 ) !default;
+/// FAB item icon vertical padding.
+/// @group floating-action-button
+$kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-x !default;
+/// Width of the FAB item icon border.
+/// @group floating-action-button
+$kendo-fab-item-icon-border-width: 0 !default;
+/// Border radius of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-border-radius: 50% !default;
+/// Width of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-width: 24px !default;
+/// height of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
+
+/// Theme colors map for the FAB.
+/// @group floating-action-button
+$kendo-fab-theme-colors: $theme-colors !default;
+
+/// The base shadow of the FAB.
+/// @group floating-action-button
+$kendo-fab-shadow: 0px 6px 10px rgba(0, 0, 0, .14), 0px 1px 18px rgba(0, 0, 0, .12), 0px 3px 5px rgba(0, 0, 0, .2) !default;
+/// The disabled shadow of the FAB.
+/// @group floating-action-button
+$kendo-fab-disabled-shadow: 0px 6px 10px try-tint( rgba(0, 0, 0, .14), .5 ), 0px 1px 18px try-tint( rgba(0, 0, 0, .12), .5 ), 0px 3px 5px try-tint( rgba(0, 0, 0, .2), .5 ) !default;
+/// The active shadow of the FAB.
+/// @group floating-action-button
+$kendo-fab-active-shadow: null !default;
+
+/// The base text color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-text: $component-text !default;
+/// The base background color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-bg: $component-bg !default;
+/// The base border color of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-border: $component-border !default;
+
+/// The base text color of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-text: $kendo-button-text !default;
+/// The base background color of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-bg: $kendo-button-bg !default;
+/// The base border color of the FAB item icon.
+/// @group floating-action-button
+$kendo-fab-item-icon-border: $kendo-button-border !default;
+
+/// The base shadow of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-shadow: $kendo-fab-shadow !default;
+/// The disabled shadow of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-disabled-shadow: $kendo-fab-disabled-shadow !default;
+/// The active shadow of the FAB item.
+/// @group floating-action-button
+$kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;

package/scss/filemanager/_layout.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/filemanager/_layout";
+@import "~@progress/kendo-theme-default/scss/filemanager/_layout.scss";

package/scss/filemanager/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/filemanager/_theme";
+@import "~@progress/kendo-theme-default/scss/filemanager/_theme.scss";

package/scss/filter/_index.scss

@@ -6,7 +6,7 @@
 @import "../button/_index.scss";
 @import "../input/_index.scss";
 @import "../checkbox/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../numerictextbox/_index.scss";
 @import "../toolbar/_index.scss";

package/scss/floating-label/_variables.scss

@@ -1,10 +1,10 @@
 // Floating label
 $floating-label-scale: 1 !default;
-$floating-label-font-size: $input-font-size !default;
-$floating-label-line-height: $input-line-height !default;
+$floating-label-font-size: $kendo-input-font-size !default;
+$floating-label-line-height: $kendo-input-line-height !default;
 $floating-label-height: calc( #{$floating-label-line-height} * #{$floating-label-font-size} ) !default;
-$floating-label-offset-x: calc( #{$input-padding-x} + #{$input-border-width} ) !default;
-$floating-label-offset-y: calc( #{$floating-label-height} + #{$input-border-width} + #{$input-padding-y} ) !default;
+$floating-label-offset-x: calc( #{$kendo-input-padding-x} + #{$kendo-input-border-width} ) !default;
+$floating-label-offset-y: calc( #{$floating-label-height} + #{$kendo-input-border-width} + #{$kendo-input-padding-y} ) !default;
 
 $floating-label-focus-scale: 1 !default;
 $floating-label-focus-offset-x: 0 !default;

package/scss/forms/_index.scss

@@ -7,7 +7,7 @@
 @import "../button/_variables.scss";
 @import "../input/_variables.scss";
 @import "../toolbar/_index.scss";
-@import "../action-buttons/_variables.scss";
+@import "../action-buttons/_index.scss";
 @import "../window/_variables.scss";
 
 

package/scss/forms/_layout.scss

@@ -34,7 +34,7 @@
 
         .k-form-field {
             > span:not(.k-widget) {
-                padding: calc( #{$padding-y} - #{$input-border-width} ) 0;
+                padding: calc( #{$padding-y} - #{$kendo-input-border-width} ) 0;
                 padding-right: $padding-x;
             }
         }
@@ -45,7 +45,7 @@
 @include exports("edit-form/layout/bootstrap") {
 
     .k-edit-label {
-        padding: calc( #{$padding-y} - #{$input-border-width} ) 0;
+        padding: calc( #{$padding-y} - #{$kendo-input-border-width} ) 0;
     }
 
 }

package/scss/gantt/_index.scss

@@ -6,7 +6,7 @@
 @import "../button/_index.scss";
 @import "../input/_index.scss";
 @import "../validator/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../numerictextbox/_index.scss";
 @import "../window/_index.scss";
 @import "../splitter/_index.scss";

package/scss/grid/_index.scss

@@ -14,7 +14,7 @@
 @import "../radio/_index.scss";
 @import "../validator/_index.scss";
 @import "../autocomplete/_index.scss";
-@import "../datetime/_index.scss";
+@import "../datetimepicker/_index.scss";
 @import "../dropdownlist/_index.scss";
 @import "../numerictextbox/_index.scss";
 @import "../menu/_index.scss";
@@ -23,6 +23,7 @@
 @import "../skeleton/_index.scss";
 @import "../utils/_float.scss";
 @import "../utils/_spacer.scss";
+@import "../list/_index.scss";
 
 
 // Component

package/scss/grid/_theme.scss

@@ -18,8 +18,8 @@
         }
 
         // Hover state
-        tbody tr:hover,
-        tbody tr.k-state-hover {
+        tbody tr:not(.k-detail-row):hover,
+        tbody tr:not(.k-detail-row).k-state-hover {
             color: $grid-hovered-text;
             background-color: $grid-hovered-bg;
         }
@@ -82,12 +82,6 @@
                 @include fill( $bg: $grid-sticky-selected-alt-bg );
             }
 
-            // Hovered state
-            .k-state-hover td,
-            tr:hover td {
-                @include fill( $bg: $grid-sticky-hovered-bg );
-            }
-
             // Selected hover
             .k-state-selected:hover td,
             .k-state-selected.k-state-hover td {
@@ -122,10 +116,10 @@
     }
     .k-grouping-header .k-group-indicator {
         @include fill(
-            $button-text,
-            $button-bg,
-            $button-border,
-            $button-gradient
+            $kendo-button-text,
+            $kendo-button-bg,
+            $kendo-button-border,
+            $kendo-button-gradient
         );
     }
 
@@ -361,13 +355,13 @@
     .k-column-list-item:hover,
     .k-columnmenu-item:hover {
         @include fill(
-            $list-item-hovered-text,
-            $list-item-hovered-bg
+            $kendo-list-item-hover-text,
+            $kendo-list-item-hover-bg
         );
     }
     .k-columnmenu-item:focus,
     .k-columnmenu-item.k-state-focus {
-        @include box-shadow( $list-item-focused-shadow );
+        @include box-shadow( $kendo-list-item-focus-shadow );
     }
 
     .k-column-list-wrapper {
@@ -377,8 +371,8 @@
     .k-columnmenu-item {
         &.k-state-selected {
             @include fill(
-                $list-item-selected-text,
-                $list-item-selected-bg
+                $kendo-list-item-selected-text,
+                $kendo-list-item-selected-bg
             );
         }
     }
@@ -395,28 +389,28 @@
 
             .k-item {
                 @include fill(
-                    $list-item-text,
-                    $list-item-bg
+                    $kendo-list-item-text,
+                    $kendo-list-item-bg
                 );
 
                 &:hover,
                 &.k-state-hover {
                     @include fill(
-                        $list-item-hovered-text,
-                        $list-item-hovered-bg
+                        $kendo-list-item-hover-text,
+                        $kendo-list-item-hover-bg
                     );
                 }
 
                 &.k-state-selected {
                     @include fill(
-                        $list-item-selected-text,
-                        $list-item-selected-bg
+                        $kendo-list-item-selected-text,
+                        $kendo-list-item-selected-bg
                     );
                 }
 
                 &:focus,
                 &.k-state-focused {
-                    @include box-shadow( $list-item-focused-shadow );
+                    @include box-shadow( $kendo-list-item-focus-shadow );
                 }
             }
         }

package/scss/grid/_variables.scss

@@ -14,7 +14,7 @@ $grid-header-font-size: null !default;
 $grid-footer-padding-x: $grid-header-padding-x !default;
 $grid-footer-padding-y: $grid-header-padding-y !default;
 
-$grid-grouping-header-padding-x: ($grid-padding-y / 2) !default;
+$grid-grouping-header-padding-x: $grid-padding-y !default;
 $grid-grouping-header-padding-y: $grid-grouping-header-padding-x !default;
 
 $grid-filter-cell-padding-x: $grid-padding-y !default;
@@ -113,10 +113,8 @@ $grid-edit-cell-padding-y: 5px !default;
 
 $grid-command-cell-button-spacing: map-get( $spacing, 2 ) !default;
 
-$grid-search-width: $input-default-width !default;
-
 $grid-sticky-bg: $grid-bg !default;
-$grid-sticky-text:  $grid-text !default;
+$grid-sticky-text: $grid-text !default;
 $grid-sticky-border: rgba($grid-text, .5) !default;
 
 $grid-sticky-alt-bg: try-shade( $grid-bg, .5 ) !default;
@@ -134,21 +132,21 @@ $grid-sticky-selected-alt-bg: shade($grid-sticky-selected-bg, .4) !default;
 $grid-sticky-hovered-bg: try-shade( $grid-bg ) !default;
 $grid-sticky-selected-hovered-bg: shade($grid-sticky-selected-bg, .7) !default;
 
-$grid-filter-menu-width: 250px !default;
+$grid-column-menu-width: 250px !default;
 
 $grid-filter-menu-check-all-border-bottom-width: 1px !default;
 
 $grid-filter-menu-item-spacing-x: map-get( $spacing, 6 ) !default;
 $grid-filter-menu-item-spacing-y: map-get( $spacing, 2 ) !default;
 
-$grid-column-menu-popup-padding-x: 0 !default;
-$grid-column-menu-popup-padding-y: $padding-y !default;
+$grid-column-menu-popup-padding-x: null !default;
+$grid-column-menu-popup-padding-y: null !default;
 
-$grid-column-menu-item-padding-x: $padding-x-lg !default;
-$grid-column-menu-item-padding-y: $padding-y-sm !default;
+$grid-column-menu-item-padding-x: $kendo-menu-popup-item-padding-x !default;
+$grid-column-menu-item-padding-y: $kendo-menu-popup-item-padding-y !default;
 
-$grid-column-menu-list-item-padding-x: $padding-x-lg !default;
-$grid-column-menu-list-item-padding-y: $padding-y-sm !default;
+$grid-column-menu-list-item-padding-x: $kendo-list-item-padding-x-md !default;
+$grid-column-menu-list-item-padding-y: $kendo-list-item-padding-y-md !default;
 
 $grid-column-menu-items-wrap-padding-x: 0 !default;
 $grid-column-menu-items-wrap-padding-y: map-get( $spacing, 2 ) !default;
@@ -156,8 +154,8 @@ $grid-column-menu-items-wrap-padding-y: map-get( $spacing, 2 ) !default;
 $grid-column-menu-filter-container-padding-x: $padding-x-lg !default;
 $grid-column-menu-filter-container-padding-y: $padding-y-sm !default;
 
-$grid-column-menu-group-header-padding-x: $menu-popup-item-padding-x !default;
-$grid-column-menu-group-header-padding-y: $menu-popup-item-padding-y !default;
+$grid-column-menu-group-header-padding-x: $kendo-menu-popup-item-padding-x-md !default;
+$grid-column-menu-group-header-padding-y: $kendo-menu-popup-item-padding-y-md !default;
 
 $grid-column-menu-group-header-font-size: $font-size-sm !default;
 $grid-column-menu-group-header-line-height: $line-height !default;