@progress/kendo-theme-default 7.0.3-dev.3 → 7.1.0-dev.0

package/scss/card/_layout.scss

@@ -33,6 +33,15 @@
         *::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 );
@@ -42,11 +51,9 @@
         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 {
@@ -103,30 +110,13 @@
         }
     }
 
-
-    // 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;
@@ -170,22 +160,23 @@
         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;
@@ -200,33 +191,6 @@
         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;
@@ -318,9 +282,6 @@
         }
     }
 
-
-
-
     // Card with callout
     .k-card-with-callout {
         overflow: visible;

package/scss/colorgradient/_layout.scss

@@ -107,7 +107,6 @@
             z-index: -1;
         }
 
-        .k-slider-wrap,
         .k-slider-track-wrap {
             z-index: 1;
         }

package/scss/grid/_layout.scss

@@ -907,6 +907,7 @@
         $_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 {

package/scss/popup/_layout.scss

@@ -36,6 +36,7 @@
     .k-popup.k-popup-transparent {
         border-width: 0;
         background-color: transparent;
+        box-shadow: none;
     }
 
     // Flush popup

package/scss/slider/_layout.scss

@@ -53,19 +53,6 @@
         }
     }
 
-
-    // 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;
@@ -397,15 +384,7 @@
     .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; }

package/scss/tooltip/_layout.scss

@@ -5,7 +5,6 @@
         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;

package/scss/tooltip/_theme.scss

@@ -1,12 +1,4 @@
 @mixin kendo-tooltip--theme-base() {
-
-    .k-tooltip-wrapper {
-        .k-tooltip {
-            box-shadow: $kendo-tooltip-shadow;
-        }
-    }
-
-
     // Default tooltip
     .k-tooltip {
         @include fill(
@@ -14,67 +6,26 @@
             $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 );
+            }
         }
     }
 

package/scss/tooltip/_variables.scss

@@ -1,37 +1,70 @@
 // Tooltip
+
+/// The vertical padding of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-padding-y: $kendo-padding-md-y !default;
+/// The horizontal padding of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-padding-x: $kendo-padding-md-x !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-md !default;
+/// The line height of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-line-height: 1.25 !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: rgba( k-contrast-legacy( $kendo-body-bg ), .75 ) !default;
+/// The default text color of the Tooltip.
+/// @group tooltip
 $kendo-tooltip-text: k-contrast-legacy( $kendo-tooltip-bg ) !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: k-elevation(2) !default;
 
-$kendo-tooltip-primary-bg: $kendo-color-primary !default;
-$kendo-tooltip-primary-text: k-contrast-legacy( $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-legacy( $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-legacy( $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-legacy( $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-legacy( $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-legacy( $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;