@syncfusion/ej2-vue-navigations 20.1.51 → 20.1.57

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 (192) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/ej2-vue-navigations.umd.min.js +1 -1
  3. package/dist/es6/ej2-vue-navigations.es2015.js +4 -0
  4. package/dist/es6/ej2-vue-navigations.es2015.js.map +1 -1
  5. package/dist/es6/ej2-vue-navigations.es5.js +4 -0
  6. package/dist/es6/ej2-vue-navigations.es5.js.map +1 -1
  7. package/dist/global/ej2-vue-navigations.min.js +2 -2
  8. package/package.json +8 -8
  9. package/src/accordion/accordion.component.js +1 -0
  10. package/src/breadcrumb/breadcrumb.component.js +1 -0
  11. package/src/carousel/carousel.component.js +1 -0
  12. package/src/sidebar/sidebar.component.js +1 -0
  13. package/styles/accordion/bootstrap-dark.css +6 -94
  14. package/styles/accordion/bootstrap.css +6 -94
  15. package/styles/accordion/bootstrap4.css +9 -109
  16. package/styles/accordion/bootstrap5-dark.css +3 -88
  17. package/styles/accordion/bootstrap5.css +3 -88
  18. package/styles/accordion/fabric-dark.css +6 -90
  19. package/styles/accordion/fabric.css +6 -90
  20. package/styles/accordion/fluent-dark.css +6 -87
  21. package/styles/accordion/fluent.css +6 -87
  22. package/styles/accordion/highcontrast-light.css +10 -116
  23. package/styles/accordion/highcontrast.css +10 -116
  24. package/styles/accordion/material-dark.css +6 -93
  25. package/styles/accordion/material.css +6 -93
  26. package/styles/accordion/tailwind-dark.css +6 -93
  27. package/styles/accordion/tailwind.css +6 -93
  28. package/styles/bootstrap-dark.css +271 -2022
  29. package/styles/bootstrap.css +271 -2022
  30. package/styles/bootstrap4.css +277 -2085
  31. package/styles/bootstrap5-dark.css +267 -2063
  32. package/styles/bootstrap5.css +267 -2063
  33. package/styles/breadcrumb/bootstrap-dark.css +8 -90
  34. package/styles/breadcrumb/bootstrap.css +8 -90
  35. package/styles/breadcrumb/bootstrap4.css +8 -90
  36. package/styles/breadcrumb/bootstrap5-dark.css +8 -94
  37. package/styles/breadcrumb/bootstrap5.css +8 -94
  38. package/styles/breadcrumb/fabric-dark.css +8 -89
  39. package/styles/breadcrumb/fabric.css +8 -89
  40. package/styles/breadcrumb/fluent-dark.css +8 -82
  41. package/styles/breadcrumb/fluent.css +8 -82
  42. package/styles/breadcrumb/highcontrast-light.css +8 -91
  43. package/styles/breadcrumb/highcontrast.css +8 -91
  44. package/styles/breadcrumb/material-dark.css +8 -85
  45. package/styles/breadcrumb/material.css +8 -85
  46. package/styles/breadcrumb/tailwind-dark.css +8 -92
  47. package/styles/breadcrumb/tailwind.css +8 -92
  48. package/styles/carousel/bootstrap-dark.css +24 -43
  49. package/styles/carousel/bootstrap.css +24 -43
  50. package/styles/carousel/bootstrap4.css +24 -43
  51. package/styles/carousel/bootstrap5-dark.css +24 -43
  52. package/styles/carousel/bootstrap5.css +24 -43
  53. package/styles/carousel/fabric-dark.css +24 -43
  54. package/styles/carousel/fabric.css +24 -43
  55. package/styles/carousel/fluent-dark.css +24 -43
  56. package/styles/carousel/fluent.css +24 -43
  57. package/styles/carousel/highcontrast-light.css +24 -43
  58. package/styles/carousel/highcontrast.css +24 -43
  59. package/styles/carousel/material-dark.css +24 -43
  60. package/styles/carousel/material.css +24 -43
  61. package/styles/carousel/tailwind-dark.css +24 -43
  62. package/styles/carousel/tailwind.css +24 -43
  63. package/styles/context-menu/bootstrap-dark.css +6 -60
  64. package/styles/context-menu/bootstrap.css +6 -60
  65. package/styles/context-menu/bootstrap4.css +6 -60
  66. package/styles/context-menu/bootstrap5-dark.css +6 -60
  67. package/styles/context-menu/bootstrap5.css +6 -60
  68. package/styles/context-menu/fabric-dark.css +6 -60
  69. package/styles/context-menu/fabric.css +6 -60
  70. package/styles/context-menu/fluent-dark.css +6 -60
  71. package/styles/context-menu/fluent.css +6 -60
  72. package/styles/context-menu/highcontrast-light.css +6 -60
  73. package/styles/context-menu/highcontrast.css +6 -60
  74. package/styles/context-menu/material-dark.css +6 -60
  75. package/styles/context-menu/material.css +6 -60
  76. package/styles/context-menu/tailwind-dark.css +6 -60
  77. package/styles/context-menu/tailwind.css +6 -60
  78. package/styles/fabric-dark.css +262 -2007
  79. package/styles/fabric.css +262 -2007
  80. package/styles/fluent-dark.css +262 -2018
  81. package/styles/fluent.css +262 -2018
  82. package/styles/h-scroll/bootstrap-dark.css +11 -67
  83. package/styles/h-scroll/bootstrap.css +11 -67
  84. package/styles/h-scroll/bootstrap4.css +11 -69
  85. package/styles/h-scroll/bootstrap5-dark.css +11 -68
  86. package/styles/h-scroll/bootstrap5.css +11 -68
  87. package/styles/h-scroll/fabric-dark.css +11 -67
  88. package/styles/h-scroll/fabric.css +11 -67
  89. package/styles/h-scroll/fluent-dark.css +11 -68
  90. package/styles/h-scroll/fluent.css +11 -68
  91. package/styles/h-scroll/highcontrast-light.css +11 -70
  92. package/styles/h-scroll/highcontrast.css +11 -70
  93. package/styles/h-scroll/material-dark.css +11 -68
  94. package/styles/h-scroll/material.css +11 -68
  95. package/styles/h-scroll/tailwind-dark.css +11 -68
  96. package/styles/h-scroll/tailwind.css +11 -68
  97. package/styles/highcontrast-light.css +267 -2079
  98. package/styles/highcontrast.css +267 -2082
  99. package/styles/material-dark.css +265 -1976
  100. package/styles/material.css +258 -1968
  101. package/styles/menu/bootstrap-dark.css +27 -201
  102. package/styles/menu/bootstrap.css +27 -201
  103. package/styles/menu/bootstrap4.css +28 -211
  104. package/styles/menu/bootstrap5-dark.css +27 -202
  105. package/styles/menu/bootstrap5.css +27 -202
  106. package/styles/menu/fabric-dark.css +27 -201
  107. package/styles/menu/fabric.css +27 -201
  108. package/styles/menu/fluent-dark.css +27 -204
  109. package/styles/menu/fluent.css +27 -204
  110. package/styles/menu/highcontrast-light.css +27 -201
  111. package/styles/menu/highcontrast.css +27 -201
  112. package/styles/menu/material-dark.css +27 -203
  113. package/styles/menu/material.css +27 -203
  114. package/styles/menu/tailwind-dark.css +27 -202
  115. package/styles/menu/tailwind.css +27 -202
  116. package/styles/sidebar/bootstrap-dark.css +12 -27
  117. package/styles/sidebar/bootstrap.css +12 -27
  118. package/styles/sidebar/bootstrap4.css +12 -27
  119. package/styles/sidebar/bootstrap5-dark.css +10 -25
  120. package/styles/sidebar/bootstrap5.css +10 -25
  121. package/styles/sidebar/fabric-dark.css +12 -27
  122. package/styles/sidebar/fabric.css +12 -27
  123. package/styles/sidebar/fluent-dark.css +10 -25
  124. package/styles/sidebar/fluent.css +10 -25
  125. package/styles/sidebar/highcontrast-light.css +12 -27
  126. package/styles/sidebar/highcontrast.css +12 -27
  127. package/styles/sidebar/material-dark.css +12 -27
  128. package/styles/sidebar/material.css +12 -27
  129. package/styles/sidebar/tailwind-dark.css +10 -25
  130. package/styles/sidebar/tailwind.css +10 -25
  131. package/styles/tab/bootstrap-dark.css +150 -963
  132. package/styles/tab/bootstrap.css +150 -963
  133. package/styles/tab/bootstrap4.css +150 -970
  134. package/styles/tab/bootstrap5-dark.css +150 -975
  135. package/styles/tab/bootstrap5.css +150 -975
  136. package/styles/tab/fabric-dark.css +141 -954
  137. package/styles/tab/fabric.css +141 -954
  138. package/styles/tab/fluent-dark.css +143 -949
  139. package/styles/tab/fluent.css +143 -949
  140. package/styles/tab/highcontrast-light.css +142 -980
  141. package/styles/tab/highcontrast.css +142 -980
  142. package/styles/tab/material-dark.css +144 -916
  143. package/styles/tab/material.css +137 -909
  144. package/styles/tab/tailwind-dark.css +137 -907
  145. package/styles/tab/tailwind.css +137 -907
  146. package/styles/tailwind-dark.css +256 -1988
  147. package/styles/tailwind.css +256 -1988
  148. package/styles/toolbar/bootstrap-dark.css +7 -246
  149. package/styles/toolbar/bootstrap.css +7 -246
  150. package/styles/toolbar/bootstrap4.css +8 -258
  151. package/styles/toolbar/bootstrap5-dark.css +7 -251
  152. package/styles/toolbar/bootstrap5.css +7 -251
  153. package/styles/toolbar/fabric-dark.css +7 -245
  154. package/styles/toolbar/fabric.css +7 -245
  155. package/styles/toolbar/fluent-dark.css +7 -244
  156. package/styles/toolbar/fluent.css +7 -244
  157. package/styles/toolbar/highcontrast-light.css +7 -257
  158. package/styles/toolbar/highcontrast.css +7 -257
  159. package/styles/toolbar/material-dark.css +7 -248
  160. package/styles/toolbar/material.css +7 -248
  161. package/styles/toolbar/tailwind-dark.css +7 -245
  162. package/styles/toolbar/tailwind.css +7 -245
  163. package/styles/treeview/bootstrap-dark.css +23 -191
  164. package/styles/treeview/bootstrap.css +23 -191
  165. package/styles/treeview/bootstrap4.css +24 -208
  166. package/styles/treeview/bootstrap5-dark.css +24 -217
  167. package/styles/treeview/bootstrap5.css +24 -217
  168. package/styles/treeview/fabric-dark.css +23 -191
  169. package/styles/treeview/fabric.css +23 -191
  170. package/styles/treeview/fluent-dark.css +23 -216
  171. package/styles/treeview/fluent.css +23 -216
  172. package/styles/treeview/highcontrast-light.css +23 -191
  173. package/styles/treeview/highcontrast.css +23 -194
  174. package/styles/treeview/material-dark.css +23 -192
  175. package/styles/treeview/material.css +23 -191
  176. package/styles/treeview/tailwind-dark.css +23 -213
  177. package/styles/treeview/tailwind.css +23 -213
  178. package/styles/v-scroll/bootstrap-dark.css +7 -50
  179. package/styles/v-scroll/bootstrap.css +7 -50
  180. package/styles/v-scroll/bootstrap4.css +7 -50
  181. package/styles/v-scroll/bootstrap5-dark.css +7 -50
  182. package/styles/v-scroll/bootstrap5.css +7 -50
  183. package/styles/v-scroll/fabric-dark.css +7 -50
  184. package/styles/v-scroll/fabric.css +7 -50
  185. package/styles/v-scroll/fluent-dark.css +7 -50
  186. package/styles/v-scroll/fluent.css +7 -50
  187. package/styles/v-scroll/highcontrast-light.css +7 -53
  188. package/styles/v-scroll/highcontrast.css +7 -53
  189. package/styles/v-scroll/material-dark.css +7 -51
  190. package/styles/v-scroll/material.css +7 -51
  191. package/styles/v-scroll/tailwind-dark.css +7 -50
  192. package/styles/v-scroll/tailwind.css +7 -50
@@ -1,26 +1,21 @@
1
1
  /*! Carousel component FluentUI theme definitions and variables */
2
2
  .e-carousel .e-previous-icon::before {
3
- content: '\e765';
3
+ content: "\e765";
4
4
  }
5
-
6
5
  .e-carousel .e-next-icon::before {
7
- content: '\e748';
6
+ content: "\e748";
8
7
  }
9
-
10
8
  .e-carousel .e-play-icon::before {
11
- content: '\e70c';
9
+ content: "\e70c";
12
10
  }
13
-
14
11
  .e-carousel .e-pause-icon::before {
15
- content: '\e77b';
12
+ content: "\e77b";
16
13
  }
17
-
18
14
  .e-carousel.e-rtl .e-previous-icon::before {
19
- content: '\e748';
15
+ content: "\e748";
20
16
  }
21
-
22
17
  .e-carousel.e-rtl .e-next-icon::before {
23
- content: '\e765';
18
+ content: "\e765";
24
19
  }
25
20
 
26
21
  /*! carousel component styles */
@@ -30,7 +25,6 @@
30
25
  padding: 0;
31
26
  position: relative;
32
27
  }
33
-
34
28
  .e-carousel .e-carousel-items {
35
29
  height: 100%;
36
30
  margin: 0;
@@ -39,8 +33,7 @@
39
33
  position: relative;
40
34
  width: 100%;
41
35
  }
42
-
43
- .e-carousel .e-carousel-items .e-carousel-item {
36
+ .e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item {
44
37
  -webkit-backface-visibility: hidden;
45
38
  backface-visibility: hidden;
46
39
  display: none;
@@ -50,39 +43,45 @@
50
43
  position: relative;
51
44
  width: 100%;
52
45
  }
53
-
54
- .e-carousel .e-carousel-items .e-carousel-item.e-active {
46
+ .e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item.e-active {
55
47
  display: block;
56
48
  }
57
-
58
49
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item {
59
50
  transition: transform 0.6s ease-in-out;
60
51
  }
61
-
62
52
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active {
63
53
  display: block;
64
54
  }
65
-
66
55
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next:not(.e-transition-start), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-end {
67
56
  transform: translateX(100%);
68
57
  }
69
-
70
58
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev:not(.e-transition-end), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-start {
71
59
  transform: translateX(-100%);
72
60
  }
73
-
74
61
  .e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item {
75
62
  display: block;
76
63
  opacity: 0;
77
64
  transition: opacity 0.6s ease-in-out;
78
65
  z-index: 0;
79
66
  }
80
-
81
67
  .e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item.e-active {
82
68
  opacity: 1;
83
69
  z-index: 1;
84
70
  }
85
-
71
+ .e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item {
72
+ display: block;
73
+ height: 100%;
74
+ left: 0;
75
+ opacity: 0;
76
+ pointer-events: none;
77
+ position: absolute;
78
+ top: 0;
79
+ width: 100%;
80
+ }
81
+ .e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item.e-active {
82
+ opacity: 1;
83
+ pointer-events: visible;
84
+ }
86
85
  .e-carousel .e-carousel-navigators {
87
86
  -ms-flex-align: center;
88
87
  align-items: center;
@@ -97,39 +96,33 @@
97
96
  width: 100%;
98
97
  z-index: 1;
99
98
  }
100
-
101
99
  .e-carousel .e-carousel-navigators .e-play-pause,
102
100
  .e-carousel .e-carousel-navigators .e-previous,
103
101
  .e-carousel .e-carousel-navigators .e-next {
104
- padding: .5em;
102
+ padding: 0.5em;
105
103
  pointer-events: auto;
106
104
  }
107
-
108
105
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn,
109
106
  .e-carousel .e-carousel-navigators .e-previous .e-btn,
110
107
  .e-carousel .e-carousel-navigators .e-next .e-btn {
111
108
  border: 0;
112
109
  box-shadow: none;
113
110
  }
114
-
115
111
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn:hover,
116
112
  .e-carousel .e-carousel-navigators .e-previous .e-btn:hover,
117
113
  .e-carousel .e-carousel-navigators .e-next .e-btn:hover {
118
114
  border-radius: 50%;
119
115
  }
120
-
121
116
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn.e-rtl,
122
117
  .e-carousel .e-carousel-navigators .e-previous .e-btn.e-rtl,
123
118
  .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
124
119
  transform: rotate(180deg);
125
120
  }
126
-
127
121
  .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
128
122
  .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
129
123
  .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {
130
124
  display: none;
131
125
  }
132
-
133
126
  .e-carousel .e-carousel-indicators {
134
127
  -ms-flex-align: center;
135
128
  align-items: center;
@@ -145,7 +138,6 @@
145
138
  width: 100%;
146
139
  z-index: 1;
147
140
  }
148
-
149
141
  .e-carousel .e-carousel-indicators .e-indicator-bars {
150
142
  display: -ms-flexbox;
151
143
  display: flex;
@@ -155,11 +147,9 @@
155
147
  justify-content: center;
156
148
  pointer-events: auto;
157
149
  }
158
-
159
150
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar {
160
151
  padding: 0;
161
152
  }
162
-
163
153
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator {
164
154
  -ms-flex-align: center;
165
155
  align-items: center;
@@ -169,7 +159,6 @@
169
159
  justify-content: center;
170
160
  padding: 6px;
171
161
  }
172
-
173
162
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator div {
174
163
  border: 1px solid rgba(255, 255, 255, 0.4);
175
164
  border-radius: 50%;
@@ -179,7 +168,6 @@
179
168
  transition-timing-function: ease-in-out;
180
169
  width: 12px;
181
170
  }
182
-
183
171
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator .e-ripple-element {
184
172
  display: none;
185
173
  }
@@ -190,13 +178,11 @@
190
178
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) {
191
179
  background-color: transparent;
192
180
  }
193
-
194
181
  .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled) .e-btn-icon,
195
182
  .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled) .e-btn-icon,
196
183
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) .e-btn-icon {
197
184
  color: #fff;
198
185
  }
199
-
200
186
  .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):active, .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):focus, .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):hover,
201
187
  .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):active,
202
188
  .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):focus,
@@ -207,30 +193,25 @@
207
193
  background-color: rgba(255, 255, 255, 0.4);
208
194
  outline: none;
209
195
  }
210
-
211
196
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator {
212
197
  background-color: transparent;
213
198
  border-color: transparent;
214
199
  box-shadow: none;
215
200
  }
216
-
217
201
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div {
218
202
  background-color: #fff;
219
203
  border-color: #fff;
220
204
  }
221
-
222
205
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:active, .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:focus, .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:hover {
223
206
  background-color: transparent;
224
207
  border-color: transparent;
225
208
  box-shadow: none;
226
209
  outline: none;
227
210
  }
228
-
229
211
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:focus-visible {
230
212
  border-color: #000;
231
213
  }
232
-
233
214
  .e-carousel .e-carousel-indicators .e-indicator-bar.e-active .e-indicator div {
234
215
  background-color: #0078d4;
235
216
  border-color: #0078d4;
236
- }
217
+ }
@@ -1,26 +1,21 @@
1
1
  /*! Carousel component FluentUI theme definitions and variables */
2
2
  .e-carousel .e-previous-icon::before {
3
- content: '\e765';
3
+ content: "\e765";
4
4
  }
5
-
6
5
  .e-carousel .e-next-icon::before {
7
- content: '\e748';
6
+ content: "\e748";
8
7
  }
9
-
10
8
  .e-carousel .e-play-icon::before {
11
- content: '\e70c';
9
+ content: "\e70c";
12
10
  }
13
-
14
11
  .e-carousel .e-pause-icon::before {
15
- content: '\e77b';
12
+ content: "\e77b";
16
13
  }
17
-
18
14
  .e-carousel.e-rtl .e-previous-icon::before {
19
- content: '\e748';
15
+ content: "\e748";
20
16
  }
21
-
22
17
  .e-carousel.e-rtl .e-next-icon::before {
23
- content: '\e765';
18
+ content: "\e765";
24
19
  }
25
20
 
26
21
  /*! carousel component styles */
@@ -30,7 +25,6 @@
30
25
  padding: 0;
31
26
  position: relative;
32
27
  }
33
-
34
28
  .e-carousel .e-carousel-items {
35
29
  height: 100%;
36
30
  margin: 0;
@@ -39,8 +33,7 @@
39
33
  position: relative;
40
34
  width: 100%;
41
35
  }
42
-
43
- .e-carousel .e-carousel-items .e-carousel-item {
36
+ .e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item {
44
37
  -webkit-backface-visibility: hidden;
45
38
  backface-visibility: hidden;
46
39
  display: none;
@@ -50,39 +43,45 @@
50
43
  position: relative;
51
44
  width: 100%;
52
45
  }
53
-
54
- .e-carousel .e-carousel-items .e-carousel-item.e-active {
46
+ .e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item.e-active {
55
47
  display: block;
56
48
  }
57
-
58
49
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item {
59
50
  transition: transform 0.6s ease-in-out;
60
51
  }
61
-
62
52
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active {
63
53
  display: block;
64
54
  }
65
-
66
55
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next:not(.e-transition-start), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-end {
67
56
  transform: translateX(100%);
68
57
  }
69
-
70
58
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev:not(.e-transition-end), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-start {
71
59
  transform: translateX(-100%);
72
60
  }
73
-
74
61
  .e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item {
75
62
  display: block;
76
63
  opacity: 0;
77
64
  transition: opacity 0.6s ease-in-out;
78
65
  z-index: 0;
79
66
  }
80
-
81
67
  .e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item.e-active {
82
68
  opacity: 1;
83
69
  z-index: 1;
84
70
  }
85
-
71
+ .e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item {
72
+ display: block;
73
+ height: 100%;
74
+ left: 0;
75
+ opacity: 0;
76
+ pointer-events: none;
77
+ position: absolute;
78
+ top: 0;
79
+ width: 100%;
80
+ }
81
+ .e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item.e-active {
82
+ opacity: 1;
83
+ pointer-events: visible;
84
+ }
86
85
  .e-carousel .e-carousel-navigators {
87
86
  -ms-flex-align: center;
88
87
  align-items: center;
@@ -97,39 +96,33 @@
97
96
  width: 100%;
98
97
  z-index: 1;
99
98
  }
100
-
101
99
  .e-carousel .e-carousel-navigators .e-play-pause,
102
100
  .e-carousel .e-carousel-navigators .e-previous,
103
101
  .e-carousel .e-carousel-navigators .e-next {
104
- padding: .5em;
102
+ padding: 0.5em;
105
103
  pointer-events: auto;
106
104
  }
107
-
108
105
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn,
109
106
  .e-carousel .e-carousel-navigators .e-previous .e-btn,
110
107
  .e-carousel .e-carousel-navigators .e-next .e-btn {
111
108
  border: 0;
112
109
  box-shadow: none;
113
110
  }
114
-
115
111
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn:hover,
116
112
  .e-carousel .e-carousel-navigators .e-previous .e-btn:hover,
117
113
  .e-carousel .e-carousel-navigators .e-next .e-btn:hover {
118
114
  border-radius: 50%;
119
115
  }
120
-
121
116
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn.e-rtl,
122
117
  .e-carousel .e-carousel-navigators .e-previous .e-btn.e-rtl,
123
118
  .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
124
119
  transform: rotate(180deg);
125
120
  }
126
-
127
121
  .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
128
122
  .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
129
123
  .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {
130
124
  display: none;
131
125
  }
132
-
133
126
  .e-carousel .e-carousel-indicators {
134
127
  -ms-flex-align: center;
135
128
  align-items: center;
@@ -145,7 +138,6 @@
145
138
  width: 100%;
146
139
  z-index: 1;
147
140
  }
148
-
149
141
  .e-carousel .e-carousel-indicators .e-indicator-bars {
150
142
  display: -ms-flexbox;
151
143
  display: flex;
@@ -155,11 +147,9 @@
155
147
  justify-content: center;
156
148
  pointer-events: auto;
157
149
  }
158
-
159
150
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar {
160
151
  padding: 0;
161
152
  }
162
-
163
153
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator {
164
154
  -ms-flex-align: center;
165
155
  align-items: center;
@@ -169,7 +159,6 @@
169
159
  justify-content: center;
170
160
  padding: 6px;
171
161
  }
172
-
173
162
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator div {
174
163
  border: 1px solid rgba(255, 255, 255, 0.4);
175
164
  border-radius: 50%;
@@ -179,7 +168,6 @@
179
168
  transition-timing-function: ease-in-out;
180
169
  width: 12px;
181
170
  }
182
-
183
171
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator .e-ripple-element {
184
172
  display: none;
185
173
  }
@@ -190,13 +178,11 @@
190
178
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) {
191
179
  background-color: transparent;
192
180
  }
193
-
194
181
  .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled) .e-btn-icon,
195
182
  .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled) .e-btn-icon,
196
183
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) .e-btn-icon {
197
184
  color: #fff;
198
185
  }
199
-
200
186
  .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):active, .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):focus, .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):hover,
201
187
  .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):active,
202
188
  .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):focus,
@@ -207,30 +193,25 @@
207
193
  background-color: rgba(255, 255, 255, 0.4);
208
194
  outline: none;
209
195
  }
210
-
211
196
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator {
212
197
  background-color: transparent;
213
198
  border-color: transparent;
214
199
  box-shadow: none;
215
200
  }
216
-
217
201
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div {
218
202
  background-color: #fff;
219
203
  border-color: #fff;
220
204
  }
221
-
222
205
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:active, .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:focus, .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:hover {
223
206
  background-color: transparent;
224
207
  border-color: transparent;
225
208
  box-shadow: none;
226
209
  outline: none;
227
210
  }
228
-
229
211
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:focus-visible {
230
212
  border-color: #000;
231
213
  }
232
-
233
214
  .e-carousel .e-carousel-indicators .e-indicator-bar.e-active .e-indicator div {
234
215
  background-color: #0078d4;
235
216
  border-color: #0078d4;
236
- }
217
+ }
@@ -1,26 +1,21 @@
1
1
  /*! Carousel component highcontrast-light theme definitions and variables */
2
2
  .e-carousel .e-previous-icon::before {
3
- content: '\e654';
3
+ content: "\e654";
4
4
  }
5
-
6
5
  .e-carousel .e-next-icon::before {
7
- content: '\e830';
6
+ content: "\e830";
8
7
  }
9
-
10
8
  .e-carousel .e-play-icon::before {
11
- content: '\e327';
9
+ content: "\e327";
12
10
  }
13
-
14
11
  .e-carousel .e-pause-icon::before {
15
- content: '\e325';
12
+ content: "\e325";
16
13
  }
17
-
18
14
  .e-carousel.e-rtl .e-previous-icon::before {
19
- content: '\e830';
15
+ content: "\e830";
20
16
  }
21
-
22
17
  .e-carousel.e-rtl .e-next-icon::before {
23
- content: '\e654';
18
+ content: "\e654";
24
19
  }
25
20
 
26
21
  /*! carousel component styles */
@@ -30,7 +25,6 @@
30
25
  padding: 0;
31
26
  position: relative;
32
27
  }
33
-
34
28
  .e-carousel .e-carousel-items {
35
29
  height: 100%;
36
30
  margin: 0;
@@ -39,8 +33,7 @@
39
33
  position: relative;
40
34
  width: 100%;
41
35
  }
42
-
43
- .e-carousel .e-carousel-items .e-carousel-item {
36
+ .e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item {
44
37
  -webkit-backface-visibility: hidden;
45
38
  backface-visibility: hidden;
46
39
  display: none;
@@ -50,39 +43,45 @@
50
43
  position: relative;
51
44
  width: 100%;
52
45
  }
53
-
54
- .e-carousel .e-carousel-items .e-carousel-item.e-active {
46
+ .e-carousel .e-carousel-items:not(.e-carousel-custom-animation) .e-carousel-item.e-active {
55
47
  display: block;
56
48
  }
57
-
58
49
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item {
59
50
  transition: transform 0.6s ease-in-out;
60
51
  }
61
-
62
52
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next, .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active {
63
53
  display: block;
64
54
  }
65
-
66
55
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-next:not(.e-transition-start), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-end {
67
56
  transform: translateX(100%);
68
57
  }
69
-
70
58
  .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-prev:not(.e-transition-end), .e-carousel .e-carousel-items.e-carousel-slide-animation .e-carousel-item.e-active.e-transition-start {
71
59
  transform: translateX(-100%);
72
60
  }
73
-
74
61
  .e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item {
75
62
  display: block;
76
63
  opacity: 0;
77
64
  transition: opacity 0.6s ease-in-out;
78
65
  z-index: 0;
79
66
  }
80
-
81
67
  .e-carousel .e-carousel-items.e-carousel-fade-animation .e-carousel-item.e-active {
82
68
  opacity: 1;
83
69
  z-index: 1;
84
70
  }
85
-
71
+ .e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item {
72
+ display: block;
73
+ height: 100%;
74
+ left: 0;
75
+ opacity: 0;
76
+ pointer-events: none;
77
+ position: absolute;
78
+ top: 0;
79
+ width: 100%;
80
+ }
81
+ .e-carousel .e-carousel-items.e-carousel-custom-animation .e-carousel-item.e-active {
82
+ opacity: 1;
83
+ pointer-events: visible;
84
+ }
86
85
  .e-carousel .e-carousel-navigators {
87
86
  -ms-flex-align: center;
88
87
  align-items: center;
@@ -97,39 +96,33 @@
97
96
  width: 100%;
98
97
  z-index: 1;
99
98
  }
100
-
101
99
  .e-carousel .e-carousel-navigators .e-play-pause,
102
100
  .e-carousel .e-carousel-navigators .e-previous,
103
101
  .e-carousel .e-carousel-navigators .e-next {
104
- padding: .5em;
102
+ padding: 0.5em;
105
103
  pointer-events: auto;
106
104
  }
107
-
108
105
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn,
109
106
  .e-carousel .e-carousel-navigators .e-previous .e-btn,
110
107
  .e-carousel .e-carousel-navigators .e-next .e-btn {
111
108
  border: 0;
112
109
  box-shadow: none;
113
110
  }
114
-
115
111
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn:hover,
116
112
  .e-carousel .e-carousel-navigators .e-previous .e-btn:hover,
117
113
  .e-carousel .e-carousel-navigators .e-next .e-btn:hover {
118
114
  border-radius: 50%;
119
115
  }
120
-
121
116
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn.e-rtl,
122
117
  .e-carousel .e-carousel-navigators .e-previous .e-btn.e-rtl,
123
118
  .e-carousel .e-carousel-navigators .e-next .e-btn.e-rtl {
124
119
  transform: rotate(180deg);
125
120
  }
126
-
127
121
  .e-carousel .e-carousel-navigators .e-play-pause.e-hover-arrows,
128
122
  .e-carousel .e-carousel-navigators .e-previous.e-hover-arrows,
129
123
  .e-carousel .e-carousel-navigators .e-next.e-hover-arrows {
130
124
  display: none;
131
125
  }
132
-
133
126
  .e-carousel .e-carousel-indicators {
134
127
  -ms-flex-align: center;
135
128
  align-items: center;
@@ -145,7 +138,6 @@
145
138
  width: 100%;
146
139
  z-index: 1;
147
140
  }
148
-
149
141
  .e-carousel .e-carousel-indicators .e-indicator-bars {
150
142
  display: -ms-flexbox;
151
143
  display: flex;
@@ -155,11 +147,9 @@
155
147
  justify-content: center;
156
148
  pointer-events: auto;
157
149
  }
158
-
159
150
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar {
160
151
  padding: 0;
161
152
  }
162
-
163
153
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator {
164
154
  -ms-flex-align: center;
165
155
  align-items: center;
@@ -169,7 +159,6 @@
169
159
  justify-content: center;
170
160
  padding: 6px;
171
161
  }
172
-
173
162
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator div {
174
163
  border: 1px solid rgba(255, 255, 255, 0.4);
175
164
  border-radius: 50%;
@@ -179,7 +168,6 @@
179
168
  transition-timing-function: ease-in-out;
180
169
  width: 12px;
181
170
  }
182
-
183
171
  .e-carousel .e-carousel-indicators .e-indicator-bars .e-indicator-bar .e-indicator .e-ripple-element {
184
172
  display: none;
185
173
  }
@@ -190,13 +178,11 @@
190
178
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) {
191
179
  background-color: transparent;
192
180
  }
193
-
194
181
  .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled) .e-btn-icon,
195
182
  .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled) .e-btn-icon,
196
183
  .e-carousel .e-carousel-navigators .e-play-pause .e-btn:not(:disabled) .e-btn-icon {
197
184
  color: #fff;
198
185
  }
199
-
200
186
  .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):active, .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):focus, .e-carousel .e-carousel-navigators .e-previous .e-btn:not(:disabled):hover,
201
187
  .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):active,
202
188
  .e-carousel .e-carousel-navigators .e-next .e-btn:not(:disabled):focus,
@@ -207,30 +193,25 @@
207
193
  background-color: rgba(255, 255, 255, 0.4);
208
194
  outline: none;
209
195
  }
210
-
211
196
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator {
212
197
  background-color: transparent;
213
198
  border-color: transparent;
214
199
  box-shadow: none;
215
200
  }
216
-
217
201
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator div {
218
202
  background-color: #fff;
219
203
  border-color: #fff;
220
204
  }
221
-
222
205
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:active, .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:focus, .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:hover {
223
206
  background-color: transparent;
224
207
  border-color: transparent;
225
208
  box-shadow: none;
226
209
  outline: none;
227
210
  }
228
-
229
211
  .e-carousel .e-carousel-indicators .e-indicator-bar .e-indicator:focus-visible {
230
212
  border-color: #000;
231
213
  }
232
-
233
214
  .e-carousel .e-carousel-indicators .e-indicator-bar.e-active .e-indicator div {
234
215
  background-color: #400074;
235
216
  border-color: #400074;
236
- }
217
+ }