@progress/kendo-theme-core 11.3.3-dev.0 → 12.0.0-dev.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/package.json +2 -2
  2. package/scss/components/bubble/_index.scss +16 -0
  3. package/scss/components/bubble/_layout.scss +62 -0
  4. package/scss/components/bubble/_theme.scss +41 -0
  5. package/scss/components/bubble/_variables.scss +24 -0
  6. package/scss/components/chat/_index.scss +18 -2
  7. package/scss/components/chat/_layout.scss +405 -282
  8. package/scss/components/chat/_theme.scss +88 -58
  9. package/scss/components/chat/_variables.scss +44 -42
  10. package/scss/mixins/_decoration.scss +0 -5
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-theme-core",
3
3
  "description": "A collection of functions and mixins used for building themes for Kendo UI",
4
- "version": "11.3.3-dev.0",
4
+ "version": "12.0.0-dev.1",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -45,5 +45,5 @@
45
45
  "directories": {
46
46
  "doc": "docs"
47
47
  },
48
- "gitHead": "6d67f548d97771214ad4ecab8c2f1bcec386df27"
48
+ "gitHead": "794f481c97a5e59caeb7c91030f0a7853aa2db19"
49
49
  }
package/scss/components/bubble/_index.scss ADDED
@@ -0,0 +1,16 @@
1
+ // Dependencies
2
+ @use "../core/_index.scss" as *;
3
+
4
+ // Component
5
+ @forward "./_variables.scss";
6
+ @use "./_layout.scss" as *;
7
+ @use "./_theme.scss" as *;
8
+
9
+ // Expose
10
+ @mixin kendo-bubble--styles() {
11
+ @include import-once( "bubble" ) {
12
+ @include core-styles();
13
+ @include kendo-bubble--layout();
14
+ @include kendo-bubble--theme();
15
+ }
16
+ }
package/scss/components/bubble/_layout.scss ADDED
@@ -0,0 +1,62 @@
1
+ @use "./_variables.scss" as *;
2
+ @use "../../mixins/index.import.scss" as *;
3
+ @use "../../color-system/_functions.import.scss" as *;
4
+
5
+ @use "../../spacing/index.import.scss" as *;
6
+
7
+ @mixin kendo-bubble--layout-base() {
8
+ .k-bubble {
9
+ @include border-radius( $kendo-bubble-border-radius );
10
+ border-end-start-radius: $kendo-bubble-border-radius-sm;
11
+ padding-block: $kendo-bubble-padding-y;
12
+ padding-inline: $kendo-bubble-padding-x;
13
+ border-width: $kendo-bubble-border-width;
14
+ border-style: $kendo-bubble-border-style;
15
+ line-height: $kendo-bubble-line-height;
16
+ display: flex;
17
+ box-sizing: border-box;
18
+ word-wrap: break-word;
19
+
20
+ a {
21
+ color: inherit;
22
+ text-decoration: underline;
23
+ }
24
+
25
+ &:hover,
26
+ &.k-hover {
27
+ cursor: pointer;
28
+ }
29
+ }
30
+
31
+ .k-bubble-expandable {
32
+ align-items: flex-start;
33
+ white-space: nowrap;
34
+ overflow: hidden;
35
+
36
+ &.k-expanded {
37
+ white-space: normal
38
+ }
39
+
40
+ .k-bubble-content {
41
+ flex: 1 1 0%;
42
+ min-width: 0;
43
+ text-overflow: ellipsis;
44
+ overflow: hidden;
45
+ }
46
+
47
+ .k-bubble-expandable-indicator {
48
+ padding-inline: $kendo-bubble-expandable-icon-padding-x;
49
+ padding-block: $kendo-bubble-expandable-icon-padding-y;
50
+ margin-top: calc( #{$kendo-bubble-padding-y} * -1);
51
+ margin-right: calc( #{$kendo-bubble-padding-x} * -1);
52
+ margin-bottom: calc( ( #{$kendo-bubble-padding-x} / 2 ) * -1);
53
+ display: flex;
54
+ flex-shrink: 0;
55
+ cursor: pointer;
56
+ }
57
+ }
58
+ }
59
+
60
+ @mixin kendo-bubble--layout() {
61
+ @include kendo-bubble--layout-base();
62
+ }
package/scss/components/bubble/_theme.scss ADDED
@@ -0,0 +1,41 @@
1
+ @use "./_variables.scss" as *;
2
+ @use "../../mixins/index.import.scss" as *;
3
+
4
+ @use "../../spacing/index.import.scss" as *;
5
+ @use "../../color-system/_functions.import.scss" as *;
6
+ @use "../../_variables.scss" as *;
7
+
8
+ @mixin kendo-bubble--theme-base() {
9
+ .k-bubble {
10
+ @include fill(
11
+ $kendo-bubble-text,
12
+ $kendo-bubble-bg,
13
+ $kendo-bubble-border
14
+ );
15
+ @include box-shadow( $kendo-bubble-shadow );
16
+
17
+ &:active,
18
+ &.k-active,
19
+ &.k-selected {
20
+ @include fill( $bg: $kendo-bubble-active-bg, $border: $kendo-bubble-active-border );
21
+ }
22
+
23
+ &:focus,
24
+ &:focus-visible,
25
+ &.k-focus {
26
+ @include fill( $bg: $kendo-bubble-focus-bg, $border: $kendo-bubble-focus-border );
27
+ @include focus-indicator( $kendo-bubble-focus-shadow, true, true );
28
+ outline: none;
29
+ }
30
+
31
+ &:hover,
32
+ &.k-hover {
33
+ @include fill( $bg: $kendo-bubble-hover-bg, $border: $kendo-bubble-hover-border );
34
+ }
35
+ }
36
+ }
37
+
38
+
39
+ @mixin kendo-bubble--theme() {
40
+ @include kendo-bubble--theme-base();
41
+ }
package/scss/components/bubble/_variables.scss ADDED
@@ -0,0 +1,24 @@
1
+ $kendo-bubble-border-radius: null !default;
2
+ $kendo-bubble-border-radius-sm: null !default;
3
+ $kendo-bubble-padding-y: null !default;
4
+ $kendo-bubble-padding-x: null !default;
5
+ $kendo-bubble-border-width: null !default;
6
+ $kendo-bubble-border-style: null !default;
7
+ $kendo-bubble-line-height: null !default;
8
+
9
+ $kendo-bubble-text: null !default;
10
+ $kendo-bubble-bg: null !default;
11
+ $kendo-bubble-border: null !default;
12
+ $kendo-bubble-shadow: null !default;
13
+
14
+ $kendo-bubble-hover-bg: null !default;
15
+ $kendo-bubble-hover-border: null !default;
16
+ $kendo-bubble-active-bg: null !default;
17
+ $kendo-bubble-active-border: null !default;
18
+ $kendo-bubble-focus-bg: null !default;
19
+ $kendo-bubble-focus-border: null !default;
20
+ $kendo-bubble-focus-shadow: null !default;
21
+
22
+ $kendo-bubble-expandable-spacing: null !default;
23
+ $kendo-bubble-expandable-icon-padding-x: null !default;
24
+ $kendo-bubble-expandable-icon-padding-y: null !default;
package/scss/components/chat/_index.scss CHANGED
@@ -1,9 +1,17 @@
1
1
  // Dependencies
2
2
  @use "../core/_index.scss" as *;
3
3
  @use "../icons/_index.scss" as *;
4
- @use "../input/_index.scss" as *;
4
+ @use "../textarea/_index.scss" as *;
5
5
  @use "../card/_index.scss" as *;
6
+ @use "../appbar/_index.scss" as *;
6
7
  @use "../toolbar/_index.scss" as *;
8
+ @use "../bubble/_index.scss" as *;
9
+ @use "../upload/_index.scss" as *;
10
+ @use "../dropzone/_index.scss" as *;
11
+ @use "../avatar/_index.scss" as *;
12
+ @use "../speech-to-text-button/_index.scss" as *;
13
+ @use "../suggestion/_index.scss" as *;
14
+ @use "../skeleton/_index.scss" as *;
7
15
 
8
16
  // Component
9
17
  @forward "./_variables.scss";
@@ -14,10 +22,18 @@
14
22
  @mixin kendo-chat--styles() {
15
23
  @include import-once( "chat" ) {
16
24
  @include core-styles();
17
- @include kendo-input--styles();
25
+ @include kendo-textarea--styles();
18
26
  @include kendo-card--styles();
19
27
  @include kendo-icon--styles();
28
+ @include kendo-appbar--styles();
20
29
  @include kendo-toolbar--styles();
30
+ @include kendo-bubble--styles();
31
+ @include kendo-suggestion--styles();
32
+ @include kendo-skeleton--styles();
33
+ @include kendo-upload--styles();
34
+ @include kendo-dropzone--styles();
35
+ @include kendo-avatar--styles();
36
+ @include kendo-speech-to-text-button--styles();
21
37
  @include kendo-chat--layout();
22
38
  @include kendo-chat--theme();
23
39
  }
package/scss/components/chat/_layout.scss CHANGED
@@ -1,16 +1,18 @@
1
1
  @use "../../color-system/_constants.scss" as *;
2
2
  @use "../../spacing/index.import.scss" as *;
3
+ @use "../../border-radii/index.import.scss" as *;
3
4
  @use "../../mixins/index.import.scss" as *;
4
5
  @use "./variables.scss" as *;
5
6
  @use "../toolbar/_variables.scss" as *;
7
+ @use "../bubble/_variables.scss" as *;
8
+ @use "../../color-system/_functions.import.scss" as *;
6
9
 
7
10
  @mixin kendo-chat--layout-base() {
8
11
 
9
12
  // Chat
10
13
  .k-chat {
11
- margin: auto;
12
- max-width: $kendo-chat-width;
13
- height: $kendo-chat-height;
14
+ min-width: $kendo-chat-width;
15
+ min-height: $kendo-chat-height;
14
16
  max-height: 100%;
15
17
  border-width: $kendo-chat-border-width;
16
18
  border-style: solid;
@@ -24,267 +26,360 @@
24
26
  overflow: hidden;
25
27
  -webkit-touch-callout: none;
26
28
  -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
29
+ }
27
30
 
31
+ // Chat header
32
+ .k-chat-header {
33
+ flex-shrink: 0;
34
+ }
28
35
 
29
- // Message list
30
- .k-message-list {
31
- display: flex;
32
- flex: 1 1 auto;
33
- flex-direction: column;
34
- align-items: flex-start;
35
- overflow-x: hidden;
36
- overflow-y: auto;
37
- scroll-behavior: smooth;
38
- }
39
- .k-message-list-content {
40
- padding-block: $kendo-chat-message-list-padding-y;
41
- padding-inline: $kendo-chat-message-list-padding-x;
42
- width: 100%;
43
- box-sizing: border-box;
44
- position: relative;
45
- flex: 0 0 auto;
46
- display: flex;
47
- flex-direction: column;
48
- align-items: flex-start;
49
- overflow: hidden;
36
+ // Message list
37
+ .k-message-list {
38
+ display: flex;
39
+ flex: 1 1 auto;
40
+ flex-direction: column;
41
+ align-items: flex-start;
42
+ overflow-x: hidden;
43
+ overflow-y: auto;
44
+ scroll-behavior: smooth;
45
+ }
50
46
 
51
- > * + * {
52
- margin-top: $kendo-chat-message-list-spacing;
53
- }
54
- }
47
+ .k-message-list-content {
48
+ padding-block: $kendo-chat-message-list-padding-y;
49
+ padding-inline: $kendo-chat-message-list-padding-x;
50
+ width: 100%;
51
+ box-sizing: border-box;
52
+ position: relative;
53
+ flex: 0 0 auto;
54
+ display: flex;
55
+ flex-direction: column;
56
+ align-items: flex-start;
57
+ overflow: hidden;
55
58
 
56
- // Message group
57
- .k-message-group {
58
- max-width: 80%;
59
- background: none;
60
- box-sizing: border-box;
61
- display: flex;
62
- flex-shrink: 0;
63
- flex-direction: column;
64
- position: relative;
59
+ > * + * {
60
+ margin-top: $kendo-chat-message-list-spacing;
65
61
  }
66
- .k-message-group:not(.k-alt) {
67
- align-items: flex-start;
68
- text-align: start;
62
+ }
69
63
 
70
- .k-message-time {
71
- margin-inline-start: $kendo-chat-item-spacing-x;
72
- inset-inline-start: 100%;
73
- }
74
- .k-message-status {
75
- inset-inline-start: 0;
76
- }
64
+ // Message group
65
+ .k-message-group {
66
+ max-width: $kendo-chat-message-max-width;
67
+ background: none;
68
+ box-sizing: border-box;
69
+ display: flex;
70
+ column-gap: $kendo-chat-message-gap;
71
+ flex-shrink: 0;
72
+ position: relative;
77
73
 
78
- .k-first .k-chat-bubble,
79
- .k-only .k-chat-bubble {
80
- border-bottom-left-radius: $kendo-chat-bubble-border-radius-sm;
81
- }
82
- .k-middle .k-chat-bubble,
83
- .k-last .k-chat-bubble {
84
- @include border-left-radius( $kendo-chat-bubble-border-radius-sm );
85
- }
74
+ .k-message + .k-message {
75
+ margin-top: $kendo-chat-bubble-spacing;
86
76
  }
87
- .k-message-group.k-alt {
77
+
78
+ .k-avatar {
88
79
  align-self: flex-end;
89
- align-items: flex-end;
90
- text-align: end;
80
+ }
91
81
 
92
- .k-message-time {
93
- margin-inline-end: $kendo-chat-item-spacing-x;
94
- inset-inline-end: 100%;
95
- }
96
- .k-message-status {
97
- inset-inline-end: 0;
98
- }
82
+ // Add margin to the avatar when the last message is selected
83
+ // so that the avatar is aligned to the bubble and not to the status
84
+ &:has(.k-message-group-content .k-message:last-child .k-chat-bubble.k-selected + .k-message-status) .k-avatar {
85
+ margin-bottom: calc($kendo-chat-message-meta-line-height * $kendo-chat-message-meta-font-size + $kendo-chat-bubble-spacing);
86
+ transition: margin .2s ease-in-out;
87
+ }
99
88
 
100
- .k-first .k-chat-bubble,
101
- .k-only .k-chat-bubble {
102
- border-bottom-right-radius: $kendo-chat-bubble-border-radius-sm;
103
- }
104
- .k-middle .k-chat-bubble,
105
- .k-last .k-chat-bubble {
106
- @include border-right-radius( $kendo-chat-bubble-border-radius-sm );
107
- }
89
+ .k-chat-file-wrapper {
90
+ padding: 0;
91
+ gap: 0;
92
+ overflow: hidden;
108
93
  }
109
94
 
95
+ .k-chat-file {
96
+ width: 100%;
97
+ }
98
+ }
110
99
 
111
- // Message
112
- .k-message {
113
- max-width: 100%;
114
- margin: $kendo-chat-bubble-spacing 0 0;
115
- position: relative;
116
- transition: margin .2s ease-in-out;
117
- outline: none;
100
+ .k-message-group-content {
101
+ display: flex;
102
+ flex-direction: column;
103
+ flex: 1;
104
+ max-width: 100%;
105
+ min-width: 0;
106
+ word-wrap: break-word;
107
+ overflow-wrap: break-word;
108
+ }
109
+
110
+ .k-chat-message-toolbar {
111
+ border: 0;
112
+ padding: k-spacing(1px);
113
+ place-self: start;
114
+ }
115
+
116
+ .k-chat-download-button-wrapper {
117
+ width: 100%;
118
+ box-sizing: border-box;
119
+ padding-inline: $kendo-chat-file-download-padding-x;
120
+ padding-block-end: $kendo-chat-file-download-padding-y;
121
+ border-radius: 0 0 $kendo-chat-file-border-radius $kendo-chat-file-border-radius;
122
+ text-align: left;
123
+ }
124
+
125
+ .k-message-group-sender {
126
+ align-self: flex-end;
127
+ flex-direction: row-reverse;
128
+
129
+ .k-chat-bubble {
130
+ place-self: flex-end;
118
131
  }
119
132
 
133
+ .k-message-group-content {
134
+ align-items: flex-end;
135
+ }
120
136
 
121
- // Message meta
122
- .k-message-time,
123
137
  .k-message-status {
124
- font-size: $kendo-chat-message-meta-font-size;
125
- line-height: $kendo-chat-message-meta-line-height;
126
- white-space: nowrap;
127
- pointer-events: none;
128
- position: absolute;
138
+ align-self: flex-end;
129
139
  }
130
- .k-message-time {
131
- opacity: 0;
132
- top: 50%;
133
- transform: translateY(-50%);
134
- transition: opacity .2s ease-in-out;
140
+
141
+ .k-message:last-of-type .k-chat-bubble {
142
+ border-end-start-radius: $kendo-bubble-border-radius;
143
+ border-end-end-radius: $kendo-bubble-border-radius-sm;
135
144
  }
136
- .k-message-status {
137
- margin-top: $kendo-chat-bubble-spacing;
138
- height: 0;
139
- overflow: hidden;
140
- top: 100%;
141
- transition: height .2s ease-in-out;
145
+ }
146
+
147
+ // Message
148
+ .k-message {
149
+ max-width: 100%;
150
+ display: flex;
151
+ flex-direction: column;
152
+ position: relative;
153
+ transition: margin .2s ease-in-out;
154
+ outline: none;
155
+ word-wrap: break-word;
156
+ overflow-wrap: break-word;
157
+
158
+ .k-chat-message-link {
159
+ font-weight: bold;
160
+ text-decoration: underline;
161
+ }
162
+
163
+ .k-chat-bubble {
164
+ border-end-start-radius: $kendo-bubble-border-radius;
165
+ }
166
+
167
+ &:last-of-type .k-chat-bubble {
168
+ border-end-start-radius: $kendo-bubble-border-radius-sm;
142
169
  }
170
+ }
171
+
172
+ .k-chat-bubble-text {
173
+ text-overflow: ellipsis;
174
+ overflow: hidden;
175
+ flex-shrink: 0;
176
+ }
143
177
 
178
+ // Full-width message
179
+ .k-message-group-full-width {
180
+ width: 100%;
181
+ max-width: 100%;
144
182
 
145
- // Bubble
183
+ .k-message,
146
184
  .k-chat-bubble {
147
- @include border-radius( $kendo-chat-bubble-border-radius );
148
- padding-block: $kendo-chat-bubble-padding-y;
149
- padding-inline: $kendo-chat-bubble-padding-x;
150
- border-width: 1px;
151
- border-style: solid;
152
- line-height: $kendo-chat-bubble-line-height;
153
- word-wrap: break-word;
154
- white-space: pre-wrap;
155
-
156
- a {
157
- color: inherit;
158
- text-decoration: underline;
159
- }
185
+ width: 100%;
186
+ }
187
+ }
188
+
189
+ // Expandable messages
190
+ .k-chat-bubble.k-bubble-expandable {
191
+ .k-bubble-content {
192
+ height: auto;
193
+ transition: height 2s ease;
160
194
  }
195
+ }
196
+
197
+ .k-chat-bubble.k-expanded {
198
+ white-space: normal;
199
+ }
161
200
 
201
+ .k-chat-bubble.k-bubble-expandable:not(.k-expanded) {
202
+ .k-bubble-content {
203
+ height: calc( $kendo-chat-line-height * $kendo-chat-font-size);
204
+ }
205
+ }
206
+
207
+ .k-chat-bubble:has(.k-typing-indicator) {
208
+ pointer-events: none;
209
+ }
162
210
 
163
- // Message states
164
- .k-message.k-selected {
165
- margin-bottom: $kendo-chat-item-spacing-y;
166
- border: 0;
211
+ // Message meta
212
+ .k-message-time,
213
+ .k-message-status {
214
+ font-size: $kendo-chat-message-meta-font-size;
215
+ line-height: $kendo-chat-message-meta-line-height;
216
+ white-space: nowrap;
217
+ pointer-events: none;
218
+ transition: height .2s ease-in-out;
219
+ height: 0;
220
+ overflow: hidden;
221
+ }
222
+
223
+ .k-message-time {
224
+ place-self: center;
225
+ }
226
+
227
+ .k-message-status {
228
+ display: inline-flex;
229
+ align-items: center;
230
+ gap: $kendo-chat-message-status-gap;
231
+ }
232
+
233
+ // Bubble
234
+ .k-chat-bubble {
235
+ width: fit-content;
236
+ max-width: 100%;
237
+ overflow: hidden;
238
+ overflow-wrap: break-word;
239
+ word-break: normal;
240
+ text-align: start;
241
+
242
+ .k-bubble-content {
243
+ overflow: hidden;
244
+ flex: 1;
245
+ display: flex;
246
+ flex-direction: column;
247
+ gap: $kendo-chat-message-gap;
248
+ transition: height .2s ease-in-out;
249
+ }
250
+
251
+ a {
167
252
  color: inherit;
168
- background: none;
253
+ text-decoration: underline;
254
+ font-weight: bold;
255
+ }
256
+ }
257
+
258
+ .k-bubble-content {
259
+ .k-message-reference {
260
+ border-radius: k-border-radius(md);
261
+ }
262
+ }
263
+
264
+ // Message states
265
+ .k-message:has(.k-selected) {
266
+ gap: $kendo-chat-bubble-spacing;
169
267
 
170
- .k-message-time { opacity: 1; }
171
- .k-message-status { height: 1.2em; }
268
+ .k-message-time,
269
+ .k-message-status {
270
+ height: calc($kendo-chat-message-meta-line-height * $kendo-chat-message-meta-font-size);
172
271
  }
173
- .k-message-error,
174
- .k-message-sending {
175
- margin-bottom: $kendo-chat-item-spacing-y;
272
+ }
176
273
 
177
- .k-message-status { height: 1.2em; }
274
+ .k-message-error,
275
+ .k-message-sending {
276
+ margin-bottom: $kendo-chat-item-spacing-y;
277
+
278
+ .k-message-status {
279
+ height: calc($kendo-chat-message-meta-line-height * $kendo-chat-message-meta-font-size);
178
280
  }
281
+ }
179
282
 
180
- // Avatar
181
- .k-avatar {
182
- margin: 0;
183
- position: absolute;
283
+ // Message reference
284
+ .k-message-reference {
285
+ padding-inline: $kendo-chat-message-reference-padding-x;
286
+ padding-block: $kendo-chat-message-reference-padding-y;
287
+ display: flex;
288
+ align-items: center;
289
+ justify-content: flex-start;
290
+ flex-shrink: 0;
291
+ position: relative;
292
+ white-space: nowrap;
293
+ box-sizing: border-box;
294
+ outline: 0;
295
+ font-family: $kendo-chat-font-family;
296
+ font-size: $kendo-chat-font-size;
297
+ line-height: $kendo-chat-line-height;
184
298
 
185
- @at-root .k-message-group:not(.k-alt) > .k-avatar {
186
- inset-inline-start: 0;
187
- bottom: 0;
188
- }
189
- @at-root .k-message-group.k-alt > .k-avatar {
190
- inset-inline-end: 0;
191
- bottom: 0;
192
- }
299
+ > .k-icon {
300
+ flex-shrink: 0;
193
301
  }
194
- .k-avatars {
195
- .k-message-group:not(.k-no-avatar) {
196
- padding-inline-start: calc( #{$kendo-chat-avatar-size} + #{$kendo-chat-avatar-spacing} );
197
- }
198
- .k-message-group.k-alt:not(.k-no-avatar) {
199
- padding-inline-end: calc( #{$kendo-chat-avatar-size} + #{$kendo-chat-avatar-spacing} );
200
- }
302
+ }
303
+
304
+ .k-message-reference-content {
305
+ padding-block: calc( #{$kendo-chat-message-reference-padding-y} / 2 );
306
+ padding-inline-start: calc( 3 * $kendo-chat-message-reference-padding-x);
307
+ padding-inline-end: calc( #{$kendo-chat-message-reference-padding-x} / 2 );
308
+ box-sizing: border-box;
309
+ position: relative;
310
+ text-overflow: ellipsis;
311
+ overflow: hidden;
312
+ white-space: nowrap;
313
+
314
+ &::before {
315
+ display: inline-block;
316
+ content: "";
317
+ position: absolute;
318
+ left: $kendo-chat-message-reference-padding-x;
319
+ height: calc( 100% - #{$kendo-chat-message-reference-padding-y} );
320
+ width: 2px;
201
321
  }
202
322
  }
203
323
 
324
+ .k-message-pinned {
325
+ border-bottom-width: $kendo-chat-message-pinned-border-width;
326
+ border-bottom-style: $kendo-chat-message-pinned-border-style;
327
+ cursor: pointer;
328
+ }
329
+
330
+ .k-message-removed {
331
+ font-style: italic;
332
+ }
333
+
204
334
  // Author
205
- .k-author {
206
- margin: 0;
335
+ .k-message-author {
336
+ margin-bottom: calc( #{$kendo-chat-bubble-spacing} / 2);
207
337
  font-size: $kendo-chat-author-font-size;
208
338
  line-height: $kendo-chat-author-line-height;
339
+ font-weight: bold;
209
340
  }
210
- .k-chat .k-author {
211
- margin: 0; // Duplicate styles because of typography module
212
- }
213
-
214
341
 
215
342
  // Timestamp
216
- .k-chat .k-timestamp {
343
+ .k-timestamp {
217
344
  font-size: $kendo-chat-timestamp-font-size;
218
345
  line-height: $kendo-chat-timestamp-line-height;
219
346
  text-transform: $kendo-chat-timestamp-transform;
220
347
  text-align: center;
221
348
  align-self: stretch;
349
+ display: flex;
350
+ align-items: center;
351
+ gap: $kendo-chat-timestamp-separator-spacing;
352
+
353
+ &::before,
354
+ &::after {
355
+ display: inline-flex;
356
+ content: "";
357
+ height: 1px;
358
+ flex: 1;
359
+ }
222
360
  }
223
361
 
224
-
225
- // Quick reply
226
- .k-quick-replies {
227
- display: block;
228
- max-width: 100%; // IE fix
229
- }
230
- .k-quick-reply {
231
- @include border-radius( 100px );
232
- margin-inline-end: $kendo-chat-quick-reply-spacing;
233
- margin-block-end: calc( #{$kendo-chat-quick-reply-spacing} / 2 );
234
- padding-block: $kendo-chat-quick-reply-padding-y;
235
- padding-inline: $kendo-chat-quick-reply-padding-x;
236
- border-width: 1px;
237
- border-style: solid;
238
- line-height: $kendo-chat-quick-reply-line-height;
239
- cursor: pointer;
240
- user-select: none;
241
- display: inline-block;
242
- flex: 0 0 auto;
243
- transition-property: color, background-color, border-color;
244
- transition-duration: .2s;
245
- transition-timing-function: ease-in-out;
246
- outline: none;
247
- }
248
-
249
-
250
- // Scrollable quick replies
251
- .k-scrollable-quick-replies {
252
- margin-inline-start: -$kendo-chat-message-list-padding-y;
253
- margin-inline-end: -$kendo-chat-message-list-padding-y;
254
- padding-inline-start: $kendo-chat-message-list-padding-y;
255
- padding-inline-end: $kendo-chat-message-list-padding-y;
362
+ .k-message-box-wrapper {
363
+ padding-inline: $kendo-chat-padding-x;
364
+ padding-block-end: $kendo-chat-padding-y;
256
365
  display: flex;
257
- flex-flow: row nowrap;
258
- flex: 0 0 auto;
259
- overflow-x: auto;
260
- overflow-y: hidden;
261
-
262
- &::-webkit-scrollbar {
263
- display: none;
264
- }
366
+ flex-direction: column;
367
+ gap: $kendo-chat-padding-y;
265
368
 
266
- .k-quick-reply {
267
- margin: 0;
268
- }
269
- .k-quick-reply + .k-quick-reply {
270
- margin-inline-start: $kendo-chat-quick-reply-spacing;
369
+ .k-chat-file-wrapper {
370
+ flex-direction: row;
271
371
  }
272
372
  }
273
373
 
274
-
275
374
  // Message box
276
375
  .k-message-box {
277
376
  width: 100%;
278
- height: auto;
279
377
  box-sizing: border-box;
280
- border-width: 1px 0 0;
281
- border-style: solid;
282
- border-color: inherit !important; // stylelint-disable-line declaration-no-important
283
- border-radius: 0 !important; // stylelint-disable-line declaration-no-important
284
- flex: none;
285
- display: flex;
286
- flex-flow: row nowrap;
287
- align-items: center;
378
+ flex-shrink: 0;
379
+
380
+ .k-input-prefix-horizontal {
381
+ display: inline-block;
382
+ }
288
383
 
289
384
  &:focus,
290
385
  &.k-focus,
@@ -293,39 +388,105 @@
293
388
  box-shadow: none;
294
389
  }
295
390
 
296
- // Input
297
- .k-input {}
391
+ .k-input-prefix,
392
+ .k-input-suffix {
393
+ width: 100%;
394
+ padding: k-spacing(1);
395
+ }
396
+ }
298
397
 
299
- .k-button {
300
- border-width: 0;
398
+ .k-chat-bubble,
399
+ .k-message-box {
400
+ .k-message-reference {
401
+ padding-inline: calc( #{$kendo-chat-message-reference-padding-x} / 2);
402
+ padding-block: calc( #{$kendo-chat-message-reference-padding-y} / 2);
403
+ }
404
+ }
405
+
406
+ .k-chat-file-wrapper {
407
+ display: flex;
408
+ flex-flow: column wrap;
409
+ padding-inline: $kendo-chat-file-padding-x;
410
+ padding-block: $kendo-chat-file-padding-y;
411
+ margin: 0;
412
+ gap: $kendo-chat-file-gap;
413
+ box-sizing: border-box;
414
+ min-width: 0;
415
+ width: 100%;
416
+ max-width: 100%;
417
+ overflow: hidden;
418
+ }
419
+
420
+ .k-chat-file {
421
+ display: flex;
422
+ align-items: center;
423
+ justify-content: space-between;
424
+ overflow: hidden;
425
+ box-sizing: border-box;
426
+ gap: $kendo-chat-file-gap;
427
+ border-width: $kendo-chat-file-border-width;
428
+ border-style: $kendo-chat-file-border-style;
429
+ padding-inline: $kendo-chat-file-padding-x;
430
+ padding-block: $kendo-chat-file-padding-y;
431
+ border-radius: $kendo-chat-file-border-radius;
432
+
433
+ >.k-icon {
301
434
  flex-shrink: 0;
435
+ }
302
436
 
303
- svg {
304
- width: 20px;
305
- height: 20px;
306
- fill: currentColor;
307
- display: inline-block;
308
- }
437
+ .k-chat-file-info {
438
+ display: flex;
439
+ flex-direction: column;
440
+ align-items: flex-start;
441
+ text-align: start;
442
+ flex: 1;
443
+ overflow: hidden;
444
+ min-width: 0;
445
+ max-width: 100%;
446
+ text-overflow: ellipsis;
447
+ }
448
+
449
+ .k-chat-file-name {
450
+ font-weight: bold;
451
+ font-size: var( --kendo-font-size-sm, inherit);
452
+ width: 100%;
453
+ white-space: nowrap;
454
+ overflow: hidden;
455
+ text-overflow: ellipsis;
456
+ }
457
+
458
+ .k-chat-file-size,
459
+ .k-chat-file-status {
460
+ font-size: var( --kendo-font-size-xs, inherit);
309
461
  }
310
462
  }
311
463
 
312
- .k-rtl,
313
- [dir="rtl"] {
314
- .k-message-box {
315
- .k-button {
316
- transform: scaleX(-1);
317
- }
464
+ .k-message-group {
465
+ .k-chat-file + .k-chat-file:not(.k-chat-file-deleted) {
466
+ padding-top: 0;
318
467
  }
319
468
  }
320
469
 
470
+ .k-chat-file-download-wrapper {
471
+ display: flex;
472
+ flex-direction: column;
473
+ }
474
+
475
+ .k-message-box-wrapper,
476
+ .k-message-group-full-width,
477
+ .k-message:has(.k-bubble-expandable) + .k-chat-file-wrapper {
478
+ .k-chat-file {
479
+ width: $kendo-chat-file-width;
480
+ }
481
+ }
321
482
 
322
483
  // Card list
323
484
  .k-chat .k-card-list {
324
485
  margin: $kendo-chat-bubble-spacing 0 0;
325
486
  }
326
487
 
327
- .k-message-group.k-alt + .k-card-list,
328
- .k-message-group.k-alt + kendo-chat-message-attachments.k-card-list {
488
+ .k-message-group-sender + .k-card-list,
489
+ .k-message-group-sender + .kendo-chat-message-attachments.k-card-list {
329
490
  align-self: flex-end;
330
491
  }
331
492
 
@@ -375,94 +536,56 @@
375
536
  }
376
537
  }
377
538
 
378
- // Typing indicator
539
+
540
+ // Typing indicator
379
541
  .k-typing-indicator {
380
- padding: 0;
381
- border-radius: 50px;
382
542
  display: inline-flex;
543
+ gap: k-spacing(1);
383
544
  flex-flow: row nowrap;
384
545
 
385
546
  span {
386
- width: $kendo-chat-typing-indicator-dot-size;
387
- height: $kendo-chat-typing-indicator-dot-size;
547
+ width: k-spacing(2);
548
+ height: k-spacing(2);
388
549
  border-radius: 50%;
389
- flex: 0 0 $kendo-chat-typing-indicator-dot-size;
550
+ flex: 0 0 k-spacing(2);
390
551
  background-color: currentColor;
391
- opacity: .4;
552
+ opacity: .25;
392
553
  @for $i from 1 through 3 {
393
554
  &:nth-of-type(#{$i}) {
394
555
  animation: 1s k-animation-blink infinite ($i * .3333s);
395
556
  }
396
557
  }
397
558
  }
398
- span + span {
399
- margin-left: $kendo-chat-typing-indicator-dot-spacing;
400
- }
401
559
 
402
560
  @keyframes k-animation-blink {
403
561
  50% {
404
- opacity: 1;
562
+ opacity: .5;
405
563
  }
406
564
  }
407
-
408
565
  }
409
566
 
410
-
411
- // Chat toolbar
412
- .k-chat-toolbar,
413
- .k-chat .k-toolbar-box {
414
- padding-block: $kendo-chat-toolbar-padding-y;
415
- padding-inline: $kendo-chat-toolbar-padding-x;
416
- width: 100%;
417
- border-width: 1px 0 0;
418
- box-sizing: border-box;
419
- flex: none;
420
- overflow: hidden;
421
- position: relative;
422
- gap: $kendo-toolbar-md-spacing;
423
-
424
- &::before {
425
- display: none;
567
+ // Upload
568
+ .k-chat-upload {
569
+ .k-external-dropzone {
570
+ height: auto;
426
571
  }
427
572
 
428
- .k-button-list {
429
- // Needed for native scrolling. Will uncoment when it's implemented.
430
- // margin-bottom: -20px;
431
- // padding-bottom: 20px;
432
- display: flex;
433
- flex-flow: row nowrap;
434
- overflow: hidden;
435
- // overflow-x: auto;
436
- scroll-behavior: smooth;
573
+ .k-upload {
574
+ margin-top: k-spacing(6);
437
575
  }
438
576
 
439
- .k-button {
440
- flex: none;
577
+ .k-upload-files {
578
+ max-height: k-spacing(25);
441
579
  }
580
+ }
442
581
 
443
-
444
- .k-scroll-button {
445
- // IMPORTANT: if we don't set padding, the browser will set for us
446
- padding: 0 k-spacing(1);
447
- height: 100%;
448
- aspect-ratio: auto;
449
- position: absolute;
450
- z-index: 2;
451
- top: 0;
452
-
453
- .k-button-icon {
454
- min-width: auto;
455
- min-height: auto;
582
+ .k-rtl,
583
+ [dir="rtl"] {
584
+ .k-message-box {
585
+ .k-button {
586
+ transform: scaleX(-1);
456
587
  }
457
588
  }
458
- .k-scroll-button-left {
459
- left: 0;
460
- }
461
- .k-scroll-button-right {
462
- right: 0;
463
- }
464
-
465
-
466
589
  }
467
590
  }
468
591
 
package/scss/components/chat/_theme.scss CHANGED
@@ -13,81 +13,111 @@
13
13
  $kendo-chat-bg,
14
14
  $kendo-chat-border
15
15
  );
16
+ }
16
17
 
18
+ // Message meta
19
+ .k-timestamp {
20
+ @include fill(
21
+ $kendo-chat-timestamp-text,
22
+ $kendo-chat-timestamp-bg
23
+ );
17
24
 
18
- // Message meta
19
- .k-timestamp {
20
- @include fill(
21
- $kendo-chat-timestamp-text,
22
- $kendo-chat-timestamp-bg
23
- );
24
- }
25
- .k-author {
26
- font-weight: bold;
25
+ &::before,
26
+ &::after {
27
+ background-color: $kendo-chat-timestamp-separator-bg;
27
28
  }
29
+ }
28
30
 
31
+ // Message status
32
+ .k-message-status {
33
+ @include fill(
34
+ $kendo-chat-status-text
35
+ );
36
+ }
29
37
 
30
- // Bubbles
31
- .k-chat-bubble {
32
- @include fill(
33
- $kendo-chat-bubble-text,
34
- $kendo-chat-bubble-bg,
35
- $kendo-chat-bubble-border
36
- );
37
- @include box-shadow( $kendo-chat-bubble-shadow );
38
- transition: $kendo-transition;
39
- order: -1;
38
+ // Bubbles
39
+ .k-message-group-sender .k-chat-bubble {
40
+ @include fill(
41
+ $kendo-chat-alt-bubble-text,
42
+ $kendo-chat-alt-bubble-bg,
43
+ $kendo-chat-alt-bubble-border
44
+ );
40
45
 
41
- a { color: k-color(primary); }
42
- a:hover { color: k-color(primary-hover); }
43
- }
44
- .k-chat-bubble:hover {
45
- @include box-shadow( $kendo-chat-bubble-hover-shadow );
46
- }
47
- .k-selected .k-chat-bubble {
48
- @include box-shadow( $kendo-chat-bubble-selected-shadow );
49
- }
46
+ @include box-shadow( $kendo-chat-alt-bubble-shadow );
50
47
 
51
- .k-alt .k-chat-bubble {
52
- @include fill(
53
- $kendo-chat-alt-bubble-text,
54
- $kendo-chat-alt-bubble-bg,
55
- $kendo-chat-alt-bubble-border
56
- );
57
- @include box-shadow( $kendo-chat-alt-bubble-shadow );
48
+ &:active,
49
+ &.k-active,
50
+ &.k-selected {
51
+ @include fill( $bg: $kendo-chat-alt-bubble-active-bg, $border: $kendo-chat-alt-bubble-active-border );
58
52
  }
59
- .k-alt .k-chat-bubble:hover {
60
- @include box-shadow( $kendo-chat-alt-bubble-hover-shadow );
53
+
54
+ &:focus,
55
+ &.k-focus {
56
+ @include fill( $bg: $kendo-chat-alt-bubble-focus-bg, $border: $kendo-chat-alt-bubble-focus-border );
57
+ @include focus-indicator( $kendo-chat-alt-bubble-focus-shadow, true, true );
61
58
  }
62
- .k-alt .k-selected .k-chat-bubble {
63
- @include box-shadow( $kendo-chat-alt-bubble-selected-shadow );
59
+
60
+ &:hover,
61
+ &.k-hover {
62
+ @include fill( $bg: $kendo-chat-alt-bubble-hover-bg, $border: $kendo-chat-alt-bubble-hover-border );
64
63
  }
64
+ }
65
65
 
66
+ // Typing indicator
67
+ .k-typing-indicator {
68
+ @include fill(
69
+ $kendo-chat-typing-indicator-text
70
+ );
71
+ }
66
72
 
67
- // Quick replies
68
- .k-quick-reply {
69
- @include fill(
70
- $kendo-chat-quick-reply-text,
71
- $kendo-chat-quick-reply-bg,
72
- $kendo-chat-quick-reply-border
73
- );
74
-
75
- &:hover,
76
- &.k-hover {
77
- @include fill(
78
- $kendo-chat-quick-reply-hover-text,
79
- $kendo-chat-quick-reply-hover-bg,
80
- $kendo-chat-quick-reply-hover-border
81
- );
82
- }
73
+ // Chat attachment
74
+ .k-chat-file {
75
+ border-color: transparent;
76
+ }
77
+
78
+ .k-chat-file-deleted {
79
+ @include fill(
80
+ k-color(error-on-subtle),
81
+ k-color(error-subtle),
82
+ k-color(error-subtle)
83
+ );
84
+ }
85
+
86
+ // Attachment within Textarea prefix
87
+ .k-message-box-wrapper .k-chat-file {
88
+ @include fill(
89
+ $kendo-chat-file-text,
90
+ $kendo-chat-file-bg,
91
+ $kendo-chat-file-border
92
+ );
93
+ }
94
+
95
+ // Message reference
96
+ .k-message-reference {
97
+ @include fill(
98
+ $kendo-chat-message-reference-text,
99
+ $kendo-chat-message-reference-bg
100
+ );
101
+ }
83
102
 
84
- &:focus,
85
- &.k-focus {
86
- @include focus-indicator( 0 0 $kendo-chat-quick-reply-shadow-blur $kendo-chat-quick-reply-shadow-spread color-mix(in srgb, k-color(primary) ( $kendo-chat-quick-reply-shadow-opacity * 100% ), transparent), true, true );
103
+ .k-message-reference-sender {
104
+ .k-message-reference-content {
105
+ &::before {
106
+ background-color: $kendo-chat-message-reference-marker-alt-bg;
87
107
  }
88
108
  }
89
109
  }
90
110
 
111
+ .k-message-reference-content {
112
+ &::before {
113
+ background-color: $kendo-chat-message-reference-marker-bg;
114
+ }
115
+ }
116
+
117
+ // Pinned message
118
+ .k-message-pinned {
119
+ border-color: $kendo-chat-message-pinned-border-color;
120
+ }
91
121
 
92
122
  // Toolbar
93
123
  .k-chat-toolbar,
package/scss/components/chat/_variables.scss CHANGED
@@ -9,18 +9,25 @@ $kendo-chat-font-family: null !default;
9
9
  $kendo-chat-font-size: null !default;
10
10
  $kendo-chat-line-height: null !default;
11
11
 
12
- $kendo-chat-item-spacing-x: null !default;
13
12
  $kendo-chat-item-spacing-y: null !default;
14
13
 
14
+ $kendo-chat-message-spacing: null !default;
15
+ $kendo-chat-message-max-width: null !default;
16
+ $kendo-chat-message-gap: null !default;
17
+
15
18
  $kendo-chat-message-list-padding-x: null !default;
16
19
  $kendo-chat-message-list-padding-y: null !default;
17
20
  $kendo-chat-message-list-spacing: null !default;
18
21
 
22
+ $kendo-chat-message-status-gap: null !default;
23
+
19
24
  $kendo-chat-timestamp-font-size: null !default;
20
25
  $kendo-chat-timestamp-line-height: null !default;
21
26
  $kendo-chat-timestamp-transform: null !default;
22
27
  $kendo-chat-timestamp-text: null !default;
23
28
  $kendo-chat-timestamp-bg: null !default;
29
+ $kendo-chat-timestamp-separator-bg: null !default;
30
+ $kendo-chat-timestamp-separator-spacing: null !default;
24
31
 
25
32
  $kendo-chat-message-meta-font-size: null !default;
26
33
  $kendo-chat-message-meta-line-height: null !default;
@@ -28,58 +35,53 @@ $kendo-chat-message-meta-line-height: null !default;
28
35
  $kendo-chat-author-font-size: null !default;
29
36
  $kendo-chat-author-line-height: null !default;
30
37
 
31
- $kendo-chat-bubble-padding-x: null !default;
32
- $kendo-chat-bubble-padding-y: null !default;
33
- $kendo-chat-bubble-spacing: null !default;
34
- $kendo-chat-bubble-line-height: null !default;
35
-
36
- $kendo-chat-bubble-border-radius: null !default;
37
- $kendo-chat-bubble-border-radius-sm: null !default;
38
+ $kendo-chat-status-text: null !default;
38
39
 
39
- $kendo-chat-avatar-size: null !default;
40
- $kendo-chat-avatar-spacing: null !default;
40
+ $kendo-chat-bubble-spacing: null !default;
41
41
 
42
- $kendo-chat-toolbar-padding-x: null !default;
43
- $kendo-chat-toolbar-padding-y: null !default;
44
42
  $kendo-chat-toolbar-bg: null !default;
45
43
  $kendo-chat-toolbar-text: null !default;
46
44
  $kendo-chat-toolbar-border: null !default;
47
45
 
48
- $kendo-chat-quick-reply-padding-x: null !default;
49
- $kendo-chat-quick-reply-padding-y: null !default;
50
- $kendo-chat-quick-reply-spacing: null !default;
51
- $kendo-chat-quick-reply-line-height: null !default;
52
-
53
-
54
46
  $kendo-chat-bg: null !default;
55
47
  $kendo-chat-text: null !default;
56
48
  $kendo-chat-border: null !default;
57
49
 
58
- $kendo-chat-bubble-bg: null !default;
59
- $kendo-chat-bubble-text: null !default;
60
- $kendo-chat-bubble-border: null !default;
61
- $kendo-chat-bubble-shadow: null !default;
62
- $kendo-chat-bubble-hover-shadow: null !default;
63
- $kendo-chat-bubble-selected-shadow: null !default;
64
-
65
50
  $kendo-chat-alt-bubble-bg: null !default;
66
51
  $kendo-chat-alt-bubble-text: null !default;
67
52
  $kendo-chat-alt-bubble-border: null !default;
68
53
  $kendo-chat-alt-bubble-shadow: null !default;
69
- $kendo-chat-alt-bubble-hover-shadow: null !default;
70
- $kendo-chat-alt-bubble-selected-shadow: null !default;
71
-
72
- $kendo-chat-quick-reply-bg: null !default;
73
- $kendo-chat-quick-reply-text: null !default;
74
- $kendo-chat-quick-reply-border: null !default;
75
-
76
- $kendo-chat-quick-reply-hover-bg: null !default;
77
- $kendo-chat-quick-reply-hover-text: null !default;
78
- $kendo-chat-quick-reply-hover-border: null !default;
79
-
80
- $kendo-chat-quick-reply-shadow-blur: null !default;
81
- $kendo-chat-quick-reply-shadow-spread: null !default;
82
- $kendo-chat-quick-reply-shadow-opacity: null !default;
83
-
84
- $kendo-chat-typing-indicator-dot-size: null !default;
85
- $kendo-chat-typing-indicator-dot-spacing: null !default;
54
+ $kendo-chat-alt-bubble-hover-bg: null !default;
55
+ $kendo-chat-alt-bubble-hover-border: null !default;
56
+ $kendo-chat-alt-bubble-active-bg: null !default;
57
+ $kendo-chat-alt-bubble-active-border: null !default;
58
+ $kendo-chat-alt-bubble-focus-bg: null !default;
59
+ $kendo-chat-alt-bubble-focus-border: null !default;
60
+ $kendo-chat-alt-bubble-focus-shadow: null !default;
61
+
62
+ $kendo-chat-typing-indicator-text: null !default;
63
+
64
+ $kendo-chat-file-width: null !default;
65
+ $kendo-chat-file-padding-x: null !default;
66
+ $kendo-chat-file-padding-y: null !default;
67
+ $kendo-chat-file-gap: null !default;
68
+ $kendo-chat-file-border-width: null !default;
69
+ $kendo-chat-file-border-style: null !default;
70
+ $kendo-chat-file-bg: null !default;
71
+ $kendo-chat-file-text: null !default;
72
+ $kendo-chat-file-border: null !default;
73
+ $kendo-chat-file-border-radius: null !default;
74
+ $kendo-chat-file-download-padding-x: null !default;
75
+ $kendo-chat-file-download-padding-y: null !default;
76
+
77
+ $kendo-chat-message-pinned-border-width: null !default;
78
+ $kendo-chat-message-pinned-border-style: null !default;
79
+ $kendo-chat-message-pinned-border-color: null !default;
80
+
81
+ $kendo-chat-message-reference-padding-x: null !default;
82
+ $kendo-chat-message-reference-padding-y: null !default;
83
+
84
+ $kendo-chat-message-reference-bg: null !default;
85
+ $kendo-chat-message-reference-text: null !default;
86
+ $kendo-chat-message-reference-marker-bg: null !default;
87
+ $kendo-chat-message-reference-marker-alt-bg: null !default;
package/scss/mixins/_decoration.scss CHANGED
@@ -14,8 +14,3 @@
14
14
  @include linear-gradient( $gradient );
15
15
  }
16
16
  }
17
-
18
- // TODO: Remove as we have the same mixin in _gradient.scss
19
- // @mixin repeating-striped-gradient( $color: rgba(255,255,255,.15), $background: #FFF, $angle: 45deg, $largeStep: 2px, $smallStep: 1px) {
20
- // background-image: repeating-linear-gradient($angle, $background, $background $smallStep, $color $smallStep, $color $largeStep);
21
- // }