@progress/kendo-theme-fluent 5.7.0 → 5.8.0

package/scss/chat/_layout.scss

@@ -0,0 +1,460 @@
+@use "sass:math";
+@use "_variables.scss" as *;
+@use "../core/color-system" as *;
+@use "../core/mixins" 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: $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: left;
+
+            .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-bubble,
+            .k-only .k-bubble {
+                border-end-start-radius: var( --kendo-chat-bubble-border-radius-sm, #{ $kendo-chat-bubble-border-radius-sm } );
+            }
+            .k-middle .k-bubble,
+            .k-last .k-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: right;
+
+            .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-bubble,
+            .k-only .k-bubble {
+                border-end-end-radius: var( --kendo-chat-bubble-border-radius-sm, #{ $kendo-chat-bubble-border-radius-sm } );
+            }
+            .k-middle .k-bubble,
+            .k-last .k-bubble {
+                border-end-end-radius: var( --kendo-chat-bubble-border-radius-sm, #{ $kendo-chat-bubble-border-radius-sm } );
+            }
+        }
+
+
+        // Message
+        .k-message {
+            max-width: 100%;
+            margin: var( --kendo-chat-bubble-spacing, #{ $kendo-chat-bubble-spacing } ) 0 0;
+            position: relative;
+            transition: margin .2s ease-in-out;
+            outline: none;
+        }
+
+
+        // Message meta
+        .k-message-time,
+        .k-message-status {
+            font-size: smaller;
+            line-height: normal;
+            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-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 {
+            @include border-radius( 100% );
+            margin: 0;
+            width: var( --kendo-chat-avatar-size, #{ $kendo-chat-avatar-size } );
+            height: var( --kendo-chat-avatar-size, #{ $kendo-chat-avatar-size } );
+            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):not(.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 } );
+            }
+        }
+    }
+
+    // Author
+    .k-author {
+        margin: 0;
+        font-size: smaller;
+        line-height: normal;
+    }
+    .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;
+        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;
+    }
+
+
+    // 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 } );
+        }
+    }
+
+
+    // 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; // sass-lint:disable-line no-important
+        border-radius: 0 !important; // sass-lint:disable-line no-important
+        flex: none;
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: center;
+
+        &:focus,
+        &.k-focus,
+        &:focus-within {
+            outline: 0;
+            box-shadow: none;
+        }
+
+        // Input
+        .k-input {}
+
+        .k-button {
+            border-width: 0;
+            flex-shrink: 0;
+
+            svg {
+                width: 20px;
+                height: 20px;
+                fill: currentColor;
+                display: inline-block;
+            }
+
+            .k-rtl &,
+            &[dir="rtl"] {
+                transform: scaleX(-1);
+            }
+        }
+    }
+
+}
+
+@mixin kendo-chat-card--layout() {
+    .k-chat .k-card-list {
+        margin: $kendo-chat-bubble-spacing 0 0;
+    }
+
+    .k-chat .k-card-deck {
+        max-width: calc( 100% + #{ $kendo-chat-message-list-padding-y * 2 } ); // prevent overflowing in the parent element
+        max-width: calc( 100% + var( --kendo-chat-message-list-padding-y, #{ $kendo-chat-message-list-padding-y * 2} ) );
+        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,
+    .k-chat .k-card-deck .k-card-wrap {
+        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;
+
+        &::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

@@ -0,0 +1,93 @@
+@use "_variables.scss" as *;
+@use "../core/mixins" as *;
+
+@mixin kendo-chat--theme() {
+
+    // 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-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-bubble:hover {
+            @include box-shadow( var( --kendo-chat-bubble-hover-shadow, #{ $kendo-chat-bubble-hover-shadow } ) );
+        }
+        .k-selected .k-bubble {
+            @include box-shadow( var( --kendo-chat-bubble-selected-shadow, #{ $kendo-chat-bubble-selected-shadow } ) );
+        }
+
+        .k-alt .k-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-bubble:hover {
+            @include box-shadow( var( --kendo-chat-alt-bubble-hover-shadow, #{ $kendo-chat-alt-bubble-hover-shadow } ) );
+        }
+        .k-alt .k-selected .k-bubble {
+            @include box-shadow( var( --kendo-chat-alt-bubble-selected-shadow, #{ $kendo-chat-alt-bubble-selected-shadow } ) );
+        }
+
+
+        // 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 } )
+            );
+        }
+        .k-quick-reply: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 } )
+            );
+        }
+
+    }
+
+
+    // 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 } )
+        );
+    }
+
+}