@progress/kendo-ui/css/web/Default/chat/layout.less

This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.

/*!
 * Copyright 2018 Telerik EAD
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@chat-padding-x: 16px;
@chat-padding-y: 16px;

@chat-item-spacing-x: 8px;
@chat-item-spacing-y: 16px;

@chat-message-list-padding-x: @chat-padding-x;
@chat-message-list-padding-y: @chat-padding-y;
@chat-message-list-spacing: @chat-item-spacing-y;

@chat-bubble-padding-x: 12px;
@chat-bubble-padding-y: 8px;
@chat-bubble-spacing: 2px;
@chat-bubble-line-height: 18px;

@chat-bubble-border-radius: 12px;
@chat-bubble-border-radius-sm: 2px;

@chat-avatar-size: 32px;
@chat-avatar-spacing: @chat-item-spacing-x;

@chat-message-box-padding-x: @chat-padding-x;
@chat-message-box-padding-y: 10px;

@chat-toolbar-padding-x: @chat-padding-x;
@chat-toolbar-padding-y: 10px;
@chat-toolbar-spacing: 20px;

@chat-quick-reply-padding-x: 12px;
@chat-quick-reply-padding-y: 8px;
@chat-quick-reply-spacing: 8px;
@chat-quick-reply-line-height: @chat-bubble-line-height;

.k-hidden {
    display: none !important;
}

.k-chat {
    height: 600px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;


    max-width: 500px;
    margin: auto;


    // 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: @chat-message-list-padding-y @chat-message-list-padding-x;
        width: 100%;
        box-sizing: border-box;
        position: relative;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        overflow: hidden;

        > * + * {
            margin-top: @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-left: @chat-item-spacing-x;
            left: 100%;
        }
        .k-message-status {
            left: 0;
        }

        .k-first .k-bubble,
        .k-only .k-bubble {
            border-bottom-left-radius: @chat-bubble-border-radius-sm;
        }
        .k-middle .k-bubble,
        .k-last .k-bubble {
            .border-left-radius( @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-right: @chat-item-spacing-x;
            right: 100%;
        }
        .k-message-status {
            right: 0;
        }

        .k-first .k-bubble,
        .k-only .k-bubble {
            border-bottom-right-radius: @chat-bubble-border-radius-sm;
        }
        .k-middle .k-bubble,
        .k-last .k-bubble {
            .border-right-radius( @chat-bubble-border-radius-sm );
        }
    }


    // Message
    .k-message {
        max-width: 100%;
        margin: @chat-bubble-spacing 0 0;
        position: relative;
        transition: margin .2s ease-in-out;
    }


    // 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-top: @chat-bubble-spacing;
        height: 0;
        overflow: hidden;
        top: 100%;
        transition: height .2s ease-in-out;
    }


    // Bubble
    .k-bubble {
        .border-radius( @chat-bubble-border-radius );
        padding: @chat-bubble-padding-y @chat-bubble-padding-x;
        border-width: 1px;
        border-style: solid;
        line-height: @chat-bubble-line-height;
        word-wrap: break-word;
    }


    // Message states
    .k-message.k-state-selected {
        margin-bottom: @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-bottom: @chat-item-spacing-y;

        .k-message-status { height: 1.2em; }
    }
}


// Avatar
.k-avatar {
    .border-radius(100%);
    width: @chat-avatar-size;
    height: @chat-avatar-size;
    position: absolute;

    .k-message-group:not(.k-alt) > & {
        left: 0;
        bottom: 0;
    }
    .k-message-group.k-alt > & {
        right: 0;
        bottom: 0;
    }
}
.k-avatars {
    .k-message-group:not(.k-alt):not(.k-no-avatar) {
        padding-left: calc( ~"@{chat-avatar-size} + @{chat-avatar-spacing}" );
    }
    .k-message-group.k-alt:not(.k-no-avatar) {
        padding-right: calc( ~"@{chat-avatar-size} + @{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-timestamp {
    font-size: smaller;
    line-height: normal;
    text-align: center;
    align-self: stretch;
}


// Quick reply
.k-quick-replies {
    display: block;
    max-width: 100%; //IE fix
}
.k-quick-reply {
    .border-radius( 100px );
    margin-right: @chat-quick-reply-spacing;
    margin-bottom: (@chat-quick-reply-spacing / 2);
    padding: @chat-quick-reply-padding-y @chat-quick-reply-padding-x;
    border-width: 1px;
    border-style: solid;
    line-height: @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;
}


// Message box
.k-message-box {
    padding: @chat-message-box-padding-y @chat-message-box-padding-x;
    border-width: 1px 0 0;
    border-style: solid;
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;


    .k-input {
        margin: 0;
        padding: 0;
        border: 0;
        font: inherit;
        background: none;
        flex: 1 1 auto;
    }

    .k-button {
        padding: 0;

        svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
            display: inline-block;
        }

        &::before,
        &::after {
            display: none;
        }
    }
}




// chat/cards/layout
.k-chat .k-card-list {
    margin: @chat-bubble-spacing 0 0;
}

.k-chat .k-card-deck {
    max-width: calc( 100% + calc( ~"@{chat-message-list-padding-y} * 2 "));// prevent overflowing in the parent element
    box-sizing: border-box;
    margin-left: -@chat-message-list-padding-y;
    margin-right: -@chat-message-list-padding-y;
    padding: @chat-message-list-padding-y @chat-message-list-padding-y @chat-message-list-padding-x;
    overflow: hidden;
    overflow-x: auto;
    scroll-behavior: smooth;

    .k-card-wrap + .k-card-wrap {
        margin-left: @card-deck-gap;
    }
}
.k-chat .k-card-deck .k-card,
.k-chat .k-card-deck .k-card-wrap {
    width: 200px;
}

.k-card-deck-scrollwrap {
    margin-left: -@chat-message-list-padding-y;
    margin-right: -@chat-message-list-padding-y;
    padding-left: @chat-message-list-padding-y;
    padding-right: @chat-message-list-padding-y;
    overflow: hidden;
    flex: 0 0 auto;
    width: 100%;
    box-sizing: content-box;

    > .k-card-deck {
        // hide scrollbar
        @scrollbar-size: 20px;
        margin-bottom: -@scrollbar-size;
        padding-bottom: @scrollbar-size;
    }
}


// Deck
.k-chat .k-card-deck .k-card-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    flex: 0 0 auto;

    .k-card {
        flex: 0 0 auto;
    }
    .k-card + .k-card {
        margin-left: @card-deck-gap;
    }

    &.k-state-selected {
        background: none;
    }
}




// chat/typingindicator/layout" )

// Local variables
@chat-typing-indicator-dot-size: 8px;
@chat-typing-indicator-dot-spacing: 5px;

// Typing indicator
.k-typing-indicator {
    padding: 0;
    border-radius: 50px;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;

    span {
        width: @chat-typing-indicator-dot-size;
        height: @chat-typing-indicator-dot-size;
        border-radius: 50%;
        flex: 0 0 @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-left: @chat-typing-indicator-dot-spacing;
    }

    @keyframes k-animation-blink {
        50% {
            opacity: 1;
        }
    }

}



.k-chat .k-toolbar-box {
    padding: @chat-toolbar-padding-y @chat-toolbar-padding-x;
    width: 100%;
    border-width: 1px 0 0;
    border-style: solid;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    flex: 0 0 auto;

    .k-button-list {
        // margin-bottom: -20px;
        // padding-bottom: 20px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow: hidden;
        // overflow-x: auto;
        scroll-behavior: smooth;

        .k-button + .k-button {
            margin-left: @chat-toolbar-spacing;
            flex-shrink: 0;
        }
    }


    .k-scroll-button {
        position: absolute;
        z-index: 2;
        top: 50%;
        transform: translateY(-50%);
    }
    .k-scroll-button-left {
        left: 0;
    }
    .k-scroll-button-right {
        right: 0;
    }

    .k-button {
        border-width: 0;
        color: inherit;
        background: none;
        flex-shrink: 0;
    }


}




// chat/layout/rtl


// Quick replies
.k-rtl,
[dir="rtl"] {


    // Text align
    .k-message-group:not(.k-alt) {
        text-align: right;

        .k-message-time {
            margin-left: 0;
            margin-right: @chat-item-spacing-x;
            left: auto;
            right: 100%;
        }
        .k-message-status {
            left: auto;
            right: 0;
        }
    }
    .k-message-group.k-alt {
        text-align: left;

        .k-message-time {
            margin-right: 0;
            margin-left: @chat-item-spacing-x;
            right: auto;
            left: 100%;
        }
        .k-message-status {
            right: auto;
            left: 0;
        }
    }


    // Avatar
    .k-message-group:not(.k-alt) > .k-avatar {
        left: auto;
        right: 0;
    }
    .k-message-group.k-alt > .k-avatar {
        right: auto;
        left: 0;
    }
    .k-avatars {
        .k-message-group:not(.k-alt):not(.k-no-avatar) {
            padding-left: 0;
            padding-right: calc( ~"@{chat-avatar-size} + @{chat-avatar-spacing}" );
        }
        .k-message-group.k-alt:not(.k-no-avatar) {
            padding-right: 0;
            padding-left: calc( ~"@{chat-avatar-size} + @{chat-avatar-spacing}" );
        }
    }

    .k-message-box .k-button svg {
        transform: rotate(180deg)
    }


    // Quick replies
    .k-quick-reply {
        margin-right: 0;
        margin-left: @chat-quick-reply-spacing;
    }
    // .k-quick-reply + .k-quick-reply {
    //     margin-left: 0;
    //     margin-right: @chat-quick-reply-spacing
    // }
}