Skip to content

Commit

Permalink
feat(chat): update chat styles to match new rendering
Browse files Browse the repository at this point in the history
  • Loading branch information
@epetrow @Juveniel
epetrow authored and Juveniel committed Jul 25, 2023
1 parent 97796b6 commit b094e2d
Show file tree
Hide file tree
Showing 7 changed files with 24 additions and 130 deletions.
2 changes: 0 additions & 2 deletions packages/bootstrap/scss/chat/_variables.scss
View file
Expand Up @@ -32,8 +32,6 @@ $kendo-chat-bubble-border-radius-sm: 2px !default;
$kendo-chat-avatar-size: 32px !default;
$kendo-chat-avatar-spacing: $kendo-chat-item-spacing-x !default;

$kendo-chat-toolbar-padding-x: $kendo-toolbar-md-padding-x !default;
$kendo-chat-toolbar-padding-y: $kendo-toolbar-md-padding-y !default;
$kendo-chat-toolbar-spacing: $kendo-toolbar-md-spacing !default;
$kendo-chat-toolbar-bg: $kendo-toolbar-bg !default;
$kendo-chat-toolbar-text: $kendo-toolbar-text !default;
Expand Down
2 changes: 0 additions & 2 deletions packages/classic/scss/chat/_variables.scss
View file
Expand Up @@ -32,8 +32,6 @@ $kendo-chat-bubble-border-radius-sm: 2px !default;
$kendo-chat-avatar-size: 32px !default;
$kendo-chat-avatar-spacing: $kendo-chat-item-spacing-x !default;

$kendo-chat-toolbar-padding-x: $kendo-toolbar-md-padding-x !default;
$kendo-chat-toolbar-padding-y: $kendo-toolbar-md-padding-y !default;
$kendo-chat-toolbar-spacing: $kendo-toolbar-md-spacing !default;
$kendo-chat-toolbar-bg: $kendo-toolbar-bg !default;
$kendo-chat-toolbar-text: $kendo-toolbar-text !default;
Expand Down
126 changes: 22 additions & 104 deletions packages/default/scss/chat/_layout.scss
View file
Expand Up @@ -62,11 +62,11 @@
text-align: start;

.k-message-time {
margin-left: $kendo-chat-item-spacing-x;
left: 100%;
margin-inline-start: $kendo-chat-item-spacing-x;
inset-inline-start: 100%;
}
.k-message-status {
left: 0;
inset-inline-start: 0;
}

.k-first .k-chat-bubble,
Expand All @@ -84,11 +84,11 @@
text-align: end;

.k-message-time {
margin-right: $kendo-chat-item-spacing-x;
right: 100%;
margin-inline-end: $kendo-chat-item-spacing-x;
inset-inline-end: 100%;
}
.k-message-status {
right: 0;
inset-inline-end: 0;
}

.k-first .k-chat-bubble,
Expand Down Expand Up @@ -173,27 +173,24 @@

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

@at-root .k-message-group:not(.k-alt) > .k-avatar {
left: 0;
inset-inline-start: 0;
bottom: 0;
}
@at-root .k-message-group.k-alt > .k-avatar {
right: 0;
inset-inline-end: 0;
bottom: 0;
}
}
.k-avatars {
.k-message-group:not(.k-alt):not(.k-no-avatar) {
padding-left: calc( #{$kendo-chat-avatar-size} + #{$kendo-chat-avatar-spacing} );
.k-message-group: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-right: calc( #{$kendo-chat-avatar-size} + #{$kendo-chat-avatar-spacing} );
padding-inline-end: calc( #{$kendo-chat-avatar-size} + #{$kendo-chat-avatar-spacing} );
}
}
}
Expand Down Expand Up @@ -226,8 +223,8 @@
}
.k-quick-reply {
@include border-radius( 100px );
margin-right: $kendo-chat-quick-reply-spacing;
margin-bottom: k-math-div( $kendo-chat-quick-reply-spacing, 2 );
margin-inline-end: $kendo-chat-quick-reply-spacing;
margin-block-end: k-math-div( $kendo-chat-quick-reply-spacing, 2 );
padding-block: $kendo-chat-quick-reply-padding-y;
padding-inline: $kendo-chat-quick-reply-padding-x;
border-width: 1px;
Expand All @@ -246,10 +243,10 @@

// Scrollable quick replies
.k-scrollable-quick-replies {
margin-left: -$kendo-chat-message-list-padding-y;
margin-right: -$kendo-chat-message-list-padding-y;
padding-left: $kendo-chat-message-list-padding-y;
padding-right: $kendo-chat-message-list-padding-y;
margin-inline-start: -$kendo-chat-message-list-padding-y;
margin-inline-end: -$kendo-chat-message-list-padding-y;
padding-inline-start: $kendo-chat-message-list-padding-y;
padding-inline-end: $kendo-chat-message-list-padding-y;
display: flex;
flex-flow: row nowrap;
flex: 0 0 auto;
Expand All @@ -264,7 +261,7 @@
margin: 0;
}
.k-quick-reply + .k-quick-reply {
margin-left: $kendo-chat-quick-reply-spacing;
margin-inline-start: $kendo-chat-quick-reply-spacing;
}
}

Expand Down Expand Up @@ -327,15 +324,14 @@
.k-chat .k-card-deck {
max-width: calc(100% + #{$kendo-chat-message-list-padding-y * 2}); // prevent overflowing in the parent element
box-sizing: border-box;
margin-left: -$kendo-chat-message-list-padding-y;
margin-right: -$kendo-chat-message-list-padding-y;
margin-inline-start: -$kendo-chat-message-list-padding-y;
margin-inline-end: -$kendo-chat-message-list-padding-y;
padding: $kendo-chat-message-list-padding-y $kendo-chat-message-list-padding-y $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 {
.k-chat .k-card-deck .k-card {
width: 200px;
}

Expand Down Expand Up @@ -410,16 +406,10 @@


// Chat toolbar
.k-chat-toolbar,
.k-chat .k-toolbar-box {
padding-block: $kendo-chat-toolbar-padding-y;
padding-inline: $kendo-chat-toolbar-padding-x;
.k-chat-toolbar {
width: 100%;
border-width: 1px 0 0;
box-sizing: border-box;
flex: none;
overflow: hidden;
position: relative;

&::before {
display: none;
Expand Down Expand Up @@ -464,78 +454,6 @@


}




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


// Text align
.k-message-group:not(.k-alt) {
.k-message-time {
margin-left: 0;
margin-right: $kendo-chat-item-spacing-x;
left: auto;
right: 100%;
}
.k-message-status {
left: auto;
right: 0;
}
}
.k-message-group.k-alt {
.k-message-time {
margin-right: 0;
margin-left: $kendo-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( #{$kendo-chat-avatar-size} + #{$kendo-chat-avatar-spacing} );
}
.k-message-group.k-alt:not(.k-no-avatar) {
padding-right: 0;
padding-left: calc( #{$kendo-chat-avatar-size} + #{$kendo-chat-avatar-spacing} );
}
}

.k-chat .k-card-deck {
.k-card-wrap + .k-card-wrap {
margin-left: 0;
margin-right: $kendo-card-deck-gap;
}
}


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

}

}


Expand Down
2 changes: 0 additions & 2 deletions packages/default/scss/chat/_variables.scss
View file
Expand Up @@ -32,8 +32,6 @@ $kendo-chat-bubble-border-radius-sm: 2px !default;
$kendo-chat-avatar-size: 32px !default;
$kendo-chat-avatar-spacing: $kendo-chat-item-spacing-x !default;

$kendo-chat-toolbar-padding-x: $kendo-toolbar-md-padding-x !default;
$kendo-chat-toolbar-padding-y: $kendo-toolbar-md-padding-y !default;
$kendo-chat-toolbar-spacing: $kendo-toolbar-md-spacing !default;
$kendo-chat-toolbar-bg: $kendo-toolbar-bg !default;
$kendo-chat-toolbar-text: $kendo-toolbar-text !default;
Expand Down
14 changes: 2 additions & 12 deletions packages/fluent/scss/chat/_layout.scss
View file
Expand Up @@ -175,10 +175,7 @@

// 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 {
Expand Down Expand Up @@ -335,8 +332,7 @@
overflow-x: auto;
scroll-behavior: smooth;
}
.k-chat .k-card-deck .k-card,
.k-chat .k-card-deck .k-card-wrap {
.k-chat .k-card-deck .k-card {
width: 200px;
}

Expand Down Expand Up @@ -407,16 +403,10 @@

@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 } );
.k-chat-toolbar {
width: 100%;
border-width: 1px 0 0;
box-sizing: border-box;
flex: none;
overflow: hidden;
position: relative;

&::before {
display: none;
Expand Down
6 changes: 0 additions & 6 deletions packages/fluent/scss/chat/_variables.scss
View file
Expand Up @@ -112,12 +112,6 @@ $kendo-chat-avatar-size: 32px !default;
/// @group chat
$kendo-chat-avatar-spacing: $kendo-chat-item-spacing-x !default;

/// The horizontal padding of the toolbar in the chat.
/// @group chat
$kendo-chat-toolbar-padding-x: $kendo-toolbar-md-padding-x !default;
/// The vertical padding of the toolbar in the chat.
/// @group chat
$kendo-chat-toolbar-padding-y: $kendo-toolbar-md-padding-y !default;
/// The spacing of the toolbar in the chat.
/// @group chat
$kendo-chat-toolbar-spacing: $kendo-toolbar-md-spacing !default;
Expand Down
2 changes: 0 additions & 2 deletions packages/material/scss/chat/_variables.scss
View file
Expand Up @@ -32,8 +32,6 @@ $kendo-chat-bubble-border-radius-sm: 2px !default;
$kendo-chat-avatar-size: 32px !default;
$kendo-chat-avatar-spacing: $kendo-chat-item-spacing-x !default;

$kendo-chat-toolbar-padding-x: $kendo-toolbar-md-padding-x !default;
$kendo-chat-toolbar-padding-y: $kendo-toolbar-md-padding-y !default;
$kendo-chat-toolbar-spacing: $kendo-toolbar-md-spacing !default;
$kendo-chat-toolbar-bg: k-try-shade( $kendo-button-bg, .5 ) !default;
$kendo-chat-toolbar-text: $kendo-toolbar-text !default;
Expand Down

0 comments on commit b094e2d

Please sign in to comment.