Skip to content

Commit

Permalink
update styles
Browse files Browse the repository at this point in the history
  • Loading branch information
Zedwag committed Oct 9, 2024
1 parent 1fca9d7 commit 965a841
Show file tree
Hide file tree
Showing 11 changed files with 35 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
border-radius: 999em;
}

.dx-chat-messagelist-date-header {
.dx-chat-messagelist-day-header {
text-align: center;
}

Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,23 @@

@mixin chat-messagelist(
$padding,
$date-header-color,
$day-header-color,
$day-header-padding-bottom,
$first-day-header-padding-top,
) {
.dx-chat-messagelist {
.dx-scrollable-content {
padding-inline: $padding;
}
}

.dx-chat-messagelist-date-header {
padding: $padding;
color: $date-header-color;
.dx-chat-messagelist-day-header {
padding-bottom: $day-header-padding-bottom;
color: $day-header-color;
}

.dx-chat-messagelist-day-header:first-child {
padding-top: $first-day-header-padding-top;
}
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ $chat-messagelist-empty-icon-color: null !default;
$chat-messagelist-empty-icon-background-color: null !default;
$chat-messagelist-empty-message-color: $base-text-color !default;
$chat-messagelist-empty-prompt-color: null !default;
$chat-messagelist-day-header-color: null !default;

@if $mode == "light" {
$chat-avatar-background-color: darken($base-bg, 12.16) !default; // #E0E0E0
Expand All @@ -26,6 +27,7 @@ $chat-messagelist-empty-prompt-color: null !default;
$chat-messagelist-empty-icon-color: lighten($base-icon-color, 32.16) !default; // #B3B3B3
$chat-messagelist-empty-icon-background-color: darken($base-bg, 3.92) !default; // #F5F5F5
$chat-messagelist-empty-prompt-color: darken($base-label-color, 5.88) !default; // #616161
$chat-messagelist-day-header-color: lighten($base-icon-color, 32.16) !default; // #B3B3B3
}

@else if $mode == "dark" {
Expand All @@ -37,4 +39,5 @@ $chat-messagelist-empty-prompt-color: null !default;
$chat-messagelist-empty-icon-color: darken($base-icon-color, 25.88) !default; // #6B6B6B
$chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default; // #3D3D3D
$chat-messagelist-empty-prompt-color: lighten($base-label-color, 7.84) !default; // #ADADAD
$chat-messagelist-day-header-color: darken($base-icon-color, 25.88) !default; // #6B6B6B
}
6 changes: 4 additions & 2 deletions packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -50,5 +50,7 @@
);
@include chat-messagelist(
$chat-messagelist-padding,
$chat-messagelist-empty-icon-color,
);
$chat-messagelist-day-header-color,
$chat-messagelist-day-header-padding-bottom,
$chat-messagelist-first-day-header-padding-top,
);
2 changes: 2 additions & 0 deletions packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ $chat-messagelist-empty-icon-margin-bottom: null !default;
$chat-messagelist-empty-row-gap: null !default;
$chat-messagelist-empty-message-font-size: null !default;
$chat-messagelist-empty-prompt-font-size: null !default;
$chat-messagelist-day-header-padding-bottom: 12px !default;
$chat-messagelist-first-day-header-padding-top: 20px !default;

@if $size == "default" {
$chat-bubble-border-radius: $fluent-base-border-radius * 3 !default;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ $chat-messagelist-empty-icon-color: null !default;
$chat-messagelist-empty-icon-background-color: null !default;
$chat-messagelist-empty-message-color: null !default;
$chat-messagelist-empty-prompt-color: null !default;
$chat-messagelist-day-header-color: null !default;

@if $color == "light" {
$chat-avatar-background-color: darken($base-bg, 13.33) !default; // #DDDDDD
Expand All @@ -27,6 +28,7 @@ $chat-messagelist-empty-prompt-color: null !default;
$chat-messagelist-empty-icon-background-color: darken($base-bg, 7.84) !default; // #EBEBEB
$chat-messagelist-empty-message-color: darken($base-text-color, 6.67) !default; // #222222
$chat-messagelist-empty-prompt-color: lighten($base-label-color, 38.43) !default; // #959595
$chat-messagelist-day-header-color: lighten($base-icon-color, 46.67) !default; // #AAAAAA
}

@else if $color == "dark" {
Expand All @@ -39,4 +41,5 @@ $chat-messagelist-empty-prompt-color: null !default;
$chat-messagelist-empty-icon-background-color: lighten($base-bg, 7.84) !default; // #3E3E3E
$chat-messagelist-empty-message-color: lighten($base-text-color, 12.94) !default; // #FFFFFF
$chat-messagelist-empty-prompt-color: darken($base-label-color, 38.04) !default; // #7D7D7D
$chat-messagelist-day-header-color: darken(#dedede, 37.25) !default; // #7F7F7F
}
Original file line number Diff line number Diff line change
Expand Up @@ -50,5 +50,7 @@
);
@include chat-messagelist(
$chat-messagelist-padding,
$chat-messagelist-empty-icon-color,
$chat-messagelist-day-header-color,
$chat-messagelist-day-header-padding-bottom,
$chat-messagelist-first-day-header-padding-top,
);
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ $chat-messagelist-empty-icon-margin-bottom: null !default;
$chat-messagelist-empty-row-gap: null !default;
$chat-messagelist-empty-message-font-size: null !default;
$chat-messagelist-empty-prompt-font-size: null !default;
$chat-messagelist-day-header-padding-bottom: 12px !default;
$chat-messagelist-first-day-header-padding-top: 20px !default;

@if $size == "default" {
$chat-bubble-padding: 8px 12px !default;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ $chat-messagelist-empty-icon-color: rgba($base-inverted-bg, 0.38) !default;
$chat-messagelist-empty-icon-background-color: rgba($base-inverted-bg, 0.08) !default;
$chat-messagelist-empty-message-color: rgba($base-inverted-bg, 0.87) !default;
$chat-messagelist-empty-prompt-color: rgba($base-inverted-bg, 0.6) !default;
$chat-messagelist-day-header-color: rgba($base-inverted-bg, 0.38) !default;

@if $mode == "light" {
$chat-avatar-background-color: darken($base-bg, 12.16) !default; // #E0E0E0
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,5 +50,7 @@
);
@include chat-messagelist(
$chat-messagelist-padding,
$chat-messagelist-empty-icon-color,
$chat-messagelist-day-header-color,
$chat-messagelist-day-header-padding-bottom,
$chat-messagelist-first-day-header-padding-top,
);
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ $chat-messagelist-empty-icon-margin-bottom: null !default;
$chat-messagelist-empty-row-gap: null !default;
$chat-messagelist-empty-message-font-size: null !default;
$chat-messagelist-empty-prompt-font-size: null !default;
$chat-messagelist-day-header-padding-bottom: 12px !default;
$chat-messagelist-first-day-header-padding-top: 20px !default;

@if $size == "default" {
$chat-messagebox-buton-gap: 10px !default;
Expand Down

0 comments on commit 965a841

Please sign in to comment.