devextreme-themebuilder 24.2.2-beta → 24.2.3

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 (29) hide show
  1. package/data/metadata/dx-theme-builder-metadata.js +97 -67
  2. package/data/scss/widgets/base/_gridBase.scss +2 -1
  3. package/data/scss/widgets/base/chat/layout/chat-avatar/_index.scss +1 -0
  4. package/data/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss +1 -1
  5. package/data/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss +3 -1
  6. package/data/scss/widgets/base/chat/layout/chat-messagegroup/_index.scss +1 -1
  7. package/data/scss/widgets/base/chat/layout/chat-messagegroup/_mixins.scss +11 -3
  8. package/data/scss/widgets/base/chat/layout/chat-messagelist/_index.scss +1 -0
  9. package/data/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss +2 -0
  10. package/data/scss/widgets/base/chat/layout/chat-typingindicator/_index.scss +1 -1
  11. package/data/scss/widgets/base/chat/layout/chat-typingindicator/_mixins.scss +0 -2
  12. package/data/scss/widgets/fluent/chat/_colors.scss +27 -15
  13. package/data/scss/widgets/fluent/chat/_index.scss +4 -2
  14. package/data/scss/widgets/fluent/chat/_sizes.scss +2 -2
  15. package/data/scss/widgets/fluent/gridBase/_index.scss +42 -22
  16. package/data/scss/widgets/fluent/scheduler/_colors.scss +2 -0
  17. package/data/scss/widgets/generic/chat/_colors.scss +48 -17
  18. package/data/scss/widgets/generic/chat/_index.scss +4 -2
  19. package/data/scss/widgets/generic/chat/_sizes.scss +2 -2
  20. package/data/scss/widgets/generic/gridBase/_colors.scss +9 -9
  21. package/data/scss/widgets/generic/gridBase/_index.scss +33 -12
  22. package/data/scss/widgets/generic/scheduler/_colors.scss +9 -8
  23. package/data/scss/widgets/material/chat/_colors.scss +13 -7
  24. package/data/scss/widgets/material/chat/_index.scss +4 -2
  25. package/data/scss/widgets/material/chat/_sizes.scss +2 -2
  26. package/data/scss/widgets/material/gridBase/_colors.scss +3 -1
  27. package/data/scss/widgets/material/gridBase/_index.scss +43 -22
  28. package/modules/bootstrap-extractor.js +3 -15
  29. package/package.json +3 -5
package/data/scss/widgets/fluent/chat/_sizes.scss CHANGED
@@ -18,7 +18,7 @@ $chat-messagegroup-gap: 4px !default;
18
18
  $chat-messagegroup-padding: null !default;
19
19
  $chat-information-gap: 8px !default;
20
20
  $chat-avatar-size: 32px !default;
21
- $chat-messagegroup-alignment-start-template: auto 1fr !default;
21
+ $chat-messagegroup-alignment-start-template: auto 82.5% 1fr !default;
22
22
  $chat-messagegroup-alignment-start-gap: 12px !default;
23
23
  $chat-header-padding: 20px !default;
24
24
  $chat-information-font-size: 12px !default;
@@ -38,11 +38,11 @@ $chat-messagelist-empty-message-font-size: null !default;
38
38
  $chat-messagelist-empty-prompt-font-size: null !default;
39
39
  $chat-messagelist-day-header-padding-bottom: 12px !default;
40
40
  $chat-messagelist-day-header-first-padding-top: 20px !default;
41
+ $chat-messagelist-day-header-font-size: 12px !default;
41
42
 
42
43
  $chat-typingindicator-template: $chat-messagegroup-alignment-start-template !default;
43
44
  $chat-typingindicator-padding: null !default;
44
45
  $chat-typingindicator-row-gap: $chat-messagegroup-gap !default;
45
- $chat-typingindicator-column-gap: $chat-messagegroup-alignment-start-gap !default;
46
46
  $chat-typingindicator-font-size: $chat-information-font-size !default;
47
47
  $chat-typingindicator-bubble-padding-block: null !default;
48
48
  $chat-typingindicator-bubble-padding-inline: null !default;
package/data/scss/widgets/fluent/gridBase/_index.scss CHANGED
@@ -368,6 +368,24 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
368
368
  @include dx-icon-sizing($fluent-base-icon-size);
369
369
  }
370
370
  }
371
+
372
+ .dx-#{$widget-name}-drop-highlight {
373
+ & > td {
374
+ background-color: $datagrid-drop-highlight-bg;
375
+ color: $datagrid-drop-highlight-color;
376
+
377
+ .dx-header-filter {
378
+ color: $datagrid-drop-highlight-color;
379
+ }
380
+
381
+ .dx-checkbox {
382
+ .dx-checkbox-icon {
383
+ background-color: $datagrid-drop-highlight-color;
384
+ color: $datagrid-drop-highlight-bg;
385
+ }
386
+ }
387
+ }
388
+ }
371
389
  }
372
390
 
373
391
  .dx-#{$widget-name}-edit-popup {
@@ -610,24 +628,6 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
610
628
  background-color: transparent;
611
629
  }
612
630
 
613
- .dx-#{$widget-name}-drop-highlight {
614
- & > td {
615
- background-color: $datagrid-drop-highlight-bg;
616
- color: $datagrid-drop-highlight-color;
617
-
618
- .dx-header-filter {
619
- color: $datagrid-drop-highlight-color;
620
- }
621
-
622
- .dx-checkbox {
623
- .dx-checkbox-icon {
624
- background-color: $datagrid-drop-highlight-color;
625
- color: $datagrid-drop-highlight-bg;
626
- }
627
- }
628
- }
629
- }
630
-
631
631
  .dx-#{$widget-name}-focus-overlay {
632
632
  &::after {
633
633
  content: "";
@@ -674,10 +674,16 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
674
674
  .dx-#{$widget-name}-headers {
675
675
  color: $datagrid-columnchooser-item-color;
676
676
  touch-action: pinch-zoom;
677
- border-bottom: $datagrid-border;
678
677
 
679
- .dx-#{$widget-name}-content {
680
- margin-bottom: -1px;
678
+ &::before {
679
+ content: '';
680
+ position: absolute;
681
+ top: 0;
682
+ left: 0;
683
+ bottom: 0;
684
+ right: 0;
685
+ pointer-events: none;
686
+ border-bottom: $datagrid-border;
681
687
  }
682
688
 
683
689
  .dx-#{$widget-name}-table {
@@ -1133,10 +1139,24 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
1133
1139
  }
1134
1140
 
1135
1141
  &.dx-#{$widget-name}-sticky-columns {
1136
- .dx-row:not(.dx-row-lines, .dx-group-row, .dx-datagrid-group-footer) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
1142
+ .dx-row:not(.dx-row-lines, .dx-group-row, .dx-#{$widget-name}-group-footer, .dx-edit-row, .dx-selection, .dx-row-focused) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
1137
1143
  padding-top: $fluent-grid-base-cell-vertical-padding + 1px;
1138
1144
  }
1139
1145
 
1146
+ .dx-selection.dx-row:not(.dx-edit-row) > td:not(.dx-editor-cell, .dx-master-detail-cell),
1147
+ .dx-row-focused.dx-row:not(.dx-edit-row) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
1148
+ padding-bottom: $fluent-grid-base-cell-vertical-padding - 1px;
1149
+ }
1150
+
1151
+ .dx-row.dx-edit-row > td.dx-command-edit {
1152
+ padding-top: $fluent-grid-base-cell-vertical-padding - 1px;
1153
+ }
1154
+
1155
+ .dx-row.dx-edit-row > td:not(.dx-master-detail-cell) .dx-texteditor-input {
1156
+ height: $fluent-grid-base-cell-height - 2px;
1157
+ line-height: $fluent-grid-base-cell-height - 2px;
1158
+ }
1159
+
1140
1160
  .dx-data-row td:not(.dx-command-expand, .dx-editor-cell) {
1141
1161
  .dx-row.dx-group-row + &, .dx-row.dx-master-detail-row + & {
1142
1162
  padding-top: $fluent-grid-base-cell-vertical-padding;
package/data/scss/widgets/fluent/scheduler/_colors.scss CHANGED
@@ -57,6 +57,7 @@ $agenda-appointment-text-color: $base-text-color !default;
57
57
  $header-panel-cell-date: null !default;
58
58
 
59
59
  @if $mode == "light" {
60
+ $scheduler-workspace-month-text-color: #707070;
60
61
  $scheduler-appointment-text-color: #000 !default;
61
62
  $scheduler-panel-text-color: #707070;
62
63
  $header-panel-cell-date: #424242;
@@ -77,6 +78,7 @@ $header-panel-cell-date: null !default;
77
78
  }
78
79
 
79
80
  @if $mode == "dark" {
81
+ $scheduler-workspace-month-text-color: #999;
80
82
  $scheduler-appointment-base-color: darken($base-accent, 48%) !default;
81
83
  $scheduler-appointment-text-color: #fff !default;
82
84
  $scheduler-panel-text-color: #999;
package/data/scss/widgets/generic/chat/_colors.scss CHANGED
@@ -4,17 +4,19 @@ $chat-avatar-color: getCustomVar(("$chat-avatar-color")) !default;
4
4
  $chat-avatar-background-color: getCustomVar(("$chat-avatar-background-color")) !default;
5
5
  $chat-bubble-color-primary: getCustomVar(("$chat-bubble-color-primary")) !default;
6
6
  $chat-bubble-background-color-primary: getCustomVar(("$chat-bubble-background-color-primary")) !default;
7
+ $chat-bubble-color-secondary: getCustomVar(("$chat-bubble-color-secondary")) !default;
7
8
  $chat-bubble-background-color-secondary: getCustomVar(("$chat-bubble-background-color-secondary")) !default;
8
- $chat-information-color: getCustomVar(("$chat-information-color")) !default;
9
+ $chat-information-author-name-color: getCustomVar(("$chat-information-author-name-color")) !default;
10
+ $chat-information-timestamp-color: getCustomVar(("$chat-information-timestamp-color")) !default;
9
11
  $chat-messagelist-day-header-color: getCustomVar(("$chat-messagelist-day-header-color")) !default;
12
+ $chat-alertlist-color: getCustomVar(("$chat-alertlist-color")) !default;
10
13
  $chat-messagelist-empty-icon-color: getCustomVar(("$chat-messagelist-empty-icon-color")) !default;
11
14
  $chat-messagelist-empty-icon-background-color: getCustomVar(("$chat-messagelist-empty-icon-background-color")) !default;
12
15
  $chat-messagelist-empty-message-color: getCustomVar(("$chat-messagelist-empty-message-color")) !default;
13
16
  $chat-messagelist-empty-prompt-color: getCustomVar(("$chat-messagelist-empty-prompt-color")) !default;
14
- $chat-alertlist-color: getCustomVar(("$chat-alertlist-color")) !default;
17
+ $chat-typingindicator-color: getCustomVar(("$chat-typingindicator-color")) !default;
15
18
  $chat-typingindicator-circle-bg-color-center: getCustomVar(("$chat-typingindicator-circle-bg-color-center")) !default;
16
19
  $chat-typingindicator-circle-bg-color: getCustomVar(("$chat-typingindicator-circle-bg-color")) !default;
17
- $chat-typingindicator-color: getCustomVar(("$chat-typingindicator-color")) !default;
18
20
  $chat-typingindicator-bubble-bg-color: getCustomVar(("$chat-typingindicator-bubble-bg-color")) !default;
19
21
 
20
22
  @use "sass:color";
@@ -29,23 +31,29 @@ $chat-avatar-color: null !default;
29
31
  $chat-avatar-background-color: $base-border-color !default;
30
32
  $chat-bubble-color-primary: null !default;
31
33
  $chat-bubble-background-color-primary: null !default;
34
+ $chat-bubble-color-secondary: null !default;
32
35
  $chat-bubble-background-color-secondary: null !default;
33
- $chat-information-color: null !default;
36
+ $chat-information-author-name-color: null !default;
37
+ $chat-information-timestamp-color: null !default;
34
38
  $chat-messagelist-day-header-color: null !default;
39
+ $chat-alertlist-color: $base-invalid-color !default;
35
40
  $chat-messagelist-empty-icon-color: null !default;
36
41
  $chat-messagelist-empty-icon-background-color: null !default;
37
42
  $chat-messagelist-empty-message-color: null !default;
38
43
  $chat-messagelist-empty-prompt-color: null !default;
39
- $chat-alertlist-color: $base-invalid-color !default;
44
+ $chat-typingindicator-color: null !default;
40
45
  $chat-typingindicator-circle-bg-color-center: null !default;
41
46
  $chat-typingindicator-circle-bg-color: null !default;
42
47
 
43
48
  @if $color == "light" {
44
49
  $chat-avatar-color: $base-text-color !default;
45
50
  $chat-bubble-color-primary: $base-text-color !default;
51
+ $chat-bubble-color-secondary: $base-text-color !default;
46
52
  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
47
53
  $chat-bubble-background-color-secondary: darken($base-element-bg, 4%) !default;
48
- $chat-information-color: darken($base-bg, 41.57) !default;
54
+ $chat-information-author-name-color: darken($base-bg, 41.57) !default;
55
+ $chat-information-timestamp-color: darken($base-bg, 41.57) !default;
56
+ $chat-typingindicator-color: darken($base-bg, 41.57) !default;
49
57
 
50
58
  $chat-messagelist-day-header-color: darken($base-bg, 41.57) !default;
51
59
  $chat-messagelist-empty-icon-color: lighten($base-icon-color, 46.67) !default;
@@ -60,9 +68,12 @@ $chat-typingindicator-circle-bg-color: null !default;
60
68
  @if $color == "dark" {
61
69
  $chat-avatar-color: $base-text-color !default;
62
70
  $chat-bubble-color-primary: $base-text-color !default;
71
+ $chat-bubble-color-secondary: $base-text-color !default;
63
72
  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
64
73
  $chat-bubble-background-color-secondary: lighten($base-element-bg, 4%) !default;
65
- $chat-information-color: lighten($base-bg, 32.55) !default;
74
+ $chat-information-author-name-color: lighten($base-bg, 32.55) !default;
75
+ $chat-information-timestamp-color: lighten($base-bg, 32.55) !default;
76
+ $chat-typingindicator-color: lighten($base-bg, 32.55) !default;
66
77
 
67
78
  $chat-messagelist-day-header-color: lighten($base-bg, 32.55) !default;
68
79
  $chat-messagelist-empty-icon-color: darken($base-icon-color, 37.25) !default;
@@ -77,9 +88,12 @@ $chat-typingindicator-circle-bg-color: null !default;
77
88
  @if $color == "carmine" {
78
89
  $chat-avatar-color: $base-text-color !default;
79
90
  $chat-bubble-color-primary: $base-text-color !default;
91
+ $chat-bubble-color-secondary: $base-text-color !default;
80
92
  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
81
93
  $chat-bubble-background-color-secondary: darken($base-element-bg, 4%) !default;
82
- $chat-information-color: darken($base-bg, 41.57) !default;
94
+ $chat-information-author-name-color: darken($base-bg, 41.57) !default;
95
+ $chat-information-timestamp-color: darken($base-bg, 41.57) !default;
96
+ $chat-typingindicator-color: darken($base-bg, 41.57) !default;
83
97
 
84
98
  $chat-messagelist-day-header-color: darken($base-bg, 41.57) !default;
85
99
  $chat-messagelist-empty-icon-color: $base-icon-color !default;
@@ -94,9 +108,12 @@ $chat-typingindicator-circle-bg-color: null !default;
94
108
  @if $color == "contrast" {
95
109
  $chat-avatar-color: $base-inverted-text-color !default;
96
110
  $chat-bubble-color-primary: $base-inverted-text-color !default;
111
+ $chat-bubble-color-secondary: $base-inverted-text-color !default;
97
112
  $chat-bubble-background-color-primary: $base-inverted-bg !default;
98
113
  $chat-bubble-background-color-secondary: $base-hover-color !default;
99
- $chat-information-color: $base-text-color !default;
114
+ $chat-information-author-name-color: $base-text-color !default;
115
+ $chat-information-timestamp-color: $base-text-color !default;
116
+ $chat-typingindicator-color: $base-text-color !default;
100
117
 
101
118
  $chat-messagelist-day-header-color: $base-text-color !default;
102
119
  $chat-messagelist-empty-icon-color: $base-bg !default;
@@ -111,9 +128,12 @@ $chat-typingindicator-circle-bg-color: null !default;
111
128
  @if $color == "darkmoon" {
112
129
  $chat-avatar-color: $base-text-color !default;
113
130
  $chat-bubble-color-primary: $base-text-color !default;
131
+ $chat-bubble-color-secondary: $base-text-color !default;
114
132
  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
115
133
  $chat-bubble-background-color-secondary: lighten($base-element-bg, 4%) !default;
116
- $chat-information-color: lighten($base-bg, 32.55) !default;
134
+ $chat-information-author-name-color: lighten($base-bg, 32.55) !default;
135
+ $chat-information-timestamp-color: lighten($base-bg, 32.55) !default;
136
+ $chat-typingindicator-color: lighten($base-bg, 32.55) !default;
117
137
 
118
138
  $chat-messagelist-day-header-color: lighten($base-bg, 32.55) !default;
119
139
  $chat-messagelist-empty-icon-color: $base-icon-color !default;
@@ -128,9 +148,12 @@ $chat-typingindicator-circle-bg-color: null !default;
128
148
  @if $color == "darkviolet" {
129
149
  $chat-avatar-color: $base-text-color !default;
130
150
  $chat-bubble-color-primary: $base-text-color !default;
151
+ $chat-bubble-color-secondary: $base-text-color !default;
131
152
  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
132
153
  $chat-bubble-background-color-secondary: lighten($base-element-bg, 4%) !default;
133
- $chat-information-color: lighten($base-bg, 32.55) !default;
154
+ $chat-information-author-name-color: lighten($base-bg, 32.55) !default;
155
+ $chat-information-timestamp-color: lighten($base-bg, 32.55) !default;
156
+ $chat-typingindicator-color: lighten($base-bg, 32.55) !default;
134
157
 
135
158
  $chat-messagelist-day-header-color: lighten($base-bg, 32.55) !default;
136
159
  $chat-messagelist-empty-icon-color: darken($base-icon-color, 37.25) !default;
@@ -144,9 +167,13 @@ $chat-typingindicator-circle-bg-color: null !default;
144
167
 
145
168
  @if $color == "greenmist" {
146
169
  $chat-avatar-color: $base-text-color !default;
170
+ $chat-bubble-color-primary: $base-text-color !default;
171
+ $chat-bubble-color-secondary: $base-text-color !default;
147
172
  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
148
173
  $chat-bubble-background-color-secondary: darken($base-element-bg, 4%) !default;
149
- $chat-information-color: darken($base-bg, 41.57) !default;
174
+ $chat-information-author-name-color: darken($base-bg, 41.57) !default;
175
+ $chat-information-timestamp-color: darken($base-bg, 41.57) !default;
176
+ $chat-typingindicator-color: darken($base-bg, 41.57) !default;
150
177
 
151
178
  $chat-messagelist-day-header-color: darken($base-bg, 41.57) !default;
152
179
  $chat-messagelist-empty-icon-color: $base-icon-color !default;
@@ -161,9 +188,12 @@ $chat-typingindicator-circle-bg-color: null !default;
161
188
  @if $color == "softblue" {
162
189
  $chat-avatar-color: $base-text-color !default;
163
190
  $chat-bubble-color-primary: $base-text-color !default;
191
+ $chat-bubble-color-secondary: $base-text-color !default;
164
192
  $chat-bubble-background-color-primary: color.change(darken($base-accent, 5%), $alpha: 0.1) !default;
165
193
  $chat-bubble-background-color-secondary: darken($base-element-bg, 4%) !default;
166
- $chat-information-color: darken($base-bg, 41.57) !default;
194
+ $chat-information-author-name-color: darken($base-bg, 41.57) !default;
195
+ $chat-information-timestamp-color: darken($base-bg, 41.57) !default;
196
+ $chat-typingindicator-color: darken($base-bg, 41.57) !default;
167
197
 
168
198
  $chat-messagelist-day-header-color: darken($base-bg, 41.57) !default;
169
199
  $chat-messagelist-empty-icon-color: $base-icon-color !default;
@@ -174,7 +204,6 @@ $chat-typingindicator-circle-bg-color: null !default;
174
204
  $chat-typingindicator-circle-bg-color: darken($base-bg, 31.57) !default;
175
205
  $chat-typingindicator-circle-bg-color-center: darken($base-bg, 46.57) !default;
176
206
  }
177
- $chat-typingindicator-color: $chat-information-color !default;
178
207
  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
179
208
  $never-used: collector((
180
209
  "$chat-background-color": $chat-background-color,
@@ -183,16 +212,18 @@ $never-used: collector((
183
212
  "$chat-avatar-background-color": $chat-avatar-background-color,
184
213
  "$chat-bubble-color-primary": $chat-bubble-color-primary,
185
214
  "$chat-bubble-background-color-primary": $chat-bubble-background-color-primary,
215
+ "$chat-bubble-color-secondary": $chat-bubble-color-secondary,
186
216
  "$chat-bubble-background-color-secondary": $chat-bubble-background-color-secondary,
187
- "$chat-information-color": $chat-information-color,
217
+ "$chat-information-author-name-color": $chat-information-author-name-color,
218
+ "$chat-information-timestamp-color": $chat-information-timestamp-color,
188
219
  "$chat-messagelist-day-header-color": $chat-messagelist-day-header-color,
220
+ "$chat-alertlist-color": $chat-alertlist-color,
189
221
  "$chat-messagelist-empty-icon-color": $chat-messagelist-empty-icon-color,
190
222
  "$chat-messagelist-empty-icon-background-color": $chat-messagelist-empty-icon-background-color,
191
223
  "$chat-messagelist-empty-message-color": $chat-messagelist-empty-message-color,
192
224
  "$chat-messagelist-empty-prompt-color": $chat-messagelist-empty-prompt-color,
193
- "$chat-alertlist-color": $chat-alertlist-color,
225
+ "$chat-typingindicator-color": $chat-typingindicator-color,
194
226
  "$chat-typingindicator-circle-bg-color-center": $chat-typingindicator-circle-bg-color-center,
195
227
  "$chat-typingindicator-circle-bg-color": $chat-typingindicator-circle-bg-color,
196
- "$chat-typingindicator-color": $chat-typingindicator-color,
197
228
  "$chat-typingindicator-bubble-bg-color": $chat-typingindicator-bubble-bg-color,
198
229
  ));
package/data/scss/widgets/generic/chat/_index.scss CHANGED
@@ -37,6 +37,7 @@
37
37
  @include chat-messagebubble(
38
38
  $chat-bubble-padding,
39
39
  $chat-bubble-border-radius,
40
+ $chat-bubble-color-secondary,
40
41
  $chat-bubble-background-color-secondary,
41
42
  $chat-bubble-color-primary,
42
43
  $chat-bubble-background-color-primary,
@@ -48,7 +49,8 @@
48
49
  $chat-messagegroup-alignment-start-gap,
49
50
  $chat-messagegroup-padding,
50
51
  $chat-information-font-size,
51
- $chat-information-color,
52
+ $chat-information-author-name-color,
53
+ $chat-information-timestamp-color,
52
54
  $chat-information-gap,
53
55
  );
54
56
  @include chat-messagelist-empty(
@@ -69,12 +71,12 @@
69
71
  $chat-messagelist-day-header-color,
70
72
  $chat-messagelist-day-header-padding-bottom,
71
73
  $chat-messagelist-day-header-first-padding-top,
74
+ $chat-messagelist-day-header-font-size,
72
75
  );
73
76
  @include chat-typingindicator(
74
77
  $chat-typingindicator-template,
75
78
  $chat-typingindicator-padding,
76
79
  $chat-typingindicator-row-gap,
77
- $chat-typingindicator-column-gap,
78
80
  $chat-typingindicator-font-size,
79
81
  $chat-typingindicator-color,
80
82
  $chat-typingindicator-bubble-padding-block,
package/data/scss/widgets/generic/chat/_sizes.scss CHANGED
@@ -19,7 +19,7 @@ $chat-messagegroup-gap: 4px !default;
19
19
  $chat-messagegroup-padding: null !default;
20
20
  $chat-information-gap: 8px !default;
21
21
  $chat-avatar-size: 32px !default;
22
- $chat-messagegroup-alignment-start-template: auto 1fr !default;
22
+ $chat-messagegroup-alignment-start-template: auto 82.5% 1fr !default;
23
23
  $chat-messagegroup-alignment-start-gap: 12px !default;
24
24
  $chat-header-padding: 20px !default;
25
25
  $chat-information-font-size: 12px !default;
@@ -38,11 +38,11 @@ $chat-messagelist-empty-message-font-size: null !default;
38
38
  $chat-messagelist-empty-prompt-font-size: null !default;
39
39
  $chat-messagelist-day-header-padding-bottom: 12px !default;
40
40
  $chat-messagelist-day-header-first-padding-top: 20px !default;
41
+ $chat-messagelist-day-header-font-size: 12px !default;
41
42
 
42
43
  $chat-typingindicator-template: $chat-messagegroup-alignment-start-template !default;
43
44
  $chat-typingindicator-padding: null !default;
44
45
  $chat-typingindicator-row-gap: $chat-messagegroup-gap !default;
45
- $chat-typingindicator-column-gap: $chat-messagegroup-alignment-start-gap !default;
46
46
  $chat-typingindicator-font-size: $chat-information-font-size !default;
47
47
  $chat-typingindicator-bubble-padding-block: null !default;
48
48
  $chat-typingindicator-bubble-padding-inline: null !default;
package/data/scss/widgets/generic/gridBase/_colors.scss CHANGED
@@ -101,7 +101,7 @@ $datagrid-draggable-column-text-color: null !default;
101
101
  $datagrid-row-selected-color: lighten($datagrid-base-color, 100%) !default;
102
102
  $datagrid-row-focused-color: $base-inverted-text-color !default;
103
103
  $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default;
104
- $datagrid-hover-bg: $base-hover-bg !default;
104
+ $datagrid-hover-bg: darken($base-bg, 2%) !default;
105
105
  $datagrid-row-hovered-color: $base-hover-color !default;
106
106
  $datagrid-menu-icon-color: $base-icon-color !default;
107
107
  $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
@@ -143,7 +143,7 @@ $datagrid-draggable-column-text-color: null !default;
143
143
  $datagrid-row-focused-color: $base-text-color !default;
144
144
  $datagrid-row-focused-bg: $base-accent !default;
145
145
  $datagrid-row-hovered-color: $base-text-color !default;
146
- $datagrid-hover-bg: $base-hover-color !default;
146
+ $datagrid-hover-bg: $base-bg !default;
147
147
  $datagrid-menu-icon-color: $base-icon-color !default;
148
148
  $datagrid-cell-modified-border-color: $base-text-color !default;
149
149
  $datagrid-nodata-color: $base-text-color !default;
@@ -187,7 +187,7 @@ $datagrid-draggable-column-text-color: null !default;
187
187
  $datagrid-row-selected-color: $datagrid-base-color !default;
188
188
  $datagrid-row-focused-color: $base-text-color !default;
189
189
  $datagrid-row-focused-bg: mix($base-accent, $base-bg, 20%) !default;
190
- $datagrid-hover-bg: $base-hover-bg !default;
190
+ $datagrid-hover-bg: lighten($datagrid-base-background-color, 4%) !default;
191
191
  $datagrid-row-hovered-color: $base-hover-color !default;
192
192
  $datagrid-menu-icon-color: darken($base-icon-color, 33.7%) !default;
193
193
  $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
@@ -230,7 +230,7 @@ $datagrid-draggable-column-text-color: null !default;
230
230
  $datagrid-row-selected-color: $base-bg !default;
231
231
  $datagrid-row-focused-color: $base-inverted-text-color !default;
232
232
  $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default;
233
- $datagrid-hover-bg: $base-hover-bg !default;
233
+ $datagrid-hover-bg: darken($base-bg, 2%) !default;
234
234
  $datagrid-row-hovered-color: $base-hover-color !default;
235
235
  $datagrid-menu-icon-color: $base-icon-color !default;
236
236
  $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
@@ -273,7 +273,7 @@ $datagrid-draggable-column-text-color: null !default;
273
273
  $datagrid-row-selected-color: $datagrid-base-color !default;
274
274
  $datagrid-row-focused-color: $base-inverted-text-color !default;
275
275
  $datagrid-row-focused-bg: mix($base-bg, $base-accent, 15%) !default;
276
- $datagrid-hover-bg: $base-hover-bg !default;
276
+ $datagrid-hover-bg: $base-row-alternation-background !default;
277
277
  $datagrid-row-hovered-color: $base-hover-color !default;
278
278
  $datagrid-menu-icon-color: $base-icon-color !default;
279
279
  $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
@@ -316,7 +316,7 @@ $datagrid-draggable-column-text-color: null !default;
316
316
  $datagrid-row-selected-color: lighten($base-text-color, 100%) !default;
317
317
  $datagrid-row-focused-color: $base-inverted-text-color !default;
318
318
  $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default;
319
- $datagrid-hover-bg: color.change(darken($base-bg, 9%), $alpha: 0.4) !default;
319
+ $datagrid-hover-bg: darken($base-bg, 3%) !default;
320
320
  $datagrid-row-hovered-color: $base-hover-color !default;
321
321
  $datagrid-menu-icon-color: $base-icon-color !default;
322
322
  $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
@@ -332,7 +332,7 @@ $datagrid-draggable-column-text-color: null !default;
332
332
  $datagrid-editor-bg: $base-bg !default;
333
333
  $datagrid-drop-highlight-bg: $base-accent !default;
334
334
  $datagrid-columnchooser-bg: $base-bg !default;
335
- $datagrid-row-alternation-bg: color.change(darken($base-bg, 9%), $alpha: 0.4) !default;
335
+ $datagrid-row-alternation-bg: darken($base-bg, 3%) !default;
336
336
  $datagrid-columnchooser-item-bg: $datagrid-columnchooser-bg !default;
337
337
  $datagrid-summary-color: $base-label-color !default;
338
338
  $datagrid-columnchooser-message-color: lighten($datagrid-base-color, 40%) !default;
@@ -359,7 +359,7 @@ $datagrid-draggable-column-text-color: null !default;
359
359
  $datagrid-row-selected-color: $datagrid-base-color !default;
360
360
  $datagrid-row-focused-color: $base-text-color !default;
361
361
  $datagrid-row-focused-bg: mix($base-accent, $base-bg, 20%) !default;
362
- $datagrid-hover-bg: $base-hover-bg !default;
362
+ $datagrid-hover-bg: darken($datagrid-base-background-color, 4%) !default;
363
363
  $datagrid-row-hovered-color: $base-hover-color !default;
364
364
  $datagrid-menu-icon-color: lighten($base-icon-color, 33.7%) !default;
365
365
  $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
@@ -402,7 +402,7 @@ $datagrid-draggable-column-text-color: null !default;
402
402
  $datagrid-row-selected-color: $datagrid-base-color !default;
403
403
  $datagrid-row-focused-color: $base-inverted-text-color !default;
404
404
  $datagrid-row-focused-bg: mix($base-bg, $base-accent, 20%) !default;
405
- $datagrid-hover-bg: $base-webwidget-hover-background !default;
405
+ $datagrid-hover-bg: darken($datagrid-base-background-color, 2%) !default;
406
406
  $datagrid-row-hovered-color: $base-hover-color !default;
407
407
  $datagrid-menu-icon-color: $base-icon-color !default;
408
408
  $datagrid-cell-modified-border-color: color.change($base-success, $alpha: 0.5) !default;
package/data/scss/widgets/generic/gridBase/_index.scss CHANGED
@@ -32,6 +32,7 @@ $generic-grid-base-checkbox-icon-size: 16px;
32
32
  $generic-grid-base-checkbox-indeterminate-icon-size: 6px;
33
33
  $grid-masterdetail-padding: 20px;
34
34
  $generic-grid-base-group-panel-message-line-height: $generic-button-text-line-height;
35
+ $generic-grid-base-cell-input-height: round($generic-base-line-height * $generic-base-font-size) + 2 * $generic-grid-base-cell-padding;
35
36
 
36
37
  @mixin dx-set-checkbox-border-color-as-background() {
37
38
  @if $generic-color-postfix == ".contrast" {
@@ -230,6 +231,13 @@ $generic-grid-base-group-panel-message-line-height: $generic-button-text-line-he
230
231
  line-height: $generic-base-inline-block-height;
231
232
  }
232
233
  }
234
+
235
+ .dx-#{$widget-name}-drop-highlight {
236
+ & > td {
237
+ background-color: $datagrid-drop-highlight-bg;
238
+ color: $datagrid-drop-highlight-color;
239
+ }
240
+ }
233
241
  }
234
242
 
235
243
  .dx-#{$widget-name}-edit-popup .dx-error-message {
@@ -240,7 +248,7 @@ $generic-grid-base-group-panel-message-line-height: $generic-button-text-line-he
240
248
  .dx-#{$widget-name}-rowsview {
241
249
  .dx-texteditor-input {
242
250
  padding: $generic-grid-base-cell-padding;
243
- min-height: round($generic-base-line-height * $generic-base-font-size) + 2 * $generic-grid-base-cell-padding;
251
+ min-height: $generic-grid-base-cell-input-height;
244
252
  }
245
253
 
246
254
  .dx-numberbox,
@@ -412,13 +420,6 @@ $generic-grid-base-group-panel-message-line-height: $generic-button-text-line-he
412
420
  background-color: transparent;
413
421
  }
414
422
 
415
- .dx-#{$widget-name}-drop-highlight {
416
- & > td {
417
- background-color: $datagrid-drop-highlight-bg;
418
- color: $datagrid-drop-highlight-color;
419
- }
420
- }
421
-
422
423
  .dx-#{$widget-name}-focus-overlay {
423
424
  border: 2px solid $datagrid-focused-border-color;
424
425
  }
@@ -488,10 +489,16 @@ $generic-grid-base-group-panel-message-line-height: $generic-button-text-line-he
488
489
  color: $datagrid-columnchooser-item-color;
489
490
  font-weight: $datagrid-columnchooser-font-weight;
490
491
  touch-action: pinch-zoom;
491
- border-bottom: $datagrid-border;
492
492
 
493
- .dx-#{$widget-name}-content {
494
- margin-bottom: -1px;
493
+ &::before {
494
+ content: '';
495
+ position: absolute;
496
+ top: 0;
497
+ left: 0;
498
+ bottom: 0;
499
+ right: 0;
500
+ pointer-events: none;
501
+ border-bottom: $datagrid-border;
495
502
  }
496
503
 
497
504
  .dx-#{$widget-name}-table {
@@ -1012,10 +1019,24 @@ $generic-grid-base-group-panel-message-line-height: $generic-button-text-line-he
1012
1019
  }
1013
1020
 
1014
1021
  .dx-#{$widget-name}-rowsview.dx-#{$widget-name}-sticky-columns {
1015
- .dx-row:not(.dx-row-lines, .dx-group-row, .dx-datagrid-group-footer) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
1022
+ .dx-row:not(.dx-row-lines, .dx-group-row, .dx-#{$widget-name}-group-footer, .dx-edit-row, .dx-selection, .dx-row-focused) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
1016
1023
  padding-top: $generic-grid-base-cell-padding + 1px;
1017
1024
  }
1018
1025
 
1026
+ .dx-selection.dx-row:not(.dx-edit-row) > td:not(.dx-editor-cell, .dx-master-detail-cell),
1027
+ .dx-row-focused.dx-row:not(.dx-edit-row) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
1028
+ padding-bottom: $generic-grid-base-cell-padding - 1px;
1029
+ }
1030
+
1031
+ .dx-row.dx-edit-row > td.dx-command-edit {
1032
+ padding-top: $generic-grid-base-cell-padding - 1px;
1033
+ }
1034
+
1035
+ .dx-row.dx-edit-row > td:not(.dx-master-detail-cell) .dx-texteditor-input {
1036
+ padding-bottom: $generic-grid-base-cell-padding - 1px;
1037
+ min-height: $generic-grid-base-cell-input-height - 2px;
1038
+ }
1039
+
1019
1040
  .dx-data-row td:not(.dx-command-expand, .dx-editor-cell) {
1020
1041
  .dx-row.dx-group-row + &, .dx-row.dx-master-detail-row + & {
1021
1042
  padding-top: $generic-grid-base-cell-padding;
package/data/scss/widgets/generic/scheduler/_colors.scss CHANGED
@@ -54,6 +54,9 @@ $scheduler-time-panel-background-color: null !default;
54
54
  $scheduler-tooltip-appointment-text-color: null !default;
55
55
  $scheduler-appointment-overlay-bg: null !default;
56
56
 
57
+ $month-text-color-light: #757575;
58
+ $month-text-color-dark: #9c9c9c;
59
+
57
60
  // Agenda
58
61
  $agenda-appointment-recurrence-icon-color: null !default;
59
62
  $agenda-appointment-hover-bg: $base-hover-bg !default;
@@ -76,7 +79,7 @@ $agenda-appointment-text-color: null !default;
76
79
  $scheduler-panel-text-color: $base-header-color !default;
77
80
  $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default;
78
81
  $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
79
- $scheduler-workspace-month-text-color: lighten($base-text-color, 38.5%) !default;
82
+ $scheduler-workspace-month-text-color: $month-text-color-light !default;
80
83
  $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default;
81
84
  $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
82
85
  $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default;
@@ -114,7 +117,6 @@ $agenda-appointment-text-color: null !default;
114
117
  $scheduler-appointment-start-color: $base-inverted-bg !default;
115
118
  $scheduler-workspace-focused-cell-color: lighten($base-accent, 5%) !default;
116
119
  $scheduler-panel-text-color: $base-text-color !default;
117
- $scheduler-workspace-month-text-color: $base-text-color !default;
118
120
  $scheduler-dropdown-appointment-date-color: $base-text-color !default;
119
121
  $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
120
122
  $scheduler-workspace-hovered-cell-color: extcolor.difference(#fff, $base-text-color) !default;
@@ -154,7 +156,7 @@ $agenda-appointment-text-color: null !default;
154
156
  $scheduler-panel-text-color: $base-text-color !default;
155
157
  $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default;
156
158
  $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
157
- $scheduler-workspace-month-text-color: lighten($base-text-color, 38.5%) !default;
159
+ $scheduler-workspace-month-text-color: $month-text-color-dark !default;
158
160
  $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default;
159
161
  $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
160
162
  $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default;
@@ -195,7 +197,7 @@ $agenda-appointment-text-color: null !default;
195
197
  $scheduler-panel-text-color: $base-text-color !default;
196
198
  $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default;
197
199
  $scheduler-dd-appointment-hover-text-color: #fff !default;
198
- $scheduler-workspace-month-text-color: lighten($base-text-color, 38.5%) !default;
200
+ $scheduler-workspace-month-text-color: $month-text-color-dark !default;
199
201
  $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default;
200
202
  $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
201
203
  $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default;
@@ -234,7 +236,7 @@ $agenda-appointment-text-color: null !default;
234
236
  $scheduler-panel-text-color: $base-header-color !default;
235
237
  $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default;
236
238
  $scheduler-dd-appointment-hover-text-color: $base-text-color !default;
237
- $scheduler-workspace-month-text-color: lighten($base-text-color, 38.5%) !default;
239
+ $scheduler-workspace-month-text-color: $month-text-color-dark !default;
238
240
  $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default;
239
241
  $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
240
242
  $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default;
@@ -314,7 +316,7 @@ $agenda-appointment-text-color: null !default;
314
316
  $scheduler-panel-text-color: $base-text-color !default;
315
317
  $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default;
316
318
  $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
317
- $scheduler-workspace-month-text-color: lighten($base-text-color, 38.5%) !default;
319
+ $scheduler-workspace-month-text-color: $month-text-color-light !default;
318
320
  $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default;
319
321
  $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
320
322
  $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default;
@@ -352,7 +354,7 @@ $agenda-appointment-text-color: null !default;
352
354
  $scheduler-panel-text-color: $base-text-color !default;
353
355
  $scheduler-time-indicator-color: lighten($scheduler-current-time-cell-color, 15%) !default;
354
356
  $scheduler-dd-appointment-hover-text-color: $base-inverted-text-color !default;
355
- $scheduler-workspace-month-text-color: lighten($base-text-color, 38.5%) !default;
357
+ $scheduler-workspace-month-text-color: $month-text-color-light !default;
356
358
  $scheduler-dropdown-appointment-date-color: lighten($base-text-color, 38.5%) !default;
357
359
  $scheduler-workspace-active-cell-color: $scheduler-accent-border-color !default;
358
360
  $scheduler-workspace-hovered-cell-color: $scheduler-workspace-month-text-color !default;
@@ -376,7 +378,6 @@ $agenda-appointment-text-color: null !default;
376
378
  }
377
379
 
378
380
  $scheduler-appointment-active-color: $scheduler-appointment-start-color;
379
-
380
381
  $never-used: collector((
381
382
  "$scheduler-base-border-color": $scheduler-base-border-color,
382
383
  "$scheduler-accent-border-color": $scheduler-accent-border-color,