@syncfusion/ej2-treegrid 27.2.3 → 28.1.35

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 (113) hide show
  1. package/README.md +2 -2
  2. package/dist/ej2-treegrid.min.js +3 -3
  3. package/dist/ej2-treegrid.umd.min.js +3 -3
  4. package/dist/ej2-treegrid.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-treegrid.es2015.js +579 -256
  6. package/dist/es6/ej2-treegrid.es2015.js.map +1 -1
  7. package/dist/es6/ej2-treegrid.es5.js +583 -256
  8. package/dist/es6/ej2-treegrid.es5.js.map +1 -1
  9. package/dist/global/ej2-treegrid.min.js +3 -3
  10. package/dist/global/ej2-treegrid.min.js.map +1 -1
  11. package/dist/global/index.d.ts +2 -2
  12. package/package.json +10 -10
  13. package/src/treegrid/actions/batch-edit.js +58 -56
  14. package/src/treegrid/actions/context-menu.js +3 -1
  15. package/src/treegrid/actions/reorder.d.ts +1 -1
  16. package/src/treegrid/actions/reorder.js +5 -17
  17. package/src/treegrid/actions/rowdragdrop.d.ts +286 -14
  18. package/src/treegrid/actions/rowdragdrop.js +447 -161
  19. package/src/treegrid/actions/virtual-scroll.js +5 -0
  20. package/src/treegrid/base/data.js +22 -5
  21. package/src/treegrid/base/treegrid.d.ts +1 -0
  22. package/src/treegrid/base/treegrid.js +28 -11
  23. package/src/treegrid/renderer/virtual-tree-content-render.js +16 -6
  24. package/styles/bds-lite.css +714 -0
  25. package/styles/bds-lite.scss +18 -0
  26. package/styles/bds.css +734 -0
  27. package/styles/bds.scss +19 -0
  28. package/styles/bootstrap-dark-lite.css +36 -0
  29. package/styles/bootstrap-dark.css +42 -6
  30. package/styles/bootstrap-lite.css +36 -0
  31. package/styles/bootstrap.css +42 -6
  32. package/styles/bootstrap4-lite.css +36 -0
  33. package/styles/bootstrap4.css +42 -6
  34. package/styles/bootstrap5-dark-lite.css +36 -0
  35. package/styles/bootstrap5-dark.css +42 -6
  36. package/styles/bootstrap5-lite.css +36 -0
  37. package/styles/bootstrap5.3-lite.css +36 -0
  38. package/styles/bootstrap5.3.css +42 -6
  39. package/styles/bootstrap5.css +42 -6
  40. package/styles/fabric-dark-lite.css +36 -0
  41. package/styles/fabric-dark.css +42 -6
  42. package/styles/fabric-lite.css +36 -0
  43. package/styles/fabric.css +42 -6
  44. package/styles/fluent-dark-lite.css +36 -0
  45. package/styles/fluent-dark.css +43 -7
  46. package/styles/fluent-lite.css +36 -0
  47. package/styles/fluent.css +43 -7
  48. package/styles/fluent2-lite.css +36 -0
  49. package/styles/fluent2.css +44 -8
  50. package/styles/highcontrast-light-lite.css +36 -0
  51. package/styles/highcontrast-light.css +42 -6
  52. package/styles/highcontrast-lite.css +37 -1
  53. package/styles/highcontrast.css +44 -8
  54. package/styles/material-dark-lite.css +36 -0
  55. package/styles/material-dark.css +42 -6
  56. package/styles/material-lite.css +36 -0
  57. package/styles/material.css +42 -6
  58. package/styles/material3-dark-lite.css +36 -0
  59. package/styles/material3-dark.css +42 -6
  60. package/styles/material3-lite.css +36 -0
  61. package/styles/material3.css +42 -6
  62. package/styles/tailwind-dark-lite.css +36 -0
  63. package/styles/tailwind-dark.css +42 -6
  64. package/styles/tailwind-lite.css +36 -0
  65. package/styles/tailwind.css +42 -6
  66. package/styles/tailwind3-lite.css +527 -0
  67. package/styles/tailwind3-lite.scss +18 -0
  68. package/styles/tailwind3.css +547 -0
  69. package/styles/tailwind3.scss +19 -0
  70. package/styles/treegrid/_bigger.scss +45 -41
  71. package/styles/treegrid/_icons.scss +7 -0
  72. package/styles/treegrid/_layout.scss +39 -2
  73. package/styles/treegrid/_tailwind3-definition.scss +24 -0
  74. package/styles/treegrid/bds.css +734 -0
  75. package/styles/treegrid/bds.scss +19 -0
  76. package/styles/treegrid/bootstrap-dark.css +42 -6
  77. package/styles/treegrid/bootstrap.css +42 -6
  78. package/styles/treegrid/bootstrap4.css +42 -6
  79. package/styles/treegrid/bootstrap5-dark.css +42 -6
  80. package/styles/treegrid/bootstrap5.3.css +42 -6
  81. package/styles/treegrid/bootstrap5.css +42 -6
  82. package/styles/treegrid/fabric-dark.css +42 -6
  83. package/styles/treegrid/fabric.css +42 -6
  84. package/styles/treegrid/fluent-dark.css +43 -7
  85. package/styles/treegrid/fluent.css +43 -7
  86. package/styles/treegrid/fluent2.css +44 -8
  87. package/styles/treegrid/highcontrast-light.css +42 -6
  88. package/styles/treegrid/highcontrast.css +44 -8
  89. package/styles/treegrid/icons/_bootstrap-dark.scss +7 -0
  90. package/styles/treegrid/icons/_bootstrap.scss +7 -0
  91. package/styles/treegrid/icons/_bootstrap4.scss +7 -0
  92. package/styles/treegrid/icons/_bootstrap5.3.scss +7 -0
  93. package/styles/treegrid/icons/_bootstrap5.scss +7 -0
  94. package/styles/treegrid/icons/_fabric-dark.scss +7 -0
  95. package/styles/treegrid/icons/_fabric.scss +7 -0
  96. package/styles/treegrid/icons/_fluent.scss +7 -0
  97. package/styles/treegrid/icons/_fluent2.scss +7 -0
  98. package/styles/treegrid/icons/_highcontrast-light.scss +7 -0
  99. package/styles/treegrid/icons/_highcontrast.scss +7 -0
  100. package/styles/treegrid/icons/_material-dark.scss +7 -0
  101. package/styles/treegrid/icons/_material.scss +7 -0
  102. package/styles/treegrid/icons/_material3.scss +7 -0
  103. package/styles/treegrid/icons/_tailwind-dark.scss +7 -0
  104. package/styles/treegrid/icons/_tailwind.scss +7 -0
  105. package/styles/treegrid/icons/_tailwind3.scss +44 -0
  106. package/styles/treegrid/material-dark.css +42 -6
  107. package/styles/treegrid/material.css +42 -6
  108. package/styles/treegrid/material3-dark.css +42 -6
  109. package/styles/treegrid/material3.css +42 -6
  110. package/styles/treegrid/tailwind-dark.css +42 -6
  111. package/styles/treegrid/tailwind.css +42 -6
  112. package/styles/treegrid/tailwind3.css +547 -0
  113. package/styles/treegrid/tailwind3.scss +19 -0
@@ -0,0 +1,547 @@
1
+
2
+
3
+
4
+
5
+ /* stylelint-disable property-no-vendor-prefix */
6
+ /* stylelint-disable */
7
+ .e-filled.e-float-input.e-error label.e-float-text,
8
+ .e-filled.e-float-input.e-control-wrapper.e-error label.e-float-text,
9
+ .e-filled.e-float-input.e-error input:focus ~ label.e-float-text,
10
+ .e-filled.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
11
+ .e-filled.e-float-input.e-error textarea:focus ~ label.e-float-text,
12
+ .e-filled.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text,
13
+ .e-filled.e-float-input.e-error.e-input-focus input ~ label.e-float-text,
14
+ .e-filled.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text {
15
+ color: var(--color-sf-danger) !important;
16
+ }
17
+
18
+ .e-popup.e-ddl {
19
+ border-radius: 4px;
20
+ -webkit-box-shadow: none;
21
+ box-shadow: none;
22
+ margin-top: 3px;
23
+ }
24
+ .e-popup.e-ddl .e-input-group {
25
+ width: auto;
26
+ }
27
+ .e-popup.e-ddl .e-input-group input {
28
+ line-height: 15px;
29
+ }
30
+
31
+ .e-popup.e-ddl .e-dropdownbase {
32
+ min-height: 26px;
33
+ }
34
+
35
+ .e-popup.e-ddl .e-filter-parent .e-input-group {
36
+ display: -webkit-box;
37
+ display: -ms-flexbox;
38
+ display: flex;
39
+ width: auto;
40
+ }
41
+ .e-popup.e-ddl .e-filter-parent .e-input-group .e-back-icon {
42
+ border: 0;
43
+ }
44
+
45
+ .e-input-group.e-control-wrapper.e-ddl .e-input[readonly],
46
+ .e-float-input.e-control-wrapper.e-ddl input[readonly] {
47
+ background: transparent;
48
+ }
49
+
50
+ .e-input-group.e-control-wrapper.e-ddl.e-readonly .e-input[readonly],
51
+ .e-float-input.e-control-wrapper.e-ddl.e-readonly input[readonly] {
52
+ background: var(--color-sf-content-bg-color-alt2);
53
+ }
54
+
55
+ .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
56
+ .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
57
+ .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:active,
58
+ .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-ddl-icon:hover,
59
+ .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active,
60
+ .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:hover,
61
+ .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
62
+ .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:hover {
63
+ background: transparent;
64
+ color: var(--color-sf-icon-color);
65
+ }
66
+
67
+ .e-input-group.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
68
+ .e-input-group.e-control-wrapper.e-ddl .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
69
+ .e-float-input.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon,
70
+ .e-float-input.e-control-wrapper.e-ddl input[readonly] ~ span.e-input-group-icon.e-ddl-icon {
71
+ background: transparent;
72
+ color: var(--color-sf-icon-color);
73
+ }
74
+
75
+ .e-input-group.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
76
+ .e-input-group.e-control-wrapper.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
77
+ .e-float-input.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon,
78
+ .e-float-input.e-control-wrapper.e-ddl.e-readonly .e-input[readonly] ~ span.e-input-group-icon.e-ddl-icon.e-search-icon {
79
+ background: var(--color-sf-content-bg-color-alt2);
80
+ }
81
+
82
+ .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon,
83
+ .e-input-group.e-disabled.e-ddl .e-control.e-dropdownlist ~ .e-input-group-icon,
84
+ .e-control.e-dropdownlist .e-input-group.e-disabled.e-ddl .e-input-group-icon,
85
+ .e-control.e-dropdownlist .e-input-group.e-ddl .e-input-group-icon {
86
+ border: 0;
87
+ }
88
+
89
+ .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-input-group-icon:active,
90
+ .e-control.e-dropdownlist .e-input-group:not(.e-disabled) .e-input-group-icon:active,
91
+ .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-back-icon:active,
92
+ .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon:active {
93
+ -webkit-box-shadow: none;
94
+ box-shadow: none;
95
+ }
96
+
97
+ .e-ddl.e-popup .e-input-group:not(.e-disabled) .e-clear-icon {
98
+ background: transparent;
99
+ display: -webkit-box;
100
+ display: -ms-flexbox;
101
+ display: flex;
102
+ position: relative;
103
+ }
104
+
105
+ .e-ddl.e-popup .e-filter-parent .e-input-group,
106
+ .e-ddl.e-popup .e-filter-parent {
107
+ background: var(--color-sf-content-bg-color);
108
+ }
109
+
110
+ .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
111
+ font-size: 14px;
112
+ }
113
+
114
+ /* stylelint-disable property-no-vendor-prefix */
115
+ @-webkit-keyframes material-spinner-rotate {
116
+ 0% {
117
+ -webkit-transform: rotate(0);
118
+ transform: rotate(0);
119
+ }
120
+ 100% {
121
+ -webkit-transform: rotate(360deg);
122
+ transform: rotate(360deg);
123
+ }
124
+ }
125
+ @keyframes material-spinner-rotate {
126
+ 0% {
127
+ -webkit-transform: rotate(0);
128
+ transform: rotate(0);
129
+ }
130
+ 100% {
131
+ -webkit-transform: rotate(360deg);
132
+ transform: rotate(360deg);
133
+ }
134
+ }
135
+ @-webkit-keyframes fabric-spinner-rotate {
136
+ 0% {
137
+ -webkit-transform: rotate(0);
138
+ transform: rotate(0);
139
+ }
140
+ 100% {
141
+ -webkit-transform: rotate(360deg);
142
+ transform: rotate(360deg);
143
+ }
144
+ }
145
+ @keyframes fabric-spinner-rotate {
146
+ 0% {
147
+ -webkit-transform: rotate(0);
148
+ transform: rotate(0);
149
+ }
150
+ 100% {
151
+ -webkit-transform: rotate(360deg);
152
+ transform: rotate(360deg);
153
+ }
154
+ }
155
+ /* stylelint-disable */
156
+ .e-treegrid .e-indent::before,
157
+ .e-grid-menu .e-indent::before {
158
+ content: "\e810";
159
+ }
160
+ .e-treegrid .e-outdent::before,
161
+ .e-grid-menu .e-outdent::before {
162
+ content: "\e72a";
163
+ }
164
+
165
+ .e-treegrid .e-treegridexpand::before,
166
+ .e-treegrid .e-treegridcollapse::before {
167
+ content: "\e748";
168
+ }
169
+ .e-treegrid .e-toolbar-item .e-expand::before {
170
+ content: "\e7c9";
171
+ }
172
+ .e-treegrid .e-toolbar-item .e-collapse::before {
173
+ content: "\e80f";
174
+ }
175
+ .e-treegrid .e-toolbar-item .e-indent::before {
176
+ content: "\e810";
177
+ }
178
+ .e-treegrid .e-toolbar-item .e-outdent::before {
179
+ content: "\e72a";
180
+ }
181
+
182
+ .e-treelistgrid.e-print-grid-layout .e-treegridexpand::before,
183
+ .e-treelistgrid.e-print-grid-layout .e-treegridcollapse::before {
184
+ content: "\e748";
185
+ }
186
+
187
+ .e-treegrid .e-icons.e-none::before {
188
+ content: "";
189
+ }
190
+ .e-treegrid .e-grid.e-default.e-draggable:not(.e-rtl) tr td.e-rowdragdrop.e-childborder:first-child:not(.e-dropbottom) {
191
+ border-left: 2px dashed #4f46e5;
192
+ }
193
+ .e-treegrid .e-grid:not(.e-grid-min-height) .e-gridcontent tr.e-row.e-summaryrow .e-rowcell:empty {
194
+ height: auto;
195
+ }
196
+ .e-treegrid .e-gridheader .e-headercell .e-css.e-hierarchycheckbox {
197
+ height: 20px;
198
+ vertical-align: middle;
199
+ }
200
+ .e-treegrid .e-treegridexpand::before,
201
+ .e-treegrid .e-treegridcollapse::before {
202
+ text-align: center;
203
+ vertical-align: unset;
204
+ }
205
+ .e-treegrid tr.e-childrow-hidden {
206
+ display: none;
207
+ }
208
+ .e-treegrid .e-rowcell:not(.e-gridclip) .e-treecolumn-container {
209
+ display: block;
210
+ overflow: hidden;
211
+ text-overflow: ellipsis;
212
+ }
213
+ .e-treegrid .e-rowcell:not(.e-gridclip) .e-treecolumn-container span.e-treecell {
214
+ display: contents;
215
+ overflow: hidden;
216
+ text-overflow: ellipsis;
217
+ }
218
+ .e-treegrid .e-templatecell .e-treecolumn-container span {
219
+ vertical-align: middle;
220
+ }
221
+ .e-treegrid .e-treegridexpand:hover::before,
222
+ .e-treegrid .e-treegridcollapse:hover::before {
223
+ color: var(--color-sf-icon-color-hover);
224
+ }
225
+ .e-treegrid .e-rtl .e-treegridcollapse {
226
+ -webkit-transform: scale(-1);
227
+ transform: scale(-1);
228
+ }
229
+ .e-treegrid .e-treegridexpand {
230
+ -webkit-transform: rotate(90deg);
231
+ transform: rotate(90deg);
232
+ }
233
+ .e-treegrid .e-treerowexpanded:not(.e-hiddenrow) {
234
+ display: table-row;
235
+ }
236
+ .e-treegrid .e-treerowcollapsed {
237
+ display: none;
238
+ }
239
+ .e-treegrid .e-treecheckbox-container {
240
+ display: block;
241
+ overflow: hidden;
242
+ text-overflow: ellipsis;
243
+ }
244
+ .e-treegrid .e-treecheckbox-container :not(.e-treecheckbox) {
245
+ white-space: nowrap;
246
+ }
247
+ .e-treegrid .e-treecheckbox {
248
+ overflow: hidden;
249
+ text-overflow: ellipsis;
250
+ vertical-align: middle;
251
+ }
252
+ .e-treegrid .e-treecolumn-container span {
253
+ display: inline-block;
254
+ vertical-align: text-bottom;
255
+ }
256
+ .e-treegrid .e-templatecell .e-treecolumn-container span {
257
+ vertical-align: middle;
258
+ }
259
+ .e-treegrid .e-cloneproperties .e-treecolumn-container span {
260
+ vertical-align: text-top;
261
+ }
262
+ .e-treegrid .e-cloneproperties .e-rowcell:not(.e-gridclip) .errorValue .e-treecolumn-container {
263
+ display: table-row;
264
+ }
265
+ .e-treegrid .e-hierarchycheckbox .e-frame {
266
+ height: 16px;
267
+ width: 16px;
268
+ }
269
+ .e-treegrid .e-checkselection .e-frozenheader .e-rowcell,
270
+ .e-treegrid .e-checkselection .e-movableheader .e-rowcell,
271
+ .e-treegrid .e-checkselection .e-frozencontent .e-rowcell,
272
+ .e-treegrid .e-checkselection .e-movablecontent .e-rowcell {
273
+ line-height: 21px;
274
+ }
275
+ .e-treegrid .e-treegridexpand,
276
+ .e-treegrid .e-treegridcollapse {
277
+ color: var(--color-sf-icon-color);
278
+ cursor: pointer;
279
+ font-size: 16px;
280
+ height: 16px;
281
+ padding: 0;
282
+ text-align: center;
283
+ vertical-align: text-bottom;
284
+ width: 16px;
285
+ }
286
+ .e-treegrid .e-treecell {
287
+ display: table-cell;
288
+ line-height: normal;
289
+ }
290
+ .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container, .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecheckbox-container {
291
+ white-space: nowrap;
292
+ }
293
+ .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container .e-treecell {
294
+ display: inline-block;
295
+ white-space: normal;
296
+ word-wrap: break-word;
297
+ }
298
+ .e-treegrid .e-grid.e-wrap .e-cloneproperties .e-rowcell .e-treecolumn-container .e-treecell {
299
+ display: inline-block;
300
+ white-space: nowrap;
301
+ word-wrap: break-word;
302
+ }
303
+ .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecheckbox-container .e-treecheckbox {
304
+ display: inline-block;
305
+ white-space: normal;
306
+ word-wrap: break-word;
307
+ }
308
+ .e-treegrid .e-grid.e-wrap .e-treecolumn-container span {
309
+ vertical-align: middle;
310
+ }
311
+ .e-treegrid.e-grid.e-print-grid-layout .e-icons {
312
+ display: inline-block;
313
+ }
314
+ .e-treegrid .e-treecheckselect,
315
+ .e-treegrid .e-treeselectall {
316
+ margin: 0;
317
+ opacity: 0;
318
+ position: absolute;
319
+ width: 0;
320
+ }
321
+ .e-treegrid .e-detailheadercell,
322
+ .e-treegrid .e-headercontent .e-table .e-detail-intent,
323
+ .e-treegrid .e-gridcontent .e-table .e-detail-intent,
324
+ .e-treegrid .e-table .e-detailrow .e-detailindentcell,
325
+ .e-treegrid .e-table .e-detailrowexpand,
326
+ .e-treegrid .e-table .e-detailrowcollapse,
327
+ .e-treegrid tr.e-detailrow.e-childrow-hidden {
328
+ display: none;
329
+ }
330
+ .e-treegrid .e-icons.e-errorelem {
331
+ padding-left: 10px;
332
+ display: inline-block;
333
+ vertical-align: text-bottom;
334
+ }
335
+ .e-treegrid .e-errorelem::before {
336
+ color: var(--color-sf-danger);
337
+ content: "\e839";
338
+ -webkit-transform: rotate(180deg);
339
+ transform: rotate(180deg);
340
+ }
341
+ .e-treegrid .e-gridcontent td.e-childborder {
342
+ border-color: var(--color-sf-primary);
343
+ border-width: 2px 0 0;
344
+ -webkit-box-shadow: 0 1px 0 0 var(--color-sf-primary);
345
+ box-shadow: 0 1px 0 0 var(--color-sf-primary);
346
+ position: relative;
347
+ z-index: 1;
348
+ }
349
+ .e-treegrid .e-gridcontent td.e-childborder.e-leftfreeze {
350
+ position: sticky;
351
+ }
352
+ .e-treegrid .e-gridcontent td.e-rowcell.e-childborder.e-dragborder,
353
+ .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom.e-dragborder td.e-rowdragdrop.e-dropbottom.e-dragborder {
354
+ -webkit-box-shadow: 0 1px 0 0 var(--color-sf-primary);
355
+ box-shadow: 0 1px 0 0 var(--color-sf-primary);
356
+ }
357
+ .e-treegrid .e-gridcontent td.e-rowcell.e-dragborder,
358
+ .e-treegrid .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder,
359
+ .e-treegrid .e-gridcontent .e-rowdragdrop.e-dragborder {
360
+ -webkit-box-shadow: 0 0 0 0;
361
+ box-shadow: 0 0 0 0;
362
+ }
363
+ .e-treegrid .e-gridcontent td.e-childborder:first-child {
364
+ border-left: 2px dashed #4f46e5;
365
+ -webkit-box-shadow: 0 1px 0 0 var(--color-sf-primary);
366
+ box-shadow: 0 1px 0 0 var(--color-sf-primary);
367
+ position: relative;
368
+ z-index: 1;
369
+ }
370
+ .e-treegrid .e-gridcontent td.e-rowcell.e-childborder:last-child,
371
+ .e-treegrid .e-gridcontent td.e-lastrowcell.e-childborder:last-child {
372
+ border-right: 2px dashed #4f46e5;
373
+ }
374
+ .e-treegrid .e-gridcontent td.e-lastrowcell.e-childborder {
375
+ border-width: 2px 0;
376
+ }
377
+ .e-treegrid .e-gridcontent td.e-lastrowcell.e-childborder:first-child {
378
+ border-left: 2px dashed #4f46e5;
379
+ }
380
+ .e-treegrid .e-gridcontent td.e-dropbottom:first-child,
381
+ .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom,
382
+ .e-treegrid .e-gridcontent td.e-dropbottom {
383
+ -webkit-box-shadow: 0 1px 0 0 var(--color-sf-primary);
384
+ box-shadow: 0 1px 0 0 var(--color-sf-primary);
385
+ position: relative;
386
+ z-index: 1;
387
+ }
388
+ .e-treegrid .e-gridcontent td.e-dropbottom:first-child.e-leftfreeze,
389
+ .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom.e-leftfreeze,
390
+ .e-treegrid .e-gridcontent td.e-dropbottom.e-leftfreeze {
391
+ position: sticky;
392
+ }
393
+ .e-treegrid .e-gridcontent td.e-droptop:first-child,
394
+ .e-treegrid .e-gridcontent td.e-rowcell.e-droptop {
395
+ border-top-color: var(--color-sf-primary);
396
+ border-width: 2px 0 0;
397
+ }
398
+ .e-treegrid .e-gridcontent td.e-lastrowcell.e-dropbottom {
399
+ border-bottom-color: var(--color-sf-primary);
400
+ }
401
+ .e-treegrid .e-gridcontent td.e-rowdragdrop.e-droptop.e-dragborder {
402
+ -webkit-box-shadow: 0 0 0 0;
403
+ box-shadow: 0 0 0 0;
404
+ }
405
+ .e-treegrid .e-gridcontent .e-gridheader .e-firstrow-dragborder {
406
+ height: 1px;
407
+ }
408
+ .e-treegrid .e-gridcontent .e-lastrow-dragborder {
409
+ height: 0;
410
+ }
411
+ .e-treegrid .e-gridheader .e-firstrow-dragborder,
412
+ .e-treegrid .e-droptop .e-lastrow-dragborder,
413
+ .e-treegrid .e-gridheader .e-firstrow-dragborder tr:first-child.e-dropbottom {
414
+ height: 0;
415
+ }
416
+ .e-treegrid .e-treegrid-relative {
417
+ position: relative;
418
+ }
419
+ .e-treegrid .e-gridheader .e-firstrow-border,
420
+ .e-treegrid .e-gridcontent .e-lastrow-border {
421
+ background-color: var(--color-sf-primary);
422
+ bottom: 0;
423
+ display: none;
424
+ height: 1px;
425
+ position: absolute;
426
+ z-index: 1;
427
+ }
428
+ .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowcell.e-childborder,
429
+ .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowdragdrop.e-childborder {
430
+ border-bottom: 2px dashed #4f46e5;
431
+ border-top: 2px dashed #4f46e5;
432
+ -webkit-box-shadow: 0 0 0 0 var(--color-sf-primary);
433
+ box-shadow: 0 0 0 0 var(--color-sf-primary);
434
+ }
435
+ .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowcell.e-droptop,
436
+ .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowdragdrop.e-droptop {
437
+ border-top: 2px solid #4f46e5;
438
+ }
439
+ .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder {
440
+ border-bottom: 2px dashed #4f46e5;
441
+ border-top: 2px dashed #4f46e5;
442
+ -webkit-box-shadow: 0 0 0 0 var(--color-sf-primary);
443
+ box-shadow: 0 0 0 0 var(--color-sf-primary);
444
+ }
445
+ .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder {
446
+ border-bottom: 2px dashed #4f46e5;
447
+ border-top: 2px dashed #4f46e5;
448
+ -webkit-box-shadow: 0 0 0 0 var(--color-sf-primary);
449
+ box-shadow: 0 0 0 0 var(--color-sf-primary);
450
+ }
451
+ .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
452
+ border-bottom: 2px solid #4f46e5;
453
+ -webkit-box-shadow: 0 0 0 0 var(--color-sf-primary);
454
+ box-shadow: 0 0 0 0 var(--color-sf-primary);
455
+ }
456
+ .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-droptop {
457
+ border-top: 2px solid #4f46e5;
458
+ -webkit-box-shadow: 0 0 0 0 var(--color-sf-primary);
459
+ box-shadow: 0 0 0 0 var(--color-sf-primary);
460
+ }
461
+ .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
462
+ border-bottom: 2px solid #4f46e5;
463
+ -webkit-box-shadow: 0 0 0 0 var(--color-sf-primary);
464
+ box-shadow: 0 0 0 0 var(--color-sf-primary);
465
+ }
466
+ .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-droptop {
467
+ border-top: 2px solid #4f46e5;
468
+ -webkit-box-shadow: 0 0 0 0 var(--color-sf-primary);
469
+ box-shadow: 0 0 0 0 var(--color-sf-primary);
470
+ }
471
+ .e-treegrid .e-grid.e-rtl .e-gridheader .e-firstrow-dragborder,
472
+ .e-treegrid .e-grid.e-rtl .e-droptop .e-lastrow-dragborder {
473
+ height: 0;
474
+ }
475
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder {
476
+ border-color: var(--color-sf-primary);
477
+ border-width: 2px 0 2px 0;
478
+ position: relative;
479
+ z-index: 1;
480
+ }
481
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder.e-leftfreeze {
482
+ position: sticky;
483
+ }
484
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-rowcell.e-dragborder,
485
+ .e-treegrid .e-grid.e-rtl .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder,
486
+ .e-treegrid .e-grid.e-rtl .e-gridcontent .e-rowdragdrop.e-dragborder {
487
+ -webkit-box-shadow: 0 0 0 0;
488
+ box-shadow: 0 0 0 0;
489
+ }
490
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder:first-child {
491
+ border-right: 2px dashed #4f46e5;
492
+ -webkit-box-shadow: 0 1px 0 0 var(--color-sf-primary);
493
+ box-shadow: 0 1px 0 0 var(--color-sf-primary);
494
+ position: relative;
495
+ z-index: 1;
496
+ }
497
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-rowcell.e-childborder:last-child,
498
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-lastrowcell.e-childborder:first-child {
499
+ border-left: 2px dashed #4f46e5;
500
+ }
501
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-lastrowcell.e-childborder {
502
+ border-width: 2px 0;
503
+ }
504
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-lastrowcell.e-childborder:last-child {
505
+ border-right: 2px dashed #4f46e5;
506
+ }
507
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-droptop:first-child,
508
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-rowcell.e-droptop {
509
+ border-top-color: var(--color-sf-primary);
510
+ border-width: 2px 0 0;
511
+ }
512
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-lastrowcell.e-dropbottom {
513
+ border-bottom-color: var(--color-sf-primary);
514
+ }
515
+
516
+ .e-treelistgrid.e-print-grid-layout .e-icons.e-none::before {
517
+ content: "";
518
+ }
519
+ .e-treelistgrid.e-print-grid-layout .e-treecolumn-container .e-icons:not(.e-frame) {
520
+ display: inline-block;
521
+ }
522
+ .e-treelistgrid.e-print-grid-layout .e-treegridexpand {
523
+ -webkit-transform: rotate(90deg);
524
+ transform: rotate(90deg);
525
+ }
526
+
527
+ /* stylelint-disable-line no-empty-source */
528
+ .e-bigger .e-treegrid .e-grid .e-treegridexpand,
529
+ .e-bigger .e-treegrid .e-grid .e-treegridcollapse {
530
+ font-size: 20px;
531
+ height: 20px;
532
+ width: 20px;
533
+ vertical-align: bottom;
534
+ }
535
+ .e-bigger .e-treegrid .e-grid .e-hierarchycheckbox {
536
+ padding-left: 2px;
537
+ }
538
+ .e-bigger .e-treegrid .e-grid .e-hierarchycheckbox .e-frame {
539
+ height: 24px;
540
+ width: 24px;
541
+ }
542
+ .e-bigger .e-treegrid .e-grid .e-treecell {
543
+ line-height: 20px;
544
+ }
545
+ .e-bigger .e-treegrid .e-grid .e-treecolumn-container span {
546
+ vertical-align: middle;
547
+ }
@@ -0,0 +1,19 @@
1
+ @import 'ej2-base/styles/definition/tailwind3.scss';
2
+ @import 'ej2-inputs/styles/input/tailwind3-definition.scss';
3
+ @import 'ej2-inputs/styles/numerictextbox/tailwind3-definition.scss';
4
+ @import 'ej2-buttons/styles/button/tailwind3-definition.scss';
5
+ @import 'ej2-buttons/styles/radio-button/tailwind3-definition.scss';
6
+ @import 'ej2-buttons/styles/check-box/tailwind3-definition.scss';
7
+ @import 'ej2-dropdowns/styles/auto-complete/tailwind3-definition.scss';
8
+ @import 'ej2-dropdowns/styles/drop-down-list/tailwind3-definition.scss';
9
+ @import 'ej2-popups/styles/dialog/tailwind3-definition.scss';
10
+ @import 'ej2-popups/styles/spinner/tailwind3-definition.scss';
11
+ @import 'ej2-popups/styles/tooltip/tailwind3-definition.scss';
12
+ @import 'ej2-calendars/styles/datepicker/tailwind3-definition.scss';
13
+ @import 'ej2-calendars/styles/datetimepicker/tailwind3-definition.scss';
14
+ @import 'ej2-navigations/styles/toolbar/tailwind3-definition.scss';
15
+ @import 'ej2-navigations/styles/context-menu/tailwind3-definition.scss';
16
+ @import 'treegrid/tailwind3-definition.scss';
17
+ @import 'treegrid/icons/tailwind3.scss';
18
+ @import 'treegrid/all.scss';
19
+ @import 'treegrid/bigger.scss';
@@ -1,59 +1,63 @@
1
1
  @include export-module('tree-bigger') {
2
2
  .e-bigger {
3
3
  .e-treegrid {
4
+ .e-grid {
4
5
 
5
- .e-treegridexpand,
6
- .e-treegridcollapse {
7
- font-size: $treegrid-bigger-icon-font-size;
8
- height: $treegrid-bigger-icon-size;
9
- width: $treegrid-bigger-icon-size;
10
- vertical-align: bottom;
11
- }
6
+
7
+ .e-treegridexpand,
8
+ .e-treegridcollapse {
9
+ font-size: $treegrid-bigger-icon-font-size;
10
+ height: $treegrid-bigger-icon-size;
11
+ width: $treegrid-bigger-icon-size;
12
+ vertical-align: bottom;
13
+ }
12
14
 
13
- .e-treegridexpand {
14
- @if $skin-name =='highcontrast' {
15
- vertical-align: middle;
15
+ .e-treegridexpand {
16
+ @if $skin-name =='highcontrast' {
17
+ vertical-align: middle;
18
+ }
16
19
  }
17
- }
18
20
 
19
- .e-hierarchycheckbox {
20
- padding-left: 2px;
21
- }
21
+ .e-hierarchycheckbox {
22
+ padding-left: 2px;
23
+ }
22
24
 
23
- .e-hierarchycheckbox .e-frame {
24
- @if $skin-name =='bootstrap' or $skin-name =='boostrap-dark' or $skin-name =='fabric-dark' or $skin-name =='fabric' or $skin-name =='highcontrast' or $skin-name =='FluentUI' or $theme-name =='fluentui-dark' {
25
- font-size: 12px;
26
- line-height: 12px;
27
- padding: 2px 0;
25
+ .e-hierarchycheckbox .e-frame {
26
+ @if $skin-name =='bootstrap' or $skin-name =='boostrap-dark' or $skin-name =='fabric-dark' or $skin-name =='fabric' or $skin-name =='highcontrast' or $skin-name =='FluentUI' or $theme-name =='fluentui-dark' {
27
+ font-size: 12px;
28
+ line-height: 12px;
29
+ padding: 2px 0;
30
+ }
31
+ height: $treegrid-frame-bigger-icon-height;
32
+ width: $treegrid-frame-bigger-icon-width;
28
33
  }
29
- height: $treegrid-frame-bigger-icon-height;
30
- width: $treegrid-frame-bigger-icon-width;
31
- }
32
34
 
33
- .e-treecell {
34
- line-height: $treegrid-bigger-icon-size;
35
- }
35
+ .e-treecell {
36
+ line-height: $treegrid-bigger-icon-size;
37
+ }
36
38
 
37
- .e-treecolumn-container span {
38
- vertical-align: middle;
39
- }
39
+ .e-treecolumn-container span {
40
+ vertical-align: middle;
41
+ }
40
42
 
41
- .e-row[aria-expanded = 'true'] .e-treecell {
42
- @if $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
43
- font-size: 16px;
44
- font-weight: bold;
43
+ .e-row[aria-expanded = 'true'] .e-treecell {
44
+ @if $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
45
+ font-size: 16px;
46
+ font-weight: bold;
47
+ }
45
48
  }
46
- }
47
49
 
48
- .e-gridcontent .e-rowcell {
49
- @if $skin-name == 'fluent2' or $skin-name == 'fluent2-dark' {
50
- line-height: 19px;
50
+ .e-gridcontent .e-rowcell {
51
+ @if $skin-name =='fluent2' or $skin-name =='fluent2-dark' {
52
+ line-height: 19px;
53
+ }
51
54
  }
52
- }
53
- .e-gridheader {
54
- .e-headercell .e-css.e-hierarchycheckbox {
55
- @if $skin-name == 'fluent2' or $skin-name == 'fluent2-dark'{
56
- bottom: 12px;
55
+
56
+ .e-gridheader {
57
+ .e-headercell .e-css.e-hierarchycheckbox {
58
+ @if $skin-name =='fluent2' or $skin-name =='fluent2-dark' {
59
+ bottom: 12px;
60
+ }
57
61
  }
58
62
  }
59
63
  }
@@ -34,4 +34,11 @@
34
34
  }
35
35
  }
36
36
  }
37
+
38
+ .e-treelistgrid.e-grid.e-print-grid-layout {
39
+ .e-treegridexpand::before,
40
+ .e-treegridcollapse::before {
41
+ content: $treegrid-right-arrow-icon;
42
+ }
43
+ }
37
44
  }