@syncfusion/ej2-angular-navigations 19.2.59 → 19.3.44

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 (171) hide show
  1. package/@syncfusion/ej2-angular-navigations.es5.js +295 -69
  2. package/@syncfusion/ej2-angular-navigations.es5.js.map +1 -1
  3. package/@syncfusion/ej2-angular-navigations.js +280 -69
  4. package/@syncfusion/ej2-angular-navigations.js.map +1 -1
  5. package/CHANGELOG.md +33 -0
  6. package/README.md +15 -0
  7. package/dist/ej2-angular-navigations.umd.js +307 -73
  8. package/dist/ej2-angular-navigations.umd.js.map +1 -1
  9. package/dist/ej2-angular-navigations.umd.min.js +2 -2
  10. package/dist/ej2-angular-navigations.umd.min.js.map +1 -1
  11. package/ej2-angular-navigations.d.ts +5 -4
  12. package/ej2-angular-navigations.metadata.json +1 -1
  13. package/package.json +11 -9
  14. package/postinstall/tagchange.js +1 -1
  15. package/schematics/utils/lib-details.d.ts +3 -3
  16. package/schematics/utils/lib-details.js +3 -3
  17. package/schematics/utils/lib-details.ts +3 -3
  18. package/src/accordion/accordion.component.d.ts +6 -1
  19. package/src/breadcrumb/breadcrumb-all.module.d.ts +5 -0
  20. package/src/breadcrumb/breadcrumb.component.d.ts +44 -0
  21. package/src/breadcrumb/breadcrumb.module.d.ts +5 -0
  22. package/src/breadcrumb/items.directive.d.ts +41 -0
  23. package/src/context-menu/contextmenu.component.d.ts +7 -0
  24. package/src/index.d.ts +4 -0
  25. package/src/menu/menu.component.d.ts +7 -0
  26. package/src/sidebar/sidebar.component.d.ts +5 -0
  27. package/src/tab/tab.component.d.ts +11 -0
  28. package/src/toolbar/items.directive.d.ts +1 -0
  29. package/src/toolbar/toolbar.component.d.ts +4 -0
  30. package/src/treeview/treeview.component.d.ts +22 -0
  31. package/styles/accordion/bootstrap5-dark.css +428 -0
  32. package/styles/accordion/bootstrap5-dark.scss +1 -0
  33. package/styles/accordion/bootstrap5.css +428 -0
  34. package/styles/accordion/bootstrap5.scss +1 -0
  35. package/styles/accordion/highcontrast-light.css +0 -1
  36. package/styles/accordion/highcontrast.css +0 -1
  37. package/styles/accordion/material-dark.css +2 -2
  38. package/styles/accordion/tailwind-dark.css +1 -1
  39. package/styles/bootstrap-dark.css +352 -60
  40. package/styles/bootstrap-dark.scss +1 -0
  41. package/styles/bootstrap.css +349 -57
  42. package/styles/bootstrap.scss +1 -0
  43. package/styles/bootstrap4.css +351 -60
  44. package/styles/bootstrap4.scss +1 -0
  45. package/styles/bootstrap5-dark.css +9922 -0
  46. package/styles/bootstrap5-dark.scss +10 -0
  47. package/styles/bootstrap5.css +9922 -0
  48. package/styles/bootstrap5.scss +10 -0
  49. package/styles/breadcrumb/bootstrap-dark.css +279 -0
  50. package/styles/breadcrumb/bootstrap-dark.scss +1 -0
  51. package/styles/breadcrumb/bootstrap.css +279 -0
  52. package/styles/breadcrumb/bootstrap.scss +1 -0
  53. package/styles/breadcrumb/bootstrap4.css +279 -0
  54. package/styles/breadcrumb/bootstrap4.scss +1 -0
  55. package/styles/breadcrumb/bootstrap5-dark.css +297 -0
  56. package/styles/breadcrumb/bootstrap5-dark.scss +1 -0
  57. package/styles/breadcrumb/bootstrap5.css +297 -0
  58. package/styles/breadcrumb/bootstrap5.scss +1 -0
  59. package/styles/breadcrumb/fabric-dark.css +277 -0
  60. package/styles/breadcrumb/fabric-dark.scss +1 -0
  61. package/styles/breadcrumb/fabric.css +277 -0
  62. package/styles/breadcrumb/fabric.scss +1 -0
  63. package/styles/breadcrumb/highcontrast-light.css +285 -0
  64. package/styles/breadcrumb/highcontrast-light.scss +1 -0
  65. package/styles/breadcrumb/highcontrast.css +285 -0
  66. package/styles/breadcrumb/highcontrast.scss +1 -0
  67. package/styles/breadcrumb/material-dark.css +259 -0
  68. package/styles/breadcrumb/material-dark.scss +1 -0
  69. package/styles/breadcrumb/material.css +259 -0
  70. package/styles/breadcrumb/material.scss +1 -0
  71. package/styles/breadcrumb/tailwind-dark.css +280 -0
  72. package/styles/breadcrumb/tailwind-dark.scss +1 -0
  73. package/styles/breadcrumb/tailwind.css +280 -0
  74. package/styles/breadcrumb/tailwind.scss +1 -0
  75. package/styles/context-menu/bootstrap5-dark.css +382 -0
  76. package/styles/context-menu/bootstrap5-dark.scss +1 -0
  77. package/styles/context-menu/bootstrap5.css +382 -0
  78. package/styles/context-menu/bootstrap5.scss +1 -0
  79. package/styles/fabric-dark.css +352 -78
  80. package/styles/fabric-dark.scss +1 -0
  81. package/styles/fabric.css +346 -72
  82. package/styles/fabric.scss +1 -0
  83. package/styles/h-scroll/bootstrap5-dark.css +328 -0
  84. package/styles/h-scroll/bootstrap5-dark.scss +1 -0
  85. package/styles/h-scroll/bootstrap5.css +328 -0
  86. package/styles/h-scroll/bootstrap5.scss +1 -0
  87. package/styles/h-scroll/fabric-dark.css +1 -1
  88. package/styles/h-scroll/highcontrast.css +1 -1
  89. package/styles/highcontrast-light.css +354 -73
  90. package/styles/highcontrast-light.scss +1 -0
  91. package/styles/highcontrast.css +356 -75
  92. package/styles/highcontrast.scss +1 -0
  93. package/styles/material-dark.css +360 -105
  94. package/styles/material-dark.scss +1 -0
  95. package/styles/material.css +324 -69
  96. package/styles/material.scss +1 -0
  97. package/styles/menu/bootstrap-dark.css +36 -36
  98. package/styles/menu/bootstrap.css +36 -36
  99. package/styles/menu/bootstrap4.css +34 -34
  100. package/styles/menu/bootstrap5-dark.css +1251 -0
  101. package/styles/menu/bootstrap5-dark.scss +1 -0
  102. package/styles/menu/bootstrap5.css +1251 -0
  103. package/styles/menu/bootstrap5.scss +1 -0
  104. package/styles/menu/fabric-dark.css +36 -36
  105. package/styles/menu/fabric.css +36 -36
  106. package/styles/menu/highcontrast-light.css +36 -36
  107. package/styles/menu/highcontrast.css +36 -36
  108. package/styles/menu/material-dark.css +36 -36
  109. package/styles/menu/material.css +36 -36
  110. package/styles/menu/tailwind-dark.css +36 -36
  111. package/styles/menu/tailwind.css +36 -36
  112. package/styles/sidebar/bootstrap5-dark.css +155 -0
  113. package/styles/sidebar/bootstrap5-dark.scss +1 -0
  114. package/styles/sidebar/bootstrap5.css +155 -0
  115. package/styles/sidebar/bootstrap5.scss +1 -0
  116. package/styles/sidebar/highcontrast.css +1 -1
  117. package/styles/tab/bootstrap-dark.css +15 -14
  118. package/styles/tab/bootstrap.css +12 -11
  119. package/styles/tab/bootstrap4.css +15 -14
  120. package/styles/tab/bootstrap5-dark.css +4442 -0
  121. package/styles/tab/bootstrap5-dark.scss +1 -0
  122. package/styles/tab/bootstrap5.css +4442 -0
  123. package/styles/tab/bootstrap5.scss +1 -0
  124. package/styles/tab/fabric-dark.css +16 -15
  125. package/styles/tab/fabric.css +14 -13
  126. package/styles/tab/highcontrast-light.css +14 -13
  127. package/styles/tab/highcontrast.css +14 -13
  128. package/styles/tab/material-dark.css +36 -35
  129. package/styles/tab/material.css +11 -10
  130. package/styles/tab/tailwind-dark.css +27 -39
  131. package/styles/tab/tailwind.css +22 -34
  132. package/styles/tailwind-dark.css +379 -111
  133. package/styles/tailwind-dark.scss +1 -0
  134. package/styles/tailwind.css +364 -96
  135. package/styles/tailwind.scss +1 -0
  136. package/styles/toolbar/bootstrap-dark.css +13 -10
  137. package/styles/toolbar/bootstrap.css +13 -10
  138. package/styles/toolbar/bootstrap4.css +14 -12
  139. package/styles/toolbar/bootstrap5-dark.css +1409 -0
  140. package/styles/toolbar/bootstrap5-dark.scss +1 -0
  141. package/styles/toolbar/bootstrap5.css +1409 -0
  142. package/styles/toolbar/bootstrap5.scss +1 -0
  143. package/styles/toolbar/fabric-dark.css +13 -26
  144. package/styles/toolbar/fabric.css +10 -23
  145. package/styles/toolbar/highcontrast-light.css +10 -23
  146. package/styles/toolbar/highcontrast.css +10 -23
  147. package/styles/toolbar/material-dark.css +11 -24
  148. package/styles/toolbar/material.css +10 -23
  149. package/styles/toolbar/tailwind-dark.css +20 -29
  150. package/styles/toolbar/tailwind.css +16 -25
  151. package/styles/treeview/bootstrap-dark.css +8 -0
  152. package/styles/treeview/bootstrap.css +8 -0
  153. package/styles/treeview/bootstrap4.css +8 -0
  154. package/styles/treeview/bootstrap5-dark.css +974 -0
  155. package/styles/treeview/bootstrap5-dark.scss +1 -0
  156. package/styles/treeview/bootstrap5.css +974 -0
  157. package/styles/treeview/bootstrap5.scss +1 -0
  158. package/styles/treeview/fabric-dark.css +8 -0
  159. package/styles/treeview/fabric.css +8 -0
  160. package/styles/treeview/highcontrast-light.css +8 -0
  161. package/styles/treeview/highcontrast.css +8 -0
  162. package/styles/treeview/material-dark.css +15 -7
  163. package/styles/treeview/material.css +8 -0
  164. package/styles/treeview/tailwind-dark.css +10 -2
  165. package/styles/treeview/tailwind.css +9 -1
  166. package/styles/v-scroll/bootstrap5-dark.css +247 -0
  167. package/styles/v-scroll/bootstrap5-dark.scss +1 -0
  168. package/styles/v-scroll/bootstrap5.css +247 -0
  169. package/styles/v-scroll/bootstrap5.scss +1 -0
  170. package/styles/v-scroll/material-dark.css +1 -1
  171. package/styles/v-scroll/tailwind-dark.css +4 -4
@@ -0,0 +1 @@
1
+ @import 'ej2-navigations/styles/treeview/bootstrap5.scss';
@@ -261,6 +261,14 @@
261
261
  position: relative;
262
262
  }
263
263
 
264
+ .e-treeview .e-icons .e-treeview-spinner {
265
+ position: absolute;
266
+ }
267
+
268
+ .e-treeview .e-icons-spinner {
269
+ position: relative;
270
+ }
271
+
264
272
  .e-treeview .e-text-content {
265
273
  -ms-user-select: none;
266
274
  -webkit-user-select: none;
@@ -262,6 +262,14 @@
262
262
  position: relative;
263
263
  }
264
264
 
265
+ .e-treeview .e-icons .e-treeview-spinner {
266
+ position: absolute;
267
+ }
268
+
269
+ .e-treeview .e-icons-spinner {
270
+ position: relative;
271
+ }
272
+
265
273
  .e-treeview .e-text-content {
266
274
  -ms-user-select: none;
267
275
  -webkit-user-select: none;
@@ -261,6 +261,14 @@
261
261
  position: relative;
262
262
  }
263
263
 
264
+ .e-treeview .e-icons .e-treeview-spinner {
265
+ position: absolute;
266
+ }
267
+
268
+ .e-treeview .e-icons-spinner {
269
+ position: relative;
270
+ }
271
+
264
272
  .e-treeview .e-text-content {
265
273
  -ms-user-select: none;
266
274
  -webkit-user-select: none;
@@ -262,6 +262,14 @@
262
262
  position: relative;
263
263
  }
264
264
 
265
+ .e-treeview .e-icons .e-treeview-spinner {
266
+ position: absolute;
267
+ }
268
+
269
+ .e-treeview .e-icons-spinner {
270
+ position: relative;
271
+ }
272
+
265
273
  .e-treeview .e-text-content {
266
274
  -ms-user-select: none;
267
275
  -webkit-user-select: none;
@@ -269,6 +269,14 @@
269
269
  position: relative;
270
270
  }
271
271
 
272
+ .e-treeview .e-icons .e-treeview-spinner {
273
+ position: absolute;
274
+ }
275
+
276
+ .e-treeview .e-icons-spinner {
277
+ position: relative;
278
+ }
279
+
272
280
  .e-treeview .e-text-content {
273
281
  -ms-user-select: none;
274
282
  -webkit-user-select: none;
@@ -671,11 +679,11 @@
671
679
  }
672
680
 
673
681
  .e-treeview .e-list-item.e-active > .e-text-content {
674
- color: #ff80ab;
682
+ color: #00b0ff;
675
683
  }
676
684
 
677
685
  .e-treeview .e-list-item.e-active > .e-text-content .e-list-text {
678
- color: #ff80ab;
686
+ color: #00b0ff;
679
687
  }
680
688
 
681
689
  .e-treeview .e-list-item.e-active > .e-text-content .e-icon-collapsible,
@@ -684,11 +692,11 @@
684
692
  }
685
693
 
686
694
  .e-treeview .e-list-item.e-active.e-hover > .e-text-content {
687
- color: #ff80ab;
695
+ color: #00b0ff;
688
696
  }
689
697
 
690
698
  .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text {
691
- color: #ff80ab;
699
+ color: #00b0ff;
692
700
  }
693
701
 
694
702
  .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-icon-collapsible,
@@ -758,7 +766,7 @@
758
766
  }
759
767
 
760
768
  .e-treeview .e-sibling {
761
- border-left-color: #ff80ab;
769
+ border-left-color: #00b0ff;
762
770
  border-right-color: transparent;
763
771
  }
764
772
 
@@ -827,12 +835,12 @@
827
835
  }
828
836
 
829
837
  .e-treeview.e-drag-item .e-drop-count {
830
- background-color: #ff80ab;
838
+ background-color: #00b0ff;
831
839
  border-color: #000;
832
840
  color: #000;
833
841
  }
834
842
 
835
843
  .e-treeview.e-drag-item.e-rtl .e-sibling {
836
- border-right-color: #ff80ab;
844
+ border-right-color: #00b0ff;
837
845
  border-left-color: transparent;
838
846
  }
@@ -274,6 +274,14 @@
274
274
  position: relative;
275
275
  }
276
276
 
277
+ .e-treeview .e-icons .e-treeview-spinner {
278
+ position: absolute;
279
+ }
280
+
281
+ .e-treeview .e-icons-spinner {
282
+ position: relative;
283
+ }
284
+
277
285
  .e-treeview .e-text-content {
278
286
  -ms-user-select: none;
279
287
  -webkit-user-select: none;
@@ -1,5 +1,5 @@
1
1
  @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
2
- /*! TreeView's tailwind-dark theme wise override definitions and variables */
2
+ /*! TreeView's tailwind theme wise override definitions and variables */
3
3
  /*! TreeView icons */
4
4
  .e-treeview .e-list-item div.e-icons::before {
5
5
  content: '\e707';
@@ -377,6 +377,14 @@
377
377
  position: relative;
378
378
  }
379
379
 
380
+ .e-treeview .e-icons .e-treeview-spinner {
381
+ position: absolute;
382
+ }
383
+
384
+ .e-treeview .e-icons-spinner {
385
+ position: relative;
386
+ }
387
+
380
388
  .e-treeview .e-text-content {
381
389
  -ms-user-select: none;
382
390
  -webkit-user-select: none;
@@ -874,7 +882,7 @@
874
882
  }
875
883
 
876
884
  .e-treeview .e-sibling {
877
- border: 1px solid #22d3ee;
885
+ border-top: 2px solid #22d3ee;
878
886
  }
879
887
 
880
888
  .e-treeview .e-sibling::before {
@@ -377,6 +377,14 @@
377
377
  position: relative;
378
378
  }
379
379
 
380
+ .e-treeview .e-icons .e-treeview-spinner {
381
+ position: absolute;
382
+ }
383
+
384
+ .e-treeview .e-icons-spinner {
385
+ position: relative;
386
+ }
387
+
380
388
  .e-treeview .e-text-content {
381
389
  -ms-user-select: none;
382
390
  -webkit-user-select: none;
@@ -874,7 +882,7 @@
874
882
  }
875
883
 
876
884
  .e-treeview .e-sibling {
877
- border: 1px solid #4f46e5;
885
+ border-top: 2px solid #4f46e5;
878
886
  }
879
887
 
880
888
  .e-treeview .e-sibling::before {
@@ -0,0 +1,247 @@
1
+ /*! component's theme wise override definitions and variables */
2
+ /*! vscroll icons */
3
+ .e-vscroll.e-scroll-device .e-nav-up-arrow::before {
4
+ content: '\e7dd';
5
+ }
6
+
7
+ .e-vscroll.e-scroll-device .e-nav-down-arrow::before {
8
+ content: '\e734';
9
+ }
10
+
11
+ .e-vscroll .e-nav-up-arrow::before {
12
+ content: '\e7dd';
13
+ line-height: normal;
14
+ }
15
+
16
+ .e-vscroll .e-nav-down-arrow::before {
17
+ content: '\e734';
18
+ line-height: normal;
19
+ }
20
+
21
+ /*! v-scroll layout */
22
+ .e-bigger .e-vscroll:not(.e-scroll-device),
23
+ .e-vscroll.e-bigger:not(.e-scroll-device) {
24
+ padding: 48px 0;
25
+ }
26
+
27
+ .e-bigger .e-vscroll .e-icons,
28
+ .e-vscroll.e-bigger .e-icons {
29
+ font-size: 18px;
30
+ }
31
+
32
+ .e-bigger .e-vscroll.e-rtl .e-scroll-overlay.e-scroll-down-overlay,
33
+ .e-vscroll.e-bigger.e-rtl .e-scroll-overlay.e-scroll-down-overlay {
34
+ left: 48px;
35
+ }
36
+
37
+ .e-bigger .e-vscroll .e-scroll-overlay.e-scroll-down-overlay,
38
+ .e-vscroll.e-bigger .e-scroll-overlay.e-scroll-down-overlay {
39
+ right: 48px;
40
+ }
41
+
42
+ .e-bigger .e-vscroll .e-scroll-nav,
43
+ .e-vscroll.e-bigger .e-scroll-nav {
44
+ height: 48px;
45
+ }
46
+
47
+ .e-vscroll {
48
+ display: block;
49
+ position: relative;
50
+ width: inherit;
51
+ }
52
+
53
+ .e-vscroll.e-rtl.e-scroll-device .e-scroll-nav {
54
+ transform: skewX(-16deg) translateX(-6px);
55
+ }
56
+
57
+ .e-vscroll.e-rtl.e-scroll-device .e-scroll-overlay.e-scroll-down-overlay {
58
+ left: 48px;
59
+ right: auto;
60
+ transform: skewX(-16deg) translateX(-6px);
61
+ }
62
+
63
+ .e-vscroll.e-rtl.e-scroll-device .e-scroll-overlay.e-scroll-up-overlay {
64
+ left: auto;
65
+ right: 0;
66
+ }
67
+
68
+ .e-vscroll:not(.e-scroll-device) {
69
+ padding: 0 28px;
70
+ }
71
+
72
+ .e-vscroll.e-scroll-device .e-scroll-nav {
73
+ transform: skewX(-16deg) translateX(6px);
74
+ width: 48px;
75
+ z-index: 1001;
76
+ }
77
+
78
+ .e-vscroll.e-scroll-device .e-scroll-nav .e-nav-arrow {
79
+ font-size: 14px;
80
+ transform: skewX(16deg);
81
+ }
82
+
83
+ .e-vscroll.e-scroll-device .e-scroll-overlay {
84
+ opacity: 0.5;
85
+ pointer-events: none;
86
+ position: absolute;
87
+ top: 0;
88
+ z-index: 100;
89
+ }
90
+
91
+ .e-vscroll.e-scroll-device .e-scroll-overlay.e-scroll-down-overlay {
92
+ left: auto;
93
+ right: 48px;
94
+ transform: skewX(-16deg) translateX(6px);
95
+ }
96
+
97
+ .e-vscroll.e-scroll-device .e-scroll-overlay.e-scroll-up-overlay {
98
+ left: 0;
99
+ right: auto;
100
+ }
101
+
102
+ .e-vscroll > * {
103
+ height: inherit;
104
+ }
105
+
106
+ .e-vscroll .e-vscroll-content {
107
+ display: inline-block;
108
+ height: auto;
109
+ position: relative;
110
+ -ms-touch-action: none;
111
+ touch-action: none;
112
+ width: 100%;
113
+ }
114
+
115
+ .e-vscroll .e-vscroll-content > * {
116
+ pointer-events: auto;
117
+ }
118
+
119
+ .e-vscroll.e-rtl .e-scroll-nav.e-scroll-up-nav {
120
+ left: auto;
121
+ right: 0;
122
+ }
123
+
124
+ .e-vscroll.e-rtl .e-scroll-nav.e-scroll-down-nav {
125
+ left: 0;
126
+ right: auto;
127
+ }
128
+
129
+ .e-vscroll .e-scroll-nav {
130
+ -ms-flex-align: center;
131
+ align-items: center;
132
+ cursor: pointer;
133
+ display: -ms-flexbox;
134
+ display: flex;
135
+ height: 38px;
136
+ overflow: hidden;
137
+ position: absolute;
138
+ width: 100%;
139
+ }
140
+
141
+ .e-vscroll .e-scroll-nav.e-scroll-up-nav {
142
+ top: 0;
143
+ }
144
+
145
+ .e-vscroll .e-scroll-nav.e-scroll-down-nav {
146
+ bottom: 0;
147
+ }
148
+
149
+ .e-vscroll .e-scroll-nav.e-ie-align {
150
+ display: table;
151
+ }
152
+
153
+ .e-vscroll .e-nav-arrow {
154
+ position: relative;
155
+ }
156
+
157
+ .e-vscroll .e-nav-arrow.e-icons {
158
+ display: table-cell;
159
+ text-align: center;
160
+ vertical-align: middle;
161
+ width: 100%;
162
+ }
163
+
164
+ /*! v-scroll theme */
165
+ .e-vscroll .e-icons {
166
+ color: #adb5bd;
167
+ }
168
+
169
+ .e-vscroll.e-rtl.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
170
+ border-color: #adb5bd;
171
+ box-shadow: 0 0.8px 16px rgba(0, 0, 0, 0.15);
172
+ }
173
+
174
+ .e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
175
+ background-color: #343a40;
176
+ border-color: #adb5bd;
177
+ border-width: 1px;
178
+ box-shadow: 0 0.8px 16px rgba(0, 0, 0, 0.15);
179
+ }
180
+
181
+ .e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav .e-nav-arrow {
182
+ color: #adb5bd;
183
+ }
184
+
185
+ .e-vscroll .e-scroll-overlay {
186
+ background-color: transparent;
187
+ background-repeat: repeat-x;
188
+ }
189
+
190
+ .e-vscroll .e-scroll-overlay.e-scroll-up-overlay {
191
+ background-image: linear-gradient(-270deg, #343a40 0%, rgba(52, 58, 64, 0) 100%);
192
+ }
193
+
194
+ .e-vscroll .e-scroll-overlay.e-scroll-down-overlay {
195
+ background-image: linear-gradient(-270deg, rgba(52, 58, 64, 0) 0%, #343a40 100%);
196
+ }
197
+
198
+ .e-vscroll.e-rtl .e-scroll-nav {
199
+ background: #343a40;
200
+ }
201
+
202
+ .e-vscroll.e-rtl .e-scroll-nav:hover {
203
+ background: #495057;
204
+ border: 0;
205
+ border-color: transparent;
206
+ color: #ced4da;
207
+ }
208
+
209
+ .e-vscroll:not(.e-scroll-device) .e-scroll-nav:hover {
210
+ background: #495057;
211
+ border: 0;
212
+ color: #ced4da;
213
+ }
214
+
215
+ .e-vscroll:not(.e-scroll-device) .e-scroll-nav:focus {
216
+ background: #495057;
217
+ border: 0;
218
+ border-color: transparent;
219
+ color: #ced4da;
220
+ }
221
+
222
+ .e-vscroll:not(.e-scroll-device) .e-scroll-nav:active {
223
+ background: #495057;
224
+ border: 0;
225
+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
226
+ color: #ced4da;
227
+ }
228
+
229
+ .e-vscroll .e-scroll-nav {
230
+ background: #343a40;
231
+ }
232
+
233
+ .e-vscroll .e-scroll-nav.e-scroll-up-nav {
234
+ border-bottom: 1px solid #adb5bd;
235
+ }
236
+
237
+ .e-vscroll .e-scroll-nav.e-scroll-down-nav {
238
+ border-top: 1px solid #adb5bd;
239
+ }
240
+
241
+ .e-vscroll .e-scroll-nav::after {
242
+ content: '';
243
+ }
244
+
245
+ .e-vscroll .e-scroll-nav:active::after {
246
+ content: '';
247
+ }
@@ -0,0 +1 @@
1
+ @import 'ej2-navigations/styles/v-scroll/bootstrap5-dark.scss';
@@ -0,0 +1,247 @@
1
+ /*! component's theme wise override definitions and variables */
2
+ /*! vscroll icons */
3
+ .e-vscroll.e-scroll-device .e-nav-up-arrow::before {
4
+ content: '\e7dd';
5
+ }
6
+
7
+ .e-vscroll.e-scroll-device .e-nav-down-arrow::before {
8
+ content: '\e734';
9
+ }
10
+
11
+ .e-vscroll .e-nav-up-arrow::before {
12
+ content: '\e7dd';
13
+ line-height: normal;
14
+ }
15
+
16
+ .e-vscroll .e-nav-down-arrow::before {
17
+ content: '\e734';
18
+ line-height: normal;
19
+ }
20
+
21
+ /*! v-scroll layout */
22
+ .e-bigger .e-vscroll:not(.e-scroll-device),
23
+ .e-vscroll.e-bigger:not(.e-scroll-device) {
24
+ padding: 48px 0;
25
+ }
26
+
27
+ .e-bigger .e-vscroll .e-icons,
28
+ .e-vscroll.e-bigger .e-icons {
29
+ font-size: 18px;
30
+ }
31
+
32
+ .e-bigger .e-vscroll.e-rtl .e-scroll-overlay.e-scroll-down-overlay,
33
+ .e-vscroll.e-bigger.e-rtl .e-scroll-overlay.e-scroll-down-overlay {
34
+ left: 48px;
35
+ }
36
+
37
+ .e-bigger .e-vscroll .e-scroll-overlay.e-scroll-down-overlay,
38
+ .e-vscroll.e-bigger .e-scroll-overlay.e-scroll-down-overlay {
39
+ right: 48px;
40
+ }
41
+
42
+ .e-bigger .e-vscroll .e-scroll-nav,
43
+ .e-vscroll.e-bigger .e-scroll-nav {
44
+ height: 48px;
45
+ }
46
+
47
+ .e-vscroll {
48
+ display: block;
49
+ position: relative;
50
+ width: inherit;
51
+ }
52
+
53
+ .e-vscroll.e-rtl.e-scroll-device .e-scroll-nav {
54
+ transform: skewX(-16deg) translateX(-6px);
55
+ }
56
+
57
+ .e-vscroll.e-rtl.e-scroll-device .e-scroll-overlay.e-scroll-down-overlay {
58
+ left: 48px;
59
+ right: auto;
60
+ transform: skewX(-16deg) translateX(-6px);
61
+ }
62
+
63
+ .e-vscroll.e-rtl.e-scroll-device .e-scroll-overlay.e-scroll-up-overlay {
64
+ left: auto;
65
+ right: 0;
66
+ }
67
+
68
+ .e-vscroll:not(.e-scroll-device) {
69
+ padding: 0 28px;
70
+ }
71
+
72
+ .e-vscroll.e-scroll-device .e-scroll-nav {
73
+ transform: skewX(-16deg) translateX(6px);
74
+ width: 48px;
75
+ z-index: 1001;
76
+ }
77
+
78
+ .e-vscroll.e-scroll-device .e-scroll-nav .e-nav-arrow {
79
+ font-size: 14px;
80
+ transform: skewX(16deg);
81
+ }
82
+
83
+ .e-vscroll.e-scroll-device .e-scroll-overlay {
84
+ opacity: 0.5;
85
+ pointer-events: none;
86
+ position: absolute;
87
+ top: 0;
88
+ z-index: 100;
89
+ }
90
+
91
+ .e-vscroll.e-scroll-device .e-scroll-overlay.e-scroll-down-overlay {
92
+ left: auto;
93
+ right: 48px;
94
+ transform: skewX(-16deg) translateX(6px);
95
+ }
96
+
97
+ .e-vscroll.e-scroll-device .e-scroll-overlay.e-scroll-up-overlay {
98
+ left: 0;
99
+ right: auto;
100
+ }
101
+
102
+ .e-vscroll > * {
103
+ height: inherit;
104
+ }
105
+
106
+ .e-vscroll .e-vscroll-content {
107
+ display: inline-block;
108
+ height: auto;
109
+ position: relative;
110
+ -ms-touch-action: none;
111
+ touch-action: none;
112
+ width: 100%;
113
+ }
114
+
115
+ .e-vscroll .e-vscroll-content > * {
116
+ pointer-events: auto;
117
+ }
118
+
119
+ .e-vscroll.e-rtl .e-scroll-nav.e-scroll-up-nav {
120
+ left: auto;
121
+ right: 0;
122
+ }
123
+
124
+ .e-vscroll.e-rtl .e-scroll-nav.e-scroll-down-nav {
125
+ left: 0;
126
+ right: auto;
127
+ }
128
+
129
+ .e-vscroll .e-scroll-nav {
130
+ -ms-flex-align: center;
131
+ align-items: center;
132
+ cursor: pointer;
133
+ display: -ms-flexbox;
134
+ display: flex;
135
+ height: 38px;
136
+ overflow: hidden;
137
+ position: absolute;
138
+ width: 100%;
139
+ }
140
+
141
+ .e-vscroll .e-scroll-nav.e-scroll-up-nav {
142
+ top: 0;
143
+ }
144
+
145
+ .e-vscroll .e-scroll-nav.e-scroll-down-nav {
146
+ bottom: 0;
147
+ }
148
+
149
+ .e-vscroll .e-scroll-nav.e-ie-align {
150
+ display: table;
151
+ }
152
+
153
+ .e-vscroll .e-nav-arrow {
154
+ position: relative;
155
+ }
156
+
157
+ .e-vscroll .e-nav-arrow.e-icons {
158
+ display: table-cell;
159
+ text-align: center;
160
+ vertical-align: middle;
161
+ width: 100%;
162
+ }
163
+
164
+ /*! v-scroll theme */
165
+ .e-vscroll .e-icons {
166
+ color: #6c757d;
167
+ }
168
+
169
+ .e-vscroll.e-rtl.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
170
+ border-color: #6c757d;
171
+ box-shadow: 0 0.8px 16px rgba(0, 0, 0, 0.15);
172
+ }
173
+
174
+ .e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav {
175
+ background-color: #e9ecef;
176
+ border-color: #6c757d;
177
+ border-width: 1px;
178
+ box-shadow: 0 0.8px 16px rgba(0, 0, 0, 0.15);
179
+ }
180
+
181
+ .e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav .e-nav-arrow {
182
+ color: #6c757d;
183
+ }
184
+
185
+ .e-vscroll .e-scroll-overlay {
186
+ background-color: transparent;
187
+ background-repeat: repeat-x;
188
+ }
189
+
190
+ .e-vscroll .e-scroll-overlay.e-scroll-up-overlay {
191
+ background-image: linear-gradient(-270deg, #e9ecef 0%, rgba(233, 236, 239, 0) 100%);
192
+ }
193
+
194
+ .e-vscroll .e-scroll-overlay.e-scroll-down-overlay {
195
+ background-image: linear-gradient(-270deg, rgba(233, 236, 239, 0) 0%, #e9ecef 100%);
196
+ }
197
+
198
+ .e-vscroll.e-rtl .e-scroll-nav {
199
+ background: #e9ecef;
200
+ }
201
+
202
+ .e-vscroll.e-rtl .e-scroll-nav:hover {
203
+ background: #dee2e6;
204
+ border: 0;
205
+ border-color: transparent;
206
+ color: #495057;
207
+ }
208
+
209
+ .e-vscroll:not(.e-scroll-device) .e-scroll-nav:hover {
210
+ background: #dee2e6;
211
+ border: 0;
212
+ color: #495057;
213
+ }
214
+
215
+ .e-vscroll:not(.e-scroll-device) .e-scroll-nav:focus {
216
+ background: #dee2e6;
217
+ border: 0;
218
+ border-color: transparent;
219
+ color: #495057;
220
+ }
221
+
222
+ .e-vscroll:not(.e-scroll-device) .e-scroll-nav:active {
223
+ background: #dee2e6;
224
+ border: 0;
225
+ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
226
+ color: #495057;
227
+ }
228
+
229
+ .e-vscroll .e-scroll-nav {
230
+ background: #e9ecef;
231
+ }
232
+
233
+ .e-vscroll .e-scroll-nav.e-scroll-up-nav {
234
+ border-bottom: 1px solid #6c757d;
235
+ }
236
+
237
+ .e-vscroll .e-scroll-nav.e-scroll-down-nav {
238
+ border-top: 1px solid #6c757d;
239
+ }
240
+
241
+ .e-vscroll .e-scroll-nav::after {
242
+ content: '';
243
+ }
244
+
245
+ .e-vscroll .e-scroll-nav:active::after {
246
+ content: '';
247
+ }
@@ -0,0 +1 @@
1
+ @import 'ej2-navigations/styles/v-scroll/bootstrap5.scss';
@@ -189,7 +189,7 @@
189
189
  }
190
190
 
191
191
  .e-vscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav .e-nav-arrow {
192
- color: #ff80ab;
192
+ color: #00b0ff;
193
193
  }
194
194
 
195
195
  .e-vscroll .e-scroll-overlay {