@progress/kendo-theme-default 6.1.1-dev.4 → 6.1.1-dev.53

package/scss/input/_variables.scss

@@ -23,7 +23,7 @@ $kendo-input-sm-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-input-md-padding-x: $kendo-input-padding-x !default;
 /// Horizontal padding of large input components.
 /// @group input
-$kendo-input-lg-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-input-lg-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 
 /// Vertical padding of input components.
 /// @group input
@@ -98,138 +98,334 @@ $kendo-input-sizes: (
     )
 ) !default;
 
+/// The background color of input components.
+/// @group input
 $kendo-input-bg: $kendo-component-bg !default;
+/// The text color of input components.
+/// @group input
 $kendo-input-text: $kendo-component-text !default;
+/// The border color of input components.
+/// @group input
 $kendo-input-border: $kendo-component-border !default;
+/// The shadow of input components.
+/// @group input
 $kendo-input-shadow: null !default;
 
+/// The background color of hovered input components.
+/// @group input
 $kendo-input-hover-bg: null !default;
+/// The text color of hovered input components.
+/// @group input
 $kendo-input-hover-text: null !default;
+/// The border color of hovered input components.
+/// @group input
 $kendo-input-hover-border: rgba( $kendo-input-border, .16 ) !default;
+/// The shadow of hovered input components.
+/// @group input
 $kendo-input-hover-shadow: null !default;
 
+/// The background color of focused input components.
+/// @group input
 $kendo-input-focus-bg: null !default;
+/// The text color of focused input components.
+/// @group input
 $kendo-input-focus-text: null !default;
+/// The border color of focused input components.
+/// @group input
 $kendo-input-focus-border: $kendo-input-hover-border !default;
+/// The shadow of focused input components.
+/// @group input
 $kendo-input-focus-shadow: 0 0 0 2px rgba( $kendo-input-focus-border, .08 ) !default;
 
+/// The background color of selected input components.
+/// @group input
+$kendo-input-selected-bg: null !default;
+/// The text color of selected input components.
+/// @group input
+$kendo-input-selected-text: null !default;
+
+/// The background color of disabled input components.
+/// @group input
 $kendo-input-disabled-bg: null !default;
+/// The text color of disabled input components.
+/// @group input
 $kendo-input-disabled-text: null !default;
+/// The border color of disabled input components.
+/// @group input
 $kendo-input-disabled-border: null !default;
+/// The gradient of disabled input components.
+/// @group input
 $kendo-input-disabled-gradient: null !default;
+/// The shadow of disabled input components.
+/// @group input
 $kendo-input-disabled-shadow: null !default;
 
+/// The background color of outline input components.
+/// @group input
 $kendo-input-outline-bg: null !default;
+/// The text color of outline input components.
+/// @group input
 $kendo-input-outline-text: $kendo-input-text !default;
+/// The border color of outline input components.
+/// @group input
 $kendo-input-outline-border: rgba( $kendo-button-text, .5) !default;
 
+/// The background color of outline hovered input components.
+/// @group input
 $kendo-input-outline-hover-bg: null !default;
+/// The text color of outline hovered input components.
+/// @group input
 $kendo-input-outline-hover-text: null !default;
+/// The border color of outline hovered input components.
+/// @group input
 $kendo-input-outline-hover-border: rgba( $kendo-button-text, .8) !default;
 
+/// The background color of outline focused input components.
+/// @group input
 $kendo-input-outline-focus-bg: null !default;
+/// The text color of outline focused input components.
+/// @group input
 $kendo-input-outline-focus-text: null !default;
+/// The border color of outline focused input components.
+/// @group input
 $kendo-input-outline-focus-border: null !default;
+/// The shadow of outline focused input components.
+/// @group input
 $kendo-input-outline-focus-shadow: $kendo-input-focus-shadow !default;
 
+/// The background color of flat input components.
+/// @group input
 $kendo-input-flat-bg: null !default;
+/// The text color of flat input components.
+/// @group input
 $kendo-input-flat-text: $kendo-input-text !default;
+/// The border color of flat input components.
+/// @group input
 $kendo-input-flat-border: $kendo-input-border !default;
 
+/// The background color of flat hovered input components.
+/// @group input
 $kendo-input-flat-hover-bg: null !default;
+/// The text color of flat hovered input components.
+/// @group input
 $kendo-input-flat-hover-text: null !default;
+/// The border color of flat hovered input components.
+/// @group input
 $kendo-input-flat-hover-border: $kendo-input-hover-border !default;
 
+/// The background color of flat focused input components.
+/// @group input
 $kendo-input-flat-focus-bg: null !default;
+/// The text color of flat focused input components.
+/// @group input
 $kendo-input-flat-focus-text: null !default;
+/// The border color of flat focused input components.
+/// @group input
 $kendo-input-flat-focus-border: null !default;
+/// The shadow of flat focused input components.
+/// @group input
 $kendo-input-flat-focus-shadow: $kendo-input-focus-shadow !default;
 
+/// The text color of the input placeholder.
+/// @group input
+$kendo-input-placeholder-text: $kendo-subtle-text !default;
+/// The opacity of the input placeholder.
+/// @group input
+$kendo-input-placeholder-opacity: 1 !default;
+
+/// The color of the input clear value icon.
+/// @group input
+$kendo-input-clear-value-text: null !default;
+/// The opacity of the input clear value icon.
+/// @group input
+$kendo-input-clear-value-opacity: .5 !default;
+/// The color of the hovered input clear value icon.
+/// @group input
+$kendo-input-clear-value-hover-text: null !default;
+/// The opacity of the hovered input clear value icon.
+/// @group input
+$kendo-input-clear-value-hover-opacity: 1 !default;
+
+/// The vertical margin of the clear value icon.
+/// @group input
+$kendo-input-values-margin-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+/// The horizontal margin of the clear value icon.
+/// @group input
+$kendo-input-values-margin-x: $kendo-input-values-margin-y !default;
+
+/// Width of the input button.
+/// @group input
+$kendo-input-button-width: $kendo-button-inner-calc-size !default;
+/// Border width of the input button.
+/// @group input
+$kendo-input-button-border-width: 1px !default;
+/// Width of the input spinner button.
+/// @group input
+$kendo-input-spinner-width: $kendo-button-inner-calc-size !default;
+/// Icon offset of the input spinner button.
+/// @group input
+$kendo-input-spinner-icon-offset: null !default;
+
+/// Color of the input separator.
+/// @group input
+$kendo-input-separator-color: $kendo-input-text !default;
+/// Opacity of the input separator.
+/// @group input
+$kendo-input-separator-opacity: .5 !default;
+
+/// Border color of the invalid input components.
+/// @group input
+$kendo-input-invalid-border: $kendo-invalid-border !default;
+/// Shadow of the invalid input components.
+/// @group input
+$kendo-input-invalid-shadow: $kendo-invalid-shadow !default;
+
+/// The background color of picker components.
+/// @group picker
 $kendo-picker-bg: $kendo-button-bg !default;
+/// The text color of picker components.
+/// @group picker
 $kendo-picker-text: $kendo-button-text !default;
+/// The border color of picker components.
+/// @group picker
 $kendo-picker-border: $kendo-button-border !default;
+/// The gradient of picker components.
+/// @group picker
 $kendo-picker-gradient: $kendo-button-gradient !default;
+/// The shadow of picker components.
+/// @group picker
 $kendo-picker-shadow: $kendo-button-shadow !default;
 
+/// The background color of hovered picker components.
+/// @group picker
 $kendo-picker-hover-bg: $kendo-button-hover-bg !default;
+/// The text color of hovered picker components.
+/// @group picker
 $kendo-picker-hover-text: $kendo-button-hover-text !default;
+/// The border color of hovered picker components.
+/// @group picker
 $kendo-picker-hover-border: $kendo-button-hover-border !default;
+/// The gradient of hovered picker components.
+/// @group picker
 $kendo-picker-hover-gradient: $kendo-button-hover-gradient !default;
+/// The shadow of hovered picker components.
+/// @group picker
 $kendo-picker-hover-shadow: $kendo-button-hover-shadow !default;
 
+/// The background color of focused picker components.
+/// @group picker
 $kendo-picker-focus-bg: $kendo-button-focus-bg !default;
+/// The text color of focused picker components.
+/// @group picker
 $kendo-picker-focus-text: $kendo-button-focus-text !default;
+/// The border color of focused picker components.
+/// @group picker
 $kendo-picker-focus-border: $kendo-button-focus-border !default;
+/// The gradient of focused picker components.
+/// @group picker
 $kendo-picker-focus-gradient: $kendo-button-focus-gradient !default;
+/// The shadow of focused picker components.
+/// @group picker
 $kendo-picker-focus-shadow: $kendo-button-focus-shadow !default;
 
+/// The background color of disabled picker components.
+/// @group picker
 $kendo-picker-disabled-bg: null !default;
+/// The text color of disabled picker components.
+/// @group picker
 $kendo-picker-disabled-text: null !default;
+/// The border color of disabled picker components.
+/// @group picker
 $kendo-picker-disabled-border: null !default;
+/// The gradient of disabled picker components.
+/// @group picker
 $kendo-picker-disabled-gradient: null !default;
+/// The shadow of disabled picker components.
+/// @group picker
 $kendo-picker-disabled-shadow: null !default;
 
+/// The background color of outline picker components.
+/// @group picker
 $kendo-picker-outline-bg: null !default;
+/// The text color of outline picker components.
+/// @group picker
 $kendo-picker-outline-text: $kendo-button-text !default;
+/// The border color of outline picker components.
+/// @group picker
 $kendo-picker-outline-border: rgba( $kendo-picker-outline-text, .5) !default;
 
+/// The background color of outline hovered picker components.
+/// @group picker
 $kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default;
+/// The text color of outline hovered picker components.
+/// @group picker
 $kendo-picker-outline-hover-text: k-contrast-legacy( $kendo-picker-outline-hover-bg ) !default;
+/// The border color of outline hovered picker components.
+/// @group picker
 $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default;
 
+/// The background color of outline focused picker components.
+/// @group picker
 $kendo-picker-outline-focus-bg: null !default;
+/// The text color of outline focused picker components.
+/// @group picker
 $kendo-picker-outline-focus-text: null !default;
+/// The border color of outline focused picker components.
+/// @group picker
 $kendo-picker-outline-focus-border: null !default;
+/// The shadow of outline focused picker components.
+/// @group picker
 $kendo-picker-outline-focus-shadow: $kendo-picker-focus-shadow !default;
 
+/// The background color of outline hovered and focused picker components.
+/// @group picker
 $kendo-picker-outline-hover-focus-bg: null !default;
+/// The text color of outline hovered and focused picker components.
+/// @group picker
 $kendo-picker-outline-hover-focus-text: null !default;
+/// The border color of outline hovered and focused picker components.
+/// @group picker
 $kendo-picker-outline-hover-focus-border: null !default;
 
+/// The background color of flat picker components.
+/// @group picker
 $kendo-picker-flat-bg: null !default;
+/// The text color of flat picker components.
+/// @group picker
 $kendo-picker-flat-text: $kendo-button-text !default;
+/// The border color of flat picker components.
+/// @group picker
 $kendo-picker-flat-border: $kendo-button-border !default;
 
+/// The background color of flat hovered picker components.
+/// @group picker
 $kendo-picker-flat-hover-bg: rgba( $kendo-button-text, .04 ) !default;
+/// The text color of flat hovered picker components.
+/// @group picker
 $kendo-picker-flat-hover-text: null !default;
+/// The border color of flat hovered picker components.
+/// @group picker
 $kendo-picker-flat-hover-border: rgba( $kendo-button-border, .16 ) !default;
 
+/// The background color of flat focused picker components.
+/// @group picker
 $kendo-picker-flat-focus-bg: null !default;
+/// The text color of flat focused picker components.
+/// @group picker
 $kendo-picker-flat-focus-text: null !default;
+/// The border color of flat focused picker components.
+/// @group picker
 $kendo-picker-flat-focus-border: null !default;
+/// The shadow of flat focused picker components.
+/// @group picker
 $kendo-picker-flat-focus-shadow: $kendo-picker-focus-shadow !default;
 
+/// The background color of flat hovered and focused picker components.
+/// @group picker
 $kendo-picker-flat-hover-focus-bg: null !default;
+/// The text color of flat hovered and focused picker components.
+/// @group picker
 $kendo-picker-flat-hover-focus-text: null !default;
+/// The border color of flat hovered and focused picker components.
+/// @group picker
 $kendo-picker-flat-hover-focus-border: null !default;
-
-$kendo-input-placeholder-text: $kendo-subtle-text !default;
-$kendo-input-placeholder-opacity: 1 !default;
-
-$kendo-input-selected-bg: null !default;
-$kendo-input-selected-text: null !default;
-
-$kendo-input-clear-value-text: null !default;
-$kendo-input-clear-value-opacity: .5 !default;
-$kendo-input-clear-value-hover-text: null !default;
-$kendo-input-clear-value-hover-opacity: 1 !default;
-
-$kendo-input-values-margin-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
-$kendo-input-values-margin-x: $kendo-input-values-margin-y !default;
-
-
-// Input actions
-$kendo-input-button-width: $kendo-button-inner-calc-size !default;
-$kendo-input-button-border-width: 1px !default;
-$kendo-input-spinner-width: $kendo-button-inner-calc-size !default;
-$kendo-input-spinner-icon-offset: null !default;
-
-
-// Input separator
-$kendo-input-separator-color: $kendo-input-text !default;
-$kendo-input-separator-opacity: .5 !default;
-
-
-// Invalid
-$kendo-input-invalid-border: $kendo-invalid-border !default;
-$kendo-input-invalid-shadow: $kendo-invalid-shadow !default;

package/scss/list/_layout.scss

@@ -42,7 +42,8 @@
     // List header
     // .k-list-header,
     .k-list-group-sticky-header {
-        padding: $kendo-list-header-padding-y $kendo-list-header-padding-x;
+        padding-block: $kendo-list-header-padding-y;
+        padding-inline: $kendo-list-header-padding-x;
         border-width: 0;
         border-width: $kendo-list-header-border-width; // sass-lint:disable-line no-duplicate-properties
         border-style: solid;
@@ -83,7 +84,8 @@
 
     // List item
     .k-list-item {
-        padding: $kendo-list-item-padding-y $kendo-list-item-padding-x;
+        padding-block: $kendo-list-item-padding-y;
+        padding-inline: $kendo-list-item-padding-x;
         border: 0;
         font-size: $kendo-list-item-font-size;
         line-height: $kendo-list-item-line-height;
@@ -118,13 +120,14 @@
         }
     }
     .k-list-optionlabel {
-        @extend .k-list-item;
+        @extend .k-list-item !optional;
     }
 
 
     // List group item
     .k-list-group-item {
-        padding: $kendo-list-group-item-padding-y $kendo-list-group-item-padding-x;
+        padding-block: $kendo-list-group-item-padding-y;
+        padding-inline: $kendo-list-group-item-padding-x;
         border-width: 0;
         border-width: $kendo-list-group-item-border-width; // sass-lint:disable-line no-duplicate-properties
         border-style: solid;
@@ -143,7 +146,8 @@
 
     // List item group label
     .k-list-item-group-label {
-        padding: 0 .5em;
+        padding-block: 0;
+        padding-inline: .5em;
         font-size: .75em;
         position: absolute;
         top: 0;
@@ -210,19 +214,22 @@
 
             // .k-list-header,
             .k-list-group-sticky-header {
-                padding: $_header-padding-y $_header-padding-x;
+                padding-block: $_header-padding-y;
+                padding-inline: $_header-padding-x;
                 font-size: $_header-font-size;
                 line-height: $_header-line-height;
             }
 
             .k-list-item {
-                padding: $_item-padding-y $_item-padding-x;
+                padding-block: $_item-padding-y;
+                padding-inline: $_item-padding-x;
                 font-size: $_item-font-size;
                 line-height: $_item-line-height;
             }
 
             .k-list-group-item {
-                padding: $_group-item-padding-y $_group-item-padding-x;
+                padding-block: $_group-item-padding-y;
+                padding-inline: $_group-item-padding-x;
                 font-size: $_group-item-font-size;
                 line-height: $_group-item-line-height;
             }

package/scss/list/_variables.scss

@@ -55,7 +55,7 @@ $kendo-list-header-font-weight: null !default;
 $kendo-list-item-padding-x: null !default;
 $kendo-list-sm-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-list-md-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-list-lg-item-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-list-lg-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 
 /// Vertical padding of list items, when no size is set.
 /// @group list

package/scss/listgroup/_layout.scss

@@ -35,7 +35,8 @@
 
 
     .k-listgroup-item {
-        padding: $kendo-listgroup-item-padding-y $kendo-listgroup-item-padding-x;
+        padding-block: $kendo-listgroup-item-padding-y;
+        padding-inline: $kendo-listgroup-item-padding-x;
         border-width: 0;
         border-style: solid;
         border-color: inherit;
@@ -47,8 +48,10 @@
         position: relative;
 
         > .k-link {
-            margin: (-$kendo-listgroup-item-padding-y) (-$kendo-listgroup-item-padding-x);
-            padding: $kendo-listgroup-item-padding-y $kendo-listgroup-item-padding-x;
+            margin-block: (-$kendo-listgroup-item-padding-y);
+            margin-inline: (-$kendo-listgroup-item-padding-x);
+            padding-block: $kendo-listgroup-item-padding-y;
+            padding-inline: $kendo-listgroup-item-padding-x;
             color: inherit;
             text-decoration: none;
             outline: 0;
@@ -91,8 +94,10 @@
 
     // Forms in listgroup
     .k-listgroup-form-row {
-        margin: (-$kendo-listgroup-item-padding-y) (-$kendo-listgroup-item-padding-x);
-        padding: $kendo-listgroup-item-padding-y $kendo-listgroup-item-padding-x;
+        margin-block: (-$kendo-listgroup-item-padding-y);
+        margin-inline: (-$kendo-listgroup-item-padding-x);
+        padding-block: $kendo-listgroup-item-padding-y;
+        padding-inline: $kendo-listgroup-item-padding-x;
         display: flex;
         flex-direction: row;
         align-items: center;

package/scss/listview/_layout.scss

@@ -51,7 +51,8 @@
         &::after { display: none; }
     }
     .k-listview-content-padding-rectangle {
-        padding: $kendo-listview-padding-y $kendo-listview-padding-x;
+        padding-block: $kendo-listview-padding-y;
+        padding-inline: $kendo-listview-padding-x;
     }
     .k-listview-content-padding-square {
         padding: $kendo-listview-padding-y;
@@ -68,11 +69,14 @@
         flex-shrink: 0;
     }
     .k-listview-item-padding-rectangle {
-        padding: $kendo-listview-item-padding-y $kendo-listview-item-padding-x;
+        padding-block: $kendo-listview-item-padding-y;
+        padding-inline: $kendo-listview-item-padding-x;
     }
     .k-listview-item-padding-rectangle .k-listview-link {
-        margin: (-$kendo-listview-item-padding-y) (-$kendo-listview-item-padding-x);
-        padding: $kendo-listview-item-padding-y $kendo-listview-item-padding-x;
+        margin-block: (-$kendo-listview-item-padding-y);
+        margin-inline: (-$kendo-listview-item-padding-x);
+        padding-block: $kendo-listview-item-padding-y;
+        padding-inline: $kendo-listview-item-padding-x;
     }
     .k-listview-item-padding-square {
         padding: $kendo-listview-item-padding-y;

package/scss/map/_layout.scss

@@ -46,7 +46,8 @@
 
         // Attribution
         .k-attribution {
-            padding: $kendo-map-attribution-padding-y $kendo-map-attribution-padding-x;
+            padding-block: $kendo-map-attribution-padding-y;
+            padding-inline: $kendo-map-attribution-padding-x;
             border-width: 0;
             font-size: $kendo-map-attribution-font-size;
             z-index: 1000;

package/scss/mediaplayer/_layout.scss

@@ -31,7 +31,8 @@
 
     // Title bar
     .k-mediaplayer-titlebar {
-        padding: $kendo-media-player-titlebar-padding-y $kendo-media-player-titlebar-padding-x;
+        padding-block: $kendo-media-player-titlebar-padding-y;
+        padding-inline: $kendo-media-player-titlebar-padding-x;
         position: absolute;
         z-index: 2;
         top: 0;

package/scss/menu/_layout.scss

@@ -49,7 +49,8 @@
 
     // Menu link
     .k-menu-link {
-        padding: $kendo-menu-item-padding-y $kendo-menu-item-padding-x;
+        padding-block: $kendo-menu-item-padding-y;
+        padding-inline: $kendo-menu-item-padding-x;
         outline: 0;
         color: inherit;
         display: flex;
@@ -93,7 +94,8 @@
         }
 
         > .k-separator {
-            margin: 0 $kendo-menu-separator-spacing;
+            margin-block: 0;
+            margin-inline: $kendo-menu-separator-spacing;
             width: 0;
             height: auto;
             border-width: 0 0 0 1px;
@@ -111,7 +113,8 @@
         }
 
         > .k-menu-item > .k-menu-link {
-            padding: $kendo-menu-popup-item-padding-y $kendo-menu-popup-item-padding-x;
+            padding-block: $kendo-menu-popup-item-padding-y;
+            padding-inline: $kendo-menu-popup-item-padding-x;
             padding-right: $kendo-menu-popup-item-padding-end;
         }
 
@@ -121,7 +124,8 @@
         }
 
         > .k-separator {
-            margin: $kendo-menu-separator-spacing 0;
+            margin-block: $kendo-menu-separator-spacing;
+            margin-inline: 0;
             height: 0;
             border-width: 1px 0 0;
             border-style: solid;
@@ -133,7 +137,8 @@
 
     // Menu popup
     .k-menu-popup {
-        padding: $kendo-menu-popup-padding-y $kendo-menu-popup-padding-x;
+        padding-block: $kendo-menu-popup-padding-y;
+        padding-inline: $kendo-menu-popup-padding-x;
         box-sizing: border-box;
         border-width: $kendo-menu-popup-border-width;
         border-style: solid;
@@ -162,7 +167,8 @@
         }
 
         .k-separator {
-            margin: $kendo-menu-separator-spacing 0;
+            margin-block: $kendo-menu-separator-spacing;
+            margin-inline: 0;
             height: 0;
             border-width: 1px 0 0;
             border-style: solid;
@@ -187,7 +193,8 @@
         }
 
         .k-menu-link {
-            padding: $kendo-menu-popup-sm-item-padding-y $kendo-menu-popup-sm-item-padding-x;
+            padding-block: $kendo-menu-popup-sm-item-padding-y;
+            padding-inline: $kendo-menu-popup-sm-item-padding-x;
             padding-inline-end: $kendo-menu-popup-sm-item-padding-end;
         }
 
@@ -207,7 +214,8 @@
         }
 
         .k-menu-link {
-            padding: $kendo-menu-popup-md-item-padding-y $kendo-menu-popup-md-item-padding-x;
+            padding-block: $kendo-menu-popup-md-item-padding-y;
+            padding-inline: $kendo-menu-popup-md-item-padding-x;
             padding-inline-end: $kendo-menu-popup-md-item-padding-end;
         }
 
@@ -227,7 +235,8 @@
         }
 
         .k-menu-link {
-            padding: $kendo-menu-popup-lg-item-padding-y $kendo-menu-popup-lg-item-padding-x;
+            padding-block: $kendo-menu-popup-lg-item-padding-y;
+            padding-inline: $kendo-menu-popup-lg-item-padding-x;
             padding-inline-end: $kendo-menu-popup-lg-item-padding-end;
         }
 
@@ -247,12 +256,14 @@
     }
     .k-context-menu {
         margin: 0;
-        padding: $kendo-menu-popup-padding-y $kendo-menu-popup-padding-x;
+        padding-block: $kendo-menu-popup-padding-y;
+        padding-inline: $kendo-menu-popup-padding-x;
         border-width: $kendo-menu-popup-border-width;
         border-style: solid;
 
         &.k-menu-horizontal {
-            padding: $kendo-menu-popup-padding-x $kendo-menu-popup-padding-y;
+            padding-block: $kendo-menu-popup-padding-x;
+            padding-inline: $kendo-menu-popup-padding-y;
         }
     }
     .k-animation-container .k-context-menu.k-menu-horizontal {

package/scss/messagebox/_layout.scss

@@ -3,7 +3,8 @@
     // Base
     .k-messagebox {
         margin: $kendo-message-box-margin;
-        padding: $kendo-message-box-padding-y $kendo-message-box-padding-x;
+        padding-block: $kendo-message-box-padding-y;
+        padding-inline: $kendo-message-box-padding-x;
         border-width: $kendo-message-box-border-width;
         border-style: solid;
         box-sizing: border-box;

package/scss/notification/_layout.scss

@@ -22,7 +22,8 @@
 
     .k-notification {
         @include border-radius( $kendo-notification-border-radius );
-        padding: $kendo-notification-padding-y $kendo-notification-padding-x;
+        padding-block: $kendo-notification-padding-y;
+        padding-inline: $kendo-notification-padding-x;
         border-width: $kendo-notification-border-width;
         border-style: solid;
         box-sizing: border-box;