devextreme-themebuilder 25.1.1-alpha → 25.1.2-beta

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 (132) hide show
  1. package/data/metadata/dx-theme-builder-metadata.js +503 -33
  2. package/data/scss/widgets/base/_htmlEditor.scss +26 -0
  3. package/data/scss/widgets/base/_icons.scss +29 -1
  4. package/data/scss/widgets/base/_loadIndicator.scss +83 -9
  5. package/data/scss/widgets/base/_menuBase.scss +1 -2
  6. package/data/scss/widgets/base/_mixins.scss +9 -0
  7. package/data/scss/widgets/base/_recurrenceEditor.scss +0 -22
  8. package/data/scss/widgets/base/cardView/_index.scss +36 -0
  9. package/data/scss/widgets/base/cardView/_variables.scss +6 -0
  10. package/data/scss/widgets/base/cardView/column_chooser/_index.scss +24 -0
  11. package/data/scss/widgets/base/cardView/column_chooser/_variables.scss +3 -0
  12. package/data/scss/widgets/base/cardView/content_view/_index.scss +8 -0
  13. package/data/scss/widgets/base/cardView/content_view/content/_index.scss +13 -0
  14. package/data/scss/widgets/base/cardView/content_view/content/_variables.scss +3 -0
  15. package/data/scss/widgets/base/cardView/content_view/content/card/_index.scss +23 -0
  16. package/data/scss/widgets/base/cardView/content_view/content/card/_variables.scss +7 -0
  17. package/data/scss/widgets/base/cardView/content_view/content/card/content/_index.scss +61 -0
  18. package/data/scss/widgets/base/cardView/content_view/content/card/content/_variables.scss +15 -0
  19. package/data/scss/widgets/base/cardView/content_view/content/card/cover/_index.scss +30 -0
  20. package/data/scss/widgets/base/cardView/content_view/content/card/cover/_variables.scss +4 -0
  21. package/data/scss/widgets/base/cardView/content_view/content/card/header/_index.scss +55 -0
  22. package/data/scss/widgets/base/cardView/content_view/content/card/header/_variables.scss +5 -0
  23. package/data/scss/widgets/base/cardView/content_view/no_data/_index.scss +28 -0
  24. package/data/scss/widgets/base/cardView/content_view/no_data/_variables.scss +7 -0
  25. package/data/scss/widgets/base/cardView/filter_panel/_index.scss +7 -0
  26. package/data/scss/widgets/base/cardView/header_panel/_index.scss +56 -0
  27. package/data/scss/widgets/base/cardView/header_panel/_variables.scss +13 -0
  28. package/data/scss/widgets/base/cardView/header_panel/item/_index.scss +39 -0
  29. package/data/scss/widgets/base/cardView/header_panel/item/_variables.scss +18 -0
  30. package/data/scss/widgets/base/chat/_index.scss +2 -0
  31. package/data/scss/widgets/base/chat/_mixins.scss +2 -0
  32. package/data/scss/widgets/base/chat/layout/chat/_index.scss +20 -0
  33. package/data/scss/widgets/base/chat/layout/chat-alertlist/_index.scss +0 -6
  34. package/data/scss/widgets/base/chat/layout/chat-alertlist/_mixins.scss +4 -10
  35. package/data/scss/widgets/base/chat/layout/chat-confirmationpopup/_index.scss +30 -0
  36. package/data/scss/widgets/base/chat/layout/chat-confirmationpopup/_mixins.scss +24 -0
  37. package/data/scss/widgets/base/chat/layout/chat-messagebox/_index.scss +6 -1
  38. package/data/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss +4 -0
  39. package/data/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_index.scss +37 -0
  40. package/data/scss/widgets/base/chat/layout/chat-messagebox-editing-preview/_mixins.scss +33 -0
  41. package/data/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss +25 -0
  42. package/data/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss +13 -0
  43. package/data/scss/widgets/base/chat/layout/chat-messagegroup/_index.scss +11 -0
  44. package/data/scss/widgets/base/chat/layout/chat-messagegroup/_mixins.scss +16 -1
  45. package/data/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss +34 -2
  46. package/data/scss/widgets/base/informer/_index.scss +25 -0
  47. package/data/scss/widgets/base/informer/_mixins.scss +29 -0
  48. package/data/scss/widgets/base/scheduler/_common.scss +10 -0
  49. package/data/scss/widgets/base/scheduler/layout/_header.scss +12 -18
  50. package/data/scss/widgets/base/scheduler/views/_index.scss +0 -1
  51. package/data/scss/widgets/base/stepper/_mixins.scss +0 -1
  52. package/data/scss/widgets/base/stepper/layout/connector/_index.scss +25 -17
  53. package/data/scss/widgets/base/stepper/layout/connector/_mixins.scss +16 -4
  54. package/data/scss/widgets/base/stepper/layout/step/_index.scss +4 -17
  55. package/data/scss/widgets/base/stepper/layout/step/_mixins.scss +189 -118
  56. package/data/scss/widgets/base/stepper/layout/stepper/_mixins.scss +2 -2
  57. package/data/scss/widgets/base/switch/_index.scss +1 -4
  58. package/data/scss/widgets/fluent/_index.scss +2 -0
  59. package/data/scss/widgets/fluent/cardView/_colors.scss +165 -0
  60. package/data/scss/widgets/fluent/cardView/_index.scss +5 -0
  61. package/data/scss/widgets/fluent/cardView/_sizes.scss +146 -0
  62. package/data/scss/widgets/fluent/chat/_colors.scss +7 -0
  63. package/data/scss/widgets/fluent/chat/_index.scss +25 -2
  64. package/data/scss/widgets/fluent/chat/_sizes.scss +31 -7
  65. package/data/scss/widgets/fluent/common/_mixins.scss +0 -4
  66. package/data/scss/widgets/fluent/contextMenu/_index.scss +14 -12
  67. package/data/scss/widgets/fluent/contextMenu/_sizes.scss +9 -3
  68. package/data/scss/widgets/fluent/gridBase/_index.scss +7 -4
  69. package/data/scss/widgets/fluent/htmlEditor/_index.scss +18 -0
  70. package/data/scss/widgets/fluent/htmlEditor/_sizes.scss +9 -0
  71. package/data/scss/widgets/fluent/informer/_colors.scss +15 -0
  72. package/data/scss/widgets/fluent/informer/_index.scss +16 -0
  73. package/data/scss/widgets/fluent/informer/_sizes.scss +24 -0
  74. package/data/scss/widgets/fluent/list/_index.scss +1 -0
  75. package/data/scss/widgets/fluent/list/_sizes.scss +0 -3
  76. package/data/scss/widgets/fluent/loadIndicator/_colors.scss +12 -0
  77. package/data/scss/widgets/fluent/loadIndicator/_index.scss +53 -47
  78. package/data/scss/widgets/fluent/recurrenceEditor/_index.scss +2 -4
  79. package/data/scss/widgets/fluent/recurrenceEditor/_sizes.scss +8 -2
  80. package/data/scss/widgets/fluent/scheduler/_index.scss +1 -1
  81. package/data/scss/widgets/fluent/scheduler/_sizes.scss +8 -3
  82. package/data/scss/widgets/fluent/stepper/_colors.scss +89 -29
  83. package/data/scss/widgets/fluent/stepper/_index.scss +24 -9
  84. package/data/scss/widgets/fluent/stepper/_sizes.scss +10 -5
  85. package/data/scss/widgets/generic/_index.scss +2 -1
  86. package/data/scss/widgets/generic/cardView/_colors.scss +205 -0
  87. package/data/scss/widgets/generic/cardView/_index.scss +5 -0
  88. package/data/scss/widgets/generic/cardView/_sizes.scss +155 -0
  89. package/data/scss/widgets/generic/chat/_colors.scss +7 -0
  90. package/data/scss/widgets/generic/chat/_index.scss +26 -2
  91. package/data/scss/widgets/generic/chat/_sizes.scss +32 -9
  92. package/data/scss/widgets/generic/gridBase/_index.scss +19 -2
  93. package/data/scss/widgets/generic/htmlEditor/_index.scss +25 -0
  94. package/data/scss/widgets/generic/htmlEditor/_sizes.scss +9 -0
  95. package/data/scss/widgets/generic/informer/_colors.scss +47 -0
  96. package/data/scss/widgets/generic/informer/_index.scss +16 -0
  97. package/data/scss/widgets/generic/informer/_sizes.scss +26 -0
  98. package/data/scss/widgets/generic/loadIndicator/_colors.scss +27 -2
  99. package/data/scss/widgets/generic/loadIndicator/_index.scss +25 -17
  100. package/data/scss/widgets/generic/recurrenceEditor/_index.scss +8 -0
  101. package/data/scss/widgets/generic/recurrenceEditor/_sizes.scss +8 -2
  102. package/data/scss/widgets/generic/scheduler/_index.scss +1 -1
  103. package/data/scss/widgets/generic/scheduler/_sizes.scss +7 -4
  104. package/data/scss/widgets/generic/stepper/_colors.scss +179 -15
  105. package/data/scss/widgets/generic/stepper/_index.scss +24 -9
  106. package/data/scss/widgets/generic/stepper/_sizes.scss +14 -9
  107. package/data/scss/widgets/generic/tabPanel/_index.scss +9 -0
  108. package/data/scss/widgets/material/_index.scss +2 -0
  109. package/data/scss/widgets/material/cardView/_colors.scss +167 -0
  110. package/data/scss/widgets/material/cardView/_index.scss +5 -0
  111. package/data/scss/widgets/material/cardView/_sizes.scss +162 -0
  112. package/data/scss/widgets/material/chat/_colors.scss +7 -0
  113. package/data/scss/widgets/material/chat/_index.scss +25 -2
  114. package/data/scss/widgets/material/chat/_sizes.scss +36 -7
  115. package/data/scss/widgets/material/common/_mixins.scss +1 -0
  116. package/data/scss/widgets/material/gridBase/_index.scss +13 -2
  117. package/data/scss/widgets/material/htmlEditor/_index.scss +31 -0
  118. package/data/scss/widgets/material/htmlEditor/_sizes.scss +12 -0
  119. package/data/scss/widgets/material/informer/_colors.scss +15 -0
  120. package/data/scss/widgets/material/informer/_index.scss +16 -0
  121. package/data/scss/widgets/material/informer/_sizes.scss +24 -0
  122. package/data/scss/widgets/material/loadIndicator/_colors.scss +15 -0
  123. package/data/scss/widgets/material/loadIndicator/_index.scss +52 -39
  124. package/data/scss/widgets/material/recurrenceEditor/_index.scss +2 -4
  125. package/data/scss/widgets/material/recurrenceEditor/_sizes.scss +8 -2
  126. package/data/scss/widgets/material/scheduler/_index.scss +1 -1
  127. package/data/scss/widgets/material/scheduler/_sizes.scss +8 -3
  128. package/data/scss/widgets/material/stepper/_colors.scss +103 -23
  129. package/data/scss/widgets/material/stepper/_index.scss +24 -9
  130. package/data/scss/widgets/material/stepper/_sizes.scss +12 -7
  131. package/package.json +1 -1
  132. package/data/scss/widgets/base/stepper/layout/step-list/_mixins.scss +0 -1
@@ -0,0 +1,165 @@
1
+ @use '../colors' as *;
2
+ @use '../../base/cardView/variables' as *;
3
+ @use '../../base/cardView/header_panel/variables' as *;
4
+ @use '../../base/cardView/header_panel/item/variables' as *;
5
+ @use '../../base/cardView/content_view/content/card/variables' as *;
6
+ @use '../../base/cardView/content_view/content/card/header/variables' as *;
7
+ @use '../../base/cardView/content_view/content/card/cover/variables' as *;
8
+ @use '../../base/cardView/content_view/content/card/content/variables' as *;
9
+ @use '../../base/cardView/content_view/content/variables' as *;
10
+ @use '../../base/cardView/content_view/no_data/variables' as *;
11
+ @use '../../base/cardView/column_chooser/variables' as *;
12
+
13
+ // adduse
14
+
15
+ $cardview-fluent-background-color: null !default;
16
+
17
+ $cardview-fluent-header-filter-icon-empty-color: null !default;
18
+ $cardview-fluent-header-filter-icon-selected-color: null !default;
19
+
20
+ $cardview-fluent-dropzone-text-color: null !default;
21
+ $cardview-fluent-dropzone-background-color: null !default;
22
+ $cardview-fluent-dropzone-border-color: null !default;
23
+
24
+ $cardview-fluent-header-item-border-color: null !default;
25
+ $cardview-fluent-header-item-background-color: null !default;
26
+ $cardview-fluent-header-item-hovered-background-color: null !default;
27
+ $cardview-fluent-header-item-hovered-border-color: null !default;
28
+
29
+ $cardview-fluent-header-item-prohibition-icon-color: null !default;
30
+
31
+ $cardview-fluent-nodata-text-color: null !default;
32
+ $cardview-fluent-nodata-icon-container-background-color: null !default;
33
+
34
+ $cardview-fluent-card-content-field-value-highlight-color: null !default;
35
+ $cardview-fluent-card-content-field-value-highlight-background: null !default;
36
+ $cardview-fluent-card-content-field-value-highlight-border-radius: null !default;
37
+ $cardview-fluent-card-content-field-value-highlight-padding: null !default;
38
+ $cardview-fluent-card-content-field-value-highlight-font-weight: null !default;
39
+ $cardview-fluent-card-content-field-value-highlight-box-shadow: null !default;
40
+
41
+ $cardview-fluent-card-cover-background-color: null !default;
42
+
43
+ $cardview-fluent-card-cover-noimage-background-color: null !default;
44
+ $cardview-fluent-card-cover-noimage-icon-color: null !default;
45
+
46
+ $cardview-fluent-card-selection-background-color: null !default;
47
+
48
+ $cardview-fluent-card-border-color: null !default;
49
+ $cardview-fluent-card-background-color: null !default;
50
+
51
+ @if $mode == 'light' {
52
+ $cardview-fluent-background-color: $base-typography-bg !default;
53
+
54
+ $cardview-fluent-header-filter-icon-empty-color: $base-text-color !default;
55
+ $cardview-fluent-header-filter-icon-selected-color: $base-accent !default;
56
+
57
+ $cardview-fluent-dropzone-text-color: $base-accent !default;
58
+ $cardview-fluent-dropzone-background-color: lighten(desaturate(adjust-hue($base-accent, 4), 11.38), 55.49) !default;
59
+ $cardview-fluent-dropzone-border-color: $base-accent !default;
60
+
61
+ $cardview-fluent-header-item-border-color: $base-border-color !default;
62
+ $cardview-fluent-header-item-background-color: darken($base-bg, 5.88) !default;
63
+ $cardview-fluent-header-item-hovered-background-color: darken($cardview-fluent-header-item-background-color, 1.96) !default;
64
+ $cardview-fluent-header-item-hovered-border-color: darken($cardview-fluent-header-item-border-color, 13.73) !default;
65
+
66
+ $cardview-fluent-header-item-prohibition-icon-color: darken(saturate(adjust-hue($base-danger, -4), 22.80), 9.61) !default;
67
+
68
+ $cardview-fluent-nodata-text-color: lighten($base-text-color, 23.92) !default;
69
+ $cardview-fluent-nodata-icon-container-background-color: darken($base-bg, 9.80) !default;
70
+
71
+ $cardview-fluent-card-content-field-value-highlight-color: $base-text-color !default;
72
+ $cardview-fluent-card-content-field-value-highlight-background: $base-warning !default;
73
+ $cardview-fluent-card-content-field-value-highlight-border-radius: 5px;
74
+ $cardview-fluent-card-content-field-value-highlight-padding: .125em 0.2em;
75
+ $cardview-fluent-card-content-field-value-highlight-font-weight: 500;
76
+ $cardview-fluent-card-content-field-value-highlight-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
77
+
78
+ $cardview-fluent-card-cover-background-color: #FFF !default;
79
+
80
+ $cardview-fluent-card-cover-noimage-background-color: darken($base-bg, 5.88) !default;
81
+ $cardview-fluent-card-cover-noimage-icon-color: lighten($base-text-color, 23.92) !default;
82
+
83
+ $cardview-fluent-card-selection-background-color: lighten(desaturate(adjust-hue($base-accent, 4), 11.38), 55.49) !default;
84
+ $cardview-fluent-dropzone-background-color: lighten(desaturate(adjust-hue($base-accent, 4), 11.38), 55.49) !default;
85
+
86
+ $cardview-fluent-card-border-color: $base-border-color !default;
87
+ $cardview-fluent-card-background-color: $base-bg !default;
88
+ }
89
+
90
+ @if $mode == "dark" {
91
+ $cardview-fluent-background-color: $base-typography-bg !default;
92
+
93
+ $cardview-fluent-header-filter-icon-empty-color: $base-text-color !default;
94
+ $cardview-fluent-header-filter-icon-selected-color: $base-accent !default;
95
+
96
+ $cardview-fluent-dropzone-text-color: $base-accent !default;
97
+ $cardview-fluent-dropzone-background-color: darken(desaturate(adjust-hue($base-accent, -4), 14.69), 49.41) !default;
98
+ $cardview-fluent-dropzone-border-color: $base-accent !default;
99
+
100
+ $cardview-fluent-header-item-border-color: $base-border-color !default;
101
+ $cardview-fluent-header-item-background-color: darken($base-bg, 12.16) !default;
102
+ $cardview-fluent-header-item-hovered-background-color: lighten($cardview-fluent-header-item-background-color, 18.04) !default;
103
+ $cardview-fluent-header-item-hovered-border-color: lighten($cardview-fluent-header-item-border-color, 11.76) !default;
104
+
105
+ $cardview-fluent-header-item-prohibition-icon-color: darken(desaturate($base-danger, 0.27), 7.45) !default;
106
+
107
+ $cardview-fluent-nodata-text-color: darken($base-text-color, 32.16) !default;
108
+ $cardview-fluent-nodata-icon-container-background-color: lighten($base-bg, 3.92) !default;
109
+
110
+ $cardview-fluent-card-content-field-value-highlight-color: $base-text-color !default;
111
+ $cardview-fluent-card-content-field-value-highlight-background: $base-warning !default;
112
+ $cardview-fluent-card-content-field-value-highlight-border-radius: 5px;
113
+ $cardview-fluent-card-content-field-value-highlight-padding: .125em 0.2em;
114
+ $cardview-fluent-card-content-field-value-highlight-font-weight: 500;
115
+ $cardview-fluent-card-content-field-value-highlight-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
116
+
117
+ $cardview-fluent-card-cover-background-color: #FFF !default;
118
+
119
+ $cardview-fluent-card-cover-noimage-background-color: darken($base-bg, 12.16) !default;
120
+ $cardview-fluent-card-cover-noimage-icon-color: darken($base-text-color, 32.16) !default;
121
+
122
+ $cardview-fluent-card-selection-background-color: darken(desaturate(adjust-hue($base-accent, -4), 14.69), 49.41) !default;
123
+
124
+ $cardview-fluent-card-border-color: $base-border-color !default;
125
+ $cardview-fluent-card-background-color: $base-bg !default;
126
+ }
127
+
128
+ $cardview-background-color: $cardview-fluent-background-color !default;
129
+ $cardview-link-color: $base-accent !default;
130
+
131
+ $cardview-header-filter-icon-empty-color: $cardview-fluent-header-filter-icon-empty-color !default;
132
+ $cardview-header-filter-icon-selected-color: $cardview-fluent-header-filter-icon-selected-color !default;
133
+
134
+ $cardview-dropzone-text-color: $cardview-fluent-dropzone-text-color !default;
135
+ $cardview-dropzone-background-color: $cardview-fluent-dropzone-background-color !default;
136
+ $cardview-dropzone-border-color: $cardview-fluent-dropzone-border-color !default;
137
+
138
+ $cardview-header-item-border-color: $cardview-fluent-header-item-border-color !default;
139
+ $cardview-header-item-background-color: $cardview-fluent-header-item-background-color !default;
140
+ $cardview-header-item-hovered-background-color: $cardview-fluent-header-item-hovered-background-color !default;
141
+ $cardview-header-item-hovered-border-color: $cardview-fluent-header-item-hovered-border-color !default;
142
+
143
+ $cardview-header-item-prohibition-icon-color: $cardview-fluent-header-item-prohibition-icon-color !default;
144
+
145
+ $cardview-nodata-text-color: $cardview-fluent-nodata-text-color !default;
146
+ $cardview-nodata-icon-container-background-color: $cardview-fluent-nodata-icon-container-background-color !default;
147
+
148
+ $cardview-card-content-field-value-highlight-color: $cardview-fluent-card-content-field-value-highlight-color !default;
149
+ $cardview-card-content-field-value-highlight-background: $cardview-fluent-card-content-field-value-highlight-background !default;
150
+ $cardview-card-content-field-value-highlight-border-radius: $cardview-fluent-card-content-field-value-highlight-border-radius !default;
151
+ $cardview-card-content-field-value-highlight-padding: $cardview-fluent-card-content-field-value-highlight-padding !default;
152
+ $cardview-card-content-field-value-highlight-font-weight: $cardview-fluent-card-content-field-value-highlight-font-weight !default;
153
+ $cardview-card-content-field-value-highlight-box-shadow: $cardview-fluent-card-content-field-value-highlight-box-shadow !default;
154
+
155
+ $cardview-card-cover-background-color: $cardview-fluent-card-cover-background-color !default;
156
+
157
+ $cardview-card-cover-noimage-background-color: $cardview-fluent-card-cover-noimage-background-color !default;
158
+ $cardview-card-cover-noimage-icon-color: $cardview-fluent-card-cover-noimage-icon-color !default;
159
+
160
+ $cardview-card-selection-background-color: $cardview-fluent-card-selection-background-color !default;
161
+
162
+ $cardview-card-border-color: $cardview-fluent-card-border-color !default;
163
+ $cardview-card-background-color: $cardview-fluent-card-background-color !default;
164
+
165
+ $cardview-columnchooser-message-color: lighten($base-text-color, 26%) !default;
@@ -0,0 +1,5 @@
1
+ @use 'colors';
2
+ @use 'sizes';
3
+ @use '../../base/cardView/index' as *;
4
+
5
+ // adduse
@@ -0,0 +1,146 @@
1
+ @use "../sizes" as *;
2
+ @use '../../base/cardView/variables' as *;
3
+ @use '../../base/cardView/header_panel/variables' as *;
4
+ @use '../../base/cardView/header_panel/item/variables' as *;
5
+ @use '../../base/cardView/content_view/content/card/variables' as *;
6
+ @use '../../base/cardView/content_view/content/card/header/variables' as *;
7
+ @use '../../base/cardView/content_view/content/card/cover/variables' as *;
8
+ @use '../../base/cardView/content_view/content/card/content/variables' as *;
9
+ @use '../../base/cardView/content_view/content/variables' as *;
10
+ @use '../../base/cardView/content_view/no_data/variables' as *;
11
+ @use '../../base/cardView/column_chooser/variables' as *;
12
+
13
+ // adduse
14
+
15
+ $cardview-fluent-sizes-64: null;
16
+ $cardview-fluent-sizes-48: null;
17
+ $cardview-fluent-sizes-40: null;
18
+ $cardview-fluent-paddings-24: null;
19
+ $cardview-fluent-paddings-12: null;
20
+ $cardview-fluent-paddings-8: null;
21
+ $cardview-fluent-paddings-6: null;
22
+ $cardview-fluent-text-size-16: null;
23
+ $cardview-fluent-border-radius-8: null;
24
+ $cardview-fluent-gaps-16: null;
25
+ $cardview-fluent-gaps-24: null;
26
+
27
+ $cardview-fluent-card-header-height: null;
28
+
29
+ $cardview-fluent-headerpanel-text-empty-line-height: null;
30
+ $cardview-fluent-headerpanel-dropzone-height: null;
31
+ $cardview-fluent-headerpanel-dropzone-top: null;
32
+ $cardview-fluent-column-chooser-select-all-item-horizontal-padding: null;
33
+
34
+ $cardview-fluent-headers-container-gap: null;
35
+ $cardview-fluent-headerpanel-vertical-margin: null;
36
+
37
+ $cardview-fluent-content-card-cover-max-height-default: null;
38
+ $cardview-fluent-headerpanel-content-gap: null;
39
+ $cardview-fluent-card-content-row-gap: null;
40
+
41
+ @if $size == "default" {
42
+ $cardview-fluent-sizes-64: 64px;
43
+ $cardview-fluent-sizes-48: 48px;
44
+ $cardview-fluent-sizes-40: 40px;
45
+ $cardview-fluent-paddings-24: 24px;
46
+ $cardview-fluent-paddings-12: 12px;
47
+ $cardview-fluent-paddings-8: 8px;
48
+ $cardview-fluent-paddings-6: 6px;
49
+ $cardview-fluent-text-size-16: 16px;
50
+ $cardview-fluent-border-radius-8: 8px;
51
+ $cardview-fluent-gaps-16: 16px;
52
+ $cardview-fluent-gaps-24: 24px;
53
+
54
+ $cardview-fluent-card-header-height: 48px;
55
+
56
+ $cardview-fluent-headerpanel-text-empty-line-height: 32px;
57
+ $cardview-fluent-headerpanel-dropzone-height: 44px;
58
+ $cardview-fluent-headerpanel-dropzone-top: -6px;
59
+ $cardview-fluent-column-chooser-select-all-item-horizontal-padding: 14px;
60
+
61
+ $cardview-fluent-headers-container-gap: 0;
62
+ $cardview-fluent-headerpanel-vertical-margin: 8px;
63
+
64
+ $cardview-fluent-content-card-cover-max-height-default: 180px;
65
+ $cardview-fluent-headerpanel-content-gap: 8px;
66
+ $cardview-fluent-card-content-row-gap: 8px;
67
+ }
68
+ @else if $size == "compact" {
69
+ $cardview-fluent-sizes-64: 48px;
70
+ $cardview-fluent-sizes-48: 32px;
71
+ $cardview-fluent-sizes-40: 32px;
72
+ $cardview-fluent-paddings-24: 16px;
73
+ $cardview-fluent-paddings-12: 8px;
74
+ $cardview-fluent-paddings-8: 6px;
75
+ $cardview-fluent-paddings-6: 4px;
76
+ $cardview-fluent-text-size-16: 14px;
77
+ $cardview-fluent-border-radius-8: 6px;
78
+ $cardview-fluent-gaps-16: 12px;
79
+ $cardview-fluent-gaps-24: 16px;
80
+
81
+ $cardview-fluent-card-header-height: 36px;
82
+
83
+ $cardview-fluent-headerpanel-text-empty-line-height: 24px;
84
+ $cardview-fluent-headerpanel-dropzone-height: 32px;
85
+ $cardview-fluent-headerpanel-dropzone-top: -4px;
86
+ $cardview-fluent-column-chooser-select-all-item-horizontal-padding: 12px;
87
+
88
+ $cardview-fluent-headers-container-gap: 4px;
89
+ $cardview-fluent-headerpanel-vertical-margin: 4px;
90
+
91
+ $cardview-fluent-content-card-cover-max-height-default: 140px;
92
+ $cardview-fluent-headerpanel-content-gap: 4px;
93
+ $cardview-fluent-card-content-row-gap: 4px;
94
+ }
95
+
96
+ $cardview-border-radius: 16px !default;
97
+ $cardview-gap: $cardview-fluent-gaps-24 !default;
98
+ $cardview-padding: $cardview-fluent-paddings-24 !default;
99
+
100
+ $cardview-card-header-height: $cardview-card-header-height !default;
101
+
102
+ $cardview-headers-container-gap: $cardview-fluent-headers-container-gap !default;
103
+ $cardview-headerpanel-vertical-margin: $cardview-fluent-headerpanel-vertical-margin !default;
104
+ $cardview-headerpanel-content-gap: $cardview-fluent-headerpanel-content-gap !default;
105
+ $cardview-headerpanel-text-empty-line-height: $cardview-fluent-headerpanel-text-empty-line-height !default;
106
+
107
+ $cardview-headerpanel-dropzone-height: $cardview-fluent-headerpanel-dropzone-height;
108
+ $cardview-headerpanel-dropzone-top: $cardview-fluent-headerpanel-dropzone-top;
109
+ $cardview-dropzone-border-width: 1.5px !default;
110
+ $cardview-dropzone-border-radius: $cardview-fluent-border-radius-8 !default;
111
+
112
+ $cardview-header-item-border-width: 1px !default;
113
+ $cardview-header-item-border-radius: 6px !default;
114
+ $cardview-header-item-padding-horizontal: $cardview-fluent-paddings-8 !default;
115
+ $cardview-header-item-padding-vertical: $cardview-fluent-paddings-6 !default;
116
+ $cardview-header-item-icon-size: $fluent-base-icon-size !default;
117
+
118
+ $cardview-nodata-icon-container-size: $cardview-fluent-sizes-64 !default;
119
+ $cardview-nodata-icon-container-margin: $cardview-fluent-paddings-12 !default;
120
+ $cardview-nodata-icon-size: $cardview-fluent-sizes-40 !default;
121
+
122
+ $cardview-content-column-gap: $cardview-fluent-gaps-16 !default;
123
+ $cardview-content-row-gap: $cardview-fluent-gaps-16 !default;
124
+
125
+ $cardview-card-border-size: 1px !default;
126
+ $cardview-card-min-width: 250px !default;
127
+ $cardview-card-border-radius: $cardview-fluent-border-radius-8 !default;
128
+
129
+ $cardview-card-cover-noimage-icon-size: $cardview-fluent-sizes-48 !default;
130
+
131
+ $cardview-card-content-padding: $cardview-fluent-paddings-12 !default;
132
+ $cardview-card-content-row-gap: $cardview-fluent-card-content-row-gap !default;
133
+ $cardview-card-content-cell-padding-vertical: $cardview-fluent-paddings-6 !default;
134
+ $cardview-card-content-cell-padding-horizontal: $cardview-fluent-paddings-12 !default;
135
+
136
+ $cardview-card-header-text-size: $cardview-fluent-text-size-16 !default;
137
+ $cardview-card-header-border-radius: $cardview-fluent-border-radius-8 !default;
138
+
139
+ $cardview-column-chooser-empty-message-horizontal-padding: $cardview-fluent-paddings-24 !default;
140
+ $cardview-column-chooser-select-all-item-horizontal-padding: $cardview-fluent-column-chooser-select-all-item-horizontal-padding !default;
141
+
142
+ $cardview-content-card-cover-max-height-default: $cardview-fluent-content-card-cover-max-height-default !default;
143
+
144
+ $cardview-card-header-selection-checkbox-padding-right: $cardview-fluent-paddings-12 !default;
145
+
146
+ $cardview-card-content-field-caption-font-weight: 600;
@@ -22,11 +22,14 @@ $chat-typingindicator-bubble-bg-color: getCustomVar(("$chat-typingindicator-bubb
22
22
  @use "sass:color";
23
23
  @use "../sizes" as *;
24
24
  @use "../colors" as *;
25
+ @use "../textEditor/colors" as *;
25
26
 
26
27
  // adduse
27
28
  $chat-background-color: $base-bg !default;
28
29
  $chat-border-color: $base-border-color !default;
29
30
  $chat-messagebox-border-color: $chat-border-color !default;
31
+ $chat-message-editing-preview-accent-color: $base-accent !default;
32
+ $chat-message-editing-preview-cancel-button-color: $texteditor-label-color !default;
30
33
  $chat-avatar-color: $base-text-color !default;
31
34
  $chat-avatar-background-color: $base-active-bg !default;
32
35
  $chat-bubble-color-primary: $base-text-color !default;
@@ -87,6 +90,10 @@ $chat-typingindicator-circle-bg-color: null !default;
87
90
  $chat-typingindicator-circle-bg-color-center: lighten($base-bg, 43.92) !default;
88
91
  }
89
92
  $chat-typingindicator-bubble-bg-color: $chat-bubble-background-color-secondary !default;
93
+
94
+ $chat-messagelist-contextmenu-delete-button-color: $base-danger !default;
95
+ $chat-messagelist-contextmenu-delete-button-focused-color: $base-danger !default;
96
+ $chat-messagelist-contextmenu-delete-button-focused-bg: $base-hover-bg !default;
90
97
  $never-used: collector((
91
98
  "$chat-background-color": $chat-background-color,
92
99
  "$chat-border-color": $chat-border-color,
@@ -22,8 +22,6 @@
22
22
  $chat-alerts-padding-inline,
23
23
  $chat-alert-padding-block,
24
24
  $chat-alerts-row-gap,
25
- $chat-alert-icon-size,
26
- $chat-alert-content-column-gap,
27
25
  );
28
26
  @include chat-messagebox(
29
27
  $chat-messagebox-padding,
@@ -40,6 +38,8 @@
40
38
  $chat-bubble-color-primary,
41
39
  $chat-bubble-background-color-primary,
42
40
  $chat-bubble-container-gap,
41
+ $chat-bubble-delete-gap,
42
+ $chat-bubble-delete-icon-size,
43
43
  );
44
44
  @include chat-messagegroup(
45
45
  $chat-messagegroup-gap,
@@ -50,6 +50,8 @@
50
50
  $chat-information-author-name-color,
51
51
  $chat-information-timestamp-color,
52
52
  $chat-information-gap,
53
+ $chat-information-icon-size,
54
+ $chat-information-edited-gap,
53
55
  );
54
56
  @include chat-messagelist-empty(
55
57
  $chat-messagelist-padding,
@@ -71,6 +73,11 @@
71
73
  $chat-messagelist-day-header-first-padding-top,
72
74
  $chat-messagelist-day-header-font-size,
73
75
  );
76
+ @include chat-messagelist-contextmenu(
77
+ $chat-messagelist-contextmenu-delete-button-color,
78
+ $chat-messagelist-contextmenu-delete-button-focused-color,
79
+ $chat-messagelist-contextmenu-delete-button-focused-bg,
80
+ );
74
81
  @include chat-typingindicator(
75
82
  $chat-typingindicator-template,
76
83
  $chat-typingindicator-padding,
@@ -88,3 +95,19 @@
88
95
  $chat-typingindicator-circle-bg-color,
89
96
  $chat-typingindicator-circle-bg-color-center,
90
97
  );
98
+ @include message-editing-preview(
99
+ $chat-message-editing-preview-content-padding-inline,
100
+ $chat-message-editing-preview-content-row-gap,
101
+ $chat-message-editing-preview-accent-color,
102
+ $chat-message-editing-preview-caption-font-size,
103
+ $chat-messagebox-padding,
104
+ $chat-message-editing-preview-border-width,
105
+ $chat-message-editing-preview-cancel-button-color,
106
+ );
107
+ @include chat-confirmation-popup(
108
+ $chat-border-radius,
109
+ $chat-confirmation-popup-content-padding,
110
+ 0 $chat-confirmation-popup-toolbar-padding-block,
111
+ $chat-confirmation-popup-toolbar-padding-inline,
112
+ $chat-confirmation-popup-toolbar-gap,
113
+ );
@@ -2,6 +2,8 @@
2
2
  @use "../textEditor/colors" as *;
3
3
  @use "../common/sizes" as *;
4
4
  @use "../sizes" as *;
5
+ @use "../typography/sizes" as *;
6
+ @use "../popup/sizes" as *;
5
7
 
6
8
  // adduse
7
9
 
@@ -9,6 +11,8 @@ $chat-border-radius: $base-border-radius * 3 !default;
9
11
  $chat-bubble-border-radius: null !default;
10
12
  $chat-bubble-padding: null !default;
11
13
  $chat-bubble-container-gap: 4px !default;
14
+ $chat-bubble-delete-gap: null !default;
15
+ $chat-bubble-delete-icon-size: null !default;
12
16
  $chat-messagebox-padding: null !default;
13
17
  $chat-messagebox-textarea-border-radius: $texteditor-input-border-radius !default;
14
18
  $chat-messagebox-gap: 8px !default;
@@ -22,14 +26,19 @@ $chat-messagegroup-alignment-start-template: auto 82.5% 1fr !default;
22
26
  $chat-messagegroup-alignment-start-gap: 12px !default;
23
27
  $chat-header-padding: 20px !default;
24
28
  $chat-information-font-size: 12px !default;
29
+ $chat-information-icon-size: 12px !default;
30
+ $chat-information-edited-gap: 2px !default;
25
31
 
26
- $chat-alert-icon-size: $fluent-base-icon-size !default;
27
- $chat-alert-content-column-gap: null !default;
28
32
  $chat-alerts-padding-block: null !default;
29
- $chat-alerts-padding-inline: null !default;
33
+ $chat-alerts-padding-inline: 8px !default;
30
34
  $chat-alerts-row-gap: null !default;
31
35
  $chat-alert-padding-block: null !default;
32
36
 
37
+ $chat-message-editing-preview-caption-font-size: $fluent-xs-font-size !default;
38
+ $chat-message-editing-preview-content-row-gap: null !default;
39
+ $chat-message-editing-preview-content-padding-inline: null !default;
40
+ $chat-message-editing-preview-border-width: 3px !default;
41
+
33
42
  $chat-messagelist-empty-icon-box-size: null !default;
34
43
  $chat-messagelist-empty-icon-size: null !default;
35
44
  $chat-messagelist-empty-icon-margin-bottom: null !default;
@@ -52,19 +61,27 @@ $chat-typingindicator-circle-size: null !default;
52
61
  $chat-typingindicator-circle-size-center: null !default;
53
62
  $chat-typingindicator-circle-border-radius: 999em !default;
54
63
 
64
+ $chat-confirmation-popup-content-padding: $fluent-popup-content-vertical-padding !default;
65
+ $chat-confirmation-popup-toolbar-padding-block: $fluent-popup-content-withtitle-bottom-padding !default;
66
+ $chat-confirmation-popup-toolbar-padding-inline: $fluent-popup-content-withtitle-top-padding !default;
67
+ $chat-confirmation-popup-toolbar-gap: null !default;
68
+
55
69
  @if $size == "default" {
56
70
  $chat-bubble-border-radius: $fluent-base-border-radius * 3 !default;
57
71
  $chat-bubble-padding: 8px 12px !default;
72
+ $chat-bubble-delete-gap: 4px !default;
73
+ $chat-bubble-delete-icon-size: 20px !default;
58
74
  $chat-messagebox-padding: 20px !default;
59
75
  $chat-messagelist-padding: 20px !default;
60
76
  $chat-messagegroup-padding: 24px !default;
61
77
 
62
- $chat-alert-content-column-gap: 6px !default;
63
78
  $chat-alerts-padding-block: 12px !default;
64
- $chat-alerts-padding-inline: 20px !default;
65
79
  $chat-alerts-row-gap: 2px !default;
66
80
  $chat-alert-padding-block: 6px !default;
67
81
 
82
+ $chat-message-editing-preview-content-padding-inline: 12px !default;
83
+ $chat-message-editing-preview-content-row-gap: 4px !default;
84
+
68
85
  $chat-messagelist-empty-icon-box-size: 64px !default;
69
86
  $chat-messagelist-empty-icon-size: 40px !default;
70
87
  $chat-messagelist-empty-icon-margin-bottom: 12px !default;
@@ -78,21 +95,26 @@ $chat-typingindicator-circle-border-radius: 999em !default;
78
95
  $chat-typingindicator-bubble-padding-inline: 20px !default;
79
96
  $chat-typingindicator-padding: $chat-messagegroup-padding !default;
80
97
  $chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default;
98
+
99
+ $chat-confirmation-popup-toolbar-gap: 8px !default;
81
100
  }
82
101
 
83
102
  @else if $size == "compact" {
84
103
  $chat-bubble-border-radius: $fluent-base-border-radius * 2 !default;
85
104
  $chat-bubble-padding: 6px 8px !default;
105
+ $chat-bubble-delete-gap: 2px !default;
106
+ $chat-bubble-delete-icon-size: 16px !default;
86
107
  $chat-messagebox-padding: 16px !default;
87
108
  $chat-messagelist-padding: 16px !default;
88
109
  $chat-messagegroup-padding: 12px !default;
89
110
 
90
- $chat-alert-content-column-gap: 4px !default;
91
111
  $chat-alerts-padding-block: 8px !default;
92
- $chat-alerts-padding-inline: 16px !default;
93
112
  $chat-alerts-row-gap: 2px !default;
94
113
  $chat-alert-padding-block: 5px !default;
95
114
 
115
+ $chat-message-editing-preview-content-padding-inline: 8px !default;
116
+ $chat-message-editing-preview-content-row-gap: 2px !default;
117
+
96
118
  $chat-messagelist-empty-icon-box-size: 48px !default;
97
119
  $chat-messagelist-empty-icon-size: 32px !default;
98
120
  $chat-messagelist-empty-icon-margin-bottom: 14px !default;
@@ -106,4 +128,6 @@ $chat-typingindicator-circle-border-radius: 999em !default;
106
128
  $chat-typingindicator-bubble-padding-inline: 12px !default;
107
129
  $chat-typingindicator-padding: $chat-messagegroup-padding !default;
108
130
  $chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default;
131
+
132
+ $chat-confirmation-popup-toolbar-gap: 4px !default;
109
133
  }
@@ -95,10 +95,6 @@ $badge-invalid-bg: $base-invalid-color;
95
95
 
96
96
  .dx-list-items {
97
97
  margin-inline: $fluent-list-item-margin-inline;
98
-
99
- .dx-list-select-checkbox {
100
- margin-inline: $fluent-list-item-checkbox-margin-inline;
101
- }
102
98
  }
103
99
 
104
100
  .dx-list-item,
@@ -18,11 +18,25 @@
18
18
  .dx-context-menu {
19
19
  color: $menu-color;
20
20
 
21
+ .dx-menu-items-container {
22
+ display: flex;
23
+ flex-direction: column;
24
+ padding: $fluent-context-menu-items-container-padding;
25
+ gap: $fluent-context-menu-items-container-gap;
26
+ }
27
+
21
28
  .dx-menu-item {
29
+ border-radius: $fluent-context-menu-item-border-radius;
30
+
22
31
  .dx-menu-item-content {
23
32
  display: flex;
24
33
  align-items: center;
25
34
  padding: $fluent-menu-vertical-padding $fluent-context-menu-horizontal-padding;
35
+ gap: $fluent-context-menu-item-content-gap;
36
+
37
+ .dx-menu-item-text {
38
+ padding-inline: $fluent-context-menu-item-text-padding-inline;
39
+ }
26
40
 
27
41
  .dx-menu-item-popout-container {
28
42
  inset-inline-end: $fluent-context-menu-horizontal-padding;
@@ -53,18 +67,6 @@
53
67
  &.dx-menu-item-has-submenu > .dx-menu-item-content {
54
68
  padding-inline-end: $fluent-menu-item-with-icon-horizontal-padding;
55
69
  }
56
-
57
- &.dx-menu-item-has-text {
58
- &.dx-menu-item-has-icon {
59
- .dx-icon {
60
- margin-inline-end: $fluent-menu-icon-to-text-offset;
61
- }
62
- }
63
- }
64
- }
65
-
66
- .dx-menu-items-container {
67
- padding: $fluent-context-menu-container-vertical-padding 0;
68
70
  }
69
71
 
70
72
  &.dx-overlay-content.dx-state-focused {
@@ -3,13 +3,19 @@
3
3
  // adduse
4
4
 
5
5
  $fluent-context-menu-horizontal-padding: null !default;
6
- $fluent-context-menu-container-vertical-padding: 4px !default;
7
6
  $fluent-context-menu-border-radius: $base-border-radius !default;
7
+ $fluent-context-menu-items-container-padding: 4px !default;
8
+ $fluent-context-menu-items-container-gap: 2px !default;
9
+ $fluent-context-menu-item-border-radius: $base-border-radius !default;
10
+ $fluent-context-menu-item-content-gap: null !default;
11
+ $fluent-context-menu-item-text-padding-inline: 2px !default;
8
12
 
9
13
  @if $size == "default" {
10
- $fluent-context-menu-horizontal-padding: 12px !default;
14
+ $fluent-context-menu-horizontal-padding: 6px !default;
15
+ $fluent-context-menu-item-content-gap: 6px !default;
11
16
  }
12
17
 
13
18
  @else if $size == "compact" {
14
- $fluent-context-menu-horizontal-padding: 8px !default;
19
+ $fluent-context-menu-horizontal-padding: 4px !default;
20
+ $fluent-context-menu-item-content-gap: 4px !default;
15
21
  }
@@ -997,7 +997,6 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
997
997
 
998
998
  .dx-row-removed:not(.dx-row-lines) > td {
999
999
  border-top: 1px solid $datagrid-hover-bg;
1000
- border-bottom: 1px solid $datagrid-hover-bg;
1001
1000
  }
1002
1001
 
1003
1002
  .dx-adaptive-detail-row {
@@ -1039,7 +1038,6 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
1039
1038
  &.dx-data-row {
1040
1039
  & > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid),
1041
1040
  & .dx-command-edit .dx-link {
1042
- background-color: $datagrid-row-focused-bg;
1043
1041
  color: $datagrid-row-focused-color;
1044
1042
 
1045
1043
  & .dx-#{$widget-name}-group-opened,
@@ -1047,6 +1045,10 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
1047
1045
  color: $datagrid-row-focused-color;
1048
1046
  }
1049
1047
  }
1048
+
1049
+ & > td:not(.dx-focused):not(.dx-cell-modified):not(.dx-#{$widget-name}-invalid) {
1050
+ background-color: $datagrid-row-focused-bg;
1051
+ }
1050
1052
  }
1051
1053
 
1052
1054
  &:not(.dx-row-lines) {
@@ -1139,7 +1141,7 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
1139
1141
  }
1140
1142
 
1141
1143
  &.dx-#{$widget-name}-sticky-columns {
1142
- .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
1144
+ .dx-data-row:not(.dx-row-lines, .dx-edit-row, .dx-selection, .dx-row-focused, .dx-row-removed) > td:not(.dx-editor-cell, .dx-master-detail-cell) {
1143
1145
  padding-top: $fluent-grid-base-cell-vertical-padding + 1px;
1144
1146
  }
1145
1147
 
@@ -1163,7 +1165,8 @@ $fluent-grid-base-group-panel-message-line-height: $fluent-button-text-line-heig
1163
1165
  }
1164
1166
  }
1165
1167
 
1166
- .dx-row.dx-row-lines.dx-edit-row > td {
1168
+ .dx-row.dx-row-lines.dx-edit-row > td,
1169
+ .dx-row-removed.dx-row-lines > td {
1167
1170
  border-top-width: 0;
1168
1171
  }
1169
1172
  }
@@ -14,6 +14,7 @@
14
14
  @use "../common/sizes" as *;
15
15
  @use "../fileUploader/sizes" as *;
16
16
  @use "../popup/sizes" as *;
17
+ @use "../../base/mixins" as *;
17
18
  @use "../../base/htmlEditor";
18
19
 
19
20
  // adduse
@@ -302,3 +303,20 @@
302
303
  .dx-formdialog.dx-dropdowneditor-overlay.dx-popup-wrapper .dx-overlay-content {
303
304
  box-shadow: $fluent-popup-content-shadow;
304
305
  }
306
+
307
+ .dx-aidialog-controls {
308
+ gap: $fluent-aidialog-selects-gap;
309
+
310
+ .dx-selectbox {
311
+ max-width: calc(50% - $fluent-aidialog-selects-gap * 0.5);
312
+ }
313
+ }
314
+
315
+ .dx-aidialog-content {
316
+ padding: $fluent-aidialog-content-padding;
317
+ gap: $fluent-aidialog-content-gap;
318
+ }
319
+
320
+ .dx-aidialog .dx-pending-indicator {
321
+ @include dx-pending-indicator-centered();
322
+ }