@syncfusion/ej2-react-navigations 20.3.58 → 20.4.38

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 (100) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/dist/ej2-react-navigations.min.js +1 -1
  3. package/dist/ej2-react-navigations.umd.min.js +1 -1
  4. package/package.json +8 -8
  5. package/styles/accordion/bootstrap-dark.css +202 -16
  6. package/styles/accordion/bootstrap.css +202 -16
  7. package/styles/accordion/bootstrap4.css +171 -17
  8. package/styles/accordion/bootstrap5-dark.css +202 -13
  9. package/styles/accordion/bootstrap5.css +202 -13
  10. package/styles/accordion/fabric-dark.css +209 -11
  11. package/styles/accordion/fabric.css +209 -11
  12. package/styles/accordion/fluent-dark.css +217 -5
  13. package/styles/accordion/fluent.css +217 -5
  14. package/styles/accordion/highcontrast-light.css +186 -52
  15. package/styles/accordion/highcontrast.css +186 -52
  16. package/styles/accordion/material-dark.css +210 -16
  17. package/styles/accordion/material.css +209 -15
  18. package/styles/accordion/tailwind-dark.css +199 -8
  19. package/styles/accordion/tailwind.css +199 -8
  20. package/styles/bootstrap-dark.css +999 -145
  21. package/styles/bootstrap.css +986 -132
  22. package/styles/bootstrap4.css +888 -167
  23. package/styles/bootstrap5-dark.css +949 -179
  24. package/styles/bootstrap5.css +949 -179
  25. package/styles/context-menu/bootstrap5-dark.css +0 -1
  26. package/styles/context-menu/bootstrap5.css +0 -1
  27. package/styles/context-menu/fluent-dark.css +0 -1
  28. package/styles/context-menu/fluent.css +0 -1
  29. package/styles/context-menu/tailwind-dark.css +0 -1
  30. package/styles/context-menu/tailwind.css +0 -1
  31. package/styles/fabric-dark.css +1068 -232
  32. package/styles/fabric.css +1067 -231
  33. package/styles/fluent-dark.css +1014 -123
  34. package/styles/fluent.css +1012 -121
  35. package/styles/h-scroll/bootstrap-dark.css +13 -0
  36. package/styles/h-scroll/bootstrap.css +13 -0
  37. package/styles/h-scroll/bootstrap4.css +7 -0
  38. package/styles/h-scroll/bootstrap5-dark.css +12 -0
  39. package/styles/h-scroll/bootstrap5.css +12 -0
  40. package/styles/h-scroll/fabric-dark.css +15 -2
  41. package/styles/h-scroll/fabric.css +15 -2
  42. package/styles/h-scroll/fluent-dark.css +13 -0
  43. package/styles/h-scroll/fluent.css +13 -0
  44. package/styles/h-scroll/highcontrast-light.css +8 -7
  45. package/styles/h-scroll/highcontrast.css +10 -9
  46. package/styles/h-scroll/material-dark.css +13 -2
  47. package/styles/h-scroll/material.css +13 -2
  48. package/styles/h-scroll/tailwind-dark.css +12 -0
  49. package/styles/h-scroll/tailwind.css +12 -0
  50. package/styles/highcontrast-light.css +918 -369
  51. package/styles/highcontrast.css +925 -370
  52. package/styles/material-dark.css +1184 -114
  53. package/styles/material.css +1162 -92
  54. package/styles/menu/fluent-dark.css +1 -1
  55. package/styles/menu/fluent.css +1 -1
  56. package/styles/tab/bootstrap-dark.css +587 -109
  57. package/styles/tab/bootstrap.css +574 -96
  58. package/styles/tab/bootstrap4.css +546 -114
  59. package/styles/tab/bootstrap5-dark.css +523 -134
  60. package/styles/tab/bootstrap5.css +523 -134
  61. package/styles/tab/fabric-dark.css +614 -199
  62. package/styles/tab/fabric.css +612 -197
  63. package/styles/tab/fluent-dark.css +546 -102
  64. package/styles/tab/fluent.css +546 -102
  65. package/styles/tab/highcontrast-light.css +520 -250
  66. package/styles/tab/highcontrast.css +520 -244
  67. package/styles/tab/material-dark.css +705 -54
  68. package/styles/tab/material.css +705 -54
  69. package/styles/tab/tailwind-dark.css +706 -71
  70. package/styles/tab/tailwind.css +706 -71
  71. package/styles/tailwind-dark.css +1145 -99
  72. package/styles/tailwind.css +1144 -98
  73. package/styles/toolbar/bootstrap-dark.css +196 -19
  74. package/styles/toolbar/bootstrap.css +196 -19
  75. package/styles/toolbar/bootstrap4.css +164 -36
  76. package/styles/toolbar/bootstrap5-dark.css +210 -29
  77. package/styles/toolbar/bootstrap5.css +210 -29
  78. package/styles/toolbar/fabric-dark.css +219 -9
  79. package/styles/toolbar/fabric.css +220 -10
  80. package/styles/toolbar/fluent-dark.css +233 -10
  81. package/styles/toolbar/fluent.css +233 -10
  82. package/styles/toolbar/highcontrast-light.css +199 -43
  83. package/styles/toolbar/highcontrast.css +200 -44
  84. package/styles/toolbar/material-dark.css +233 -19
  85. package/styles/toolbar/material.css +233 -19
  86. package/styles/toolbar/tailwind-dark.css +224 -15
  87. package/styles/toolbar/tailwind.css +223 -14
  88. package/styles/treeview/fluent-dark.css +2 -2
  89. package/styles/treeview/material.css +2 -2
  90. package/styles/treeview/tailwind.css +2 -2
  91. package/styles/v-scroll/bootstrap5-dark.css +2 -2
  92. package/styles/v-scroll/bootstrap5.css +2 -2
  93. package/styles/v-scroll/fabric-dark.css +2 -2
  94. package/styles/v-scroll/fabric.css +2 -2
  95. package/styles/v-scroll/fluent-dark.css +2 -2
  96. package/styles/v-scroll/fluent.css +2 -2
  97. package/styles/v-scroll/highcontrast-light.css +2 -14
  98. package/styles/v-scroll/highcontrast.css +2 -14
  99. package/styles/v-scroll/tailwind-dark.css +2 -2
  100. package/styles/v-scroll/tailwind.css +2 -2
package/styles/accordion/bootstrap.css CHANGED
@@ -11,6 +11,7 @@
11
11
  .e-bigger .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content,
12
12
  .e-accordion.e-bigger .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
13
13
  font-size: 16px;
14
+ vertical-align: middle;
14
15
  }
15
16
  .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel,
16
17
  .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel {
@@ -56,15 +57,21 @@
56
57
  min-height: 50px;
57
58
  min-width: 24px;
58
59
  right: 15px;
60
+ font-size: 12px;
59
61
  }
60
62
  .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon,
61
63
  .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon {
62
64
  display: inline-block;
63
65
  padding: 0 10px 0 0;
64
66
  }
67
+ .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons,
68
+ .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons {
69
+ font-size: 12px;
70
+ }
65
71
  .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content,
66
72
  .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content {
67
73
  padding: 15px;
74
+ font-size: 14px;
68
75
  }
69
76
  .e-bigger .e-accordion.e-rtl .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content,
70
77
  .e-accordion.e-bigger.e-rtl .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
@@ -104,22 +111,16 @@
104
111
  border-radius: 4px;
105
112
  margin-top: 5px;
106
113
  }
107
- .e-accordion .e-acrdn-item .nested .e-acrdn-item + .e-acrdn-item {
108
- margin-top: 0;
114
+ .e-accordion .e-acrdn-item.e-select.e-selected:first-child {
115
+ border-top: 1px solid #ddd;
109
116
  }
110
- .e-accordion .e-acrdn-item:not(.e-select) {
111
- margin-top: 5px;
117
+ .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
118
+ border-bottom: 1px solid #ddd;
112
119
  }
113
120
  .e-accordion .e-acrdn-item:not(.e-select) + .e-acrdn-item:not(.e-select) {
114
121
  margin-bottom: 0;
115
122
  margin-top: 0;
116
123
  }
117
- .e-accordion .e-acrdn-item:not(.e-select) + .e-acrdn-item.e-select {
118
- margin-top: 5px;
119
- }
120
- .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-header {
121
- border: 0;
122
- }
123
124
  .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-item.e-select {
124
125
  margin: 2px;
125
126
  }
@@ -161,10 +162,14 @@
161
162
  text-decoration: none;
162
163
  text-overflow: ellipsis;
163
164
  white-space: nowrap;
165
+ margin-bottom: 0;
164
166
  }
165
167
  .e-accordion .e-acrdn-item .e-acrdn-header > * {
166
168
  display: inline-block;
167
169
  }
170
+ .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
171
+ line-height: 39px;
172
+ }
168
173
  .e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon {
169
174
  display: none;
170
175
  font-size: 12px;
@@ -187,6 +192,9 @@
187
192
  display: inline-block;
188
193
  padding: 0 10px 0 0;
189
194
  }
195
+ .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons {
196
+ font-size: 12px;
197
+ }
190
198
  .e-accordion .e-acrdn-item .e-acrdn-panel {
191
199
  font-size: 14px;
192
200
  overflow-y: hidden;
@@ -265,25 +273,118 @@
265
273
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
266
274
  background: #fff;
267
275
  border: 1px none #ddd;
276
+ border-radius: 0;
268
277
  }
269
278
  .e-accordion .e-active {
270
279
  background: #fff;
271
280
  }
281
+ .e-accordion .e-acrdn-item {
282
+ border-color: #ddd;
283
+ border-style: solid;
284
+ border-width: 0;
285
+ border-radius: 4px;
286
+ }
287
+ .e-accordion .e-acrdn-item.e-select:last-child {
288
+ border-bottom: 1px solid #ddd;
289
+ border-radius: 4px;
290
+ }
291
+ .e-accordion .e-acrdn-item:first-child .e-acrdn-header:focus {
292
+ border-radius: 4px;
293
+ }
294
+ .e-accordion .e-acrdn-item:last-child {
295
+ border-bottom: 0;
296
+ }
297
+ .e-accordion .e-acrdn-item:last-child:not(.e-expand-state) .e-acrdn-header:focus {
298
+ border-radius: 4px;
299
+ }
300
+ .e-accordion .e-acrdn-item:last-child.e-selected .e-acrdn-header:focus {
301
+ border-radius: 4px;
302
+ }
303
+ .e-accordion .e-acrdn-item.e-item-focus {
304
+ border-color: #ddd;
305
+ border-style: solid;
306
+ border-width: 0;
307
+ }
308
+ .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state {
309
+ border-top: 1px solid #ddd;
310
+ }
311
+ .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:focus {
312
+ border-color: #ddd;
313
+ border-style: solid;
314
+ border-width: 0 0 1px 0;
315
+ }
316
+ .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:hover:focus {
317
+ background: transparent;
318
+ }
319
+ .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:hover:focus .e-acrdn-header-content {
320
+ color: #333;
321
+ }
322
+ .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:hover:focus .e-icons {
323
+ color: #333;
324
+ }
325
+ .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:hover:focus .e-acrdn-header-icon .e-icons {
326
+ color: #333;
327
+ }
328
+ .e-accordion .e-acrdn-item.e-item-focus.e-expand-state.e-select, .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state {
329
+ border-color: #ddd;
330
+ }
331
+ .e-accordion .e-acrdn-item.e-expand-state.e-select {
332
+ border-color: #ddd;
333
+ border-style: solid;
334
+ border-width: 1px;
335
+ }
336
+ .e-accordion .e-acrdn-item .e-acrdn-header {
337
+ border: 0;
338
+ }
339
+ .e-accordion .e-acrdn-item.e-overlay.e-select.e-expand-state .e-acrdn-header .e-icons,
340
+ .e-accordion .e-acrdn-item.e-overlay.e-select.e-expand-state .e-acrdn-header .e-acrdn-header-content {
341
+ color: #333;
342
+ }
272
343
  .e-accordion .e-acrdn-item.e-overlay {
273
344
  background: #fff;
345
+ opacity: 0.5;
346
+ }
347
+ .e-accordion .e-acrdn-item.e-overlay .e-acrdn-header .e-icons,
348
+ .e-accordion .e-acrdn-item.e-overlay .e-acrdn-header .e-acrdn-header-content {
349
+ color: #333;
350
+ }
351
+ .e-accordion .e-acrdn-item.e-overlay.e-overlay.e-select.e-expand-state .e-acrdn-header .e-icons {
352
+ color: #333;
353
+ }
354
+ .e-accordion .e-acrdn-item.e-overlay.e-overlay.e-select.e-expand-state .e-acrdn-header .e-acrdn-header-content {
355
+ color: #333;
274
356
  }
275
357
  .e-accordion .e-acrdn-item.e-selected.e-select.e-expand-state > .e-acrdn-header:focus {
358
+ border-color: #ddd;
359
+ border-style: solid;
360
+ border-width: 0 0 1px 0;
276
361
  background: transparent;
277
362
  }
363
+ .e-accordion .e-acrdn-item.e-selected.e-select.e-expand-state > .e-acrdn-header:hover {
364
+ background: #f5f5f5;
365
+ }
366
+ .e-accordion .e-acrdn-item.e-selected.e-select.e-expand-state > .e-acrdn-header:active {
367
+ background: #f5f5f5;
368
+ }
369
+ .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-content, .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-content {
370
+ color: #333;
371
+ }
372
+ .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-item:last-child {
373
+ border-bottom: 1px solid #ddd;
374
+ }
278
375
  .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-header .e-acrdn-header-content {
279
376
  color: #333;
280
377
  }
281
378
  .e-accordion .e-acrdn-item.e-select {
282
379
  background: #f5f5f5;
283
- border: 1px solid #ddd;
380
+ border-color: #ddd;
381
+ border-style: solid;
382
+ border-width: 1px;
284
383
  }
285
384
  .e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content {
286
385
  color: #333;
386
+ background: none;
387
+ border-top: 0;
287
388
  }
288
389
  .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
289
390
  color: #333;
@@ -293,19 +394,65 @@
293
394
  }
294
395
  .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
295
396
  background: transparent;
397
+ border: 0;
398
+ border-color: initial;
296
399
  }
297
400
  .e-accordion .e-acrdn-item .e-acrdn-header:hover {
401
+ border: 0;
298
402
  background: transparent;
403
+ border-color: initial;
299
404
  }
300
405
  .e-accordion .e-acrdn-item .e-acrdn-header:active {
406
+ border: 0;
407
+ border-color: initial;
301
408
  background: transparent;
302
409
  }
303
410
  .e-accordion .e-acrdn-item .e-acrdn-header:focus {
411
+ border: 0;
412
+ box-shadow: none;
304
413
  background: transparent;
305
414
  }
415
+ .e-accordion .e-acrdn-item .e-acrdn-header:focus:active .e-icons,
416
+ .e-accordion .e-acrdn-item .e-acrdn-header:focus:active .e-acrdn-header-content,
417
+ .e-accordion .e-acrdn-item .e-acrdn-header:focus:active .e-toggle-icon {
418
+ color: #333;
419
+ }
420
+ .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-acrdn-header-content {
421
+ color: #333;
422
+ }
423
+ .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-icons {
424
+ color: #333;
425
+ }
426
+ .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-toggle-icon .e-icons.e-tgl-collapse-icon {
427
+ color: #333;
428
+ }
429
+ .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover:focus .e-icons, .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover:focus .e-acrdn-header-content {
430
+ color: #333;
431
+ }
306
432
  .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header {
433
+ border-color: #ddd;
434
+ border-style: solid;
435
+ border-width: 0 0 1px 0;
307
436
  background: #f5f5f5;
308
437
  }
438
+ .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover .e-icons, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover .e-icons {
439
+ color: #333;
440
+ }
441
+ .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover .e-acrdn-header-icon .e-icons, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover .e-acrdn-header-icon .e-icons {
442
+ color: #333;
443
+ }
444
+ .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover .e-acrdn-header-content, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover .e-acrdn-header-content {
445
+ color: #333;
446
+ }
447
+ .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover:focus .e-icons, .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover:focus .e-acrdn-header-content, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover:focus .e-icons, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover:focus .e-acrdn-header-content {
448
+ color: #333;
449
+ }
450
+ .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-icon, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-icon {
451
+ color: #333;
452
+ }
453
+ .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover {
454
+ border-color: #ddd;
455
+ }
309
456
  .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header > .e-toggle-icon, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header > .e-toggle-icon {
310
457
  color: #333;
311
458
  }
@@ -314,18 +461,57 @@
314
461
  .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-content {
315
462
  color: #333;
316
463
  }
464
+ .e-accordion .e-acrdn-item.e-select.e-item-focus {
465
+ border-color: #ddd;
466
+ }
317
467
  .e-accordion .e-acrdn-item.e-selected {
318
- border: 1px solid #ddd;
468
+ border-color: #ddd;
469
+ border-style: solid;
470
+ border-width: 1px;
471
+ }
472
+ .e-accordion .e-acrdn-item.e-selected.e-select {
473
+ border-color: #ddd;
474
+ border-style: solid;
475
+ border-width: 1px 0 1px 0;
476
+ }
477
+ .e-accordion .e-acrdn-item.e-selected.e-select.e-active {
478
+ background: #f5f5f5;
479
+ }
480
+ .e-accordion .e-acrdn-item.e-selected.e-select.e-select:last-child {
481
+ border-bottom: 1px solid #ddd;
482
+ }
483
+ .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header > .e-acrdn-header-content {
484
+ color: #333;
485
+ }
486
+ .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header > .e-toggle-icon {
487
+ color: #333;
488
+ }
489
+ .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
490
+ box-shadow: none;
319
491
  }
320
492
  .e-accordion .e-acrdn-item.e-selected + .e-selected {
321
- border: 1px solid #ddd;
322
- border-top: 1px none #000;
493
+ border-color: #ddd;
494
+ border-style: solid;
495
+ border-width: 0 1px 1px 1px;
496
+ }
497
+ .e-accordion .e-acrdn-item.e-selected .e-acrdn-item.e-selected.e-expand-state:hover > .e-acrdn-header .e-icons {
498
+ color: #333;
499
+ }
500
+ .e-accordion .e-acrdn-item.e-selected .e-acrdn-item.e-selected.e-expand-state:hover > .e-acrdn-header .e-acrdn-header-content {
501
+ color: #333;
323
502
  }
324
503
  .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header {
325
504
  background: #f5f5f5;
326
- border: 0;
327
- border-bottom: 1px solid #ddd;
328
505
  border-radius: 0;
506
+ border-color: #ddd;
507
+ border-style: solid;
508
+ border-width: 0 0 1px 0;
509
+ }
510
+ .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header:focus {
511
+ background: transparent;
512
+ }
513
+ .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header:hover {
514
+ border-color: #ddd;
329
515
  }
330
516
  .e-accordion .e-acrdn-item.e-selected > .e-acrdn-panel .e-acrdn-content {
331
517
  color: #333;
package/styles/accordion/bootstrap4.css CHANGED
@@ -10,7 +10,6 @@
10
10
  .e-bigger .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content,
11
11
  .e-accordion.e-bigger .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
12
12
  font-size: 16px;
13
- line-height: 24px;
14
13
  vertical-align: middle;
15
14
  }
16
15
  .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel,
@@ -66,13 +65,12 @@
66
65
  }
67
66
  .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons,
68
67
  .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons {
69
- font-size: 16px;
68
+ font-size: 14px;
70
69
  }
71
70
  .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content,
72
71
  .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content {
73
72
  padding: 20px;
74
73
  font-size: 16px;
75
- line-height: 24px;
76
74
  }
77
75
  .e-bigger .e-accordion.e-rtl .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content,
78
76
  .e-accordion.e-bigger.e-rtl .e-acrdn-item.e-select .e-acrdn-panel.e-nested > .e-acrdn-content > .e-accordion > .e-acrdn-item > .e-acrdn-panel:not(.e-nested) > .e-acrdn-content {
@@ -108,6 +106,23 @@
108
106
  display: block;
109
107
  position: relative;
110
108
  }
109
+ .e-accordion .e-acrdn-item {
110
+ border-radius: 4px 4px 0 0;
111
+ margin-top: 0;
112
+ }
113
+ .e-accordion .e-acrdn-item.e-select.e-selected:first-child {
114
+ border-top: 1px none #000;
115
+ }
116
+ .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
117
+ border-bottom: 1px solid rgba(0, 0, 0, 0.13);
118
+ }
119
+ .e-accordion .e-acrdn-item:not(.e-select) + .e-acrdn-item:not(.e-select) {
120
+ margin-bottom: 0;
121
+ margin-top: 0;
122
+ }
123
+ .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-item.e-select {
124
+ margin: 0;
125
+ }
111
126
  .e-accordion .e-acrdn-item > .e-acrdn-header .e-acrdn-header-content {
112
127
  font-weight: normal;
113
128
  }
@@ -138,6 +153,7 @@
138
153
  text-decoration: underline;
139
154
  }
140
155
  .e-accordion .e-acrdn-item .e-acrdn-header {
156
+ border-radius: 0;
141
157
  line-height: 39px;
142
158
  min-height: 40px;
143
159
  overflow: hidden;
@@ -145,6 +161,7 @@
145
161
  text-decoration: none;
146
162
  text-overflow: ellipsis;
147
163
  white-space: nowrap;
164
+ margin-bottom: 0;
148
165
  }
149
166
  .e-accordion .e-acrdn-item .e-acrdn-header > * {
150
167
  display: inline-block;
@@ -261,13 +278,63 @@
261
278
  background: #fff;
262
279
  }
263
280
  .e-accordion .e-acrdn-item {
264
- border-bottom: 1px solid rgba(0, 0, 0, 0.13);
281
+ border-color: rgba(0, 0, 0, 0.13);
282
+ border-style: solid;
283
+ border-width: 0 0 1px 0;
265
284
  border-radius: 4px 4px 0 0;
266
285
  }
267
286
  .e-accordion .e-acrdn-item.e-select:last-child {
268
287
  border-bottom: 0;
269
288
  border-radius: 0 0 4px 4px;
270
289
  }
290
+ .e-accordion .e-acrdn-item:first-child .e-acrdn-header:focus {
291
+ border-radius: 0;
292
+ }
293
+ .e-accordion .e-acrdn-item:last-child {
294
+ border-bottom: 1px solid rgba(0, 0, 0, 0.13);
295
+ }
296
+ .e-accordion .e-acrdn-item:last-child:not(.e-expand-state) .e-acrdn-header:focus {
297
+ border-radius: 0;
298
+ }
299
+ .e-accordion .e-acrdn-item:last-child.e-selected .e-acrdn-header:focus {
300
+ border-radius: 0;
301
+ }
302
+ .e-accordion .e-acrdn-item.e-item-focus {
303
+ border-color: rgba(0, 0, 0, 0.13);
304
+ border-style: solid;
305
+ border-width: 0 0 1px 0;
306
+ }
307
+ .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state {
308
+ border-top: 1px none #000;
309
+ }
310
+ .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:focus {
311
+ border-color: rgba(0, 0, 0, 0.13);
312
+ border-style: solid;
313
+ border-width: 0;
314
+ }
315
+ .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:hover:focus {
316
+ background: #f8f9fa;
317
+ }
318
+ .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:hover:focus .e-acrdn-header-content {
319
+ color: #007bff;
320
+ }
321
+ .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:hover:focus .e-icons {
322
+ color: #007bff;
323
+ }
324
+ .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:hover:focus .e-acrdn-header-icon .e-icons {
325
+ color: #007bff;
326
+ }
327
+ .e-accordion .e-acrdn-item.e-item-focus.e-expand-state.e-select, .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state {
328
+ border-color: #000 #000 rgba(0, 0, 0, 0.13);
329
+ }
330
+ .e-accordion .e-acrdn-item.e-expand-state.e-select {
331
+ border-color: rgba(0, 0, 0, 0.13);
332
+ border-style: solid;
333
+ border-width: 0 0 1px 0;
334
+ }
335
+ .e-accordion .e-acrdn-item .e-acrdn-header {
336
+ border: 0;
337
+ }
271
338
  .e-accordion .e-acrdn-item.e-overlay.e-select.e-expand-state .e-acrdn-header .e-icons,
272
339
  .e-accordion .e-acrdn-item.e-overlay.e-select.e-expand-state .e-acrdn-header .e-acrdn-header-content {
273
340
  color: #6c757d;
@@ -280,15 +347,39 @@
280
347
  .e-accordion .e-acrdn-item.e-overlay .e-acrdn-header .e-acrdn-header-content {
281
348
  color: #6c757d;
282
349
  }
350
+ .e-accordion .e-acrdn-item.e-overlay.e-overlay.e-select.e-expand-state .e-acrdn-header .e-icons {
351
+ color: #6c757d;
352
+ }
353
+ .e-accordion .e-acrdn-item.e-overlay.e-overlay.e-select.e-expand-state .e-acrdn-header .e-acrdn-header-content {
354
+ color: #007bff;
355
+ }
283
356
  .e-accordion .e-acrdn-item.e-selected.e-select.e-expand-state > .e-acrdn-header:focus {
357
+ border-color: rgba(0, 0, 0, 0.13);
358
+ border-style: solid;
359
+ border-width: 0;
284
360
  background: #f8f9fa;
285
361
  }
362
+ .e-accordion .e-acrdn-item.e-selected.e-select.e-expand-state > .e-acrdn-header:hover {
363
+ background: #f8f9fa;
364
+ }
365
+ .e-accordion .e-acrdn-item.e-selected.e-select.e-expand-state > .e-acrdn-header:active {
366
+ background: #f8f9fa;
367
+ }
368
+ .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-content, .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-content {
369
+ color: #007bff;
370
+ }
286
371
  .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-item:last-child {
287
372
  border-bottom: 1px none rgba(0, 0, 0, 0.13);
288
373
  }
289
374
  .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-header .e-acrdn-header-content {
290
375
  color: #007bff;
291
376
  }
377
+ .e-accordion .e-acrdn-item.e-select {
378
+ background: #f8f9fa;
379
+ border-color: rgba(0, 0, 0, 0.13);
380
+ border-style: solid;
381
+ border-width: 0 0 1px 0;
382
+ }
292
383
  .e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content {
293
384
  color: #212529;
294
385
  background: #fff;
@@ -302,37 +393,65 @@
302
393
  }
303
394
  .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
304
395
  background: #f8f9fa;
396
+ border: 0;
397
+ border-color: initial;
305
398
  }
306
399
  .e-accordion .e-acrdn-item .e-acrdn-header:hover {
400
+ border: 0;
307
401
  background: #f8f9fa;
402
+ border-color: initial;
308
403
  }
309
404
  .e-accordion .e-acrdn-item .e-acrdn-header:active {
405
+ border: 0;
406
+ border-color: initial;
310
407
  background: #f8f9fa;
311
408
  }
312
409
  .e-accordion .e-acrdn-item .e-acrdn-header:focus {
410
+ border: 0;
411
+ box-shadow: none;
313
412
  background: #f8f9fa;
314
413
  }
315
- .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-icons,
414
+ .e-accordion .e-acrdn-item .e-acrdn-header:focus:active .e-icons,
415
+ .e-accordion .e-acrdn-item .e-acrdn-header:focus:active .e-acrdn-header-content,
416
+ .e-accordion .e-acrdn-item .e-acrdn-header:focus:active .e-toggle-icon {
417
+ color: #007bff;
418
+ }
316
419
  .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-acrdn-header-content {
317
420
  color: #0056b3;
318
421
  }
319
- .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover:focus .e-icons, .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover:focus .e-acrdn-header-content {
422
+ .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-icons {
320
423
  color: #007bff;
321
424
  }
322
- .e-accordion .e-acrdn-item.e-select.e-selected > .e-acrdn-header {
323
- background: #f8f9fa;
425
+ .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-toggle-icon .e-icons.e-tgl-collapse-icon {
426
+ color: #0056b3;
427
+ }
428
+ .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover:focus .e-icons, .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover:focus .e-acrdn-header-content {
429
+ color: #007bff;
324
430
  }
325
431
  .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header {
432
+ border-color: initial;
433
+ border-style: solid;
434
+ border-width: 0;
326
435
  background: #f8f9fa;
327
436
  }
328
- .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover .e-icons,
329
- .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover .e-acrdn-header-content, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover .e-icons,
330
- .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover .e-acrdn-header-content {
437
+ .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover .e-icons, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover .e-icons {
438
+ color: #0056b3;
439
+ }
440
+ .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover .e-acrdn-header-icon .e-icons, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover .e-acrdn-header-icon .e-icons {
441
+ color: #007bff;
442
+ }
443
+ .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover .e-acrdn-header-content, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover .e-acrdn-header-content {
331
444
  color: #0056b3;
332
445
  }
333
446
  .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover:focus .e-icons, .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover:focus .e-acrdn-header-content, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover:focus .e-icons, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover:focus .e-acrdn-header-content {
334
447
  color: #007bff;
335
448
  }
449
+ .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header .e-acrdn-header-icon, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-icon {
450
+ color: #007bff;
451
+ }
452
+ .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header:hover, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header:hover {
453
+ border-color: initial;
454
+ }
336
455
  .e-accordion .e-acrdn-item.e-select.e-selected.e-expand-state > .e-acrdn-header > .e-toggle-icon, .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header > .e-toggle-icon {
337
456
  color: #007bff;
338
457
  }
@@ -341,22 +460,57 @@
341
460
  .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-content {
342
461
  color: #007bff;
343
462
  }
463
+ .e-accordion .e-acrdn-item.e-select.e-item-focus {
464
+ border-color: rgba(0, 0, 0, 0.13);
465
+ }
466
+ .e-accordion .e-acrdn-item.e-selected {
467
+ border-color: #000 #000 rgba(0, 0, 0, 0.13);
468
+ border-style: solid;
469
+ border-width: 0 0 1px 0;
470
+ }
344
471
  .e-accordion .e-acrdn-item.e-selected.e-select {
345
- border-bottom: 1px none #000;
346
- border-top: 1px none #000;
347
- border-bottom: 1px solid rgba(0, 0, 0, 0.13);
472
+ border-color: #000 #000 rgba(0, 0, 0, 0.13);
473
+ border-style: solid;
474
+ border-width: 0 0 1px 0;
475
+ }
476
+ .e-accordion .e-acrdn-item.e-selected.e-select.e-active {
477
+ background: #fff;
348
478
  }
349
479
  .e-accordion .e-acrdn-item.e-selected.e-select.e-select:last-child {
350
480
  border-bottom: 1px none rgba(0, 0, 0, 0.13);
351
481
  }
482
+ .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header > .e-acrdn-header-content {
483
+ color: #007bff;
484
+ }
485
+ .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header > .e-toggle-icon {
486
+ color: #007bff;
487
+ }
488
+ .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
489
+ box-shadow: none;
490
+ }
352
491
  .e-accordion .e-acrdn-item.e-selected + .e-selected {
353
- border-top: 1px none #000;
492
+ border-color: #000 #000 rgba(0, 0, 0, 0.13);
493
+ border-style: solid;
494
+ border-width: 0 0 1px 0;
495
+ }
496
+ .e-accordion .e-acrdn-item.e-selected .e-acrdn-item.e-selected.e-expand-state:hover > .e-acrdn-header .e-icons {
497
+ color: #007bff;
354
498
  }
355
- .e-accordion .e-acrdn-item.e-selected .e-selected:last-child {
356
- border-bottom: 1px none #000;
499
+ .e-accordion .e-acrdn-item.e-selected .e-acrdn-item.e-selected.e-expand-state:hover > .e-acrdn-header .e-acrdn-header-content {
500
+ color: #007bff;
357
501
  }
358
502
  .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header {
503
+ background: #f8f9fa;
359
504
  border-radius: 4px;
505
+ border-color: initial;
506
+ border-style: solid;
507
+ border-width: 0;
508
+ }
509
+ .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header:focus {
510
+ background: #f8f9fa;
511
+ }
512
+ .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header:hover {
513
+ border-color: initial;
360
514
  }
361
515
  .e-accordion .e-acrdn-item.e-selected > .e-acrdn-panel .e-acrdn-content {
362
516
  color: #212529;