@progress/kendo-theme-classic 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.
- package/dist/all.css +1 -1
- package/dist/classic-green-dark.css +1 -1
- package/dist/classic-green.css +1 -1
- package/dist/classic-lavender-dark.css +1 -1
- package/dist/classic-lavender.css +1 -1
- package/dist/classic-main-dark.css +1 -1
- package/dist/classic-main.css +1 -1
- package/dist/classic-metro-dark.css +1 -1
- package/dist/classic-metro.css +1 -1
- package/dist/classic-moonlight.css +1 -1
- package/dist/classic-opal-dark.css +1 -1
- package/dist/classic-opal.css +1 -1
- package/dist/classic-silver-dark.css +1 -1
- package/dist/classic-silver.css +1 -1
- package/dist/classic-uniform.css +1 -1
- package/dist/meta/sassdoc-data.json +5266 -4018
- package/dist/meta/sassdoc-raw-data.json +1054 -479
- package/dist/meta/variables.json +202 -106
- package/lib/swatches/classic-green-dark.json +1 -1
- package/lib/swatches/classic-green.json +1 -1
- package/lib/swatches/classic-lavender-dark.json +1 -1
- package/lib/swatches/classic-lavender.json +1 -1
- package/lib/swatches/classic-main-dark.json +1 -1
- package/lib/swatches/classic-main.json +1 -1
- package/lib/swatches/classic-metro-dark.json +1 -1
- package/lib/swatches/classic-metro.json +1 -1
- package/lib/swatches/classic-moonlight.json +1 -1
- package/lib/swatches/classic-opal-dark.json +1 -1
- package/lib/swatches/classic-opal.json +1 -1
- package/lib/swatches/classic-silver-dark.json +1 -1
- package/lib/swatches/classic-silver.json +1 -1
- package/lib/swatches/classic-uniform.json +1 -1
- package/package.json +4 -4
- package/scss/bubble/_index.scss +16 -0
- package/scss/bubble/_layout.scss +6 -0
- package/scss/bubble/_theme.scss +6 -0
- package/scss/bubble/_variables.scss +94 -0
- package/scss/chat/_index.scss +18 -2
- package/scss/chat/_variables.scss +139 -130
- package/scss/index.scss +4 -0
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
@use "../core/_index.scss" as *;
|
|
2
|
+
@use "../core/functions/index.import.scss" as *;
|
|
3
|
+
|
|
4
|
+
/// The border radius of the Bubble.
|
|
5
|
+
/// @group bubble
|
|
6
|
+
$kendo-bubble-border-radius: k-border-radius(xxl) !default;
|
|
7
|
+
/// The small border radius of the Bubble.
|
|
8
|
+
/// @group bubble
|
|
9
|
+
$kendo-bubble-border-radius-sm: k-border-radius(xs) !default;
|
|
10
|
+
/// The vertical padding of the Bubble.
|
|
11
|
+
/// @group bubble
|
|
12
|
+
$kendo-bubble-padding-y: k-spacing(2) !default;
|
|
13
|
+
/// The horizontal padding of the Bubble.
|
|
14
|
+
/// @group bubble
|
|
15
|
+
$kendo-bubble-padding-x: k-spacing(3) !default;
|
|
16
|
+
/// The border width of the Bubble.
|
|
17
|
+
/// @group bubble
|
|
18
|
+
$kendo-bubble-border-width: 1px !default;
|
|
19
|
+
/// The border style of the Bubble.
|
|
20
|
+
/// @group bubble
|
|
21
|
+
$kendo-bubble-border-style: solid !default;
|
|
22
|
+
/// The line height of the Bubble.
|
|
23
|
+
/// @group bubble
|
|
24
|
+
$kendo-bubble-line-height: var( --kendo-line-height, normal ) !default;
|
|
25
|
+
|
|
26
|
+
/// The text color of the Bubble.
|
|
27
|
+
/// @group bubble
|
|
28
|
+
$kendo-bubble-text: k-color(secondary-on-subtle) !default;
|
|
29
|
+
/// The background color of the Bubble.
|
|
30
|
+
/// @group bubble
|
|
31
|
+
$kendo-bubble-bg: k-color(secondary-subtle) !default;
|
|
32
|
+
/// The border color of the Bubble.
|
|
33
|
+
/// @group bubble
|
|
34
|
+
$kendo-bubble-border: $kendo-bubble-bg !default;
|
|
35
|
+
/// The shadow of the Bubble.
|
|
36
|
+
/// @group bubble
|
|
37
|
+
$kendo-bubble-shadow: none !default;
|
|
38
|
+
|
|
39
|
+
/// The background color of the hover Bubble.
|
|
40
|
+
/// @group bubble
|
|
41
|
+
$kendo-bubble-hover-bg: k-color(secondary-subtle-hover) !default;
|
|
42
|
+
/// The border color of the active Bubble.
|
|
43
|
+
/// @group bubble
|
|
44
|
+
$kendo-bubble-hover-border: $kendo-bubble-hover-bg !default;
|
|
45
|
+
/// The background color of the active Bubble.
|
|
46
|
+
/// @group bubble
|
|
47
|
+
$kendo-bubble-active-bg: k-color(secondary-subtle-active) !default;
|
|
48
|
+
/// The border color of the active Bubble.
|
|
49
|
+
/// @group bubble
|
|
50
|
+
$kendo-bubble-active-border: $kendo-bubble-active-bg !default;
|
|
51
|
+
/// The background color of the focused Bubble.
|
|
52
|
+
/// @group bubble
|
|
53
|
+
$kendo-bubble-focus-bg: k-color(secondary-subtle) !default;
|
|
54
|
+
/// The border color of the focused Bubble.
|
|
55
|
+
/// @group bubble
|
|
56
|
+
$kendo-bubble-focus-border: $kendo-bubble-focus-bg !default;
|
|
57
|
+
/// The box shadow of the focused Bubble.
|
|
58
|
+
/// @group bubble
|
|
59
|
+
$kendo-bubble-focus-shadow: 0 0 0 2px color-mix(in srgb, k-color(on-app-surface) 8%, transparent) !default;
|
|
60
|
+
|
|
61
|
+
/// The spacing between content and icon in expandable Bubble.
|
|
62
|
+
/// @group bubble
|
|
63
|
+
$kendo-bubble-expandable-spacing: $kendo-bubble-padding-x !default;
|
|
64
|
+
/// The horizontal padding of the expandable Bubble icon.
|
|
65
|
+
/// @group bubble
|
|
66
|
+
$kendo-bubble-expandable-icon-padding-x: k-spacing(2.5) !default;
|
|
67
|
+
/// The vertical padding of the expandable Bubble icon.
|
|
68
|
+
/// @group bubble
|
|
69
|
+
$kendo-bubble-expandable-icon-padding-y: k-spacing(2.5) !default;
|
|
70
|
+
|
|
71
|
+
@forward "@progress/kendo-theme-core/scss/components/bubble/_variables.scss" with (
|
|
72
|
+
$kendo-bubble-border-radius: $kendo-bubble-border-radius,
|
|
73
|
+
$kendo-bubble-border-radius-sm: $kendo-bubble-border-radius-sm,
|
|
74
|
+
$kendo-bubble-padding-y: $kendo-bubble-padding-y,
|
|
75
|
+
$kendo-bubble-padding-x: $kendo-bubble-padding-x,
|
|
76
|
+
$kendo-bubble-border-width: $kendo-bubble-border-width,
|
|
77
|
+
$kendo-bubble-border-style: $kendo-bubble-border-style,
|
|
78
|
+
$kendo-bubble-line-height: $kendo-bubble-line-height,
|
|
79
|
+
|
|
80
|
+
$kendo-bubble-text: $kendo-bubble-text,
|
|
81
|
+
$kendo-bubble-bg: $kendo-bubble-bg,
|
|
82
|
+
$kendo-bubble-border: $kendo-bubble-border,
|
|
83
|
+
$kendo-bubble-shadow: $kendo-bubble-shadow,
|
|
84
|
+
$kendo-bubble-hover-bg: $kendo-bubble-hover-bg,
|
|
85
|
+
$kendo-bubble-hover-border: $kendo-bubble-hover-border,
|
|
86
|
+
$kendo-bubble-active-bg: $kendo-bubble-active-bg,
|
|
87
|
+
$kendo-bubble-active-border: $kendo-bubble-active-border,
|
|
88
|
+
$kendo-bubble-focus-bg: $kendo-bubble-focus-bg,
|
|
89
|
+
$kendo-bubble-focus-border: $kendo-bubble-focus-border,
|
|
90
|
+
$kendo-bubble-focus-shadow: $kendo-bubble-focus-shadow,
|
|
91
|
+
$kendo-bubble-expandable-spacing: $kendo-bubble-expandable-spacing,
|
|
92
|
+
$kendo-bubble-expandable-icon-padding-x: $kendo-bubble-expandable-icon-padding-x,
|
|
93
|
+
$kendo-bubble-expandable-icon-padding-y: $kendo-bubble-expandable-icon-padding-y,
|
|
94
|
+
);
|
package/scss/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 "../
|
|
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-
|
|
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
|
}
|
|
@@ -10,10 +10,10 @@ $kendo-chat-padding-x: k-spacing(4) !default;
|
|
|
10
10
|
/// The vertical padding of the Chat.
|
|
11
11
|
/// @group chat
|
|
12
12
|
$kendo-chat-padding-y: k-spacing(4) !default;
|
|
13
|
-
/// The width of the Chat.
|
|
13
|
+
/// The minimum width of the Chat.
|
|
14
14
|
/// @group chat
|
|
15
|
-
$kendo-chat-width:
|
|
16
|
-
/// The height of the Chat.
|
|
15
|
+
$kendo-chat-width: 320px !default;
|
|
16
|
+
/// The minimum height of the Chat.
|
|
17
17
|
/// @group chat
|
|
18
18
|
$kendo-chat-height: 600px !default;
|
|
19
19
|
/// The border width of the Chat.
|
|
@@ -29,13 +29,17 @@ $kendo-chat-font-size: var( --kendo-font-size, inherit ) !default;
|
|
|
29
29
|
/// @group chat
|
|
30
30
|
$kendo-chat-line-height: var( --kendo-line-height, normal ) !default;
|
|
31
31
|
|
|
32
|
-
/// The horizontal spacing between the items of the Chat.
|
|
33
|
-
/// @group chat
|
|
34
|
-
$kendo-chat-item-spacing-x: k-spacing(2) !default;
|
|
35
32
|
/// The vertical spacing between the items of the Chat.
|
|
36
33
|
/// @group chat
|
|
37
34
|
$kendo-chat-item-spacing-y: k-spacing(4) !default;
|
|
38
35
|
|
|
36
|
+
/// The maximum width of the Chat message.
|
|
37
|
+
/// @group chat
|
|
38
|
+
$kendo-chat-message-max-width: min(75%, 460px) !default;
|
|
39
|
+
/// The spacing between the items of the Chat message.
|
|
40
|
+
/// @group chat
|
|
41
|
+
$kendo-chat-message-gap: k-spacing(2) !default;
|
|
42
|
+
|
|
39
43
|
/// The horizontal padding of the Chat message list.
|
|
40
44
|
/// @group chat
|
|
41
45
|
$kendo-chat-message-list-padding-x: $kendo-chat-padding-x !default;
|
|
@@ -46,6 +50,10 @@ $kendo-chat-message-list-padding-y: $kendo-chat-padding-y !default;
|
|
|
46
50
|
/// @group chat
|
|
47
51
|
$kendo-chat-message-list-spacing: $kendo-chat-item-spacing-y !default;
|
|
48
52
|
|
|
53
|
+
/// The spacing between the icon and text in the Chat message status.
|
|
54
|
+
/// @group chat
|
|
55
|
+
$kendo-chat-message-status-gap: k-spacing(1) !default;
|
|
56
|
+
|
|
49
57
|
/// The font size of the Chat timestamp.
|
|
50
58
|
/// @group chat
|
|
51
59
|
$kendo-chat-timestamp-font-size: var( --kendo-font-size-sm, inherit ) !default;
|
|
@@ -54,13 +62,19 @@ $kendo-chat-timestamp-font-size: var( --kendo-font-size-sm, inherit ) !default;
|
|
|
54
62
|
$kendo-chat-timestamp-line-height: var( --kendo-line-height-lg, normal ) !default;
|
|
55
63
|
/// The text transform of the Chat timestamp.
|
|
56
64
|
/// @group chat
|
|
57
|
-
$kendo-chat-timestamp-transform:
|
|
65
|
+
$kendo-chat-timestamp-transform: none !default;
|
|
58
66
|
/// The text color of the Chat timestamp.
|
|
59
67
|
/// @group chat
|
|
60
68
|
$kendo-chat-timestamp-text: k-color(subtle) !default;
|
|
61
69
|
/// The background color of the Chat timestamp.
|
|
62
70
|
/// @group chat
|
|
63
71
|
$kendo-chat-timestamp-bg: null !default;
|
|
72
|
+
/// The background color of the Chat timestamp separator.
|
|
73
|
+
/// @group chat
|
|
74
|
+
$kendo-chat-timestamp-separator-bg: k-color(border) !default;
|
|
75
|
+
/// The spacing between the Chat timestamp and its separator.
|
|
76
|
+
/// @group chat
|
|
77
|
+
$kendo-chat-timestamp-separator-spacing: k-spacing(1) !default;
|
|
64
78
|
|
|
65
79
|
/// The font size of the Chat message meta text.
|
|
66
80
|
/// @group chat
|
|
@@ -74,41 +88,16 @@ $kendo-chat-message-meta-line-height: var( --kendo-line-height-lg, normal ) !def
|
|
|
74
88
|
$kendo-chat-author-font-size: var( --kendo-font-size-sm, inherit ) !default;
|
|
75
89
|
/// The line height of the Chat author text.
|
|
76
90
|
/// @group chat
|
|
77
|
-
$kendo-chat-author-line-height: var( --kendo-line-height-
|
|
91
|
+
$kendo-chat-author-line-height: var( --kendo-line-height-xs, normal ) !default;
|
|
78
92
|
|
|
79
|
-
/// The
|
|
80
|
-
/// @group chat
|
|
81
|
-
$kendo-chat-bubble-padding-x: k-spacing(3) !default;
|
|
82
|
-
/// The vertical padding of the Chat bubble message.
|
|
83
|
-
/// @group chat
|
|
84
|
-
$kendo-chat-bubble-padding-y: k-spacing(2) !default;
|
|
85
|
-
/// The spacing of the Chat bubble message.
|
|
93
|
+
/// The text color of the Chat status.
|
|
86
94
|
/// @group chat
|
|
87
|
-
$kendo-chat-
|
|
88
|
-
/// The line height of the Chat bubble message.
|
|
89
|
-
/// @group chat
|
|
90
|
-
$kendo-chat-bubble-line-height: var( --kendo-line-height, normal ) !default;
|
|
95
|
+
$kendo-chat-status-text: k-color(subtle) !default;
|
|
91
96
|
|
|
92
|
-
/// The
|
|
93
|
-
/// @group chat
|
|
94
|
-
$kendo-chat-bubble-border-radius: 12px !default;
|
|
95
|
-
/// The border radius of the Chat small bubble message
|
|
96
|
-
/// @group chat
|
|
97
|
-
$kendo-chat-bubble-border-radius-sm: 2px !default;
|
|
98
|
-
|
|
99
|
-
/// The size of the Chat Avatar.
|
|
100
|
-
/// @group chat
|
|
101
|
-
$kendo-chat-avatar-size: 32px !default;
|
|
102
|
-
/// The spacing of the Chat Avatar.
|
|
97
|
+
/// The spacing of the Chat bubble message.
|
|
103
98
|
/// @group chat
|
|
104
|
-
$kendo-chat-
|
|
99
|
+
$kendo-chat-bubble-spacing: k-spacing(2) !default;
|
|
105
100
|
|
|
106
|
-
/// The horizontal padding of the Chat Toolbar.
|
|
107
|
-
/// @group chat
|
|
108
|
-
$kendo-chat-toolbar-padding-x: $kendo-toolbar-md-padding-x !default;
|
|
109
|
-
/// The vertical padding of the Chat Toolbar.
|
|
110
|
-
/// @group chat
|
|
111
|
-
$kendo-chat-toolbar-padding-y: $kendo-toolbar-md-padding-y !default;
|
|
112
101
|
/// The background color of the Chat Toolbar.
|
|
113
102
|
/// @group chat
|
|
114
103
|
$kendo-chat-toolbar-bg: $kendo-toolbar-bg !default;
|
|
@@ -119,23 +108,9 @@ $kendo-chat-toolbar-text: $kendo-toolbar-text !default;
|
|
|
119
108
|
/// @group chat
|
|
120
109
|
$kendo-chat-toolbar-border: inherit !default;
|
|
121
110
|
|
|
122
|
-
/// The horizontal padding of the Chat quick reply.
|
|
123
|
-
/// @group chat
|
|
124
|
-
$kendo-chat-quick-reply-padding-x: k-spacing(3) !default;
|
|
125
|
-
/// The vertical padding of the Chat quick reply.
|
|
126
|
-
/// @group chat
|
|
127
|
-
$kendo-chat-quick-reply-padding-y: k-spacing(2) !default;
|
|
128
|
-
/// The spacing of the Chat quick reply.
|
|
129
|
-
/// @group chat
|
|
130
|
-
$kendo-chat-quick-reply-spacing: k-spacing(2) !default;
|
|
131
|
-
/// The line height of the Chat quick reply.
|
|
132
|
-
/// @group chat
|
|
133
|
-
$kendo-chat-quick-reply-line-height: $kendo-chat-bubble-line-height !default;
|
|
134
|
-
|
|
135
|
-
|
|
136
111
|
/// The background color of the Chat.
|
|
137
112
|
/// @group chat
|
|
138
|
-
$kendo-chat-bg: k-color(
|
|
113
|
+
$kendo-chat-bg: k-color(surface) !default;
|
|
139
114
|
/// The text color of the Chat.
|
|
140
115
|
/// @group chat
|
|
141
116
|
$kendo-chat-text: k-color(on-app-surface) !default;
|
|
@@ -143,24 +118,9 @@ $kendo-chat-text: k-color(on-app-surface) !default;
|
|
|
143
118
|
/// @group chat
|
|
144
119
|
$kendo-chat-border: k-color(border) !default;
|
|
145
120
|
|
|
146
|
-
/// The
|
|
147
|
-
/// @group chat
|
|
148
|
-
$kendo-chat-bubble-bg: k-color(surface-alt) !default;
|
|
149
|
-
/// The text color of the Chat bubble.
|
|
150
|
-
/// @group chat
|
|
151
|
-
$kendo-chat-bubble-text: k-color(on-app-surface) !default;
|
|
152
|
-
/// The border color of the Chat bubble.
|
|
121
|
+
/// The color of the typing indicator dots.
|
|
153
122
|
/// @group chat
|
|
154
|
-
$kendo-chat-
|
|
155
|
-
/// The box shadow of the Chat bubble.
|
|
156
|
-
/// @group chat
|
|
157
|
-
$kendo-chat-bubble-shadow: k-elevation(1) !default;
|
|
158
|
-
/// The shadow of the hovered Chat bubble.
|
|
159
|
-
/// @group chat
|
|
160
|
-
$kendo-chat-bubble-hover-shadow: k-elevation(2) !default;
|
|
161
|
-
/// The shadow of the selected Chat bubble.
|
|
162
|
-
/// @group chat
|
|
163
|
-
$kendo-chat-bubble-selected-shadow: k-elevation(3) !default;
|
|
123
|
+
$kendo-chat-typing-indicator-text: k-color(base-on-subtle) !default;
|
|
164
124
|
|
|
165
125
|
/// The background color of the Chat alt bubble.
|
|
166
126
|
/// @group chat
|
|
@@ -173,51 +133,98 @@ $kendo-chat-alt-bubble-text: k-color(on-primary) !default;
|
|
|
173
133
|
$kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
|
|
174
134
|
/// The shadow of the Chat alt bubble.
|
|
175
135
|
/// @group chat
|
|
176
|
-
$kendo-chat-alt-bubble-shadow:
|
|
177
|
-
/// The
|
|
136
|
+
$kendo-chat-alt-bubble-shadow: none !default;
|
|
137
|
+
/// The background color of the hovered alt Bubble.
|
|
138
|
+
/// @group bubble
|
|
139
|
+
$kendo-chat-alt-bubble-hover-bg: k-color(primary-hover) !default;
|
|
140
|
+
/// The border color of the hovered alt Bubble.
|
|
141
|
+
/// @group bubble
|
|
142
|
+
$kendo-chat-alt-bubble-hover-border: $kendo-chat-alt-bubble-hover-bg !default;
|
|
143
|
+
/// The background color of the active Bubble.
|
|
144
|
+
/// @group bubble
|
|
145
|
+
$kendo-chat-alt-bubble-active-bg: k-color(primary-active) !default;
|
|
146
|
+
/// The border color of the active alt Bubble.
|
|
147
|
+
/// @group bubble
|
|
148
|
+
$kendo-chat-alt-bubble-active-border: $kendo-chat-alt-bubble-active-bg !default;
|
|
149
|
+
/// The background color of the focused alt Bubble.
|
|
150
|
+
/// @group bubble
|
|
151
|
+
$kendo-chat-alt-bubble-focus-bg: $kendo-chat-alt-bubble-bg !default;
|
|
152
|
+
/// The border color of the focused alt Bubble.
|
|
153
|
+
/// @group bubble
|
|
154
|
+
$kendo-chat-alt-bubble-focus-border: $kendo-chat-alt-bubble-focus-bg !default;
|
|
155
|
+
/// The box shadow of the focused alt Bubble.
|
|
156
|
+
/// @group bubble
|
|
157
|
+
$kendo-chat-alt-bubble-focus-shadow: 0 0 0 2px color-mix(in srgb, k-color(primary) 16%, transparent) !default;
|
|
158
|
+
|
|
159
|
+
/// The width of a file in the Chat Textarea.
|
|
178
160
|
/// @group chat
|
|
179
|
-
$kendo-chat-
|
|
180
|
-
/// The
|
|
161
|
+
$kendo-chat-file-width: 240px !default;
|
|
162
|
+
/// The horizontal padding of the Chat file.
|
|
181
163
|
/// @group chat
|
|
182
|
-
$kendo-chat-
|
|
183
|
-
|
|
184
|
-
/// The background color of the Chat quick reply.
|
|
164
|
+
$kendo-chat-file-padding-x: k-spacing(2) !default;
|
|
165
|
+
/// The vertical padding of the Chat file.
|
|
185
166
|
/// @group chat
|
|
186
|
-
$kendo-chat-
|
|
187
|
-
/// The
|
|
167
|
+
$kendo-chat-file-padding-y: k-spacing(2) !default;
|
|
168
|
+
/// The spacing between the elements of the Chat file.
|
|
188
169
|
/// @group chat
|
|
189
|
-
$kendo-chat-
|
|
190
|
-
|
|
170
|
+
$kendo-chat-file-gap: k-spacing(1) !default;
|
|
171
|
+
|
|
172
|
+
/// The border width of the Chat file.
|
|
173
|
+
/// @group chat
|
|
174
|
+
$kendo-chat-file-border-width: 1px !default;
|
|
175
|
+
/// The border style of the Chat file.
|
|
191
176
|
/// @group chat
|
|
192
|
-
$kendo-chat-
|
|
177
|
+
$kendo-chat-file-border-style: solid !default;
|
|
193
178
|
|
|
194
|
-
/// The background color of the
|
|
179
|
+
/// The background color of the Chat file.
|
|
180
|
+
/// @group chat
|
|
181
|
+
$kendo-chat-file-bg: k-color(secondary-subtle) !default;
|
|
182
|
+
/// The text color of the Chat file.
|
|
183
|
+
/// @group chat
|
|
184
|
+
$kendo-chat-file-text: k-color(secondary-on-subtle) !default;
|
|
185
|
+
/// The border color of the Chat file.
|
|
186
|
+
/// @group chat
|
|
187
|
+
$kendo-chat-file-border: $kendo-chat-file-bg !default;
|
|
188
|
+
/// The border-radius of the Chat file.
|
|
195
189
|
/// @group chat
|
|
196
|
-
$kendo-chat-
|
|
197
|
-
|
|
190
|
+
$kendo-chat-file-border-radius: k-border-radius(md) !default;
|
|
191
|
+
|
|
192
|
+
/// The horizontal padding of the file download wrapper.
|
|
198
193
|
/// @group chat
|
|
199
|
-
$kendo-chat-
|
|
200
|
-
/// The
|
|
194
|
+
$kendo-chat-file-download-padding-x: k-spacing(2) !default;
|
|
195
|
+
/// The vertical padding of the file download wrapper.
|
|
201
196
|
/// @group chat
|
|
202
|
-
$kendo-chat-
|
|
197
|
+
$kendo-chat-file-download-padding-y: k-spacing(2) !default;
|
|
203
198
|
|
|
204
|
-
/// The
|
|
199
|
+
/// The border width of the Chat pinned message;
|
|
205
200
|
/// @group chat
|
|
206
|
-
$kendo-chat-
|
|
207
|
-
/// The
|
|
201
|
+
$kendo-chat-message-pinned-border-width: 1px !default;
|
|
202
|
+
/// The border style of the Chat pinned message;
|
|
208
203
|
/// @group chat
|
|
209
|
-
$kendo-chat-
|
|
210
|
-
/// The
|
|
204
|
+
$kendo-chat-message-pinned-border-style: solid !default;
|
|
205
|
+
/// The border color of the Chat pinned message;
|
|
211
206
|
/// @group chat
|
|
212
|
-
$kendo-chat-
|
|
207
|
+
$kendo-chat-message-pinned-border-color: k-color(border) !default;
|
|
213
208
|
|
|
214
|
-
/// The
|
|
209
|
+
/// The horizontal padding of the Chat message reference.
|
|
215
210
|
/// @group chat
|
|
216
|
-
$kendo-chat-
|
|
217
|
-
/// The
|
|
211
|
+
$kendo-chat-message-reference-padding-x: k-spacing(2) !default;
|
|
212
|
+
/// The vertical padding of the Chat message reference.
|
|
218
213
|
/// @group chat
|
|
219
|
-
$kendo-chat-
|
|
214
|
+
$kendo-chat-message-reference-padding-y: k-spacing(2) !default;
|
|
220
215
|
|
|
216
|
+
/// The background color of the Chat message reference.
|
|
217
|
+
/// @group chat
|
|
218
|
+
$kendo-chat-message-reference-bg: k-color(surface) !default;
|
|
219
|
+
/// The text color of the Chat message reference.
|
|
220
|
+
/// @group chat
|
|
221
|
+
$kendo-chat-message-reference-text: k-color(on-app-surface) !default;
|
|
222
|
+
/// The background color of the message reference marker.
|
|
223
|
+
/// @group chat
|
|
224
|
+
$kendo-chat-message-reference-marker-bg: k-color(base-emphasis) !default;
|
|
225
|
+
/// The background color of the message reference alt marker.
|
|
226
|
+
/// @group chat
|
|
227
|
+
$kendo-chat-message-reference-marker-alt-bg: k-color(primary-emphasis) !default;
|
|
221
228
|
|
|
222
229
|
@forward "@progress/kendo-theme-core/scss/components/chat/_variables.scss" with (
|
|
223
230
|
$kendo-chat-padding-x: $kendo-chat-padding-x,
|
|
@@ -228,61 +235,63 @@ $kendo-chat-typing-indicator-dot-spacing: 5px !default;
|
|
|
228
235
|
$kendo-chat-font-family: $kendo-chat-font-family,
|
|
229
236
|
$kendo-chat-font-size: $kendo-chat-font-size,
|
|
230
237
|
$kendo-chat-line-height: $kendo-chat-line-height,
|
|
231
|
-
$kendo-chat-item-spacing-x: $kendo-chat-item-spacing-x,
|
|
232
238
|
$kendo-chat-item-spacing-y: $kendo-chat-item-spacing-y,
|
|
239
|
+
$kendo-chat-message-max-width: $kendo-chat-message-max-width,
|
|
240
|
+
$kendo-chat-message-gap: $kendo-chat-message-gap,
|
|
233
241
|
$kendo-chat-message-list-padding-x: $kendo-chat-message-list-padding-x,
|
|
234
242
|
$kendo-chat-message-list-padding-y: $kendo-chat-message-list-padding-y,
|
|
235
243
|
$kendo-chat-message-list-spacing: $kendo-chat-message-list-spacing,
|
|
244
|
+
$kendo-chat-message-status-gap: $kendo-chat-message-status-gap,
|
|
236
245
|
$kendo-chat-timestamp-font-size: $kendo-chat-timestamp-font-size,
|
|
237
246
|
$kendo-chat-timestamp-line-height: $kendo-chat-timestamp-line-height,
|
|
238
247
|
$kendo-chat-timestamp-transform: $kendo-chat-timestamp-transform,
|
|
239
248
|
$kendo-chat-timestamp-text: $kendo-chat-timestamp-text,
|
|
240
249
|
$kendo-chat-timestamp-bg: $kendo-chat-timestamp-bg,
|
|
250
|
+
$kendo-chat-timestamp-separator-bg: $kendo-chat-timestamp-separator-bg,
|
|
251
|
+
$kendo-chat-timestamp-separator-spacing: $kendo-chat-timestamp-separator-spacing,
|
|
241
252
|
$kendo-chat-message-meta-font-size: $kendo-chat-message-meta-font-size,
|
|
242
253
|
$kendo-chat-message-meta-line-height: $kendo-chat-message-meta-line-height,
|
|
243
254
|
$kendo-chat-author-font-size: $kendo-chat-author-font-size,
|
|
244
255
|
$kendo-chat-author-line-height: $kendo-chat-author-line-height,
|
|
245
|
-
$kendo-chat-
|
|
246
|
-
$kendo-chat-bubble-padding-y: $kendo-chat-bubble-padding-y,
|
|
256
|
+
$kendo-chat-status-text: $kendo-chat-status-text,
|
|
247
257
|
$kendo-chat-bubble-spacing: $kendo-chat-bubble-spacing,
|
|
248
|
-
$kendo-chat-bubble-line-height: $kendo-chat-bubble-line-height,
|
|
249
|
-
$kendo-chat-bubble-border-radius: $kendo-chat-bubble-border-radius,
|
|
250
|
-
$kendo-chat-bubble-border-radius-sm: $kendo-chat-bubble-border-radius-sm,
|
|
251
|
-
$kendo-chat-avatar-size: $kendo-chat-avatar-size,
|
|
252
|
-
$kendo-chat-avatar-spacing: $kendo-chat-avatar-spacing,
|
|
253
|
-
$kendo-chat-toolbar-padding-x: $kendo-chat-toolbar-padding-x,
|
|
254
|
-
$kendo-chat-toolbar-padding-y: $kendo-chat-toolbar-padding-y,
|
|
255
258
|
$kendo-chat-toolbar-bg: $kendo-chat-toolbar-bg,
|
|
256
259
|
$kendo-chat-toolbar-text: $kendo-chat-toolbar-text,
|
|
257
260
|
$kendo-chat-toolbar-border: $kendo-chat-toolbar-border,
|
|
258
|
-
$kendo-chat-quick-reply-padding-x: $kendo-chat-quick-reply-padding-x,
|
|
259
|
-
$kendo-chat-quick-reply-padding-y: $kendo-chat-quick-reply-padding-y,
|
|
260
|
-
$kendo-chat-quick-reply-spacing: $kendo-chat-quick-reply-spacing,
|
|
261
|
-
$kendo-chat-quick-reply-line-height: $kendo-chat-quick-reply-line-height,
|
|
262
261
|
$kendo-chat-bg: $kendo-chat-bg,
|
|
263
262
|
$kendo-chat-text: $kendo-chat-text,
|
|
264
263
|
$kendo-chat-border: $kendo-chat-border,
|
|
265
|
-
$kendo-chat-bubble-bg: $kendo-chat-bubble-bg,
|
|
266
|
-
$kendo-chat-bubble-text: $kendo-chat-bubble-text,
|
|
267
|
-
$kendo-chat-bubble-border: $kendo-chat-bubble-border,
|
|
268
|
-
$kendo-chat-bubble-shadow: $kendo-chat-bubble-shadow,
|
|
269
|
-
$kendo-chat-bubble-hover-shadow: $kendo-chat-bubble-hover-shadow,
|
|
270
|
-
$kendo-chat-bubble-selected-shadow: $kendo-chat-bubble-selected-shadow,
|
|
271
264
|
$kendo-chat-alt-bubble-bg: $kendo-chat-alt-bubble-bg,
|
|
272
265
|
$kendo-chat-alt-bubble-text: $kendo-chat-alt-bubble-text,
|
|
273
266
|
$kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-border,
|
|
274
267
|
$kendo-chat-alt-bubble-shadow: $kendo-chat-alt-bubble-shadow,
|
|
275
|
-
$kendo-chat-alt-bubble-hover-
|
|
276
|
-
$kendo-chat-alt-bubble-
|
|
277
|
-
$kendo-chat-
|
|
278
|
-
$kendo-chat-
|
|
279
|
-
$kendo-chat-
|
|
280
|
-
$kendo-chat-
|
|
281
|
-
$kendo-chat-
|
|
282
|
-
$kendo-chat-
|
|
283
|
-
$kendo-chat-
|
|
284
|
-
$kendo-chat-
|
|
285
|
-
$kendo-chat-
|
|
286
|
-
$kendo-chat-
|
|
287
|
-
$kendo-chat-
|
|
268
|
+
$kendo-chat-alt-bubble-hover-bg: $kendo-chat-alt-bubble-hover-bg,
|
|
269
|
+
$kendo-chat-alt-bubble-hover-border: $kendo-chat-alt-bubble-hover-border,
|
|
270
|
+
$kendo-chat-alt-bubble-active-bg: $kendo-chat-alt-bubble-active-bg,
|
|
271
|
+
$kendo-chat-alt-bubble-active-border: $kendo-chat-alt-bubble-active-border,
|
|
272
|
+
$kendo-chat-alt-bubble-focus-bg: $kendo-chat-alt-bubble-focus-bg,
|
|
273
|
+
$kendo-chat-alt-bubble-focus-border: $kendo-chat-alt-bubble-focus-border,
|
|
274
|
+
$kendo-chat-alt-bubble-focus-shadow: $kendo-chat-alt-bubble-focus-shadow,
|
|
275
|
+
$kendo-chat-typing-indicator-text: $kendo-chat-typing-indicator-text,
|
|
276
|
+
$kendo-chat-file-width: $kendo-chat-file-width,
|
|
277
|
+
$kendo-chat-file-padding-x: $kendo-chat-file-padding-x,
|
|
278
|
+
$kendo-chat-file-padding-y: $kendo-chat-file-padding-y,
|
|
279
|
+
$kendo-chat-file-gap: $kendo-chat-file-gap,
|
|
280
|
+
$kendo-chat-file-border-width: $kendo-chat-file-border-width,
|
|
281
|
+
$kendo-chat-file-border-style: $kendo-chat-file-border-style,
|
|
282
|
+
$kendo-chat-file-bg: $kendo-chat-file-bg,
|
|
283
|
+
$kendo-chat-file-text: $kendo-chat-file-text,
|
|
284
|
+
$kendo-chat-file-border: $kendo-chat-file-border,
|
|
285
|
+
$kendo-chat-file-border-radius: $kendo-chat-file-border-radius,
|
|
286
|
+
$kendo-chat-file-download-padding-x: $kendo-chat-file-download-padding-x,
|
|
287
|
+
$kendo-chat-file-download-padding-y: $kendo-chat-file-download-padding-y,
|
|
288
|
+
$kendo-chat-message-pinned-border-width: $kendo-chat-message-pinned-border-width,
|
|
289
|
+
$kendo-chat-message-pinned-border-style: $kendo-chat-message-pinned-border-style,
|
|
290
|
+
$kendo-chat-message-pinned-border-color: $kendo-chat-message-pinned-border-color,
|
|
291
|
+
$kendo-chat-message-reference-padding-x: $kendo-chat-message-reference-padding-x,
|
|
292
|
+
$kendo-chat-message-reference-padding-y: $kendo-chat-message-reference-padding-y,
|
|
293
|
+
$kendo-chat-message-reference-bg: $kendo-chat-message-reference-bg,
|
|
294
|
+
$kendo-chat-message-reference-text: $kendo-chat-message-reference-text,
|
|
295
|
+
$kendo-chat-message-reference-marker-bg: $kendo-chat-message-reference-marker-bg,
|
|
296
|
+
$kendo-chat-message-reference-marker-alt-bg: $kendo-chat-message-reference-marker-alt-bg,
|
|
288
297
|
);
|
package/scss/index.scss
CHANGED
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
@forward "./virtual-scroller/_index.scss";
|
|
17
17
|
@forward "./no-data/_index.scss";
|
|
18
18
|
@forward "./suggestion/_index.scss";
|
|
19
|
+
@forward "./bubble/_index.scss";
|
|
19
20
|
@forward "./avatar/_index.scss";
|
|
20
21
|
@forward "./badge/_index.scss";
|
|
21
22
|
@forward "./color-preview/_index.scss";
|
|
@@ -24,6 +25,7 @@
|
|
|
24
25
|
@forward "./time-marker/_index.scss";
|
|
25
26
|
@forward "./tooltip/_index.scss";
|
|
26
27
|
@forward "./button/_index.scss";
|
|
28
|
+
@forward "./speech-to-text-button/_index.scss";
|
|
27
29
|
@forward "./input/_index.scss";
|
|
28
30
|
@forward "./floating-label/_index.scss";
|
|
29
31
|
@forward "./textbox/_index.scss";
|
|
@@ -145,6 +147,7 @@
|
|
|
145
147
|
@use "./virtual-scroller/_index.scss" as *;
|
|
146
148
|
@use "./no-data/_index.scss" as *;
|
|
147
149
|
@use "./suggestion/_index.scss" as *;
|
|
150
|
+
@use "./bubble/_index.scss" as *;
|
|
148
151
|
@use "./column-menu/_index.scss" as *;
|
|
149
152
|
|
|
150
153
|
|
|
@@ -318,6 +321,7 @@
|
|
|
318
321
|
@include kendo-virtual-scroller--styles();
|
|
319
322
|
@include kendo-no-data--styles();
|
|
320
323
|
@include kendo-suggestion--styles();
|
|
324
|
+
@include kendo-bubble--styles();
|
|
321
325
|
@include kendo-column-menu--styles();
|
|
322
326
|
|
|
323
327
|
|