@syncfusion/ej2-treegrid 27.2.3 → 28.1.33

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 (96) 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 +566 -251
  6. package/dist/es6/ej2-treegrid.es2015.js.map +1 -1
  7. package/dist/es6/ej2-treegrid.es5.js +570 -251
  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 +27 -10
  23. package/src/treegrid/renderer/virtual-tree-content-render.js +4 -2
  24. package/styles/bds-lite.css +703 -0
  25. package/styles/bds-lite.scss +18 -0
  26. package/styles/bds.css +723 -0
  27. package/styles/bds.scss +19 -0
  28. package/styles/bootstrap-dark-lite.css +20 -0
  29. package/styles/bootstrap-dark.css +26 -6
  30. package/styles/bootstrap-lite.css +20 -0
  31. package/styles/bootstrap.css +26 -6
  32. package/styles/bootstrap4-lite.css +20 -0
  33. package/styles/bootstrap4.css +26 -6
  34. package/styles/bootstrap5-dark-lite.css +20 -0
  35. package/styles/bootstrap5-dark.css +26 -6
  36. package/styles/bootstrap5-lite.css +20 -0
  37. package/styles/bootstrap5.3-lite.css +20 -0
  38. package/styles/bootstrap5.3.css +26 -6
  39. package/styles/bootstrap5.css +26 -6
  40. package/styles/fabric-dark-lite.css +20 -0
  41. package/styles/fabric-dark.css +26 -6
  42. package/styles/fabric-lite.css +20 -0
  43. package/styles/fabric.css +26 -6
  44. package/styles/fluent-dark-lite.css +20 -0
  45. package/styles/fluent-dark.css +27 -7
  46. package/styles/fluent-lite.css +20 -0
  47. package/styles/fluent.css +27 -7
  48. package/styles/fluent2-lite.css +20 -0
  49. package/styles/fluent2.css +28 -8
  50. package/styles/highcontrast-light-lite.css +20 -0
  51. package/styles/highcontrast-light.css +26 -6
  52. package/styles/highcontrast-lite.css +21 -1
  53. package/styles/highcontrast.css +28 -8
  54. package/styles/material-dark-lite.css +20 -0
  55. package/styles/material-dark.css +26 -6
  56. package/styles/material-lite.css +20 -0
  57. package/styles/material.css +26 -6
  58. package/styles/material3-dark-lite.css +20 -0
  59. package/styles/material3-dark.css +26 -6
  60. package/styles/material3-lite.css +20 -0
  61. package/styles/material3.css +26 -6
  62. package/styles/tailwind-dark-lite.css +20 -0
  63. package/styles/tailwind-dark.css +26 -6
  64. package/styles/tailwind-lite.css +20 -0
  65. package/styles/tailwind.css +26 -6
  66. package/styles/tailwind3-lite.css +511 -0
  67. package/styles/tailwind3-lite.scss +18 -0
  68. package/styles/tailwind3.css +531 -0
  69. package/styles/tailwind3.scss +19 -0
  70. package/styles/treegrid/_bigger.scss +45 -41
  71. package/styles/treegrid/_layout.scss +23 -2
  72. package/styles/treegrid/_tailwind3-definition.scss +24 -0
  73. package/styles/treegrid/bds.css +723 -0
  74. package/styles/treegrid/bds.scss +19 -0
  75. package/styles/treegrid/bootstrap-dark.css +26 -6
  76. package/styles/treegrid/bootstrap.css +26 -6
  77. package/styles/treegrid/bootstrap4.css +26 -6
  78. package/styles/treegrid/bootstrap5-dark.css +26 -6
  79. package/styles/treegrid/bootstrap5.3.css +26 -6
  80. package/styles/treegrid/bootstrap5.css +26 -6
  81. package/styles/treegrid/fabric-dark.css +26 -6
  82. package/styles/treegrid/fabric.css +26 -6
  83. package/styles/treegrid/fluent-dark.css +27 -7
  84. package/styles/treegrid/fluent.css +27 -7
  85. package/styles/treegrid/fluent2.css +28 -8
  86. package/styles/treegrid/highcontrast-light.css +26 -6
  87. package/styles/treegrid/highcontrast.css +28 -8
  88. package/styles/treegrid/icons/_tailwind3.scss +37 -0
  89. package/styles/treegrid/material-dark.css +26 -6
  90. package/styles/treegrid/material.css +26 -6
  91. package/styles/treegrid/material3-dark.css +26 -6
  92. package/styles/treegrid/material3.css +26 -6
  93. package/styles/treegrid/tailwind-dark.css +26 -6
  94. package/styles/treegrid/tailwind.css +26 -6
  95. package/styles/treegrid/tailwind3.css +531 -0
  96. package/styles/treegrid/tailwind3.scss +19 -0
package/styles/bds.css ADDED
@@ -0,0 +1,723 @@
1
+
2
+
3
+
4
+
5
+ /* stylelint-disable property-no-vendor-prefix */
6
+ /* stylelint-disable */
7
+ .e-input:focus:not(.e-success):not(.e-warning).e-error,
8
+ .e-float-input:not(.e-success):not(.e-warning).e-error:not(.e-input-group) input:focus,
9
+ .e-float-input:not(.e-success):not(.e-warning).e-error:not(.e-input-group) textarea:focus,
10
+ .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group) input:focus,
11
+ .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group) textarea:focus,
12
+ .e-float-input:not(.e-success):not(.e-warning).e-error:not(.e-input-group).e-input-focus input,
13
+ .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group).e-input-focus input {
14
+ -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
15
+ box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
16
+ }
17
+
18
+ .e-input:focus:not(.e-error):not(.e-warning).e-success,
19
+ .e-float-input:not(.e-error):not(.e-warning).e-success:not(.e-input-group) input:focus,
20
+ .e-float-input:not(.e-error):not(.e-warning).e-success:not(.e-input-group) textarea:focus,
21
+ .e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group) input:focus,
22
+ .e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group) textarea:focus,
23
+ .e-float-input:not(.e-error):not(.e-warning).e-success:not(.e-input-group).e-input-focus input,
24
+ .e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group).e-input-focus input {
25
+ -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
26
+ box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
27
+ }
28
+
29
+ .e-input:focus:not(.e-success):not(.e-error).e-warning,
30
+ .e-float-input:not(.e-success):not(.e-error).e-warning:not(.e-input-group) input:focus,
31
+ .e-float-input:not(.e-success):not(.e-error).e-warning:not(.e-input-group) textarea:focus,
32
+ .e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group) input:focus,
33
+ .e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group) textarea:focus,
34
+ .e-float-input:not(.e-success):not(.e-error).e-warning:not(.e-input-group).e-input-focus input,
35
+ .e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group).e-input-focus input {
36
+ -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
37
+ box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
38
+ }
39
+
40
+ .e-input-group.e-input-focus:not(.e-success):not(.e-warning).e-error,
41
+ .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning).e-error {
42
+ -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
43
+ box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
44
+ }
45
+
46
+ .e-input-group.e-input-focus:not(.e-error):not(.e-warning).e-success,
47
+ .e-input-group.e-control-wrapper.e-input-focus:not(.e-error):not(.e-warning).e-success {
48
+ -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
49
+ box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
50
+ }
51
+
52
+ .e-input-group.e-input-focus:not(.e-success):not(.e-error).e-warning,
53
+ .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-error).e-warning {
54
+ -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
55
+ box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
56
+ }
57
+
58
+ .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error,
59
+ .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error {
60
+ -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
61
+ box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
62
+ }
63
+
64
+ .e-input-group:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success,
65
+ .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success {
66
+ -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
67
+ box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
68
+ }
69
+
70
+ .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-error).e-warning,
71
+ .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-error).e-warning {
72
+ -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
73
+ box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
74
+ }
75
+
76
+ .e-float-input.e-error label.e-float-text,
77
+ .e-float-input.e-control-wrapper.e-error label.e-float-text,
78
+ .e-float-input.e-error input:focus ~ label.e-float-text,
79
+ .e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
80
+ .e-float-input.e-error.e-input-focus input ~ label.e-float-text,
81
+ .e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text,
82
+ .e-float-input.e-error textarea:focus ~ label.e-float-text,
83
+ .e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text {
84
+ color: var(--color-sf-utility-danger) !important;
85
+ }
86
+
87
+ .e-outline.e-float-input.e-error.e-input-focus input:focus ~ label.e-float-text,
88
+ .e-outline.e-float-input.e-input-group.e-error.e-valid-input label.e-label-top.e-float-text,
89
+ .e-outline.e-float-input.e-bigger.e-error.e-input-focus input:focus ~ label.e-float-text,
90
+ .e-bigger .e-outline.e-float-input.e-error.e-input-focus input:focus ~ label.e-float-text,
91
+ .e-outline.e-float-input.e-small.e-error.e-input-focus input:focus ~ label.e-float-text,
92
+ .e-small .e-outline.e-float-input.e-error input:focus ~ label.e-float-text,
93
+ .e-outline.e-float-input.e-small.e-bigger.e-error input:focus ~ label.e-float-text,
94
+ .e-bigger .e-outline.e-float-input.e-small:not(.e-error) input:focus ~ label.e-float-text,
95
+ .e-outline.e-float-input.e-error textarea:focus ~ label.e-float-text,
96
+ .e-outline.e-float-input.e-bigger.e-error textarea:focus ~ label.e-float-text,
97
+ .e-bigger .e-outline.e-float-input.e-error textarea:focus ~ label.e-float-text,
98
+ .e-outline.e-float-input.e-small.e-error textarea:focus ~ label.e-float-text,
99
+ .e-small .e-outline.e-float-input.e-error textarea:focus ~ label.e-float-text,
100
+ .e-outline.e-float-input.e-small.e-bigger.e-error textarea:focus ~ label.e-float-text,
101
+ .e-bigger .e-outline.e-float-input.e-small.e-error textarea:focus ~ label.e-float-text,
102
+ .e-outline.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
103
+ .e-outline.e-float-input.e-control-wrapper.e-bigger.e-error input:focus ~ label.e-float-text,
104
+ .e-bigger .e-outline.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
105
+ .e-outline.e-float-input.e-control-wrapper.e-small.e-error input:focus ~ label.e-float-text,
106
+ .e-small .e-outline.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
107
+ .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-error input:focus ~ label.e-float-text,
108
+ .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-error input:focus ~ label.e-float-text,
109
+ .e-outline.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text,
110
+ .e-outline.e-float-input.e-control-wrapper.e-bigger.e-error textarea:focus ~ label.e-float-text,
111
+ .e-bigger .e-outline.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text,
112
+ .e-outline.e-float-input.e-control-wrapper.e-small.e-error textarea:focus ~ label.e-float-text,
113
+ .e-small .e-outline.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text,
114
+ .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-error textarea:focus ~ label.e-float-text,
115
+ .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-error textarea:focus ~ label.e-float-text,
116
+ .e-outline.e-float-input.e-error label.e-float-text.e-label-top,
117
+ .e-outline.e-float-input.e-input-group.e-error label.e-float-text.e-label-top,
118
+ .e-outline.e-float-input.e-control-wrapper.e-error label.e-float-text.e-label-top,
119
+ .e-outline.e-float-input.e-valid-input.e-error:not(.e-input-focus) input:valid ~ label.e-float-text.e-label-top,
120
+ .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-input-focus) input:focus ~ label.e-float-text.e-label-top,
121
+ .e-outline.e-float-input.e-valid-input.e-error:not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-top,
122
+ .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-error:not(.e-input-focus) textarea:focus ~ label.e-float-text.e-label-top,
123
+ .e-outline.e-float-input.e-error.e-input-focus input ~ label.e-float-text,
124
+ .e-outline.e-float-input.e-bigger.e-error.e-input-focus input ~ label.e-float-text,
125
+ .e-bigger .e-outline.e-float-input.e-error.e-input-focus input ~ label.e-float-text,
126
+ .e-outline.e-float-input.e-small.e-error.e-input-focus input ~ label.e-float-text,
127
+ .e-small .e-outline.e-float-input.e-error.e-input-focus input ~ label.e-float-text,
128
+ .e-outline.e-float-input.e-small.e-bigger.e-error.e-input-focus input ~ label.e-float-text,
129
+ .e-bigger .e-outline.e-float-input.e-small:not(.e-error).e-input-focus input ~ label.e-float-text,
130
+ .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text,
131
+ .e-outline.e-float-input.e-control-wrapper.e-bigger.e-error.e-input-focus input ~ label.e-float-text,
132
+ .e-bigger .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text,
133
+ .e-outline.e-float-input.e-control-wrapper.e-small.e-error.e-input-focus input ~ label.e-float-text,
134
+ .e-small .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text,
135
+ .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-error.e-input-focus input ~ label.e-float-text,
136
+ .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-error.e-input-focus input ~ label.e-float-text {
137
+ color: var(--color-sf-utility-danger) !important;
138
+ }
139
+
140
+ .e-filled.e-float-input.e-error label.e-float-text,
141
+ .e-filled.e-float-input.e-control-wrapper.e-error label.e-float-text,
142
+ .e-filled.e-float-input.e-error input:focus ~ label.e-float-text,
143
+ .e-filled.e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
144
+ .e-filled.e-float-input.e-error textarea:focus ~ label.e-float-text,
145
+ .e-filled.e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text,
146
+ .e-filled.e-float-input.e-error.e-input-focus input ~ label.e-float-text,
147
+ .e-filled.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text {
148
+ color: var(--color-sf-utility-danger) !important;
149
+ }
150
+
151
+ /* stylelint-disable */
152
+ .e-btn.e-primary:focus {
153
+ -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
154
+ box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
155
+ }
156
+
157
+ .e-btn.e-success:focus {
158
+ -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
159
+ box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(23, 177, 105, 0.24) !important;
160
+ }
161
+
162
+ .e-btn.e-info:focus {
163
+ -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
164
+ box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px var(--color-sf-brand-solid-shadow) !important;
165
+ }
166
+
167
+ .e-btn.e-warning:focus {
168
+ -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
169
+ box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(247, 143, 8, 0.24) !important;
170
+ }
171
+
172
+ .e-btn.e-danger:focus {
173
+ -webkit-box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
174
+ box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.05), 0 0 0 4px rgba(240, 68, 55, 0.24) !important;
175
+ }
176
+
177
+ .e-btn.e-outline.e-info {
178
+ background: transparent !important;
179
+ border-color: var(--color-sf-utility-info-border-color) !important;
180
+ color: var(--color-sf-utility-info-text) !important;
181
+ }
182
+
183
+ .e-btn.e-outline.e-info:hover {
184
+ background: var(--color-sf-utility-info-bg-color-hover) !important;
185
+ border-color: var(--color-sf-utility-info-border-color) !important;
186
+ color: var(--color-sf-utility-info-text-hover) !important;
187
+ }
188
+
189
+ .e-btn.e-outline.e-info:active {
190
+ background: var(--color-sf-utility-info-bg-color-pressed) !important;
191
+ border-color: var(--color-sf-utility-info-border-color) !important;
192
+ color: var(--color-sf-utility-info-text-hover) !important;
193
+ }
194
+
195
+ .e-btn.e-flat.e-info {
196
+ color: var(--color-sf-utility-info-text) !important;
197
+ }
198
+
199
+ .e-bigger .e-btn,
200
+ .e-bigger .e-btn,
201
+ .e-bigger .e-css.e-btn,
202
+ .e-bigger.e-css.e-btn {
203
+ font-size: 14px;
204
+ line-height: 1.572em;
205
+ padding: 8px 15px;
206
+ border-radius: 8px !important;
207
+ font-weight: 600;
208
+ }
209
+
210
+ .e-ddl.e-control-wrapper .e-ddl-icon::before {
211
+ -webkit-transform: rotate(0deg);
212
+ transform: rotate(0deg);
213
+ -webkit-transition: -webkit-transform 300ms ease;
214
+ transition: -webkit-transform 300ms ease;
215
+ transition: transform 300ms ease;
216
+ transition: transform 300ms ease, -webkit-transform 300ms ease;
217
+ }
218
+
219
+ .e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
220
+ -webkit-transform: rotate(180deg);
221
+ transform: rotate(180deg);
222
+ -webkit-transition: -webkit-transform 300ms ease;
223
+ transition: -webkit-transform 300ms ease;
224
+ transition: transform 300ms ease;
225
+ transition: transform 300ms ease, -webkit-transform 300ms ease;
226
+ }
227
+
228
+ .e-dropdownbase .e-list-item.e-active.e-hover {
229
+ color: var(--color-sf-text-primary);
230
+ }
231
+
232
+ .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
233
+ .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
234
+ .e-input-group:not(.e-disabled) .e-back-icon:active,
235
+ .e-input-group:not(.e-disabled) .e-back-icon:hover,
236
+ .e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active,
237
+ .e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover {
238
+ background: transparent;
239
+ }
240
+
241
+ .e-input-group .e-ddl-icon:not(:active)::after {
242
+ -webkit-animation: none;
243
+ animation: none;
244
+ }
245
+
246
+ .e-ddl.e-popup {
247
+ border: 0;
248
+ border-radius: 8px;
249
+ -webkit-box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
250
+ box-shadow: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.05);
251
+ margin-top: 4px;
252
+ }
253
+
254
+ .e-small .e-ddl.e-popup,
255
+ .e-small.e-ddl.e-popup {
256
+ border-radius: 4px;
257
+ margin-top: 2px;
258
+ }
259
+
260
+ .e-popup.e-ddl .e-dropdownbase {
261
+ min-height: 26px;
262
+ padding: 4px 6px;
263
+ }
264
+
265
+ .e-input-group.e-ddl,
266
+ .e-input-group.e-ddl .e-input,
267
+ .e-input-group.e-ddl .e-ddl-icon {
268
+ background: var(--color-sf-bg-primary);
269
+ }
270
+
271
+ .e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
272
+ .e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) {
273
+ border-bottom-width: 0;
274
+ }
275
+
276
+ .e-ddl.e-popup.e-outline .e-filter-parent {
277
+ padding: 4px 8px;
278
+ }
279
+
280
+ /* stylelint-disable */
281
+ .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
282
+ padding: 4px 8px !important;
283
+ }
284
+
285
+ .e-bigger .e-dialog .e-dlg-header-content .e-btn.e-dlg-closeicon-btn {
286
+ padding: 4px 0 !important;
287
+ }
288
+
289
+ .e-dialog .e-dlg-content {
290
+ border-radius: 12px !important;
291
+ }
292
+
293
+ .e-dlg-overlay {
294
+ backdrop-filter: blur(2px) !important;
295
+ }
296
+
297
+ /* stylelint-disable property-no-vendor-prefix */
298
+ @-webkit-keyframes material-spinner-rotate {
299
+ 0% {
300
+ -webkit-transform: rotate(0);
301
+ transform: rotate(0);
302
+ }
303
+ 100% {
304
+ -webkit-transform: rotate(360deg);
305
+ transform: rotate(360deg);
306
+ }
307
+ }
308
+ @keyframes material-spinner-rotate {
309
+ 0% {
310
+ -webkit-transform: rotate(0);
311
+ transform: rotate(0);
312
+ }
313
+ 100% {
314
+ -webkit-transform: rotate(360deg);
315
+ transform: rotate(360deg);
316
+ }
317
+ }
318
+ @-webkit-keyframes fabric-spinner-rotate {
319
+ 0% {
320
+ -webkit-transform: rotate(0);
321
+ transform: rotate(0);
322
+ }
323
+ 100% {
324
+ -webkit-transform: rotate(360deg);
325
+ transform: rotate(360deg);
326
+ }
327
+ }
328
+ @keyframes fabric-spinner-rotate {
329
+ 0% {
330
+ -webkit-transform: rotate(0);
331
+ transform: rotate(0);
332
+ }
333
+ 100% {
334
+ -webkit-transform: rotate(360deg);
335
+ transform: rotate(360deg);
336
+ }
337
+ }
338
+ /* stylelint-disable */
339
+ .e-contextmenu-wrapper ul.e-contextmenu,
340
+ .e-contextmenu-container ul.e-contextmenu {
341
+ padding: 4px 6px !important;
342
+ }
343
+
344
+ .e-contextmenu-wrapper ul .e-menu-item {
345
+ border-radius: 6px !important;
346
+ }
347
+
348
+ .e-treegrid .e-indent::before,
349
+ .e-grid-menu .e-indent::before {
350
+ content: "\e810";
351
+ }
352
+ .e-treegrid .e-outdent::before,
353
+ .e-grid-menu .e-outdent::before {
354
+ content: "\e72a";
355
+ }
356
+
357
+ .e-treegrid .e-treegridexpand::before,
358
+ .e-treegrid .e-treegridcollapse::before {
359
+ content: "\e75c";
360
+ }
361
+ .e-treegrid .e-toolbar-item .e-expand::before {
362
+ content: "\e7c9";
363
+ }
364
+ .e-treegrid .e-toolbar-item .e-collapse::before {
365
+ content: "\e80f";
366
+ }
367
+ .e-treegrid .e-toolbar-item .e-indent::before {
368
+ content: "\e810";
369
+ }
370
+ .e-treegrid .e-toolbar-item .e-outdent::before {
371
+ content: "\e72a";
372
+ }
373
+
374
+ .e-treegrid .e-icons.e-none::before {
375
+ content: "";
376
+ }
377
+ .e-treegrid .e-grid.e-default.e-draggable:not(.e-rtl) tr td.e-rowdragdrop.e-childborder:first-child:not(.e-dropbottom) {
378
+ border-left: 2px solid var(--color-sf-brand-primary);
379
+ }
380
+ .e-treegrid .e-grid:not(.e-grid-min-height) .e-gridcontent tr.e-row.e-summaryrow .e-rowcell:empty {
381
+ height: auto;
382
+ }
383
+ .e-treegrid .e-gridheader .e-headercell .e-css.e-hierarchycheckbox {
384
+ height: 20px;
385
+ vertical-align: middle;
386
+ }
387
+ .e-treegrid .e-treegridexpand::before,
388
+ .e-treegrid .e-treegridcollapse::before {
389
+ text-align: center;
390
+ vertical-align: unset;
391
+ }
392
+ .e-treegrid tr.e-childrow-hidden {
393
+ display: none;
394
+ }
395
+ .e-treegrid .e-rowcell:not(.e-gridclip) .e-treecolumn-container {
396
+ display: block;
397
+ overflow: hidden;
398
+ text-overflow: ellipsis;
399
+ }
400
+ .e-treegrid .e-rowcell:not(.e-gridclip) .e-treecolumn-container span.e-treecell {
401
+ display: contents;
402
+ overflow: hidden;
403
+ text-overflow: ellipsis;
404
+ }
405
+ .e-treegrid .e-templatecell .e-treecolumn-container span {
406
+ vertical-align: middle;
407
+ }
408
+ .e-treegrid .e-treegridexpand:hover::before,
409
+ .e-treegrid .e-treegridcollapse:hover::before {
410
+ color: var(--color-sf-fg-secondary-hover);
411
+ }
412
+ .e-treegrid .e-rtl .e-treegridcollapse {
413
+ -webkit-transform: scale(-1);
414
+ transform: scale(-1);
415
+ }
416
+ .e-treegrid .e-treegridexpand {
417
+ -webkit-transform: rotate(90deg);
418
+ transform: rotate(90deg);
419
+ }
420
+ .e-treegrid .e-treerowexpanded:not(.e-hiddenrow) {
421
+ display: table-row;
422
+ }
423
+ .e-treegrid .e-treerowcollapsed {
424
+ display: none;
425
+ }
426
+ .e-treegrid .e-treecheckbox-container {
427
+ display: block;
428
+ overflow: hidden;
429
+ text-overflow: ellipsis;
430
+ }
431
+ .e-treegrid .e-treecheckbox-container :not(.e-treecheckbox) {
432
+ white-space: nowrap;
433
+ }
434
+ .e-treegrid .e-treecheckbox {
435
+ overflow: hidden;
436
+ text-overflow: ellipsis;
437
+ vertical-align: middle;
438
+ }
439
+ .e-treegrid .e-treecolumn-container span {
440
+ display: inline-block;
441
+ vertical-align: text-bottom;
442
+ }
443
+ .e-treegrid .e-templatecell .e-treecolumn-container span {
444
+ vertical-align: middle;
445
+ }
446
+ .e-treegrid .e-cloneproperties .e-treecolumn-container span {
447
+ vertical-align: text-top;
448
+ }
449
+ .e-treegrid .e-cloneproperties .e-rowcell:not(.e-gridclip) .errorValue .e-treecolumn-container {
450
+ display: table-row;
451
+ }
452
+ .e-treegrid .e-hierarchycheckbox .e-frame {
453
+ height: 16px;
454
+ width: 16px;
455
+ }
456
+ .e-treegrid .e-checkselection .e-frozenheader .e-rowcell,
457
+ .e-treegrid .e-checkselection .e-movableheader .e-rowcell,
458
+ .e-treegrid .e-checkselection .e-frozencontent .e-rowcell,
459
+ .e-treegrid .e-checkselection .e-movablecontent .e-rowcell {
460
+ line-height: 21px;
461
+ }
462
+ .e-treegrid .e-treegridexpand,
463
+ .e-treegrid .e-treegridcollapse {
464
+ color: var(--color-sf-fg-secondary);
465
+ cursor: pointer;
466
+ font-size: 18px;
467
+ height: 18px;
468
+ padding: 0;
469
+ text-align: center;
470
+ vertical-align: text-bottom;
471
+ width: 16px;
472
+ }
473
+ .e-treegrid .e-treecell {
474
+ display: table-cell;
475
+ line-height: normal;
476
+ }
477
+ .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container, .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecheckbox-container {
478
+ white-space: nowrap;
479
+ }
480
+ .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecolumn-container .e-treecell {
481
+ display: inline-block;
482
+ white-space: normal;
483
+ word-wrap: break-word;
484
+ }
485
+ .e-treegrid .e-grid.e-wrap .e-cloneproperties .e-rowcell .e-treecolumn-container .e-treecell {
486
+ display: inline-block;
487
+ white-space: nowrap;
488
+ word-wrap: break-word;
489
+ }
490
+ .e-treegrid .e-grid.e-wrap .e-rowcell .e-treecheckbox-container .e-treecheckbox {
491
+ display: inline-block;
492
+ white-space: normal;
493
+ word-wrap: break-word;
494
+ }
495
+ .e-treegrid .e-grid.e-wrap .e-treecolumn-container span {
496
+ vertical-align: middle;
497
+ }
498
+ .e-treegrid.e-grid.e-print-grid-layout .e-icons {
499
+ display: inline-block;
500
+ }
501
+ .e-treegrid .e-treecheckselect,
502
+ .e-treegrid .e-treeselectall {
503
+ margin: 0;
504
+ opacity: 0;
505
+ position: absolute;
506
+ width: 0;
507
+ }
508
+ .e-treegrid .e-detailheadercell,
509
+ .e-treegrid .e-headercontent .e-table .e-detail-intent,
510
+ .e-treegrid .e-gridcontent .e-table .e-detail-intent,
511
+ .e-treegrid .e-table .e-detailrow .e-detailindentcell,
512
+ .e-treegrid .e-table .e-detailrowexpand,
513
+ .e-treegrid .e-table .e-detailrowcollapse,
514
+ .e-treegrid tr.e-detailrow.e-childrow-hidden {
515
+ display: none;
516
+ }
517
+ .e-treegrid .e-icons.e-errorelem {
518
+ padding-left: 10px;
519
+ display: inline-block;
520
+ vertical-align: text-bottom;
521
+ }
522
+ .e-treegrid .e-errorelem::before {
523
+ color: var(--color-sf-utility-danger);
524
+ content: "\e77e";
525
+ -webkit-transform: rotate(180deg);
526
+ transform: rotate(180deg);
527
+ }
528
+ .e-treegrid .e-gridcontent td.e-childborder {
529
+ border-color: var(--color-sf-brand-primary);
530
+ border-width: 2px 0 0;
531
+ -webkit-box-shadow: 0 1px 0 0 var(--color-sf-brand-primary);
532
+ box-shadow: 0 1px 0 0 var(--color-sf-brand-primary);
533
+ position: relative;
534
+ z-index: 1;
535
+ }
536
+ .e-treegrid .e-gridcontent td.e-childborder.e-leftfreeze {
537
+ position: sticky;
538
+ }
539
+ .e-treegrid .e-gridcontent td.e-rowcell.e-childborder.e-dragborder,
540
+ .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom.e-dragborder td.e-rowdragdrop.e-dropbottom.e-dragborder {
541
+ -webkit-box-shadow: 0 1px 0 0 var(--color-sf-brand-primary);
542
+ box-shadow: 0 1px 0 0 var(--color-sf-brand-primary);
543
+ }
544
+ .e-treegrid .e-gridcontent td.e-rowcell.e-dragborder,
545
+ .e-treegrid .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder,
546
+ .e-treegrid .e-gridcontent .e-rowdragdrop.e-dragborder {
547
+ -webkit-box-shadow: 0 0 0 0;
548
+ box-shadow: 0 0 0 0;
549
+ }
550
+ .e-treegrid .e-gridcontent td.e-childborder:first-child {
551
+ border-left: 2px solid var(--color-sf-brand-primary);
552
+ -webkit-box-shadow: 0 1px 0 0 var(--color-sf-brand-primary);
553
+ box-shadow: 0 1px 0 0 var(--color-sf-brand-primary);
554
+ position: relative;
555
+ z-index: 1;
556
+ }
557
+ .e-treegrid .e-gridcontent td.e-rowcell.e-childborder:last-child,
558
+ .e-treegrid .e-gridcontent td.e-lastrowcell.e-childborder:last-child {
559
+ border-right: 2px solid var(--color-sf-brand-primary);
560
+ }
561
+ .e-treegrid .e-gridcontent td.e-lastrowcell.e-childborder {
562
+ border-width: 2px 0;
563
+ }
564
+ .e-treegrid .e-gridcontent td.e-lastrowcell.e-childborder:first-child {
565
+ border-left: 2px solid var(--color-sf-brand-primary);
566
+ }
567
+ .e-treegrid .e-gridcontent td.e-dropbottom:first-child,
568
+ .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom,
569
+ .e-treegrid .e-gridcontent td.e-dropbottom {
570
+ -webkit-box-shadow: 0 1px 0 0 var(--color-sf-brand-primary);
571
+ box-shadow: 0 1px 0 0 var(--color-sf-brand-primary);
572
+ position: relative;
573
+ z-index: 1;
574
+ }
575
+ .e-treegrid .e-gridcontent td.e-dropbottom:first-child.e-leftfreeze,
576
+ .e-treegrid .e-gridcontent td.e-rowcell.e-dropbottom.e-leftfreeze,
577
+ .e-treegrid .e-gridcontent td.e-dropbottom.e-leftfreeze {
578
+ position: sticky;
579
+ }
580
+ .e-treegrid .e-gridcontent td.e-droptop:first-child,
581
+ .e-treegrid .e-gridcontent td.e-rowcell.e-droptop {
582
+ border-top-color: var(--color-sf-brand-primary);
583
+ border-width: 2px 0 0;
584
+ }
585
+ .e-treegrid .e-gridcontent td.e-lastrowcell.e-dropbottom {
586
+ border-bottom-color: var(--color-sf-brand-primary);
587
+ }
588
+ .e-treegrid .e-gridcontent td.e-rowdragdrop.e-droptop.e-dragborder {
589
+ -webkit-box-shadow: 0 0 0 0;
590
+ box-shadow: 0 0 0 0;
591
+ }
592
+ .e-treegrid .e-gridcontent .e-gridheader .e-firstrow-dragborder {
593
+ height: 1px;
594
+ }
595
+ .e-treegrid .e-gridcontent .e-lastrow-dragborder {
596
+ height: 0;
597
+ }
598
+ .e-treegrid .e-gridheader .e-firstrow-dragborder,
599
+ .e-treegrid .e-droptop .e-lastrow-dragborder,
600
+ .e-treegrid .e-gridheader .e-firstrow-dragborder tr:first-child.e-dropbottom {
601
+ height: 0;
602
+ }
603
+ .e-treegrid .e-treegrid-relative {
604
+ position: relative;
605
+ }
606
+ .e-treegrid .e-gridheader .e-firstrow-border,
607
+ .e-treegrid .e-gridcontent .e-lastrow-border {
608
+ background-color: var(--color-sf-brand-primary);
609
+ bottom: 0;
610
+ display: none;
611
+ height: 1px;
612
+ position: absolute;
613
+ z-index: 1;
614
+ }
615
+ .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowcell.e-childborder,
616
+ .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowdragdrop.e-childborder {
617
+ border-bottom: 2px solid var(--color-sf-brand-primary);
618
+ border-top: 2px solid var(--color-sf-brand-primary);
619
+ -webkit-box-shadow: 0 0 0 0 var(--color-sf-brand-primary);
620
+ box-shadow: 0 0 0 0 var(--color-sf-brand-primary);
621
+ }
622
+ .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowcell.e-droptop,
623
+ .e-treegrid .e-grid .e-gridcontent tr.e-row:first-child td.e-rowdragdrop.e-droptop {
624
+ border-top: 2px solid var(--color-sf-brand-primary);
625
+ }
626
+ .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-childborder {
627
+ border-bottom: 2px solid var(--color-sf-brand-primary);
628
+ border-top: 2px solid var(--color-sf-brand-primary);
629
+ -webkit-box-shadow: 0 0 0 0 var(--color-sf-brand-primary);
630
+ box-shadow: 0 0 0 0 var(--color-sf-brand-primary);
631
+ }
632
+ .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-childborder {
633
+ border-bottom: 2px solid var(--color-sf-brand-primary);
634
+ border-top: 2px solid var(--color-sf-brand-primary);
635
+ -webkit-box-shadow: 0 0 0 0 var(--color-sf-brand-primary);
636
+ box-shadow: 0 0 0 0 var(--color-sf-brand-primary);
637
+ }
638
+ .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-dropbottom {
639
+ border-bottom: 2px solid var(--color-sf-brand-primary);
640
+ -webkit-box-shadow: 0 0 0 0 var(--color-sf-brand-primary);
641
+ box-shadow: 0 0 0 0 var(--color-sf-brand-primary);
642
+ }
643
+ .e-treegrid .e-grid .e-gridcontent td.e-rowcell.e-droptop {
644
+ border-top: 2px solid var(--color-sf-brand-primary);
645
+ -webkit-box-shadow: 0 0 0 0 var(--color-sf-brand-primary);
646
+ box-shadow: 0 0 0 0 var(--color-sf-brand-primary);
647
+ }
648
+ .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-dropbottom {
649
+ border-bottom: 2px solid var(--color-sf-brand-primary);
650
+ -webkit-box-shadow: 0 0 0 0 var(--color-sf-brand-primary);
651
+ box-shadow: 0 0 0 0 var(--color-sf-brand-primary);
652
+ }
653
+ .e-treegrid .e-grid .e-gridcontent td.e-rowdragdrop.e-droptop {
654
+ border-top: 2px solid var(--color-sf-brand-primary);
655
+ -webkit-box-shadow: 0 0 0 0 var(--color-sf-brand-primary);
656
+ box-shadow: 0 0 0 0 var(--color-sf-brand-primary);
657
+ }
658
+ .e-treegrid .e-grid.e-rtl .e-gridheader .e-firstrow-dragborder,
659
+ .e-treegrid .e-grid.e-rtl .e-droptop .e-lastrow-dragborder {
660
+ height: 0;
661
+ }
662
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder {
663
+ border-color: var(--color-sf-brand-primary);
664
+ border-width: 2px 0 2px 0;
665
+ position: relative;
666
+ z-index: 1;
667
+ }
668
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder.e-leftfreeze {
669
+ position: sticky;
670
+ }
671
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-rowcell.e-dragborder,
672
+ .e-treegrid .e-grid.e-rtl .e-gridcontent tr.e-row:first-child .e-rowcell.e-dragborder,
673
+ .e-treegrid .e-grid.e-rtl .e-gridcontent .e-rowdragdrop.e-dragborder {
674
+ -webkit-box-shadow: 0 0 0 0;
675
+ box-shadow: 0 0 0 0;
676
+ }
677
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-childborder:first-child {
678
+ border-right: 2px solid var(--color-sf-brand-primary);
679
+ -webkit-box-shadow: 0 1px 0 0 var(--color-sf-brand-primary);
680
+ box-shadow: 0 1px 0 0 var(--color-sf-brand-primary);
681
+ position: relative;
682
+ z-index: 1;
683
+ }
684
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-rowcell.e-childborder:last-child,
685
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-lastrowcell.e-childborder:first-child {
686
+ border-left: 2px solid var(--color-sf-brand-primary);
687
+ }
688
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-lastrowcell.e-childborder {
689
+ border-width: 2px 0;
690
+ }
691
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-lastrowcell.e-childborder:last-child {
692
+ border-right: 2px solid var(--color-sf-brand-primary);
693
+ }
694
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-droptop:first-child,
695
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-rowcell.e-droptop {
696
+ border-top-color: var(--color-sf-brand-primary);
697
+ border-width: 2px 0 0;
698
+ }
699
+ .e-treegrid .e-grid.e-rtl .e-gridcontent td.e-lastrowcell.e-dropbottom {
700
+ border-bottom-color: var(--color-sf-brand-primary);
701
+ }
702
+
703
+ /* stylelint-disable-line no-empty-source */
704
+ .e-bigger .e-treegrid .e-grid .e-treegridexpand,
705
+ .e-bigger .e-treegrid .e-grid .e-treegridcollapse {
706
+ font-size: 22px;
707
+ height: 22px;
708
+ width: 22px;
709
+ vertical-align: bottom;
710
+ }
711
+ .e-bigger .e-treegrid .e-grid .e-hierarchycheckbox {
712
+ padding-left: 2px;
713
+ }
714
+ .e-bigger .e-treegrid .e-grid .e-hierarchycheckbox .e-frame {
715
+ height: 18px;
716
+ width: 18px;
717
+ }
718
+ .e-bigger .e-treegrid .e-grid .e-treecell {
719
+ line-height: 22px;
720
+ }
721
+ .e-bigger .e-treegrid .e-grid .e-treecolumn-container span {
722
+ vertical-align: middle;
723
+ }