@progress/kendo-theme-fluent 11.2.1-dev.1 → 11.3.0-dev.0

package/scss/popover/_layout.scss

@@ -1,56 +1,24 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/popover/_layout.scss" as *;
 
 @mixin kendo-popover--layout() {
+    @include kendo-popover--layout-base();
 
-    // Popover
     .k-popover {
-        @include border-radius( var( --kendo-popover-border-radius, #{$kendo-popover-border-radius} ) );
-        padding: 0;
-        border-width: var( --kendo-popover-border-width, #{$kendo-popover-border-width} );
-        border-style: var( --kendo-popover-border-style, #{$kendo-popover-border-style} );
-        box-sizing: border-box;
-        outline: 0;
-        font-size: var( --kendo-popover-font-size, #{$kendo-popover-font-size} );
-        font-family: var( --kendo-popover-font-family, #{$kendo-popover-font-family} );
-        line-height: var( --kendo-popover-line-height, #{$kendo-popover-line-height} );
-        display: flex;
-        flex-flow: column nowrap;
-        z-index: 12000;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-        *,
-        *::before,
-        *::after {
-            box-sizing: border-box;
-        }
-
         .k-popover-header {
             margin-block-end: 0;
         }
     }
 
-    // Inner
-    .k-popover-inner {
-        position: relative;
-        border-radius: inherit;
-        height: inherit;
-    }
-
     // Header
     .k-popover-header {
         @extend .k-card-title !optional;
-        border-width: 0 0 var( --kendo-popover-header-border-width, #{$kendo-popover-header-border-width} );
-        border-style: var( --kendo-popover-header-border-style, #{$kendo-popover-header-border-style} );
-        padding-inline: var( --kendo-popover-header-padding-x, #{$kendo-popover-header-padding-x} );
-        padding-block: var( --kendo-popover-header-padding-y, #{$kendo-popover-header-padding-y} );
     }
 
     // Body
     .k-popover-body {
-        padding-inline: var( --kendo-popover-body-padding-x, #{$kendo-popover-body-padding-x} );
-        padding-block-start: var( --kendo-popover-body-padding-y, #{$kendo-popover-body-padding-y} );
+        padding-block-start: $kendo-popover-body-padding-y;
         padding-block-end: 0;
 
         @at-root .k-popover-header + .k-popover-body {
@@ -60,43 +28,8 @@
 
     // Actions
     .k-popover-actions {
-        border-width: var( --kendo-popover-actions-border-width, #{$kendo-popover-actions-border-width} ) 0 0;
-        padding-inline: var( --kendo-popover-actions-padding-x, #{$kendo-popover-actions-padding-x} );
-        padding-block: var( --kendo-popover-actions-padding-y, #{$kendo-popover-actions-padding-y} );
-        gap: var( --kendo-popover-actions-gap, $kendo-popover-actions-gap );
-    }
-
-    // Callout
-    .k-popover-callout {
-        margin: 0;
-        width: var( --kendo-popover-callout-width, #{$kendo-popover-callout-width} );
-        height: var( --kendo-popover-callout-height, #{$kendo-popover-callout-height} );
-        border-width: var( --kendo-popover-callout-border-width, #{$kendo-popover-callout-border-width} );
-        border-style: var( --kendo-popover-callout-border-style, #{$kendo-popover-callout-border-style} );
-        position: absolute;
-
-        &.k-callout-n {
-            top: 0;
-            left: 50%;
-            transform: translate(-50%, -50%) rotate(45deg);
-        }
-
-        &.k-callout-e {
-            top: 50%;
-            right: 0;
-            transform: translate(50%, -50%) rotate(-45deg);
-        }
-
-        &.k-callout-s {
-            bottom: 0;
-            left: 50%;
-            transform: translate(-50%, 50%) rotate(45deg);
-        }
-
-        &.k-callout-w {
-            top: 50%;
-            left: 0;
-            transform: translate(-50%, -50%) rotate(45deg);
-        }
+        padding-inline: $kendo-popover-actions-padding-x;
+        padding-block: $kendo-popover-actions-padding-y;
+        gap: $kendo-popover-actions-gap;
     }
 }

package/scss/popover/_theme.scss

@@ -1,41 +1,7 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/popover/_theme.scss" as *;
 
 @mixin kendo-popover--theme() {
-
-    // Popover
-    .k-popover {
-        @include box-shadow( var( --kendo-popover-shadow, $kendo-popover-shadow ) );
-
-        @include fill(
-            var( --kendo-popover-text, $kendo-popover-text ),
-            var( --kendo-popover-bg, $kendo-popover-bg ),
-            var( --kendo-popover-border, $kendo-popover-border )
-        );
-    }
-
-    // Inner
-    .k-popover-inner {
-        background-color: inherit;
-        border-color: inherit;
-    }
-
-    // Header
-    .k-popover-header {
-        @include fill(
-            var( --kendo-popover-header-text, $kendo-popover-header-text ),
-            var( --kendo-popover-header-bg, $kendo-popover-header-bg ),
-            var( --kendo-popover-header-border, $kendo-popover-header-border )
-        );
-    }
-
-    // Callout
-    .k-popover-callout {
-        @include fill(
-            $bg: inherit,
-            $border: inherit
-        );
-
-        @include box-shadow( inherit )
-    }
+    @include kendo-popover--theme-base();
 }

package/scss/popover/_variables.scss

@@ -5,87 +5,114 @@
 
 /// The width of the border around the Popover.
 /// @group popover
-$kendo-popover-border-width: $kendo-dialog-border-width !default;
+$kendo-popover-border-width: var( --kendo-popover-border-width, #{$kendo-dialog-border-width} ) !default;
 /// The style of the border around the Popover.
 /// @group popover
-$kendo-popover-border-style: solid !default;
+$kendo-popover-border-style: var( --kendo-popover-border-style, solid ) !default;
 /// The radius of the border around the Popover.
 /// @group popover
-$kendo-popover-border-radius: $kendo-window-border-radius !default;
+$kendo-popover-border-radius: var( --kendo-popover-border-radius, #{$kendo-window-border-radius} ) !default;
 /// The font family of the Popover.
 /// @group popover
-$kendo-popover-font-family: $kendo-window-font-family !default;
+$kendo-popover-font-family: var( --kendo-popover-font-family, #{$kendo-window-font-family} ) !default;
 /// The font size of the Popover.
 /// @group popover
-$kendo-popover-font-size: $kendo-window-font-size !default;
+$kendo-popover-font-size: var( --kendo-popover-font-size, #{$kendo-window-font-size} ) !default;
 /// The line height of the Popover.
 /// @group popover
-$kendo-popover-line-height: $kendo-window-line-height !default;
+$kendo-popover-line-height: var( --kendo-popover-line-height, #{$kendo-window-line-height} ) !default;
 
 /// The text color of the Popover.
 /// @group popover
-$kendo-popover-text: k-color(on-app-surface) !default;
+$kendo-popover-text: var( --kendo-popover-text, #{k-color(on-app-surface)} ) !default;
 /// The background color of the Popover.
 /// @group popover
-$kendo-popover-bg: k-color(surface-alt) !default;
+$kendo-popover-bg: var( --kendo-popover-bg, #{k-color(surface-alt)} ) !default;
 /// The border color of the Popover.
 /// @group popover
-$kendo-popover-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-popover-border: var( --kendo-popover-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 /// The box shadow of the Popover.
 /// @group popover
-$kendo-popover-shadow: var( --kendo-box-shadow-depth-6, none ) !default;
+$kendo-popover-shadow: var( --kendo-popover-shadow, var( --kendo-box-shadow-depth-6, none ) ) !default;
 
 /// The horizontal padding of the Popover header.
 /// @group popover
-$kendo-popover-header-padding-x: $kendo-dialog-titlebar-padding-x !default;
+$kendo-popover-header-padding-x: var( --kendo-popover-header-padding-x, #{$kendo-dialog-titlebar-padding-x} ) !default;
 /// The vertical padding of the Popover header.
 /// @group popover
-$kendo-popover-header-padding-y: $kendo-dialog-titlebar-padding-y !default;
+$kendo-popover-header-padding-y: var( --kendo-popover-header-padding-y, #{$kendo-dialog-titlebar-padding-y} ) !default;
 /// The border width of the Popover header.
 /// @group popover
-$kendo-popover-header-border-width: $kendo-dialog-titlebar-border-width !default;
+$kendo-popover-header-border-width: var( --kendo-popover-header-border-width, #{$kendo-dialog-titlebar-border-width} ) !default;
 /// The border style of the Popover header.
 /// @group popover
-$kendo-popover-header-border-style: $kendo-popover-border-style !default;
+$kendo-popover-header-border-style: var( --kendo-popover-header-border-style, #{$kendo-popover-border-style} ) !default;
 /// The text color of the Popover header.
 /// @group popover
-$kendo-popover-header-text: $kendo-dialog-titlebar-text !default;
+$kendo-popover-header-text: var( --kendo-popover-header-text, #{$kendo-dialog-titlebar-text} ) !default;
 /// The background color of the Popover header.
 /// @group popover
-$kendo-popover-header-bg: $kendo-dialog-titlebar-bg !default;
+$kendo-popover-header-bg: var( --kendo-popover-header-bg, #{$kendo-dialog-titlebar-bg} ) !default;
 /// The border color of the Popover header.
 /// @group popover
-$kendo-popover-header-border: $kendo-dialog-titlebar-border !default;
+$kendo-popover-header-border: var( --kendo-popover-header-border, #{$kendo-dialog-titlebar-border} ) !default;
 
 /// The horizontal padding of the Popover body.
 /// @group popover
-$kendo-popover-body-padding-x: $kendo-window-inner-padding-x !default;
+$kendo-popover-body-padding-x: var( --kendo-popover-body-padding-x, #{$kendo-window-inner-padding-x} ) !default;
 /// The vertical padding of the Popover body.
 /// @group popover
-$kendo-popover-body-padding-y: $kendo-window-inner-padding-y !default;
+$kendo-popover-body-padding-y: var( --kendo-popover-body-padding-y, #{$kendo-window-inner-padding-y} ) !default;
 
 /// The border width of the Popover actions.
 /// @group popover
-$kendo-popover-actions-border-width: 0 !default;
+$kendo-popover-actions-border-width: var( --kendo-popover-actions-border-width, 0 ) !default;
 /// The horizontal padding of the Popover actions.
 /// @group popover
-$kendo-popover-actions-padding-x: $kendo-popover-body-padding-x !default;
+$kendo-popover-actions-padding-x: var( --kendo-popover-actions-padding-x, #{$kendo-popover-body-padding-x} ) !default;
 /// The vertical padding of the Popover actions.
 /// @group popover
-$kendo-popover-actions-padding-y: $kendo-popover-body-padding-y !default;
+$kendo-popover-actions-padding-y: var( --kendo-popover-actions-padding-y, #{$kendo-popover-body-padding-y} ) !default;
 /// The spacing between the Popover actions.
 /// @group popover
-$kendo-popover-actions-gap: k-spacing(3) !default;
+$kendo-popover-actions-gap: var( --kendo-popover-actions-gap, #{k-spacing(3)} ) !default;
 
 /// The width of the Popover callout.
 /// @group popover
-$kendo-popover-callout-width: k-spacing(5) !default;
+$kendo-popover-callout-width: var( --kendo-popover-callout-width, #{k-spacing(5)} ) !default;
 /// The height of the Popover callout.
 /// @group popover
-$kendo-popover-callout-height: $kendo-popover-callout-width !default;
+$kendo-popover-callout-height: var( --kendo-popover-callout-height, #{$kendo-popover-callout-width} ) !default;
 /// The border width of the Popover callout.
 /// @group popover
-$kendo-popover-callout-border-width: $kendo-popover-border-width !default;
+$kendo-popover-callout-border-width: var( --kendo-popover-callout-border-width, #{$kendo-popover-border-width} ) !default;
 /// The border style of the Popover callout.
 /// @group popover
-$kendo-popover-callout-border-style: $kendo-popover-border-style !default;
+$kendo-popover-callout-border-style: var( --kendo-popover-callout-border-style, #{$kendo-popover-border-style} ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/popover/_variables.scss" with (
+    $kendo-popover-border-width: $kendo-popover-border-width,
+    $kendo-popover-border-style: $kendo-popover-border-style,
+    $kendo-popover-border-radius: $kendo-popover-border-radius,
+    $kendo-popover-font-family: $kendo-popover-font-family,
+    $kendo-popover-font-size: $kendo-popover-font-size,
+    $kendo-popover-line-height: $kendo-popover-line-height,
+    $kendo-popover-text: $kendo-popover-text,
+    $kendo-popover-bg: $kendo-popover-bg,
+    $kendo-popover-border: $kendo-popover-border,
+    $kendo-popover-shadow: $kendo-popover-shadow,
+    $kendo-popover-header-padding-x: $kendo-popover-header-padding-x,
+    $kendo-popover-header-padding-y: $kendo-popover-header-padding-y,
+    $kendo-popover-header-border-width: $kendo-popover-header-border-width,
+    $kendo-popover-header-border-style: $kendo-popover-header-border-style,
+    $kendo-popover-header-text: $kendo-popover-header-text,
+    $kendo-popover-header-bg: $kendo-popover-header-bg,
+    $kendo-popover-header-border: $kendo-popover-header-border,
+    $kendo-popover-body-padding-x: $kendo-popover-body-padding-x,
+    $kendo-popover-body-padding-y: $kendo-popover-body-padding-y,
+    $kendo-popover-actions-border-width: $kendo-popover-actions-border-width,
+    $kendo-popover-callout-width: $kendo-popover-callout-width,
+    $kendo-popover-callout-height: $kendo-popover-callout-height,
+    $kendo-popover-callout-border-width: $kendo-popover-callout-border-width,
+    $kendo-popover-callout-border-style: $kendo-popover-callout-border-style
+);

package/scss/popup/_layout.scss

@@ -1,85 +1,20 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/popup/_layout.scss" as *;
 
 @mixin kendo-popup--layout() {
+    @include kendo-popup--layout-base();
 
-    // Animation Container
     .k-animation-container {
-        position: absolute;
-        overflow: hidden;
-        z-index: 100;
-        outline: none;
-
-        &-fixed {
-            position: fixed;
-        }
-
-        &-relative {
-            position: relative;
-            display: inline-block;
-        }
-    }
-
-    .k-animation-container {
-        @include border-bottom-radius-only( var( --kendo-popup-border-radius, #{$kendo-popup-border-radius} ) );
+        @include border-bottom-radius-only( $kendo-popup-border-radius );
     }
 
-    .k-animation-container-shown {
-        overflow: visible;
-    }
-
-    // Popup
     .k-popup {
-        margin: 0;
-        padding-inline: var( --kendo-popup-padding-x, #{$kendo-popup-padding-x} );
-        padding-block: var( --kendo-popup-padding-y, #{$kendo-popup-padding-y} );
-        border-width: var( --kendo-popup-border-width, #{$kendo-popup-border-width} );
-        border-style: solid;
-        border-radius: var( --kendo-popup-border-radius, #{$kendo-popup-border-radius} );
-        box-sizing: border-box;
-        font-size: var( --kendo-popup-font-size, #{$kendo-popup-font-size} );
-        line-height: var( --kendo-popup-line-height, #{$kendo-popup-line-height} );
-        display: flex;
-        flex-direction: column;
-        align-items: stretch;
-
-        .k-item {
-            outline: none;
-        }
-    }
-
-    .k-popup > .k-colorpalette {
-        padding-inline: var( --kendo-popup-content-padding-x, #{$kendo-popup-content-padding-x} );
-        padding-block: var( --kendo-popup-content-padding-y, #{$kendo-popup-content-padding-y} );
+        padding-inline: $kendo-popup-padding-x;
+        padding-block: $kendo-popup-padding-y;
     }
 
-    // Transparent popup
-    .k-popup.k-popup-transparent {
-        border-width: 0;
-        background-color: transparent;
-        box-shadow: none;
-    }
-
-    // Flush popup
-    .k-popup.k-popup-flush {
-        padding: 0;
-    }
-
-    // Child components
     .k-popup > .k-coloreditor {
-        border-width: 0;
         box-shadow: none;
     }
-
-    .k-popup .k-column-list {
-        max-height: 200px;
-        overflow-x: hidden;
-        overflow-y: auto;
-    }
-
-    .k-popup .k-multicheck-wrap {
-        max-height: 300px;
-        overflow: auto;
-    }
-
 }

package/scss/popup/_theme.scss

@@ -1,14 +1,7 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/popup/_theme.scss" as *;
 
 @mixin kendo-popup--theme() {
-    .k-popup {
-        @include fill(
-            var( --kendo-popup-text, #{$kendo-popup-text} ),
-            var( --kendo-popup-bg, #{$kendo-popup-bg} ),
-            var( --kendo-popup-border, #{$kendo-popup-border} )
-        );
-        @include box-shadow( var( --kendo-popup-shadow, #{$kendo-popup-shadow} ) );
-    }
-
+    @include kendo-popup--theme-base();
 }

package/scss/popup/_variables.scss

@@ -3,40 +3,53 @@
 
 /// Horizontal padding of the popup.
 /// @group popup
-$kendo-popup-padding-x: k-spacing(0) !default;
+$kendo-popup-padding-x: var( --kendo-popup-padding-x, #{k-spacing(0)} ) !default;
 /// Vertical padding of the popup.
 /// @group popup
-$kendo-popup-padding-y: k-spacing(0) !default;
+$kendo-popup-padding-y: var( --kendo-popup-padding-y, #{k-spacing(0)} ) !default;
 /// Width of the border around the popup.
 /// @group popup
-$kendo-popup-border-width: 0 !default;
+$kendo-popup-border-width: var( --kendo-popup-border-width, 0 ) !default;
 /// Border radius of the popup.
 /// @group popup
-$kendo-popup-border-radius: k-border-radius(md) !default;
+$kendo-popup-border-radius: var( --kendo-popup-border-radius, #{k-border-radius(md)} ) !default;
 
 /// Font size of the popup.
 /// @group popup
-$kendo-popup-font-size: var( --kendo-font-size, inherit) !default;
+$kendo-popup-font-size: var( --kendo-popup-font-size, var( --kendo-font-size, inherit) ) !default;
 /// Line height of the popup.
 /// @group popup
-$kendo-popup-line-height: var( --kendo-line-height, normal) !default;
+$kendo-popup-line-height: var( --kendo-popup-line-height, var( --kendo-line-height, normal) ) !default;
 
 /// Horizontal padding of the content inside the popup.
 /// @group popup
-$kendo-popup-content-padding-x: k-spacing(2) !default;
+$kendo-popup-content-padding-x: var( --kendo-popup-content-padding-x, #{k-spacing(2)} ) !default;
 /// Vertical padding of the content inside the popup.
 /// @group popup
-$kendo-popup-content-padding-y: k-spacing(2) !default;
+$kendo-popup-content-padding-y: var( --kendo-popup-content-padding-y, #{k-spacing(2)} ) !default;
 
 /// Background color of the popup.
 /// @group popup
-$kendo-popup-bg: k-color(surface-alt) !default;
+$kendo-popup-bg: var( --kendo-popup-bg, #{k-color(surface-alt)} ) !default;
 /// Text color of the popup.
 /// @group popup
-$kendo-popup-text: k-color(on-app-surface) !default;
+$kendo-popup-text: var( --kendo-popup-text, #{k-color(on-app-surface)} ) !default;
 /// Border color of the popup.
 /// @group popup
-$kendo-popup-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
+$kendo-popup-border: var( --kendo-popup-border, #{color-mix(in srgb, k-color(border) 16%, transparent)} ) !default;
 /// Box shadow around the popup.
 /// @group popup
-$kendo-popup-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
+$kendo-popup-shadow: var( --kendo-popup-shadow, var( --kendo-box-shadow-depth-4, none ) ) !default;
+
+@forward "@progress/kendo-theme-core/scss/components/popup/_variables.scss" with (
+    $kendo-popup-border-width: $kendo-popup-border-width,
+    $kendo-popup-border-radius: $kendo-popup-border-radius,
+    $kendo-popup-font-size: $kendo-popup-font-size,
+    $kendo-popup-line-height: $kendo-popup-line-height,
+    $kendo-popup-content-padding-x: $kendo-popup-content-padding-x,
+    $kendo-popup-content-padding-y: $kendo-popup-content-padding-y,
+    $kendo-popup-bg: $kendo-popup-bg,
+    $kendo-popup-text: $kendo-popup-text,
+    $kendo-popup-border: $kendo-popup-border,
+    $kendo-popup-shadow: $kendo-popup-shadow
+);