@syncfusion/ej2-navigations 21.1.38 → 21.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/ej2-navigations.min.js +2 -2
  3. package/dist/ej2-navigations.umd.min.js +2 -2
  4. package/dist/ej2-navigations.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-navigations.es2015.js +68 -54
  6. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  7. package/dist/es6/ej2-navigations.es5.js +68 -54
  8. package/dist/es6/ej2-navigations.es5.js.map +1 -1
  9. package/dist/global/ej2-navigations.min.js +2 -2
  10. package/dist/global/ej2-navigations.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +12 -15
  13. package/src/common/h-scroll.js +1 -0
  14. package/src/common/menu-base.d.ts +1 -0
  15. package/src/common/menu-base.js +26 -20
  16. package/src/common/v-scroll.js +1 -1
  17. package/src/tab/tab.d.ts +1 -0
  18. package/src/tab/tab.js +35 -28
  19. package/src/treeview/treeview.js +5 -5
  20. package/styles/bootstrap-dark.css +35 -26
  21. package/styles/bootstrap.css +35 -26
  22. package/styles/bootstrap4.css +35 -26
  23. package/styles/bootstrap5-dark.css +44 -35
  24. package/styles/bootstrap5.css +44 -35
  25. package/styles/context-menu/_bootstrap5-definition.scss +1 -1
  26. package/styles/context-menu/bootstrap5-dark.css +4 -4
  27. package/styles/context-menu/bootstrap5.css +4 -4
  28. package/styles/fabric-dark.css +35 -26
  29. package/styles/fabric.css +35 -26
  30. package/styles/fluent-dark.css +35 -26
  31. package/styles/fluent.css +35 -26
  32. package/styles/highcontrast-light.css +35 -26
  33. package/styles/highcontrast.css +37 -27
  34. package/styles/material-dark.css +35 -26
  35. package/styles/material.css +35 -26
  36. package/styles/menu/_bootstrap5-definition.scss +1 -1
  37. package/styles/menu/bootstrap5-dark.css +5 -5
  38. package/styles/menu/bootstrap5.css +5 -5
  39. package/styles/tab/_icons.scss +0 -8
  40. package/styles/tab/bootstrap-dark.css +0 -10
  41. package/styles/tab/bootstrap.css +0 -10
  42. package/styles/tab/bootstrap4.css +0 -10
  43. package/styles/tab/bootstrap5-dark.css +0 -10
  44. package/styles/tab/bootstrap5.css +0 -10
  45. package/styles/tab/fabric-dark.css +0 -10
  46. package/styles/tab/fabric.css +0 -10
  47. package/styles/tab/fluent-dark.css +0 -10
  48. package/styles/tab/fluent.css +0 -10
  49. package/styles/tab/highcontrast-light.css +0 -10
  50. package/styles/tab/highcontrast.css +0 -10
  51. package/styles/tab/icons/_bootstrap-dark.scss +0 -8
  52. package/styles/tab/icons/_bootstrap.scss +0 -8
  53. package/styles/tab/icons/_bootstrap4.scss +0 -12
  54. package/styles/tab/icons/_bootstrap5.scss +0 -12
  55. package/styles/tab/icons/_fabric-dark.scss +0 -8
  56. package/styles/tab/icons/_fabric.scss +0 -8
  57. package/styles/tab/icons/_fluent.scss +0 -8
  58. package/styles/tab/icons/_fusionnew.scss +0 -12
  59. package/styles/tab/icons/_highcontrast-light.scss +0 -12
  60. package/styles/tab/icons/_highcontrast.scss +0 -12
  61. package/styles/tab/icons/_material-dark.scss +0 -12
  62. package/styles/tab/icons/_material.scss +0 -12
  63. package/styles/tab/icons/_material3.scss +0 -12
  64. package/styles/tab/icons/_tailwind.scss +0 -12
  65. package/styles/tab/material-dark.css +0 -10
  66. package/styles/tab/material.css +0 -10
  67. package/styles/tab/tailwind-dark.css +0 -10
  68. package/styles/tab/tailwind.css +0 -10
  69. package/styles/tailwind-dark.css +35 -26
  70. package/styles/tailwind.css +35 -26
  71. package/styles/treeview/_theme.scss +20 -10
  72. package/styles/treeview/bootstrap-dark.css +35 -16
  73. package/styles/treeview/bootstrap.css +35 -16
  74. package/styles/treeview/bootstrap4.css +35 -16
  75. package/styles/treeview/bootstrap5-dark.css +35 -16
  76. package/styles/treeview/bootstrap5.css +35 -16
  77. package/styles/treeview/fabric-dark.css +35 -16
  78. package/styles/treeview/fabric.css +35 -16
  79. package/styles/treeview/fluent-dark.css +35 -16
  80. package/styles/treeview/fluent.css +35 -16
  81. package/styles/treeview/highcontrast-light.css +35 -16
  82. package/styles/treeview/highcontrast.css +37 -17
  83. package/styles/treeview/material-dark.css +35 -16
  84. package/styles/treeview/material.css +35 -16
  85. package/styles/treeview/tailwind-dark.css +35 -16
  86. package/styles/treeview/tailwind.css +35 -16
package/styles/tailwind.css CHANGED
@@ -3592,16 +3592,6 @@
3592
3592
  content: "\e7e7";
3593
3593
  position: relative;
3594
3594
  }
3595
- @media screen and (max-width: 480px) {
3596
- .e-tab .e-tab-header .e-popup-up-icon::before {
3597
- content: "\e770";
3598
- }
3599
- }
3600
- @media screen and (max-width: 480px) {
3601
- .e-tab .e-tab-header .e-popup-down-icon::before {
3602
- content: "\e770";
3603
- }
3604
- }
3605
3595
  @media screen and (max-width: 480px) {
3606
3596
  .e-tab.e-vertical-icon .e-tab-header .e-popup-up-icon::before {
3607
3597
  content: "\e776";
@@ -8306,17 +8296,22 @@
8306
8296
  font-size: 20px;
8307
8297
  }
8308
8298
  .e-treeview .e-list-item.e-active,
8309
- .e-treeview .e-list-item.e-hover {
8299
+ .e-treeview .e-list-item.e-hover,
8300
+ .e-treeview .e-list-item.e-node-focus {
8310
8301
  background: transparent;
8311
8302
  }
8312
- .e-treeview .e-list-item.e-hover > .e-text-content {
8303
+ .e-treeview .e-list-item.e-hover > .e-text-content,
8304
+ .e-treeview .e-list-item.e-node-focus > .e-text-content {
8313
8305
  color: #111827;
8314
8306
  }
8315
- .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text {
8307
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text,
8308
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-list-text {
8316
8309
  color: #111827;
8317
8310
  }
8318
8311
  .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-collapsible,
8319
- .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable {
8312
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable,
8313
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-collapsible,
8314
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-expandable {
8320
8315
  color: #374151;
8321
8316
  }
8322
8317
  .e-treeview .e-list-item.e-active > .e-text-content {
@@ -8329,31 +8324,40 @@
8329
8324
  .e-treeview .e-list-item.e-active > .e-text-content .e-icon-expandable {
8330
8325
  color: #111827;
8331
8326
  }
8332
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content {
8327
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content,
8328
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content {
8333
8329
  color: #111827;
8334
8330
  }
8335
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text {
8331
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text,
8332
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-list-text {
8336
8333
  color: #111827;
8337
8334
  }
8338
8335
  .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-collapsible,
8339
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable {
8336
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable,
8337
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-collapsible,
8338
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-expandable {
8340
8339
  color: #374151;
8341
8340
  }
8342
8341
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content,
8343
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content {
8342
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content,
8343
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content {
8344
8344
  color: #111827;
8345
8345
  }
8346
8346
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-list-text,
8347
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text {
8347
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text,
8348
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-list-text {
8348
8349
  color: #111827;
8349
8350
  }
8350
8351
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-collapsible,
8351
8352
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-expandable,
8352
8353
  .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-collapsible,
8353
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable {
8354
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable,
8355
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-collapsible,
8356
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-expandable {
8354
8357
  color: #6b7280;
8355
8358
  }
8356
- .e-treeview .e-list-item.e-hover > .e-fullrow {
8359
+ .e-treeview .e-list-item.e-hover > .e-fullrow,
8360
+ .e-treeview .e-list-item.e-node-focus > .e-fullrow {
8357
8361
  background-color: #f3f4f6;
8358
8362
  border-color: #f3f4f6;
8359
8363
  }
@@ -8371,12 +8375,14 @@
8371
8375
  .e-treeview .e-list-item.e-active.e-animation-active > .e-text-content .e-list-text {
8372
8376
  color: #111827;
8373
8377
  }
8374
- .e-treeview .e-list-item.e-active.e-hover > .e-fullrow {
8378
+ .e-treeview .e-list-item.e-active.e-hover > .e-fullrow,
8379
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
8375
8380
  background-color: #d6d9e0;
8376
8381
  border-color: #f3f4f6;
8377
8382
  }
8378
8383
  .e-treeview .e-list-item.e-editing.e-active > .e-fullrow,
8379
- .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow {
8384
+ .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow,
8385
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-fullrow {
8380
8386
  background-color: transparent;
8381
8387
  border-color: transparent;
8382
8388
  }
@@ -8407,7 +8413,8 @@
8407
8413
  .e-treeview .e-popup .e-downtail::after {
8408
8414
  border-top-color: #f3f4f6;
8409
8415
  }
8410
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content {
8416
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content,
8417
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-node-focus > .e-text-content {
8411
8418
  background-color: #f3f4f6;
8412
8419
  border-color: #f3f4f6;
8413
8420
  }
@@ -8415,12 +8422,14 @@
8415
8422
  background-color: #e5e7eb;
8416
8423
  border-color: #e5e7eb;
8417
8424
  }
8418
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content {
8425
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content,
8426
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-node-focus > .e-text-content {
8419
8427
  background-color: #d6d9e0;
8420
8428
  border-color: #f3f4f6;
8421
8429
  }
8422
8430
  .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-active > .e-text-content,
8423
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content {
8431
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content,
8432
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-node-focus > .e-text-content {
8424
8433
  background-color: transparent;
8425
8434
  border-color: transparent;
8426
8435
  }
package/styles/treeview/_theme.scss CHANGED
@@ -115,11 +115,13 @@
115
115
  }
116
116
 
117
117
  .e-list-item.e-active,
118
- .e-list-item.e-hover {
118
+ .e-list-item.e-hover,
119
+ .e-list-item.e-node-focus {
119
120
  background: transparent;
120
121
  }
121
122
 
122
- .e-list-item.e-hover > .e-text-content {
123
+ .e-list-item.e-hover > .e-text-content,
124
+ .e-list-item.e-node-focus > .e-text-content {
123
125
  color: $treeview-text-hover-color;
124
126
 
125
127
  .e-list-text {
@@ -168,7 +170,8 @@
168
170
  }
169
171
  }
170
172
 
171
- .e-list-item.e-active.e-hover > .e-text-content {
173
+ .e-list-item.e-active.e-hover > .e-text-content,
174
+ .e-list-item.e-active.e-node-focus > .e-text-content {
172
175
  color: $treeview-text-active-hover-color;
173
176
 
174
177
  .e-list-text {
@@ -182,7 +185,8 @@
182
185
  }
183
186
 
184
187
  .e-list-item.e-editing.e-active > .e-text-content,
185
- .e-list-item.e-editing.e-hover > .e-text-content {
188
+ .e-list-item.e-editing.e-hover > .e-text-content,
189
+ .e-list-item.e-editing.e-node-focus > .e-text-content {
186
190
  color: $treeview-text-color;
187
191
 
188
192
  .e-list-text {
@@ -199,7 +203,8 @@
199
203
  }
200
204
  }
201
205
 
202
- .e-list-item.e-hover > .e-fullrow {
206
+ .e-list-item.e-hover > .e-fullrow,
207
+ .e-list-item.e-node-focus > .e-fullrow {
203
208
  background-color: $treeview-item-hover-bg;
204
209
  border-color: $treeview-item-hover-border-color;
205
210
  }
@@ -224,12 +229,14 @@
224
229
  }
225
230
  }
226
231
 
227
- .e-list-item.e-active.e-hover > .e-fullrow{
232
+ .e-list-item.e-active.e-hover > .e-fullrow,
233
+ .e-list-item.e-active.e-node-focus > .e-fullrow {
228
234
  @include active-hover-theme;
229
235
  }
230
236
 
231
237
  .e-list-item.e-editing.e-active > .e-fullrow,
232
- .e-list-item.e-editing.e-hover > .e-fullrow{
238
+ .e-list-item.e-editing.e-hover > .e-fullrow,
239
+ .e-list-item.e-editing.e-node-focus > .e-fullrow {
233
240
  @include active-editing-theme;
234
241
  }
235
242
 
@@ -295,7 +302,8 @@
295
302
 
296
303
  &:not(.e-fullrow-wrap) {
297
304
 
298
- .e-list-item.e-hover > .e-text-content{
305
+ .e-list-item.e-hover > .e-text-content,
306
+ .e-list-item.e-node-focus > .e-text-content {
299
307
  background-color: $treeview-item-hover-bg;
300
308
  border-color: $treeview-item-hover-border-color;
301
309
  }
@@ -305,12 +313,14 @@
305
313
  border-color: $treeview-item-active-border-color;
306
314
  }
307
315
 
308
- .e-list-item.e-active.e-hover > .e-text-content {
316
+ .e-list-item.e-active.e-hover > .e-text-content,
317
+ .e-list-item.e-active.e-node-focus > .e-text-content {
309
318
  @include active-hover-theme;
310
319
  }
311
320
 
312
321
  .e-list-item.e-editing.e-active > .e-text-content,
313
- .e-list-item.e-editing.e-hover > .e-text-content {
322
+ .e-list-item.e-editing.e-hover > .e-text-content,
323
+ .e-list-item.e-editing.e-node-focus > .e-text-content {
314
324
  @include active-editing-theme;
315
325
  }
316
326
  }
package/styles/treeview/bootstrap-dark.css CHANGED
@@ -589,17 +589,22 @@
589
589
  font-size: 8px;
590
590
  }
591
591
  .e-treeview .e-list-item.e-active,
592
- .e-treeview .e-list-item.e-hover {
592
+ .e-treeview .e-list-item.e-hover,
593
+ .e-treeview .e-list-item.e-node-focus {
593
594
  background: transparent;
594
595
  }
595
- .e-treeview .e-list-item.e-hover > .e-text-content {
596
+ .e-treeview .e-list-item.e-hover > .e-text-content,
597
+ .e-treeview .e-list-item.e-node-focus > .e-text-content {
596
598
  color: #f0f0f0;
597
599
  }
598
- .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text {
600
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text,
601
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-list-text {
599
602
  color: #f0f0f0;
600
603
  }
601
604
  .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-collapsible,
602
- .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable {
605
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable,
606
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-collapsible,
607
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-expandable {
603
608
  color: #f0f0f0;
604
609
  }
605
610
  .e-treeview .e-list-item.e-active > .e-text-content {
@@ -612,31 +617,40 @@
612
617
  .e-treeview .e-list-item.e-active > .e-text-content .e-icon-expandable {
613
618
  color: #fff;
614
619
  }
615
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content {
620
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content,
621
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content {
616
622
  color: #fff;
617
623
  }
618
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text {
624
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text,
625
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-list-text {
619
626
  color: #fff;
620
627
  }
621
628
  .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-collapsible,
622
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable {
629
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable,
630
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-collapsible,
631
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-expandable {
623
632
  color: #fff;
624
633
  }
625
634
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content,
626
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content {
635
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content,
636
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content {
627
637
  color: #f0f0f0;
628
638
  }
629
639
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-list-text,
630
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text {
640
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text,
641
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-list-text {
631
642
  color: #f0f0f0;
632
643
  }
633
644
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-collapsible,
634
645
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-expandable,
635
646
  .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-collapsible,
636
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable {
647
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable,
648
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-collapsible,
649
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-expandable {
637
650
  color: #f0f0f0;
638
651
  }
639
- .e-treeview .e-list-item.e-hover > .e-fullrow {
652
+ .e-treeview .e-list-item.e-hover > .e-fullrow,
653
+ .e-treeview .e-list-item.e-node-focus > .e-fullrow {
640
654
  background-color: #414141;
641
655
  border-color: #414141;
642
656
  }
@@ -654,12 +668,14 @@
654
668
  .e-treeview .e-list-item.e-active.e-animation-active > .e-text-content .e-list-text {
655
669
  color: #f0f0f0;
656
670
  }
657
- .e-treeview .e-list-item.e-active.e-hover > .e-fullrow {
671
+ .e-treeview .e-list-item.e-active.e-hover > .e-fullrow,
672
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
658
673
  background-color: #0070f0;
659
674
  border-color: #104888;
660
675
  }
661
676
  .e-treeview .e-list-item.e-editing.e-active > .e-fullrow,
662
- .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow {
677
+ .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow,
678
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-fullrow {
663
679
  background-color: transparent;
664
680
  border-color: transparent;
665
681
  }
@@ -691,7 +707,8 @@
691
707
  .e-treeview .e-popup .e-downtail::after {
692
708
  border-top-color: #fff;
693
709
  }
694
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content {
710
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content,
711
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-node-focus > .e-text-content {
695
712
  background-color: #414141;
696
713
  border-color: #414141;
697
714
  }
@@ -699,12 +716,14 @@
699
716
  background-color: #0070f0;
700
717
  border-color: #0070f0;
701
718
  }
702
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content {
719
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content,
720
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-node-focus > .e-text-content {
703
721
  background-color: #0070f0;
704
722
  border-color: #104888;
705
723
  }
706
724
  .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-active > .e-text-content,
707
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content {
725
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content,
726
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-node-focus > .e-text-content {
708
727
  background-color: transparent;
709
728
  border-color: transparent;
710
729
  }
package/styles/treeview/bootstrap.css CHANGED
@@ -590,17 +590,22 @@
590
590
  font-size: 8px;
591
591
  }
592
592
  .e-treeview .e-list-item.e-active,
593
- .e-treeview .e-list-item.e-hover {
593
+ .e-treeview .e-list-item.e-hover,
594
+ .e-treeview .e-list-item.e-node-focus {
594
595
  background: transparent;
595
596
  }
596
- .e-treeview .e-list-item.e-hover > .e-text-content {
597
+ .e-treeview .e-list-item.e-hover > .e-text-content,
598
+ .e-treeview .e-list-item.e-node-focus > .e-text-content {
597
599
  color: #333;
598
600
  }
599
- .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text {
601
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text,
602
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-list-text {
600
603
  color: #333;
601
604
  }
602
605
  .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-collapsible,
603
- .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable {
606
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable,
607
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-collapsible,
608
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-expandable {
604
609
  color: #333;
605
610
  }
606
611
  .e-treeview .e-list-item.e-active > .e-text-content {
@@ -613,31 +618,40 @@
613
618
  .e-treeview .e-list-item.e-active > .e-text-content .e-icon-expandable {
614
619
  color: #fff;
615
620
  }
616
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content {
621
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content,
622
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content {
617
623
  color: #fff;
618
624
  }
619
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text {
625
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text,
626
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-list-text {
620
627
  color: #fff;
621
628
  }
622
629
  .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-collapsible,
623
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable {
630
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable,
631
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-collapsible,
632
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-expandable {
624
633
  color: #fff;
625
634
  }
626
635
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content,
627
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content {
636
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content,
637
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content {
628
638
  color: #333;
629
639
  }
630
640
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-list-text,
631
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text {
641
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text,
642
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-list-text {
632
643
  color: #333;
633
644
  }
634
645
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-collapsible,
635
646
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-expandable,
636
647
  .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-collapsible,
637
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable {
648
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable,
649
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-collapsible,
650
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-expandable {
638
651
  color: #333;
639
652
  }
640
- .e-treeview .e-list-item.e-hover > .e-fullrow {
653
+ .e-treeview .e-list-item.e-hover > .e-fullrow,
654
+ .e-treeview .e-list-item.e-node-focus > .e-fullrow {
641
655
  background-color: #f5f5f5;
642
656
  border-color: #f5f5f5;
643
657
  }
@@ -655,13 +669,15 @@
655
669
  .e-treeview .e-list-item.e-active.e-animation-active > .e-text-content .e-list-text {
656
670
  color: #333;
657
671
  }
658
- .e-treeview .e-list-item.e-active.e-hover > .e-fullrow {
672
+ .e-treeview .e-list-item.e-active.e-hover > .e-fullrow,
673
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
659
674
  background-color: #317ab9;
660
675
  border-color: #66afe9;
661
676
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
662
677
  }
663
678
  .e-treeview .e-list-item.e-editing.e-active > .e-fullrow,
664
- .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow {
679
+ .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow,
680
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-fullrow {
665
681
  background-color: transparent;
666
682
  border-color: transparent;
667
683
  box-shadow: none;
@@ -694,7 +710,8 @@
694
710
  .e-treeview .e-popup .e-downtail::after {
695
711
  border-top-color: #fff;
696
712
  }
697
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content {
713
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content,
714
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-node-focus > .e-text-content {
698
715
  background-color: #f5f5f5;
699
716
  border-color: #f5f5f5;
700
717
  }
@@ -702,13 +719,15 @@
702
719
  background-color: #317ab9;
703
720
  border-color: #317ab9;
704
721
  }
705
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content {
722
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content,
723
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-node-focus > .e-text-content {
706
724
  background-color: #317ab9;
707
725
  border-color: #66afe9;
708
726
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
709
727
  }
710
728
  .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-active > .e-text-content,
711
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content {
729
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content,
730
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-node-focus > .e-text-content {
712
731
  background-color: transparent;
713
732
  border-color: transparent;
714
733
  box-shadow: none;
package/styles/treeview/bootstrap4.css CHANGED
@@ -670,17 +670,22 @@
670
670
  font-size: 8px;
671
671
  }
672
672
  .e-treeview .e-list-item.e-active,
673
- .e-treeview .e-list-item.e-hover {
673
+ .e-treeview .e-list-item.e-hover,
674
+ .e-treeview .e-list-item.e-node-focus {
674
675
  background: transparent;
675
676
  }
676
- .e-treeview .e-list-item.e-hover > .e-text-content {
677
+ .e-treeview .e-list-item.e-hover > .e-text-content,
678
+ .e-treeview .e-list-item.e-node-focus > .e-text-content {
677
679
  color: #212529;
678
680
  }
679
- .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text {
681
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-list-text,
682
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-list-text {
680
683
  color: #212529;
681
684
  }
682
685
  .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-collapsible,
683
- .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable {
686
+ .e-treeview .e-list-item.e-hover > .e-text-content .e-icon-expandable,
687
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-collapsible,
688
+ .e-treeview .e-list-item.e-node-focus > .e-text-content .e-icon-expandable {
684
689
  color: #495057;
685
690
  }
686
691
  .e-treeview .e-list-item.e-active > .e-text-content {
@@ -698,31 +703,40 @@
698
703
  border-color: #fff;
699
704
  color: #007bff;
700
705
  }
701
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content {
706
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content,
707
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content {
702
708
  color: #fff;
703
709
  }
704
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text {
710
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text,
711
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-list-text {
705
712
  color: #fff;
706
713
  }
707
714
  .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-collapsible,
708
- .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable {
715
+ .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-expandable,
716
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-collapsible,
717
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-icon-expandable {
709
718
  color: #fff;
710
719
  }
711
720
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content,
712
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content {
721
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content,
722
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content {
713
723
  color: #212529;
714
724
  }
715
725
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-list-text,
716
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text {
726
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-list-text,
727
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-list-text {
717
728
  color: #212529;
718
729
  }
719
730
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-collapsible,
720
731
  .e-treeview .e-list-item.e-editing.e-active > .e-text-content .e-icon-expandable,
721
732
  .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-collapsible,
722
- .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable {
733
+ .e-treeview .e-list-item.e-editing.e-hover > .e-text-content .e-icon-expandable,
734
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-collapsible,
735
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-text-content .e-icon-expandable {
723
736
  color: #495057;
724
737
  }
725
- .e-treeview .e-list-item.e-hover > .e-fullrow {
738
+ .e-treeview .e-list-item.e-hover > .e-fullrow,
739
+ .e-treeview .e-list-item.e-node-focus > .e-fullrow {
726
740
  background-color: #f2f4f6;
727
741
  border-color: #f2f4f6;
728
742
  }
@@ -740,12 +754,14 @@
740
754
  .e-treeview .e-list-item.e-active.e-animation-active > .e-text-content .e-list-text {
741
755
  color: #212529;
742
756
  }
743
- .e-treeview .e-list-item.e-active.e-hover > .e-fullrow {
757
+ .e-treeview .e-list-item.e-active.e-hover > .e-fullrow,
758
+ .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
744
759
  background-color: #0069d9;
745
760
  border-color: #0069d9;
746
761
  }
747
762
  .e-treeview .e-list-item.e-editing.e-active > .e-fullrow,
748
- .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow {
763
+ .e-treeview .e-list-item.e-editing.e-hover > .e-fullrow,
764
+ .e-treeview .e-list-item.e-editing.e-node-focus > .e-fullrow {
749
765
  background-color: transparent;
750
766
  border-color: transparent;
751
767
  }
@@ -778,7 +794,8 @@
778
794
  .e-treeview .e-popup .e-downtail::after {
779
795
  border-top-color: transparent;
780
796
  }
781
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content {
797
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-hover > .e-text-content,
798
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-node-focus > .e-text-content {
782
799
  background-color: #f2f4f6;
783
800
  border-color: #f2f4f6;
784
801
  }
@@ -786,12 +803,14 @@
786
803
  background-color: #007bff;
787
804
  border-color: #007bff;
788
805
  }
789
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content {
806
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-hover > .e-text-content,
807
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-active.e-node-focus > .e-text-content {
790
808
  background-color: #0069d9;
791
809
  border-color: #0069d9;
792
810
  }
793
811
  .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-active > .e-text-content,
794
- .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content {
812
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-hover > .e-text-content,
813
+ .e-treeview:not(.e-fullrow-wrap) .e-list-item.e-editing.e-node-focus > .e-text-content {
795
814
  background-color: transparent;
796
815
  border-color: transparent;
797
816
  }