@syncfusion/ej2-react-navigations 20.3.60 → 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 +17 -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/fabric-dark.css CHANGED
@@ -10,6 +10,7 @@
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
+ vertical-align: middle;
13
14
  }
14
15
  .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel,
15
16
  .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel {
@@ -55,15 +56,21 @@
55
56
  min-height: 50px;
56
57
  min-width: 30px;
57
58
  right: 12px;
59
+ font-size: 14px;
58
60
  }
59
61
  .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon,
60
62
  .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon {
61
63
  display: inline-block;
62
64
  padding: 0 14px 0 0;
63
65
  }
66
+ .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons,
67
+ .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons {
68
+ font-size: 14px;
69
+ }
64
70
  .e-bigger .e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content,
65
71
  .e-accordion.e-bigger .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content {
66
72
  padding: 19px;
73
+ font-size: 14px;
67
74
  }
68
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,
69
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 {
@@ -99,6 +106,23 @@
99
106
  display: block;
100
107
  position: relative;
101
108
  }
109
+ .e-accordion .e-acrdn-item {
110
+ border-radius: 0;
111
+ margin-top: 0;
112
+ }
113
+ .e-accordion .e-acrdn-item.e-select.e-selected:first-child {
114
+ border-top: 1px solid #414040;
115
+ }
116
+ .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
117
+ border-bottom: 1px solid #414040;
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
+ }
102
126
  .e-accordion .e-acrdn-item > .e-acrdn-header .e-acrdn-header-content {
103
127
  font-weight: normal;
104
128
  }
@@ -125,7 +149,11 @@
125
149
  .e-accordion .e-acrdn-item.e-select > .e-acrdn-header {
126
150
  cursor: pointer;
127
151
  }
152
+ .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:hover .e-acrdn-header-content, .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:focus .e-acrdn-header-content {
153
+ text-decoration: none;
154
+ }
128
155
  .e-accordion .e-acrdn-item .e-acrdn-header {
156
+ border-radius: 0;
129
157
  line-height: 39px;
130
158
  min-height: 40px;
131
159
  overflow: hidden;
@@ -133,10 +161,14 @@
133
161
  text-decoration: none;
134
162
  text-overflow: ellipsis;
135
163
  white-space: nowrap;
164
+ margin-bottom: 0;
136
165
  }
137
166
  .e-accordion .e-acrdn-item .e-acrdn-header > * {
138
167
  display: inline-block;
139
168
  }
169
+ .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
170
+ line-height: 39px;
171
+ }
140
172
  .e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon {
141
173
  display: table;
142
174
  font-size: 14px;
@@ -159,6 +191,9 @@
159
191
  display: inline-block;
160
192
  padding: 0 8px 0 0;
161
193
  }
194
+ .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons {
195
+ font-size: 14px;
196
+ }
162
197
  .e-accordion .e-acrdn-item .e-acrdn-panel {
163
198
  font-size: 13px;
164
199
  overflow-y: hidden;
@@ -237,39 +272,118 @@
237
272
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
238
273
  background: #201f1f;
239
274
  border: 1px solid #414040;
275
+ border-radius: 0;
240
276
  }
241
277
  .e-accordion .e-active {
242
278
  background: #201f1f;
243
279
  }
244
280
  .e-accordion .e-acrdn-item {
281
+ border-color: #201f1f;
282
+ border-style: solid;
283
+ border-width: 1px 0 1px 0;
284
+ border-radius: 0;
285
+ }
286
+ .e-accordion .e-acrdn-item.e-select:last-child {
287
+ border-bottom: 1px solid #201f1f;
288
+ border-radius: 0;
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 {
245
294
  border-bottom: 1px solid #201f1f;
246
- border-top: 1px solid #201f1f;
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;
247
301
  }
248
302
  .e-accordion .e-acrdn-item.e-item-focus {
249
- border-bottom: 1px solid #414040;
250
- border-top: 1px solid #414040;
303
+ border-color: #414040;
304
+ border-style: solid;
305
+ border-width: 1px 0 1px 0;
251
306
  }
252
307
  .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state {
253
308
  border-top: 1px solid #514f4f;
254
309
  }
310
+ .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:focus {
311
+ border-color: #dadada;
312
+ border-style: solid;
313
+ border-width: 1px;
314
+ }
315
+ .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:hover:focus {
316
+ background: #514f4f;
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: #fff;
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: #fff;
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: #fff;
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: #514f4f #514f4f #414040;
329
+ }
255
330
  .e-accordion .e-acrdn-item.e-expand-state.e-select {
256
- border-bottom: 1px solid #514f4f;
257
- border-top: 1px solid #514f4f;
331
+ border-color: #514f4f;
332
+ border-style: solid;
333
+ border-width: 1px 0 1px 0;
258
334
  }
259
335
  .e-accordion .e-acrdn-item .e-acrdn-header {
260
336
  border: 1px solid #201f1f;
261
337
  }
338
+ .e-accordion .e-acrdn-item.e-overlay.e-select.e-expand-state .e-acrdn-header .e-icons,
339
+ .e-accordion .e-acrdn-item.e-overlay.e-select.e-expand-state .e-acrdn-header .e-acrdn-header-content {
340
+ color: #fff;
341
+ }
262
342
  .e-accordion .e-acrdn-item.e-overlay {
263
343
  background: #201f1f;
344
+ opacity: 0.5;
345
+ }
346
+ .e-accordion .e-acrdn-item.e-overlay .e-acrdn-header .e-icons,
347
+ .e-accordion .e-acrdn-item.e-overlay .e-acrdn-header .e-acrdn-header-content {
348
+ color: #dadada;
349
+ }
350
+ .e-accordion .e-acrdn-item.e-overlay.e-overlay.e-select.e-expand-state .e-acrdn-header .e-icons {
351
+ color: #fff;
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: #fff;
264
355
  }
265
356
  .e-accordion .e-acrdn-item.e-selected.e-select.e-expand-state > .e-acrdn-header:focus {
266
- border: 1px solid #dadada;
357
+ border-color: #dadada;
358
+ border-style: solid;
359
+ border-width: 1px;
360
+ background: #514f4f;
361
+ }
362
+ .e-accordion .e-acrdn-item.e-selected.e-select.e-expand-state > .e-acrdn-header:hover {
363
+ background: #514f4f;
364
+ }
365
+ .e-accordion .e-acrdn-item.e-selected.e-select.e-expand-state > .e-acrdn-header:active {
366
+ background: #514f4f;
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: #fff;
370
+ }
371
+ .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-content .e-acrdn-item:last-child {
372
+ border-bottom: 1px none #414040;
267
373
  }
268
374
  .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-header .e-acrdn-header-content {
269
375
  color: #dadada;
270
376
  }
377
+ .e-accordion .e-acrdn-item.e-select {
378
+ background: none;
379
+ border-color: #201f1f;
380
+ border-style: solid;
381
+ border-width: 1px 0 1px 0;
382
+ }
271
383
  .e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content {
272
384
  color: #dadada;
385
+ background: none;
386
+ border-top: 0;
273
387
  }
274
388
  .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
275
389
  color: #dadada;
@@ -278,24 +392,66 @@
278
392
  color: #dadada;
279
393
  }
280
394
  .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
395
+ background: #514f4f;
281
396
  border: 1px solid #dadada;
397
+ border-color: #dadada;
282
398
  }
283
399
  .e-accordion .e-acrdn-item .e-acrdn-header:hover {
284
400
  border: 1px solid #414040;
285
401
  background: #414040;
402
+ border-color: #414040;
286
403
  }
287
404
  .e-accordion .e-acrdn-item .e-acrdn-header:active {
288
405
  border: 1px solid #514f4f;
406
+ border-color: #514f4f;
289
407
  background: #514f4f;
290
408
  }
291
409
  .e-accordion .e-acrdn-item .e-acrdn-header:focus {
292
410
  border: 1px solid #414040;
411
+ box-shadow: none;
293
412
  background: #414040;
294
413
  }
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: #dadada;
418
+ }
419
+ .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-acrdn-header-content {
420
+ color: #dadada;
421
+ }
422
+ .e-accordion .e-acrdn-item.e-select.e-acrdn-item > .e-acrdn-header:hover .e-icons {
423
+ color: #dadada;
424
+ }
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: #dadada;
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: #dadada;
430
+ }
295
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 {
296
- border: 1px solid #514f4f;
432
+ border-color: #514f4f;
433
+ border-style: solid;
434
+ border-width: 1px;
297
435
  background: #514f4f;
298
436
  }
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: #fff;
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: #fff;
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 {
444
+ color: #fff;
445
+ }
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 {
447
+ color: #fff;
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: #fff;
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: #514f4f;
454
+ }
299
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 {
300
456
  color: #fff;
301
457
  }
@@ -304,15 +460,57 @@
304
460
  .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-content {
305
461
  color: #fff;
306
462
  }
463
+ .e-accordion .e-acrdn-item.e-select.e-item-focus {
464
+ border-color: #414040;
465
+ }
466
+ .e-accordion .e-acrdn-item.e-selected {
467
+ border-color: #414040;
468
+ border-style: solid;
469
+ border-width: 1px 0 1px 0;
470
+ }
307
471
  .e-accordion .e-acrdn-item.e-selected.e-select {
472
+ border-color: #414040;
473
+ border-style: solid;
474
+ border-width: 1px 0 1px 0;
475
+ }
476
+ .e-accordion .e-acrdn-item.e-selected.e-select.e-active {
477
+ background: #201f1f;
478
+ }
479
+ .e-accordion .e-acrdn-item.e-selected.e-select.e-select:last-child {
308
480
  border-bottom: 1px solid #414040;
309
- border-top: 1px solid #414040;
481
+ }
482
+ .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header > .e-acrdn-header-content {
483
+ color: #dadada;
484
+ }
485
+ .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header > .e-toggle-icon {
486
+ color: #dadada;
487
+ }
488
+ .e-accordion .e-acrdn-item.e-selected > .e-acrdn-header:focus {
489
+ box-shadow: none;
310
490
  }
311
491
  .e-accordion .e-acrdn-item.e-selected + .e-selected {
312
- border-top: 1px none #414040;
492
+ border-color: #414040;
493
+ border-style: solid;
494
+ border-width: 0 0 1px 0;
313
495
  }
314
- .e-accordion .e-acrdn-item.e-selected .e-selected:last-child {
315
- border-bottom: 1px none #414040;
496
+ .e-accordion .e-acrdn-item.e-selected .e-acrdn-item.e-selected.e-expand-state:hover > .e-acrdn-header .e-icons {
497
+ color: #fff;
498
+ }
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: #fff;
501
+ }
502
+ .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header {
503
+ background: none;
504
+ border-radius: 0;
505
+ border-color: #201f1f;
506
+ border-style: solid;
507
+ border-width: 1px;
508
+ }
509
+ .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header:focus {
510
+ background: #414040;
511
+ }
512
+ .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header:hover {
513
+ border-color: #414040;
316
514
  }
317
515
  .e-accordion .e-acrdn-item.e-selected > .e-acrdn-panel .e-acrdn-content {
318
516
  color: #dadada;
package/styles/accordion/fabric.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: 30px;
58
59
  right: 12px;
60
+ font-size: 14px;
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 14px 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: 14px;
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: 19px;
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 {
@@ -100,6 +107,23 @@
100
107
  display: block;
101
108
  position: relative;
102
109
  }
110
+ .e-accordion .e-acrdn-item {
111
+ border-radius: 0;
112
+ margin-top: 0;
113
+ }
114
+ .e-accordion .e-acrdn-item.e-select.e-selected:first-child {
115
+ border-top: 1px solid #eaeaea;
116
+ }
117
+ .e-accordion .e-acrdn-item.e-select.e-selected:last-child {
118
+ border-bottom: 1px solid #eaeaea;
119
+ }
120
+ .e-accordion .e-acrdn-item:not(.e-select) + .e-acrdn-item:not(.e-select) {
121
+ margin-bottom: 0;
122
+ margin-top: 0;
123
+ }
124
+ .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-item.e-select {
125
+ margin: 0;
126
+ }
103
127
  .e-accordion .e-acrdn-item > .e-acrdn-header .e-acrdn-header-content {
104
128
  font-weight: normal;
105
129
  }
@@ -126,7 +150,11 @@
126
150
  .e-accordion .e-acrdn-item.e-select > .e-acrdn-header {
127
151
  cursor: pointer;
128
152
  }
153
+ .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:hover .e-acrdn-header-content, .e-accordion .e-acrdn-item.e-select > .e-acrdn-header:focus .e-acrdn-header-content {
154
+ text-decoration: none;
155
+ }
129
156
  .e-accordion .e-acrdn-item .e-acrdn-header {
157
+ border-radius: 0;
130
158
  line-height: 39px;
131
159
  min-height: 40px;
132
160
  overflow: hidden;
@@ -134,10 +162,14 @@
134
162
  text-decoration: none;
135
163
  text-overflow: ellipsis;
136
164
  white-space: nowrap;
165
+ margin-bottom: 0;
137
166
  }
138
167
  .e-accordion .e-acrdn-item .e-acrdn-header > * {
139
168
  display: inline-block;
140
169
  }
170
+ .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
171
+ line-height: 39px;
172
+ }
141
173
  .e-accordion .e-acrdn-item .e-acrdn-header .e-toggle-icon {
142
174
  display: table;
143
175
  font-size: 14px;
@@ -160,6 +192,9 @@
160
192
  display: inline-block;
161
193
  padding: 0 8px 0 0;
162
194
  }
195
+ .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon .e-acrdn-icons.e-icons {
196
+ font-size: 14px;
197
+ }
163
198
  .e-accordion .e-acrdn-item .e-acrdn-panel {
164
199
  font-size: 13px;
165
200
  overflow-y: hidden;
@@ -238,39 +273,118 @@
238
273
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
239
274
  background: #fff;
240
275
  border: 1px solid #eaeaea;
276
+ border-radius: 0;
241
277
  }
242
278
  .e-accordion .e-active {
243
279
  background: #fff;
244
280
  }
245
281
  .e-accordion .e-acrdn-item {
282
+ border-color: #fff;
283
+ border-style: solid;
284
+ border-width: 1px 0 1px 0;
285
+ border-radius: 0;
286
+ }
287
+ .e-accordion .e-acrdn-item.e-select:last-child {
288
+ border-bottom: 1px solid #fff;
289
+ border-radius: 0;
290
+ }
291
+ .e-accordion .e-acrdn-item:first-child .e-acrdn-header:focus {
292
+ border-radius: 0;
293
+ }
294
+ .e-accordion .e-acrdn-item:last-child {
246
295
  border-bottom: 1px solid #fff;
247
- border-top: 1px solid #fff;
296
+ }
297
+ .e-accordion .e-acrdn-item:last-child:not(.e-expand-state) .e-acrdn-header:focus {
298
+ border-radius: 0;
299
+ }
300
+ .e-accordion .e-acrdn-item:last-child.e-selected .e-acrdn-header:focus {
301
+ border-radius: 0;
248
302
  }
249
303
  .e-accordion .e-acrdn-item.e-item-focus {
250
- border-bottom: 1px solid #f4f4f4;
251
- border-top: 1px solid #f4f4f4;
304
+ border-color: #f4f4f4;
305
+ border-style: solid;
306
+ border-width: 1px 0 1px 0;
252
307
  }
253
308
  .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state {
254
309
  border-top: 1px solid #d1ebff;
255
310
  }
311
+ .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:focus {
312
+ border-color: #666;
313
+ border-style: solid;
314
+ border-width: 1px;
315
+ }
316
+ .e-accordion .e-acrdn-item.e-item-focus.e-select.e-selected.e-expand-state .e-acrdn-header:hover:focus {
317
+ background: #d1ebff;
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: #d1ebff #d1ebff #eaeaea;
330
+ }
256
331
  .e-accordion .e-acrdn-item.e-expand-state.e-select {
257
- border-bottom: 1px solid #d1ebff;
258
- border-top: 1px solid #d1ebff;
332
+ border-color: #d1ebff;
333
+ border-style: solid;
334
+ border-width: 1px 0 1px 0;
259
335
  }
260
336
  .e-accordion .e-acrdn-item .e-acrdn-header {
261
337
  border: 1px solid #fff;
262
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
+ }
263
343
  .e-accordion .e-acrdn-item.e-overlay {
264
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;
265
356
  }
266
357
  .e-accordion .e-acrdn-item.e-selected.e-select.e-expand-state > .e-acrdn-header:focus {
267
- border: 1px solid #666;
358
+ border-color: #666;
359
+ border-style: solid;
360
+ border-width: 1px;
361
+ background: #d1ebff;
362
+ }
363
+ .e-accordion .e-acrdn-item.e-selected.e-select.e-expand-state > .e-acrdn-header:hover {
364
+ background: #d1ebff;
365
+ }
366
+ .e-accordion .e-acrdn-item.e-selected.e-select.e-expand-state > .e-acrdn-header:active {
367
+ background: #d1ebff;
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 none #eaeaea;
268
374
  }
269
375
  .e-accordion .e-acrdn-item .e-acrdn-panel.e-nested .e-acrdn-header .e-acrdn-header-content {
270
376
  color: #333;
271
377
  }
378
+ .e-accordion .e-acrdn-item.e-select {
379
+ background: none;
380
+ border-color: #fff;
381
+ border-style: solid;
382
+ border-width: 1px 0 1px 0;
383
+ }
272
384
  .e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content {
273
385
  color: #333;
386
+ background: none;
387
+ border-top: 0;
274
388
  }
275
389
  .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content {
276
390
  color: #333;
@@ -279,24 +393,66 @@
279
393
  color: #333;
280
394
  }
281
395
  .e-accordion .e-acrdn-item.e-expand-state.e-select:not(.e-selected) > .e-acrdn-header:focus {
396
+ background: #d1ebff;
282
397
  border: 1px solid #666;
398
+ border-color: #666;
283
399
  }
284
400
  .e-accordion .e-acrdn-item .e-acrdn-header:hover {
285
401
  border: 1px solid #f4f4f4;
286
402
  background: #f4f4f4;
403
+ border-color: #f4f4f4;
287
404
  }
288
405
  .e-accordion .e-acrdn-item .e-acrdn-header:active {
289
406
  border: 1px solid #f4f4f4;
407
+ border-color: #f4f4f4;
290
408
  background: #f4f4f4;
291
409
  }
292
410
  .e-accordion .e-acrdn-item .e-acrdn-header:focus {
293
411
  border: 1px solid #f4f4f4;
412
+ box-shadow: none;
294
413
  background: #f4f4f4;
295
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
+ }
296
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 {
297
- border: 1px solid #d1ebff;
433
+ border-color: #d1ebff;
434
+ border-style: solid;
435
+ border-width: 1px;
298
436
  background: #d1ebff;
299
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: #d1ebff;
455
+ }
300
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 {
301
457
  color: #333;
302
458
  }
@@ -305,15 +461,57 @@
305
461
  .e-accordion .e-acrdn-item.e-select.e-expand-state > .e-acrdn-header .e-acrdn-header-content {
306
462
  color: #333;
307
463
  }
464
+ .e-accordion .e-acrdn-item.e-select.e-item-focus {
465
+ border-color: #f4f4f4;
466
+ }
467
+ .e-accordion .e-acrdn-item.e-selected {
468
+ border-color: #eaeaea;
469
+ border-style: solid;
470
+ border-width: 1px 0 1px 0;
471
+ }
308
472
  .e-accordion .e-acrdn-item.e-selected.e-select {
473
+ border-color: #eaeaea;
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: #fff;
479
+ }
480
+ .e-accordion .e-acrdn-item.e-selected.e-select.e-select:last-child {
309
481
  border-bottom: 1px solid #eaeaea;
310
- border-top: 1px solid #eaeaea;
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;
311
491
  }
312
492
  .e-accordion .e-acrdn-item.e-selected + .e-selected {
313
- border-top: 1px none #eaeaea;
493
+ border-color: #eaeaea;
494
+ border-style: solid;
495
+ border-width: 0 0 1px 0;
314
496
  }
315
- .e-accordion .e-acrdn-item.e-selected .e-selected:last-child {
316
- border-bottom: 1px none #eaeaea;
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;
502
+ }
503
+ .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header {
504
+ background: none;
505
+ border-radius: 0;
506
+ border-color: #fff;
507
+ border-style: solid;
508
+ border-width: 1px;
509
+ }
510
+ .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header:focus {
511
+ background: #f4f4f4;
512
+ }
513
+ .e-accordion .e-acrdn-item.e-selected.e-select > .e-acrdn-header:hover {
514
+ border-color: #f4f4f4;
317
515
  }
318
516
  .e-accordion .e-acrdn-item.e-selected > .e-acrdn-panel .e-acrdn-content {
319
517
  color: #333;