@progress/kendo-theme-material 7.0.3-dev.3 → 7.1.0-dev.1

package/dist/all.scss

@@ -17861,6 +17861,7 @@ $kendo-popup-shadow: $box-shadow-depth-4 !default;
     .k-popup.k-popup-transparent {
         border-width: 0;
         background-color: transparent;
+        box-shadow: none;
     }
 
     // Flush popup
@@ -24424,43 +24425,74 @@ $kendo-picker-flat-hover-focus-border: null !default;
 // #region @import "../tooltip/_variables.scss"; -> scss/tooltip/_variables.scss
 // Tooltip
 
+/// The vertical padding of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-padding-y: ($kendo-padding-md-y * .75) !default;
+/// The horizontal padding of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-padding-x: k-math-div( $kendo-padding-md-x, 2 ) !default;
-$kendo-tooltip-max-width: null !default;
+/// The width of the border around the Tooltip.
+/// @group tooltip
 $kendo-tooltip-border-width: 0px !default;
+/// The border radius of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-border-radius: $kendo-border-radius-md !default;
 
+/// The font family of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-font-family: $kendo-font-family !default;
+/// The font size of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-font-size: $kendo-font-size-sm !default;
+/// The line height of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-line-height: k-math-div( 20, 14 ) !default;
 
+/// The font size of the Tooltip title.
+/// @group tooltip
 $kendo-tooltip-title-font-size: ($kendo-tooltip-font-size * 1.25) !default;
+/// The line height of the Tooltip title.
+/// @group tooltip
 $kendo-tooltip-title-line-height: 1 !default;
 
+/// The size of the Tooltip callout.
+/// @group tooltip
 $kendo-tooltip-callout-size: 6px !default;
 
+/// The default background of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-bg: material-color( gray, 700, .9 ) !default;
+/// The default text color of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-text: get-base-contrast( gray, 700 ) !default;
+/// The default border color of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-border: $kendo-tooltip-bg !default;
 
+/// The box-shadow of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-shadow: $box-shadow-depth-2 !default;
 
-$kendo-tooltip-primary-bg: $kendo-color-primary !default;
-$kendo-tooltip-primary-text: k-contrast-color( $kendo-tooltip-primary-bg ) !default;
-$kendo-tooltip-primary-border: $kendo-tooltip-primary-bg !default;
-$kendo-tooltip-info-bg: $kendo-color-info !default;
-$kendo-tooltip-info-text: k-contrast-color( $kendo-tooltip-info-bg ) !default;
-$kendo-tooltip-info-border: $kendo-tooltip-info-bg !default;
-$kendo-tooltip-success-bg: $kendo-color-success !default;
-$kendo-tooltip-success-text: k-contrast-color( $kendo-tooltip-success-bg ) !default;
-$kendo-tooltip-success-border: $kendo-tooltip-success-bg !default;
-$kendo-tooltip-warning-bg: $kendo-color-warning !default;
-$kendo-tooltip-warning-text: k-contrast-color( $kendo-tooltip-warning-bg ) !default;
-$kendo-tooltip-warning-border: $kendo-tooltip-warning-bg !default;
-$kendo-tooltip-error-bg: $kendo-color-error !default;
-$kendo-tooltip-error-text: k-contrast-color( $kendo-tooltip-error-bg ) !default;
-$kendo-tooltip-error-border: $kendo-tooltip-error-bg !default;
+@function tooltip-theme( $colors ) {
+    $_theme: ();
+
+    @each $name, $color in $colors {
+        $_theme: k-map-merge(( $name: (
+            color: k-contrast-color( $color ),
+            background-color: $color,
+            border: $color,
+        )), $_theme );
+    }
+
+    @return $_theme;
+}
 
+/// The theme colors map for the Tooltip.
+/// @group tooltip
+$kendo-tooltip-theme-colors: $kendo-theme-colors !default;
+/// The generated theme colors map for the Tooltip.
+/// @group tooltip
+$kendo-tooltip-theme: tooltip-theme( $kendo-tooltip-theme-colors ) !default;
 // #endregion
 // #region @import "../typography/_variables.scss"; -> scss/typography/_variables.scss
 // File already imported_once. Skipping output.
@@ -25336,7 +25368,6 @@ $_kendo-module-meta: (
         margin: 0;
         padding-block: $kendo-tooltip-padding-y;
         padding-inline: $kendo-tooltip-padding-x;
-        // max-width: $kendo-tooltip-max-width;
         border-width: $kendo-tooltip-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -25459,14 +25490,6 @@ $_kendo-module-meta: (
 // #region @import "./_theme.scss"; -> scss/tooltip/_theme.scss
 // #region @import "@progress/kendo-theme-default/scss/tooltip/_theme.scss"; -> /home/runner/work/kendo-themes/kendo-themes/node_modules/@progress/kendo-theme-default/scss/tooltip/_theme.scss
 @mixin kendo-tooltip--theme-base() {
-
-    .k-tooltip-wrapper {
-        .k-tooltip {
-            box-shadow: $kendo-tooltip-shadow;
-        }
-    }
-
-
     // Default tooltip
     .k-tooltip {
         @include fill(
@@ -25474,67 +25497,26 @@ $_kendo-module-meta: (
             $kendo-tooltip-bg,
             $kendo-tooltip-border
         );
+        
+        @include box-shadow( $kendo-tooltip-shadow );
 
         .k-callout {
             color: $kendo-tooltip-bg;
         }
     }
 
-
     // Tooltip variants
-    .k-tooltip-primary {
-        @include fill(
-            $kendo-tooltip-primary-text,
-            $kendo-tooltip-primary-bg,
-            $kendo-tooltip-primary-border
-        );
-
-        .k-callout {
-            color: $kendo-tooltip-primary-bg;
-        }
-    }
-    .k-tooltip-info {
-        @include fill(
-            $kendo-tooltip-info-text,
-            $kendo-tooltip-info-bg,
-            $kendo-tooltip-info-border
-        );
-
-        .k-callout {
-            color: $kendo-tooltip-info-bg;
-        }
-    }
-    .k-tooltip-success {
-        @include fill(
-            $kendo-tooltip-success-text,
-            $kendo-tooltip-success-bg,
-            $kendo-tooltip-success-border
-        );
-
-        .k-callout {
-            color: $kendo-tooltip-success-bg;
-        }
-    }
-    .k-tooltip-warning {
-        @include fill(
-            $kendo-tooltip-warning-text,
-            $kendo-tooltip-warning-bg,
-            $kendo-tooltip-warning-border
-        );
-
-        .k-callout {
-            color: $kendo-tooltip-warning-bg;
-        }
-    }
-    .k-tooltip-error {
-        @include fill(
-            $kendo-tooltip-error-text,
-            $kendo-tooltip-error-bg,
-            $kendo-tooltip-error-border
-        );
-
-        .k-callout {
-            color: $kendo-tooltip-error-bg;
+    @each $name, $props in $kendo-tooltip-theme {
+        .k-tooltip-#{$name} {
+            @include fill(
+                k-map-get( $props, color ),
+                k-map-get( $props, background-color ),
+                k-map-get( $props, border )
+            );
+            
+            .k-callout {
+                color: k-map-get( $props, background-color );
+            }
         }
     }
 
@@ -29185,19 +29167,6 @@ $kendo-slider-disabled-opacity: .65 !default;
         }
     }
 
-
-    // Slider wrap
-    .k-slider-wrap {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-flow: inherit;
-        align-items: inherit;
-        gap: inherit;
-        position: relative;
-    }
-
-
     // New rendering
     .k-slider {
         width: min-content;
@@ -29529,15 +29498,7 @@ $kendo-slider-disabled-opacity: .65 !default;
     .k-slider kendo-resize-sensor {
         position: absolute;
     }
-    .k-slider-horizontal .k-slider-wrap:not(.k-slider-buttons) {
-        padding-inline-start: calc( #{$kendo-slider-draghandle-size} / 2 );
-        padding-inline-end: calc( #{$kendo-slider-draghandle-size} / 2 );
-    }
-    .k-slider-vertical .k-slider-wrap:not(.k-slider-buttons) {
-        padding-top: calc( #{$kendo-slider-draghandle-size} / 2 );
-        padding-bottom: calc( #{$kendo-slider-draghandle-size} / 2 );
-    }
-
+    
     // Aliases
     .k-draghandle { @extend .k-slider-thumb !optional; }
     .k-draghandle-start { @extend .k-slider-thumb-start !optional; }
@@ -32221,7 +32182,6 @@ $kendo-color-gradient-contrast-spacer: k-map-get( $kendo-spacing, 2 ) !default;
             z-index: -1;
         }
 
-        .k-slider-wrap,
         .k-slider-track-wrap {
             z-index: 1;
         }
@@ -39307,6 +39267,10 @@ $_kendo-module-meta: (
 // #region @import "./_variables.scss"; -> scss/notification/_variables.scss
 // Notification
 
+/// The row-gap between the elements in the Notification group.
+/// @group notification
+$kendo-notification-group-gap: k-map-get( $kendo-spacing, 2 ) !default;
+
 /// The horizontal padding of the Notification.
 /// @group notification
 $kendo-notification-padding-x: 16px !default;
@@ -39345,7 +39309,6 @@ $kendo-notification-shadow: $kendo-popup-shadow !default;
 /// @group notification
 $kendo-notification-icon-spacing: $kendo-icon-spacing !default;
 
-
 @function notification-theme( $colors ) {
     $_theme: ();
 
@@ -39379,17 +39342,12 @@ $kendo-notification-theme: notification-theme( $kendo-notification-theme-colors
         flex-flow: column-reverse wrap;
         position: fixed;
         z-index: 1000;
+        gap: $kendo-notification-group-gap 0;
     }
 
-    .k-notification-container {
-        margin-block: k-math-div( $kendo-notification-padding-y, 2 );
-        margin-inline: 0;
-        display: inline-flex;
-        vertical-align: top;
-
-        &-animating {
-            overflow: hidden;
-        }
+    // Needed due to the specifics in the implementation of animations in Angular
+    .k-notification-container-animating {
+        overflow: hidden;
     }
 
     .k-notification {
@@ -39803,6 +39761,15 @@ $kendo-card-callout-height: 20px !default;
         *::after {
             box-sizing: border-box;
         }
+
+        // Card avatar
+        .k-card-avatar,
+        .k-avatar {
+            margin-right: $kendo-card-avatar-spacing;
+            width: $kendo-card-avatar-size;
+            height: $kendo-card-avatar-size;
+            flex-basis: $kendo-card-avatar-size;
+        }
     }
     .k-card > .k-card-inner {
         @include border-radius( $kendo-card-inner-border-radius );
@@ -39812,11 +39779,9 @@ $kendo-card-callout-height: 20px !default;
         position: relative;
     }
 
-
     // Card orientation
-    .k-card-horizontal  { flex-flow: row nowrap; } // stylelint-disable-line block-opening-brace-space-before
-    .k-card-vertical    { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before
-
+    .k-card-horizontal { flex-flow: row nowrap; } // stylelint-disable-line block-opening-brace-space-before
+    .k-card-vertical { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before
 
     // Header
     .k-card-header {
@@ -39873,30 +39838,13 @@ $kendo-card-callout-height: 20px !default;
         }
     }
 
-
-    // Card avatar
-    .k-card-avatar,
-    .k-card .k-avatar {
-        margin-right: $kendo-card-avatar-spacing;
-        width: $kendo-card-avatar-size;
-        height: $kendo-card-avatar-size;
-        flex-basis: $kendo-card-avatar-size;
-    }
-
-
-    // Card image
-    .k-card-image,
+    // Card media
     .k-card-media {
         border: 0;
         max-width: 100%;
         flex-shrink: 0;
         overflow: hidden;
 
-        > img {
-            border: 0;
-            max-width: 100%;
-        }
-
         .k-card-horizontal & {
             max-width: $kendo-card-img-max-width;
             object-fit: cover;
@@ -39940,22 +39888,23 @@ $kendo-card-callout-height: 20px !default;
         flex: 0 0 auto;
         align-self: stretch;
     }
-    .k-card-separator.k-separator-vertical,
-    .k-card-horizontal > .k-card-separator {
-        border-left-width: 1px;
-    }
+
     .k-card-separator.k-separator-horizontal,
     .k-card-vertical > .k-card-separator {
         border-top-width: 1px;
     }
 
+    .k-card-separator.k-separator-vertical,
+    .k-card-horizontal > .k-card-separator {
+        border-left-width: 1px;
+    }
+
     .k-card > .k-hr {
         margin: 0;
         flex: 0 0 auto;
         border-color: inherit;
     }
 
-
     // Card actions
     .k-card-actions {
         padding-block: $kendo-card-actions-padding-y;
@@ -39970,33 +39919,6 @@ $kendo-card-callout-height: 20px !default;
         gap: $kendo-card-actions-gap;
     }
 
-
-    // Actions align
-    .k-card-actions-start       { justify-content: flex-start; } // stylelint-disable-line block-opening-brace-space-before
-    .k-card-actions-end         { justify-content: flex-end; } // stylelint-disable-line block-opening-brace-space-before
-    .k-card-actions-center      { justify-content: center; } // stylelint-disable-line block-opening-brace-space-before
-
-
-    // Actions orientation
-    .k-card-actions-horizontal  { flex-flow: row nowrap; } // stylelint-disable-line block-opening-brace-space-before
-    .k-card-actions-vertical    { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before
-
-
-    // Stretched actions
-    .k-card-actions-stretched > * {
-        flex: 1 1 auto;
-    }
-
-
-    // Card action
-    .k-card-action {
-        border-width: 0;
-        border-style: solid;
-        border-color: inherit;
-        display: inline-flex;
-    }
-
-
     // List
     .k-card-list {
         display: flex;
@@ -40088,9 +40010,6 @@ $kendo-card-callout-height: 20px !default;
         }
     }
 
-
-
-
     // Card with callout
     .k-card-with-callout {
         overflow: visible;
@@ -47543,6 +47462,7 @@ $kendo-grid-row-resizer-height: k-map-get( $kendo-spacing, .5 ) !default;
         $_selection-aggregates-padding-x: k-map-get( $size-props, selection-aggregates-padding-x );
         $_selection-aggregates-padding-y: k-map-get( $size-props, selection-aggregates-padding-y );
 
+        .k-grid .k-grid-#{$size},
         .k-grid-#{$size} {
 
             .k-table-th {
@@ -58917,10 +58837,6 @@ $kendo-timeline-event-min-height-calc: calc(2 * (#{$kendo-timeline-track-event-o
             }
         }
 
-        .k-event-collapse {
-            display: none;
-        }
-
         &.k-timeline-collapsible {
             .k-card-header {
                 cursor: pointer;