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

package/scss/chat/_layout.scss

@@ -1,322 +1,48 @@
 @use "sass:math";
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/chat/_layout.scss" as *;
 
 @mixin kendo-chat--layout() {
-    .k-chat {
-        margin: auto;
-        max-width: var( --kendo-chat-width, #{ $kendo-chat-width } );
-        height: var( --kendo-chat-height, #{ $kendo-chat-height } );
-        max-height: 100%;
-        border-width: var( --kendo-chat-border-width, #{ $kendo-chat-border-width } );
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: var( --kendo-chat-font-family, #{ $kendo-chat-font-family } );
-        font-size: var( --kendo-chat-font-size, #{ $kendo-chat-font-size } );
-        line-height: var( --kendo-chat-line-height, #{ $kendo-chat-line-height } );
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
-
-
-        // Message list
-        .k-message-list {
-            display: flex;
-            flex: 1 1 auto;
-            flex-direction: column;
-            align-items: flex-start;
-            overflow-x: hidden;
-            overflow-y: auto;
-            scroll-behavior: smooth;
-        }
-        .k-message-list-content {
-            padding-inline: var( --kendo-chat-message-list-padding-x, #{ $kendo-chat-message-list-padding-x } );
-            padding-block: var( --kendo-chat-message-list-padding-y, #{ $kendo-chat-message-list-padding-y } );
-            width: 100%;
-            box-sizing: border-box;
-            position: relative;
-            flex: 0 0 auto;
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            overflow: hidden;
-
-            > * + * {
-                margin-block-start: var( --kendo-chat-message-list-spacing, #{ $kendo-chat-message-list-spacing } );
-            }
-        }
-
-        // Message group
-        .k-message-group {
-            max-width: 80%;
-            background: none;
-            box-sizing: border-box;
-            display: flex;
-            flex-shrink: 0;
-            flex-direction: column;
-            position: relative;
-        }
-        .k-message-group:not(.k-alt) {
-            align-items: flex-start;
-            text-align: start;
-
-            .k-message-time {
-                margin-inline-start: var( --kendo-chat-item-spacing-x, #{ $kendo-chat-item-spacing-x } );
-                inset-inline-start: 100%;
-            }
-            .k-message-status {
-                inset-inline-start: 0;
-            }
-
-            .k-first .k-chat-bubble,
-            .k-only .k-chat-bubble {
-                border-end-start-radius: var( --kendo-chat-bubble-border-radius-sm, #{ $kendo-chat-bubble-border-radius-sm } );
-            }
-            .k-middle .k-chat-bubble,
-            .k-last .k-chat-bubble {
-                border-end-start-radius: var( --kendo-chat-bubble-border-radius-sm, #{ $kendo-chat-bubble-border-radius-sm } );
-            }
-        }
-        .k-message-group.k-alt {
-            align-self: flex-end;
-            align-items: flex-end;
-            text-align: end;
-
-            .k-message-time {
-                margin-inline-end: var( --kendo-chat-item-spacing-x, #{ $kendo-chat-item-spacing-x } );
-                inset-inline-end: 100%;
-            }
-            .k-message-status {
-                inset-inline-end: 0;
-            }
-
-            .k-first .k-chat-bubble,
-            .k-only .k-chat-bubble {
-                border-end-end-radius: var( --kendo-chat-bubble-border-radius-sm, #{ $kendo-chat-bubble-border-radius-sm } );
-            }
-            .k-middle .k-chat-bubble,
-            .k-last .k-chat-bubble {
-                border-end-end-radius: var( --kendo-chat-bubble-border-radius-sm, #{ $kendo-chat-bubble-border-radius-sm } );
-            }
-        }
-
+    @include kendo-chat--layout-base();
 
-        // Message
-        .k-message {
-            max-width: 100%;
-            margin: var( --kendo-chat-bubble-spacing, #{ $kendo-chat-bubble-spacing } ) 0 0;
+    .k-chat {
+        .k-quick-reply {
             position: relative;
-            transition: margin .2s ease-in-out;
-            outline: none;
-        }
-
-
-        // Message meta
-        .k-message-time,
-        .k-message-status {
-            font-size: $kendo-chat-message-meta-font-size;
-            line-height: $kendo-chat-message-meta-line-height;
-            white-space: nowrap;
-            pointer-events: none;
-            position: absolute;
-        }
-        .k-message-time {
-            opacity: 0;
-            top: 50%;
-            transform: translateY(-50%);
-            transition: opacity .2s ease-in-out;
-        }
-        .k-message-status {
-            margin-block-start: var( --kendo-chat-bubble-spacing, #{ $kendo-chat-bubble-spacing } );
-            height: 0;
-            overflow: hidden;
-            top: 100%;
-            transition: height .2s ease-in-out;
-        }
-
-
-        // Bubble
-        .k-chat-bubble {
-            @include border-radius( var( --kendo-chat-bubble-border-radius, #{ $kendo-chat-bubble-border-radius } ) );
-            padding-inline: var( --kendo-chat-bubble-padding-x, #{ $kendo-chat-bubble-padding-x } );
-            padding-block: var( --kendo-chat-bubble-padding-y, #{ $kendo-chat-bubble-padding-y } );
-            border-width: 1px;
-            border-style: solid;
-            line-height: var( --kendo-chat-bubble-line-height, #{ $kendo-chat-bubble-line-height } );
-            word-wrap: break-word;
-            white-space: pre-wrap;
-
-            a {
-                color: inherit;
-                text-decoration: underline;
-            }
-        }
-
 
-        // Message states
-        .k-message.k-selected {
-            margin-block-end: var( --kendo-chat-item-spacing-y, #{ $kendo-chat-item-spacing-y } );
-            border: 0;
-            color: inherit;
-            background: none;
-
-            .k-message-time { opacity: 1; }
-            .k-message-status { height: 1.2em; }
-        }
-        .k-message-error,
-        .k-message-sending {
-            margin-block-end: var( --kendo-chat-item-spacing-y, #{ $kendo-chat-item-spacing-y } );
-
-            .k-message-status { height: 1.2em; }
-        }
-
-        // Avatar
-        .k-avatar {
-            margin: 0;
-            position: absolute;
-
-            @at-root .k-message-group:not(.k-alt) > .k-avatar {
-                inset-inline-start: 0;
-                bottom: 0;
-            }
-            @at-root .k-message-group.k-alt > .k-avatar {
-                inset-inline-end: 0;
-                bottom: 0;
-            }
-        }
-        .k-avatars {
-            .k-message-group:not(.k-alt, .k-no-avatar) {
-                padding-inline-start: calc( #{$kendo-chat-avatar-size} + #{ $kendo-chat-avatar-spacing } );
-            }
-            .k-message-group.k-alt:not(.k-no-avatar) {
-                padding-inline-end: calc( #{$kendo-chat-avatar-size} + #{ $kendo-chat-avatar-spacing } );
+            &:focus::after,
+            &.k-focus::after {
+                content: "";
+                position: absolute;
+                border: medium none;
+                border-radius: var(--kendo-border-radius-full, 9999px);
+                inset: $kendo-chat-quick-reply-focus-offset;
+                outline-width: $kendo-chat-quick-reply-focus-outline-width;
+                outline-style: $kendo-chat-quick-reply-focus-outline-style;
+                z-index: 1;
             }
         }
-    }
-
-    // Author
-    .k-author {
-        margin: 0;
-        font-size: $kendo-chat-author-font-size;
-        line-height: $kendo-chat-author-line-height;
-    }
-    .k-chat .k-author {
-        margin: 0; // Duplicate styles because of typography module
-    }
-
-
-    // Timestamp
-    .k-chat .k-timestamp {
-        font-size: var( --kendo-chat-timestamp-font-size, #{ $kendo-chat-timestamp-font-size } );
-        line-height: var( --kendo-chat-timestamp-line-height, #{ $kendo-chat-timestamp-line-height } );
-        text-transform: var( --kendo-chat-timestamp-transform, #{ $kendo-chat-timestamp-transform } );
-        text-align: center;
-        align-self: stretch;
-    }
-
-
-    // Quick reply
-    .k-quick-replies {
-        display: block;
-        max-width: 100%; // IE fix
-    }
-    .k-quick-reply {
-        @include border-radius( 100px );
-        margin-inline-end: var( --kendo-chat-quick-reply-spacing, #{ $kendo-chat-quick-reply-spacing } );
-        margin-block-end: calc( var( --kendo-chat-quick-reply-spacing, #{ $kendo-chat-quick-reply-spacing } ) / 2 );
-        padding-inline: var( --kendo-chat-quick-reply-padding-x, #{ $kendo-chat-quick-reply-padding-x } );
-        padding-block: var( --kendo-chat-quick-reply-padding-y, #{ $kendo-chat-quick-reply-padding-y } );
-        border-width: 1px;
-        border-style: solid;
-        border-color: currentColor;
-        background: none;
-        color: inherit;
-        position: relative;
-        line-height: var( --kendo-chat-quick-reply-line-height, #{ $kendo-chat-quick-reply-line-height } );
-        cursor: pointer;
-        user-select: none;
-        display: inline-block;
-        flex: 0 0 auto;
-        transition-property: color, background-color, border-color;
-        transition-duration: .2s;
-        transition-timing-function: ease-in-out;
-        outline: none;
 
-        &:focus::after,
-        &.k-focus::after {
-            content: "";
-            position: absolute;
-            border: medium none;
-            border-radius: var(--kendo-border-radius-full, 9999px);
-            inset: var( --kendo-chat-quick-reply-focus-offset, #{$kendo-chat-quick-reply-focus-offset} );
-            outline-width: var( --kendo-chat-quick-reply-focus-outline-width, #{$kendo-chat-quick-reply-focus-outline-width} );
-            outline-style: var( --kendo-chat-quick-reply-focus-outline-style, #{$kendo-chat-quick-reply-focus-outline-style} );
-            z-index: 1;
+        .k-card-deck-scrollwrap > .k-card-deck {
+            // hide scrollbar in chat
+            margin-block-end: calc( -1 * #{$kendo-chat-card-deck-scrollbar-size} );
+            padding-bottom: $kendo-chat-card-deck-scrollbar-size;
         }
     }
 
-
-    // Scrollable quick replies
-    .k-scrollable-quick-replies {
-        margin-block: calc( var( --kendo-chat-message-list-padding-y, #{ $kendo-chat-message-list-padding-y } ) * -1 );
-        padding-block: calc( var( --kendo-chat-message-list-padding-y, #{ $kendo-chat-message-list-padding-y } ) * -1 );
-        display: flex;
-        flex-flow: row nowrap;
-        flex: 0 0 auto;
-        overflow-x: auto;
-        overflow-y: hidden;
-
-        &::-webkit-scrollbar {
-            display: none;
-        }
-
-        .k-quick-reply {
-            margin: 0;
-        }
-        .k-quick-reply + .k-quick-reply {
-            margin-inline-start: var( --kendo-chat-quick-reply-spacing, #{ $kendo-chat-quick-reply-spacing } );
-        }
+    .k-card-subtitle {
+        font-weight: var( --kendo-font-weight, initial );
     }
 
+    .k-chat-toolbar,
+    .k-chat .k-toolbar-box {
+        gap: $kendo-chat-toolbar-spacing;
 
-    // Message box
-    .k-message-box {
-        width: 100%;
-        height: auto;
-        box-sizing: border-box;
-        border-width: 1px 0 0;
-        border-style: solid;
-        border-color: inherit !important; // stylelint-disable-line declaration-no-important
-        border-radius: 0 !important; // stylelint-disable-line declaration-no-important
-        flex: none;
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: center;
-
-        &:focus,
-        &.k-focus,
-        &:focus-within {
-            outline: 0;
-            box-shadow: none;
+        .k-scroll-button {
+            padding-block: 0px;
+            padding-inline: $kendo-chat-scroll-button-padding;
         }
 
-        // Input
-        .k-input {}
-
-        .k-button {
-            border-width: 0;
-            flex-shrink: 0;
-
-            svg {
-                width: 20px;
-                height: 20px;
-                fill: currentColor;
-                display: inline-block;
-            }
-        }
     }
 
     .k-rtl,
@@ -327,154 +53,4 @@
             }
         }
     }
-
-}
-
-@mixin kendo-chat-card--layout() {
-    .k-chat .k-card-list {
-        margin: $kendo-chat-bubble-spacing 0 0;
-    }
-
-    .k-message-group.k-alt + .k-card-list,
-    .k-message-group.k-alt + kendo-chat-message-attachments.k-card-list {
-        align-self: flex-end;
-    }
-
-    .k-chat .k-card-deck {
-        max-width: calc( 100% + calc( #{ $kendo-chat-message-list-padding-y} * 2 ) ); // prevent overflowing in the parent element
-        box-sizing: border-box;
-        margin-inline: calc( var( --kendo-chat-message-list-padding-x, #{ $kendo-chat-message-list-padding-x } ) * -1 );
-        padding-block-start: var( --kendo-chat-message-list-padding-y, #{ $kendo-chat-message-list-padding-y } );
-        padding-block-end: var( --kendo-chat-message-list-padding-y, #{ $kendo-chat-message-list-padding-y } );
-        padding-inline: var( --kendo-chat-message-list-padding-x, #{ $kendo-chat-message-list-padding-x } );
-        overflow: hidden;
-        overflow-x: auto;
-        scroll-behavior: smooth;
-    }
-    .k-chat .k-card-deck .k-card {
-        width: 200px;
-    }
-
-    .k-chat .k-card-deck-scrollwrap {
-        margin-inline: calc( var( --kendo-chat-message-list-padding-x, #{ $kendo-chat-message-list-padding-x } ) * -1 );
-        padding-inline: var( --kendo-chat-message-list-padding-x, #{ $kendo-chat-message-list-padding-x } );
-    }
-
-    .k-chat .k-card-deck-scrollwrap > .k-card-deck {
-        // hide scrollbar in chat
-        margin-block-end: calc( var( --kendo-card-deck-scrollbar-size, #{ $kendo-card-deck-scrollbar-size } ) * -1 );
-        padding-bottom: var( --kendo-card-deck-scrollbar-size, #{ $kendo-card-deck-scrollbar-size } );
-    }
-
-    // Deck
-    .k-chat .k-card-deck .k-card-wrap {
-        display: flex;
-        flex-flow: row nowrap;
-        align-items: stretch;
-        flex: 0 0 auto;
-        padding-bottom: 5px; // accommodate for focused box shadow on OSX
-
-        .k-card {
-            flex: 0 0 auto;
-        }
-
-        &.k-selected {
-            background: none;
-        }
-    }
-
-}
-
-@mixin kendo-chat-typing-indicator--layout() {
-    // Typing indicator
-    .k-typing-indicator {
-        padding: 0;
-        border-radius: 50px;
-        display: inline-flex;
-        flex-flow: row nowrap;
-
-        span {
-            width: var( --kendo-chat-typing-indicator-dot-size, #{ $kendo-chat-typing-indicator-dot-size } );
-            height: var( --kendo-chat-typing-indicator-dot-size, #{ $kendo-chat-typing-indicator-dot-size } );
-            border-radius: 50%;
-            flex: 0 0 var( --kendo-chat-typing-indicator-dot-size, #{ $kendo-chat-typing-indicator-dot-size } );
-            background-color: currentColor;
-            opacity: .4;
-            @for $i from 1 through 3 {
-                &:nth-of-type(#{$i}) {
-                    animation: 1s k-animation-blink infinite ($i * .3333s);
-                }
-            }
-        }
-        span + span {
-            margin-inline-start: var( --kendo-chat-typing-indicator-dot-spacing, #{ $kendo-chat-typing-indicator-dot-spacing } );
-        }
-
-        @keyframes k-animation-blink {
-            50% {
-                opacity: 1;
-            }
-        }
-
-    }
-
-}
-
-@mixin kendo-chat-toolbar--layout() {
-
-    .k-chat-toolbar,
-    .k-chat .k-toolbar-box {
-        padding-inline: var( --kendo-chat-toolbar-padding-x, #{ $kendo-chat-toolbar-padding-x } );
-        padding-block: var( --kendo-chat-toolbar-padding-y, #{ $kendo-chat-toolbar-padding-y } );
-        width: 100%;
-        border-width: 1px 0 0;
-        box-sizing: border-box;
-        flex: none;
-        overflow: hidden;
-        position: relative;
-        gap: var( --kendo-chat-toolbar-spacing, #{$kendo-chat-toolbar-spacing} );
-
-        &::before {
-            display: none;
-        }
-
-        .k-button-list {
-            // Needed for native scrolling. Will uncoment when it's implemented.
-            // margin-block-end: -20px;
-            // padding-bottom: 20px;
-            display: flex;
-            flex-flow: row nowrap;
-            overflow: hidden;
-            // overflow-x: auto;
-            scroll-behavior: smooth;
-        }
-
-        .k-button {
-            flex: none;
-        }
-
-
-        .k-scroll-button {
-            // IMPORTANT: if we don't set padding, the browser will set for us
-            padding-block: 0;
-            padding-inline: var( --kendo-chat-scroll-button, #{ $kendo-chat-scroll-button } );
-            height: 100%;
-            aspect-ratio: auto;
-            position: absolute;
-            z-index: 2;
-            top: 0;
-
-            .k-button-icon {
-                min-width: auto;
-                min-height: auto;
-            }
-        }
-        .k-scroll-button-left {
-            left: 0;
-        }
-        .k-scroll-button-right {
-            right: 0;
-        }
-    }
-
 }

package/scss/chat/_theme.scss

@@ -1,99 +1,28 @@
 @use "../core/_index.scss" as *;
 @use "./_variables.scss" as *;
+@use "@progress/kendo-theme-core/scss/components/chat/_theme.scss" as *;
 
 @mixin kendo-chat--theme() {
+    @include kendo-chat--theme-base();
 
-    // Chat
     .k-chat {
-        @include fill(
-            var( --kendo-chat-text, #{ $kendo-chat-text } ),
-            var( --kendo-chat-bg, #{ $kendo-chat-bg } ),
-            var( --kendo-chat-border, #{ $kendo-chat-border } )
-        );
-
-
-        // Message meta
-        .k-timestamp {
-            @include fill(
-                var( --kendo-chat-timestamp-text, #{ $kendo-chat-timestamp-text } ),
-                var( --kendo-chat-timestamp-bg, #{ $kendo-chat-timestamp-bg } )
-            );
-        }
-        .k-author {
-            font-weight: bold;
-        }
-
-
-        // Bubbles
         .k-chat-bubble {
-            @include fill(
-                var( --kendo-chat-bubble-text, #{ $kendo-chat-bubble-text } ),
-                var( --kendo-chat-bubble-bg, #{ $kendo-chat-bubble-bg } ),
-                var( --kendo-chat-bubble-border, #{ $kendo-chat-bubble-border } )
-            );
-            @include box-shadow( var( --kendo-chat-bubble-shadow, #{ $kendo-chat-bubble-shadow } ) );
-            transition: var( --kendo-chat-transition, #{$kendo-chat-transition } );
-            order: -1;
-
-            a { color: var( --kendo-chat-link-text, #{ $kendo-chat-link-text } ) };
-            a:hover { color: var( --kendo-chat-link-hover-text, #{ $kendo-chat-link-hover-text } ) };
-        }
-        .k-chat-bubble:hover {
-            @include box-shadow( var( --kendo-chat-bubble-hover-shadow, #{ $kendo-chat-bubble-hover-shadow } ) );
-        }
-        .k-selected .k-chat-bubble {
-            @include box-shadow( var( --kendo-chat-bubble-selected-shadow, #{ $kendo-chat-bubble-selected-shadow } ) );
-        }
+            transition: $kendo-chat-transition;
 
-        .k-alt .k-chat-bubble {
-            @include fill(
-                var( --kendo-chat-alt-bubble-text, #{ $kendo-chat-alt-bubble-text } ),
-                var( --kendo-chat-alt-bubble-bg, #{ $kendo-chat-alt-bubble-bg } ),
-                var( --kendo-chat-alt-bubble-border, #{ $kendo-chat-alt-bubble-border } )
-            );
-            @include box-shadow( var( --kendo-chat-alt-bubble-shadow, #{ $kendo-chat-alt-bubble-shadow } ) );
-        }
-        .k-alt .k-chat-bubble:hover {
-            @include box-shadow( var( --kendo-chat-alt-bubble-hover-shadow, #{ $kendo-chat-alt-bubble-hover-shadow } ) );
-        }
-        .k-alt .k-selected .k-chat-bubble {
-            @include box-shadow( var( --kendo-chat-alt-bubble-selected-shadow, #{ $kendo-chat-alt-bubble-selected-shadow } ) );
+            a { color: $kendo-chat-link-text };
+            a:hover { color: $kendo-chat-link-hover-text };
         }
 
-
-        // Quick replies
         .k-quick-reply {
-            @include fill(
-                var( --kendo-chat-quick-reply-text, #{ $kendo-chat-quick-reply-text } ),
-                var( --kendo-chat-quick-reply-bg, #{ $kendo-chat-quick-reply-bg } ),
-                var( --kendo-chat-quick-reply-border, #{ $kendo-chat-quick-reply-border } )
-            );
-
-            &:hover,
-            &.k-hover {
-                @include fill(
-                    var( --kendo-chat-quick-reply-hover-text, #{ $kendo-chat-quick-reply-hover-text } ),
-                    var( --kendo-chat-quick-reply-hover-bg, #{ $kendo-chat-quick-reply-hover-bg } ),
-                    var( --kendo-chat-quick-reply-hover-border, #{ $kendo-chat-quick-reply-hover-border } )
-                );
+            &:focus,
+            &.k-focus {
+                box-shadow: none;
             }
 
             &:focus::after,
             &.k-focus::after {
-                outline-color: var( --kendo-chat-quick-reply-focus-outline, initial )
+                outline-color: $kendo-chat-quick-reply-focus-outline-color;
             }
         }
     }
-
-
-    // Toolbar
-    .k-chat-toolbar,
-    .k-chat .k-toolbar-box {
-        @include fill(
-            var( --kendo-chat-toolbar-text, #{ $kendo-chat-toolbar-text } ),
-            var( --kendo-chat-toolbar-bg, #{ $kendo-chat-toolbar-bg } ),
-            var( --kendo-chat-toolbar-border, #{ $kendo-chat-toolbar-border } )
-        );
-    }
-
 }