@progress/kendo-theme-default 5.12.0 → 5.12.1-dev.1

package/scss/menu/_variables.scss

@@ -7,13 +7,13 @@ $menu-font-size: $font-size !default;
 $menu-line-height: $line-height !default;
 
 $menu-bg: transparent !default;
-$menu-text: $component-text !default;
+$menu-text: $kendo-component-text !default;
 $menu-border: null !default;
 $menu-gradient: null !default;
 
-$menu-item-padding-x: $nav-item-padding-x !default;
-$menu-item-padding-y: $nav-item-padding-y !default;
-$menu-item-spacing: $nav-item-margin !default;
+$menu-item-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+$menu-item-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+$menu-item-spacing: 0 !default;
 $menu-item-icon-spacing: $icon-spacing !default;
 
 $menu-item-bg: null !default;
@@ -27,17 +27,17 @@ $menu-item-hover-border: null !default;
 $menu-item-hover-gradient: null !default;
 
 $menu-item-expanded-bg: null !default;
-$menu-item-expanded-text: $component-text !default;
+$menu-item-expanded-text: $kendo-component-text !default;
 $menu-item-expanded-border: null !default;
 $menu-item-expanded-gradient: null !default;
 
 $menu-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 
-$menu-separator-spacing: map-get( $spacing, 1 ) !default;
+$menu-separator-spacing: k-map-get( $kendo-spacing, 1 ) !default;
 
-$menu-scroll-button-bg: $component-bg !default;
+$menu-scroll-button-bg: $kendo-component-bg !default;
 $menu-scroll-button-text: $link-text !default;
-$menu-scroll-button-border: $component-border !default;
+$menu-scroll-button-border: $kendo-component-border !default;
 $menu-scroll-button-gradient: null !default;
 
 $menu-scroll-button-hover-bg: null !default;
@@ -92,17 +92,17 @@ $kendo-menu-popup-gradient: null !default;
 
 /// Horizontal padding of the menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-x: map-get( $spacing, 2 ) !default;
-$kendo-menu-popup-item-padding-x-sm: map-get( $spacing, 2 ) !default;
-$kendo-menu-popup-item-padding-x-md: map-get( $spacing, 2 ) !default;
-$kendo-menu-popup-item-padding-x-lg: map-get( $spacing, 2 ) !default;
+$kendo-menu-popup-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-menu-popup-item-padding-x-sm: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-menu-popup-item-padding-x-md: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-menu-popup-item-padding-x-lg: k-map-get( $kendo-spacing, 2 ) !default;
 
 /// Vertical padding of the menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-padding-y: map-get( $spacing, 1 ) !default;
-$kendo-menu-popup-item-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
-$kendo-menu-popup-item-padding-y-md: map-get( $spacing, 1 ) !default;
-$kendo-menu-popup-item-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
+$kendo-menu-popup-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-menu-popup-item-padding-y-sm: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-menu-popup-item-padding-y-md: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-menu-popup-item-padding-y-lg: k-map-get( $kendo-spacing, 1.5 ) !default;
 
 /// The end padding of the menu item in popup.
 /// @group menu
@@ -119,9 +119,9 @@ $kendo-menu-popup-item-icon-margin-start-lg: $kendo-menu-popup-item-padding-x-lg
 
 /// The end margin of the menu item expand icon.
 /// @group menu
-$kendo-menu-popup-item-icon-margin-end-sm: calc( -1 * (#{$kendo-menu-popup-item-padding-end-sm} - #{$kendo-menu-popup-item-padding-x-sm / 2}) ) !default;
-$kendo-menu-popup-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-item-padding-end-md} - #{$kendo-menu-popup-item-padding-x-md / 2}) ) !default;
-$kendo-menu-popup-item-icon-margin-end-lg: calc( -1 * (#{$kendo-menu-popup-item-padding-end-lg} - #{$kendo-menu-popup-item-padding-x-lg / 2}) ) !default;
+$kendo-menu-popup-item-icon-margin-end-sm: calc( -1 * (#{$kendo-menu-popup-item-padding-end-sm} - #{k-math-div( $kendo-menu-popup-item-padding-x-sm, 2 )}) ) !default;
+$kendo-menu-popup-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-item-padding-end-md} - #{k-math-div( $kendo-menu-popup-item-padding-x-md, 2 )}) ) !default;
+$kendo-menu-popup-item-icon-margin-end-lg: calc( -1 * (#{$kendo-menu-popup-item-padding-end-lg} - #{k-math-div( $kendo-menu-popup-item-padding-x-lg, 2 )}) ) !default;
 
 /// The spacing between the menu items in popup.
 /// @group menu

package/scss/menu-button/_index.scss

@@ -7,6 +7,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/messagebox/_index.scss

@@ -7,6 +7,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/messagebox/_theme.scss

@@ -3,9 +3,9 @@
     @each $color-name, $color in $kendo-theme-colors {
         .k-messagebox-#{$color-name} {
             @include fill(
-                color-level( $color, $message-box-text-level ),
-                color-level( $color, $message-box-bg-level ),
-                color-level( $color, $message-box-border-level )
+                k-color-level( $color, $message-box-text-level ),
+                k-color-level( $color, $message-box-bg-level ),
+                k-color-level( $color, $message-box-border-level )
             );
         }
     }

package/scss/messagebox/_variables.scss

@@ -1,7 +1,7 @@
 // Message box
 $message-box-margin: 0 0 $spacer 0 !default;
-$message-box-padding-x: $padding-x !default;
-$message-box-padding-y: $padding-y !default;
+$message-box-padding-x: $kendo-padding-md-x !default;
+$message-box-padding-y: $kendo-padding-md-y !default;
 $message-box-border-width: 0 0 0 4px !default;
 
 $message-box-font-size: $font-size !default;

package/scss/multiselect/_index.scss

@@ -14,6 +14,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/notification/_index.scss

@@ -8,6 +8,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/notification/_layout.scss

@@ -10,7 +10,8 @@
     }
 
     .k-notification-container {
-        margin: ($notification-padding-y / 2) 0;
+        margin-block: k-math-div( $kendo-notification-padding-y, 2 );
+        margin-inline: 0;
         display: inline-flex;
         vertical-align: top;
 
@@ -20,68 +21,50 @@
     }
 
     .k-notification {
-        @include border-radius( $notification-border-radius );
-        padding: $notification-padding-y $notification-padding-x;
-        border-width: $notification-border-width;
+        @include border-radius( $kendo-notification-border-radius );
+        padding: $kendo-notification-padding-y $kendo-notification-padding-x;
+        border-width: $kendo-notification-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $notification-font-family;
-        font-size: $notification-font-size;
-        line-height: $notification-line-height;
+        font-family: $kendo-notification-font-family;
+        font-size: $kendo-notification-font-size;
+        line-height: $kendo-notification-line-height;
         cursor: default;
         position: relative;
-        display: block;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: $kendo-notification-icon-spacing;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
         *::after {
             box-sizing: border-box;
         }
-    }
-
-    .k-notification-wrap {
-        display: flex;
-        flex-flow: row nowrap;
-
-        > .k-icon {
-            margin-top: $notification-icon-offset;
-            margin-right: $notification-icon-spacing;
-            flex: none;
-        }
-
-        > .k-i-close,
-        > .k-i-x {
-            margin-right: 0;
-            margin-left: $notification-icon-spacing;
-            flex: none;
-            cursor: pointer;
-        }
 
         > .k-notification-content {
             flex: 1 1 auto;
         }
     }
 
-    // RTL
-    .k-rtl .k-notification,
-    [dir="rtl"] .k-notification {
-
-        .k-notification-wrap {
-
-            > .k-icon {
-                margin-right: 0;
-                margin-left: $notification-icon-spacing;
-            }
-
-            > .k-i-close,
-            > .k-i-x {
-                margin-left: 0;
-                margin-right: $notification-icon-spacing;
-            }
-        }
+    .k-notification-actions {
+        flex: none;
+        display: flex;
+        gap: $kendo-notification-icon-spacing;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-self: center;
+        cursor: pointer;
+    }
+    .k-notification-action {
+        flex: none;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+        align-self: center;
     }
 
 }

package/scss/notification/_theme.scss

@@ -3,27 +3,19 @@
     // Theme
     .k-notification {
         @include fill(
-            $notification-text,
-            $notification-bg,
-            $notification-border
+            $kendo-notification-text,
+            $kendo-notification-bg,
+            $kendo-notification-border
         );
-    }
-    .k-notification-wrap {
-        > .k-i-close,
-        > .k-i-x {
-            color: inherit;
-        }
-    }
-    .k-notification-group .k-notification {
-        box-shadow: $notification-shadow;
+        @include box-shadow( $kendo-notification-shadow );
     }
 
     @each $name, $props in $kendo-notification-theme {
         .k-notification-#{$name} {
             @include fill(
-                map-get( $props, color ),
-                map-get( $props, background-color ),
-                map-get( $props, border )
+                k-map-get( $props, color ),
+                k-map-get( $props, background-color ),
+                k-map-get( $props, border )
             );
         }
     }

package/scss/notification/_variables.scss

@@ -1,29 +1,51 @@
 // Notification
-$notification-padding-x: 8px !default;
-$notification-padding-y: 4px !default;
-$notification-border-width: 1px !default;
-$notification-border-radius: $kendo-border-radius-md !default;
 
-$notification-shadow: $popup-shadow !default;
-
-$notification-font-family: $font-family !default;
-$notification-font-size: $font-size-sm !default;
-$notification-line-height: $line-height !default;
-
-$notification-icon-offset: null !default;
-$notification-icon-spacing: $icon-spacing !default;
-
-$notification-bg: $component-bg !default;
-$notification-text: $component-text !default;
-$notification-border: $component-border !default;
+/// Vertical padding of the notification container.
+/// @group notification
+$kendo-notification-padding-x: 8px !default;
+/// Horizontal padding of the notification.
+/// @group notification
+$kendo-notification-padding-y: 4px !default;
+/// Width of the border around the notification.
+/// @group notification
+$kendo-notification-border-width: 1px !default;
+/// Border radius of the notification.
+/// @group notification
+$kendo-notification-border-radius: $kendo-border-radius-md !default;
+/// Box shadow of the notification.
+/// @group notification
+$kendo-notification-shadow: $popup-shadow !default;
+/// Font family of the notification.
+/// @group notification
+$kendo-notification-font-family: $font-family !default;
+/// Font size of the notification.
+/// @group notification
+$kendo-notification-font-size: $font-size-sm !default;
+/// Line height of the notification.
+/// @group notification
+$kendo-notification-line-height: $line-height !default;
+
+/// Horizontal spacing of the notification icon.
+/// @group notification
+$kendo-notification-icon-spacing: $icon-spacing !default;
+
+/// Background color of the notification.
+/// @group notification
+$kendo-notification-bg: $kendo-component-bg !default;
+/// Text color of the notification.
+/// @group notification
+$kendo-notification-text: $kendo-component-text !default;
+/// Border color of the notification.
+/// @group notification
+$kendo-notification-border: $kendo-component-border !default;
 
 @function notification-theme( $colors ) {
     $_theme: ();
 
     // sass-lint:disable-block indentation
     @each $name, $color in $colors {
-        $_theme: map-merge(( $name: (
-            color: contrast-wcag( $color ),
+        $_theme: k-map-merge(( $name: (
+            color: k-contrast-legacy( $color ),
             background-color: $color,
             border: $color,
         )), $_theme );
@@ -32,5 +54,7 @@ $notification-border: $component-border !default;
     @return $_theme;
 }
 
+/// Theme colors of the notification.
+/// @group notification
 $kendo-notification-theme-colors: $kendo-theme-colors !default;
 $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors ) !default;

package/scss/numerictextbox/_index.scss

@@ -9,6 +9,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/orgchart/_index.scss

@@ -14,6 +14,6 @@
 @import "../window/_index.scss";
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/orgchart/_variables.scss

@@ -1,13 +1,13 @@
 // Orgchart
-$orgchart-spacer: map-get( $spacing, 6 ) !default;
+$orgchart-spacer: k-map-get( $kendo-spacing, 6 ) !default;
 $orgchart-padding-y: $orgchart-spacer !default;
 $orgchart-padding-x: $orgchart-padding-y !default;
 $orgchart-font-family: $font-family !default;
 $orgchart-font-size: $font-size !default;
 $orgchart-line-height: $line-height !default;
-$orgchart-bg: $component-bg !default;
-$orgchart-text: $component-text !default;
-$orgchart-border: $component-border !default;
+$orgchart-bg: $kendo-component-bg !default;
+$orgchart-text: $kendo-component-text !default;
+$orgchart-border: $kendo-component-border !default;
 
 $orgchart-node-gap: $orgchart-spacer !default;
 $orgchart-group-gap: $orgchart-spacer !default;
@@ -25,12 +25,12 @@ $orgchart-node-group-focus-border: $card-focus-border !default;
 $orgchart-node-group-focus-shadow: $card-focus-shadow !default;
 
 $orgchart-node-group-title-font-size: $font-size-lg !default;
-$orgchart-node-group-title-margin-bottom: $orgchart-spacer / 3 !default;
+$orgchart-node-group-title-margin-bottom: k-math-div( $orgchart-spacer, 3 ) !default;
 $orgchart-node-group-title-line-height: $line-height-sm !default;
 
 $orgchart-node-group-subtitle-font-size: $font-size !default;
 $orgchart-node-group-subtitle-margin-bottom: $orgchart-spacer !default;
-$orgchart-node-group-subtitle-text: $subtle-text !default;
+$orgchart-node-group-subtitle-text: $kendo-subtle-text !default;
 
 $orgchart-card-width: 300px !default;
 $orgchart-card-padding-y: $card-padding-y !default;
@@ -48,7 +48,7 @@ $orgchart-card-subtitle-font-size: null !default;
 $orgchart-card-body-border-width: 2px 0 0 !default;
 $orgchart-card-body-border-color: transparent !default;
 
-$orgchart-card-body-vbox-margin-right: $orgchart-spacer / 2 !default;
+$orgchart-card-body-vbox-margin-right: k-math-div( $orgchart-spacer, 2 ) !default;
 $orgchart-card-body-vbox-min-height: $card-avatar-size !default;
 
 $orgchart-line-size: 1px !default;

package/scss/overlay/_index.scss

@@ -5,6 +5,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/overlay/_variables.scss

@@ -1,4 +1,4 @@
 $overlay-theme-colors: $kendo-theme-colors !default;
 
-$overlay-bg: $black !default;
+$overlay-bg: $kendo-color-black !default;
 $overlay-opacity: .5 !default;

package/scss/pager/_index.scss

@@ -7,9 +7,10 @@
 @import "../icons/_index.scss";
 @import "../toolbar/_variables.scss";
 @import "../list/_index.scss";
+@import "../button/_index.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";