@progress/kendo-theme-classic 4.41.3-dev.0 → 5.0.0-next.3

package/modules/@progress/kendo-theme-default/scss/chat/_layout.scss

@@ -1,552 +0,0 @@
-@include exports("chat/layout") {
-
-    .k-chat {
-        margin: auto;
-        max-width: $chat-width;
-        height: $chat-height;
-        max-height: 100%;
-        border-width: $chat-border-width;
-        border-style: solid;
-        box-sizing: border-box;
-        outline: 0;
-        font-family: $chat-font-family;
-        font-size: $chat-font-size;
-        line-height: $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: $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 {
-                @include 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 {
-                @include 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;
-            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-top: $chat-bubble-spacing;
-            height: 0;
-            overflow: hidden;
-            top: 100%;
-            transition: height .2s ease-in-out;
-        }
-
-
-        // Bubble
-        .k-bubble {
-            @include 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;
-
-            a {
-                color: inherit;
-                text-decoration: underline;
-            }
-        }
-
-
-        // 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 {
-            @include border-radius( 100% );
-            margin: 0;
-            width: $chat-avatar-size;
-            height: $chat-avatar-size;
-            position: absolute;
-
-            @at-root .k-message-group:not(.k-alt) > .k-avatar {
-                left: 0;
-                bottom: 0;
-            }
-            @at-root .k-message-group.k-alt > .k-avatar {
-                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-chat .k-timestamp {
-        font-size: $chat-timestamp-font-size;
-        line-height: $chat-timestamp-line-height;
-        text-transform: $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-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;
-        outline: none;
-    }
-
-
-    // Scrollable quick replies
-    .k-scrollable-quick-replies {
-        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;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: 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-left: $chat-quick-reply-spacing;
-        }
-    }
-
-
-    // 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-flow: row nowrap;
-        align-items: center;
-
-        // Input
-        .k-input {
-            padding: 0;
-        }
-
-        .k-button {
-            padding: 0;
-            flex-shrink: 0;
-
-            svg {
-                width: 20px;
-                height: 20px;
-                fill: currentColor;
-                display: inline-block;
-            }
-
-            &::before,
-            &::after {
-                display: none;
-            }
-
-            .k-rtl &,
-            &[dir="rtl"] {
-                transform: scaleX(-1);
-            }
-        }
-    }
-
-}
-
-
-
-
-@include exports( "chat/cards/layout" ) {
-
-    .k-chat .k-card-list {
-        margin: $chat-bubble-spacing 0 0;
-    }
-
-    .k-chat .k-card-deck {
-        max-width: calc(100% + #{$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-chat .k-card-deck .k-card,
-    .k-chat .k-card-deck .k-card-wrap {
-        width: 200px;
-    }
-
-    .k-chat .k-card-deck-scrollwrap {
-        margin-right: -$chat-message-list-padding-y;
-        margin-left: -$chat-message-list-padding-y;
-        padding-left: $chat-message-list-padding-y;
-        padding-right: $chat-message-list-padding-y;
-    }
-
-    .k-chat .k-card-deck-scrollwrap > .k-card-deck {
-        // hide scrollbar in chat
-        $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;
-        padding-bottom: 5px; // accommodate for focused box shadow on OSX
-
-        .k-card {
-            flex: 0 0 auto;
-        }
-
-        &.k-state-selected {
-            background: none;
-        }
-    }
-}
-
-
-
-
-@include exports( "chat/typingindicator/layout" ) {
-
-    // Local variables
-    $chat-typing-indicator-dot-size: 8px !default;
-    $chat-typing-indicator-dot-spacing: 5px !default;
-
-    // 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;
-            }
-        }
-
-    }
-
-}
-
-
-
-
-@include exports( "chat/toolbar/layout" ) {
-
-    .k-chat-toolbar,
-    .k-chat .k-toolbar-box {
-        width: 100%;
-        box-sizing: border-box;
-        overflow: hidden;
-        position: relative;
-        flex: 0 0 auto;
-
-        .k-button-list {
-            // Needed for native scrolling. Will uncoment when it's implemented.
-            // margin-bottom: -20px;
-            // padding-bottom: 20px;
-            display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
-            overflow: hidden;
-            // overflow-x: auto;
-            scroll-behavior: smooth;
-            padding: $chat-toolbar-padding-y $chat-toolbar-padding-x;
-
-            // fix for flex container disregarding the right padding
-            &::after {
-                content: "";
-                padding-right: $chat-toolbar-padding-x;
-            }
-
-            .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;
-        }
-
-
-    }
-
-}
-
-
-
-
-@include exports( "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-chat .k-card-deck {
-            .k-card-wrap + .k-card-wrap {
-                margin-left: 0;
-                margin-right: $card-deck-gap;
-            }
-        }
-
-
-        // Quick replies
-        .k-quick-reply {
-            margin-right: 0;
-            margin-left: $chat-quick-reply-spacing;
-        }
-
-    }
-
-
-}

package/modules/@progress/kendo-theme-default/scss/chat/_theme.scss

@@ -1,121 +0,0 @@
-@include exports("chat/theme") {
-
-    // Chat
-    .k-chat {
-        @include fill(
-            $chat-text,
-            $chat-bg,
-            $chat-border
-        );
-
-
-        // Message meta
-        .k-timestamp {
-            @include fill(
-                $chat-timestamp-text,
-                $chat-timestamp-bg
-            )
-        }
-        .k-author {
-            font-weight: bold;
-        }
-
-
-        // Bubbles
-        .k-bubble {
-            @include fill(
-                $chat-bubble-text,
-                $chat-bubble-bg,
-                $chat-bubble-border
-            );
-            @include box-shadow( $chat-bubble-shadow );
-            transition: $transition;
-            order: -1;
-
-            a { color: $link-text; }
-            a:hover { color: $link-hover-text; }
-        }
-        .k-bubble:hover {
-            @include box-shadow( $chat-bubble-hover-shadow );
-        }
-        .k-state-selected .k-bubble {
-            @include box-shadow( $chat-bubble-selected-shadow );
-        }
-
-        .k-alt .k-bubble {
-            @include fill(
-                $chat-alt-bubble-text,
-                $chat-alt-bubble-bg,
-                $chat-alt-bubble-border
-            );
-            @include box-shadow( $chat-alt-bubble-shadow );
-        }
-        .k-alt .k-bubble:hover {
-            @include box-shadow( $chat-alt-bubble-hover-shadow );
-        }
-        .k-alt .k-state-selected .k-bubble {
-            @include box-shadow( $chat-alt-bubble-selected-shadow );
-        }
-
-
-        // Quick replies
-        .k-quick-reply {
-            @include fill(
-                $chat-quick-reply-text,
-                $chat-quick-reply-bg,
-                $chat-quick-reply-border
-            );
-        }
-        .k-quick-reply:hover {
-            @include fill(
-                $chat-quick-reply-hover-text,
-                $chat-quick-reply-hover-bg,
-                $chat-quick-reply-hover-border
-            );
-        }
-
-
-        // Message box
-        .k-message-box {
-            @include fill(
-                $chat-message-box-text,
-                $chat-message-box-bg,
-                $chat-message-box-border
-            );
-        }
-        .k-message-box.k-state-focused {
-            @include box-shadow( $chat-message-box-focus-shadow );
-        }
-        .k-message-box .k-button:hover {
-            @include fill( $chat-message-box-button-hover-text );
-        }
-
-    }
-
-
-    // Toolbar
-    .k-chat-toolbar,
-    .k-chat .k-toolbar-box {
-        @include fill(
-            $chat-toolbar-text,
-            $chat-toolbar-bg,
-            $chat-toolbar-border
-        );
-
-        .k-button:hover {
-            @include fill(
-                $chat-toolbar-box-button-hover-text,
-                $chat-toolbar-box-button-hover-bg
-            );
-        }
-
-        .k-scroll-button {
-            @include fill( $bg: $chat-bg );
-            @include box-shadow( $chat-toolbar-box-scroll-button-shadow );
-        }
-        .k-scroll-button:hover {
-            @include fill( $bg: $chat-bg );
-        }
-    }
-
-}