@syncfusion/ej2-navigations 20.1.51 → 20.1.55

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 (193) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/dist/ej2-navigations.umd.min.js +2 -2
  3. package/dist/ej2-navigations.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-navigations.es2015.js +18 -6
  5. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  6. package/dist/es6/ej2-navigations.es5.js +18 -6
  7. package/dist/es6/ej2-navigations.es5.js.map +1 -1
  8. package/dist/global/ej2-navigations.min.js +2 -2
  9. package/dist/global/ej2-navigations.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +11 -11
  12. package/src/carousel/carousel.js +18 -6
  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/_layout.scss +19 -1
  49. package/styles/carousel/bootstrap-dark.css +24 -43
  50. package/styles/carousel/bootstrap.css +24 -43
  51. package/styles/carousel/bootstrap4.css +24 -43
  52. package/styles/carousel/bootstrap5-dark.css +24 -43
  53. package/styles/carousel/bootstrap5.css +24 -43
  54. package/styles/carousel/fabric-dark.css +24 -43
  55. package/styles/carousel/fabric.css +24 -43
  56. package/styles/carousel/fluent-dark.css +24 -43
  57. package/styles/carousel/fluent.css +24 -43
  58. package/styles/carousel/highcontrast-light.css +24 -43
  59. package/styles/carousel/highcontrast.css +24 -43
  60. package/styles/carousel/material-dark.css +24 -43
  61. package/styles/carousel/material.css +24 -43
  62. package/styles/carousel/tailwind-dark.css +24 -43
  63. package/styles/carousel/tailwind.css +24 -43
  64. package/styles/context-menu/bootstrap-dark.css +6 -60
  65. package/styles/context-menu/bootstrap.css +6 -60
  66. package/styles/context-menu/bootstrap4.css +6 -60
  67. package/styles/context-menu/bootstrap5-dark.css +6 -60
  68. package/styles/context-menu/bootstrap5.css +6 -60
  69. package/styles/context-menu/fabric-dark.css +6 -60
  70. package/styles/context-menu/fabric.css +6 -60
  71. package/styles/context-menu/fluent-dark.css +6 -60
  72. package/styles/context-menu/fluent.css +6 -60
  73. package/styles/context-menu/highcontrast-light.css +6 -60
  74. package/styles/context-menu/highcontrast.css +6 -60
  75. package/styles/context-menu/material-dark.css +6 -60
  76. package/styles/context-menu/material.css +6 -60
  77. package/styles/context-menu/tailwind-dark.css +6 -60
  78. package/styles/context-menu/tailwind.css +6 -60
  79. package/styles/fabric-dark.css +262 -2007
  80. package/styles/fabric.css +262 -2007
  81. package/styles/fluent-dark.css +262 -2018
  82. package/styles/fluent.css +262 -2018
  83. package/styles/h-scroll/bootstrap-dark.css +11 -67
  84. package/styles/h-scroll/bootstrap.css +11 -67
  85. package/styles/h-scroll/bootstrap4.css +11 -69
  86. package/styles/h-scroll/bootstrap5-dark.css +11 -68
  87. package/styles/h-scroll/bootstrap5.css +11 -68
  88. package/styles/h-scroll/fabric-dark.css +11 -67
  89. package/styles/h-scroll/fabric.css +11 -67
  90. package/styles/h-scroll/fluent-dark.css +11 -68
  91. package/styles/h-scroll/fluent.css +11 -68
  92. package/styles/h-scroll/highcontrast-light.css +11 -70
  93. package/styles/h-scroll/highcontrast.css +11 -70
  94. package/styles/h-scroll/material-dark.css +11 -68
  95. package/styles/h-scroll/material.css +11 -68
  96. package/styles/h-scroll/tailwind-dark.css +11 -68
  97. package/styles/h-scroll/tailwind.css +11 -68
  98. package/styles/highcontrast-light.css +267 -2079
  99. package/styles/highcontrast.css +267 -2082
  100. package/styles/material-dark.css +265 -1976
  101. package/styles/material.css +258 -1968
  102. package/styles/menu/bootstrap-dark.css +27 -201
  103. package/styles/menu/bootstrap.css +27 -201
  104. package/styles/menu/bootstrap4.css +28 -211
  105. package/styles/menu/bootstrap5-dark.css +27 -202
  106. package/styles/menu/bootstrap5.css +27 -202
  107. package/styles/menu/fabric-dark.css +27 -201
  108. package/styles/menu/fabric.css +27 -201
  109. package/styles/menu/fluent-dark.css +27 -204
  110. package/styles/menu/fluent.css +27 -204
  111. package/styles/menu/highcontrast-light.css +27 -201
  112. package/styles/menu/highcontrast.css +27 -201
  113. package/styles/menu/material-dark.css +27 -203
  114. package/styles/menu/material.css +27 -203
  115. package/styles/menu/tailwind-dark.css +27 -202
  116. package/styles/menu/tailwind.css +27 -202
  117. package/styles/sidebar/bootstrap-dark.css +12 -27
  118. package/styles/sidebar/bootstrap.css +12 -27
  119. package/styles/sidebar/bootstrap4.css +12 -27
  120. package/styles/sidebar/bootstrap5-dark.css +10 -25
  121. package/styles/sidebar/bootstrap5.css +10 -25
  122. package/styles/sidebar/fabric-dark.css +12 -27
  123. package/styles/sidebar/fabric.css +12 -27
  124. package/styles/sidebar/fluent-dark.css +10 -25
  125. package/styles/sidebar/fluent.css +10 -25
  126. package/styles/sidebar/highcontrast-light.css +12 -27
  127. package/styles/sidebar/highcontrast.css +12 -27
  128. package/styles/sidebar/material-dark.css +12 -27
  129. package/styles/sidebar/material.css +12 -27
  130. package/styles/sidebar/tailwind-dark.css +10 -25
  131. package/styles/sidebar/tailwind.css +10 -25
  132. package/styles/tab/bootstrap-dark.css +150 -963
  133. package/styles/tab/bootstrap.css +150 -963
  134. package/styles/tab/bootstrap4.css +150 -970
  135. package/styles/tab/bootstrap5-dark.css +150 -975
  136. package/styles/tab/bootstrap5.css +150 -975
  137. package/styles/tab/fabric-dark.css +141 -954
  138. package/styles/tab/fabric.css +141 -954
  139. package/styles/tab/fluent-dark.css +143 -949
  140. package/styles/tab/fluent.css +143 -949
  141. package/styles/tab/highcontrast-light.css +142 -980
  142. package/styles/tab/highcontrast.css +142 -980
  143. package/styles/tab/material-dark.css +144 -916
  144. package/styles/tab/material.css +137 -909
  145. package/styles/tab/tailwind-dark.css +137 -907
  146. package/styles/tab/tailwind.css +137 -907
  147. package/styles/tailwind-dark.css +256 -1988
  148. package/styles/tailwind.css +256 -1988
  149. package/styles/toolbar/bootstrap-dark.css +7 -246
  150. package/styles/toolbar/bootstrap.css +7 -246
  151. package/styles/toolbar/bootstrap4.css +8 -258
  152. package/styles/toolbar/bootstrap5-dark.css +7 -251
  153. package/styles/toolbar/bootstrap5.css +7 -251
  154. package/styles/toolbar/fabric-dark.css +7 -245
  155. package/styles/toolbar/fabric.css +7 -245
  156. package/styles/toolbar/fluent-dark.css +7 -244
  157. package/styles/toolbar/fluent.css +7 -244
  158. package/styles/toolbar/highcontrast-light.css +7 -257
  159. package/styles/toolbar/highcontrast.css +7 -257
  160. package/styles/toolbar/material-dark.css +7 -248
  161. package/styles/toolbar/material.css +7 -248
  162. package/styles/toolbar/tailwind-dark.css +7 -245
  163. package/styles/toolbar/tailwind.css +7 -245
  164. package/styles/treeview/bootstrap-dark.css +23 -191
  165. package/styles/treeview/bootstrap.css +23 -191
  166. package/styles/treeview/bootstrap4.css +24 -208
  167. package/styles/treeview/bootstrap5-dark.css +24 -217
  168. package/styles/treeview/bootstrap5.css +24 -217
  169. package/styles/treeview/fabric-dark.css +23 -191
  170. package/styles/treeview/fabric.css +23 -191
  171. package/styles/treeview/fluent-dark.css +23 -216
  172. package/styles/treeview/fluent.css +23 -216
  173. package/styles/treeview/highcontrast-light.css +23 -191
  174. package/styles/treeview/highcontrast.css +23 -194
  175. package/styles/treeview/material-dark.css +23 -192
  176. package/styles/treeview/material.css +23 -191
  177. package/styles/treeview/tailwind-dark.css +23 -213
  178. package/styles/treeview/tailwind.css +23 -213
  179. package/styles/v-scroll/bootstrap-dark.css +7 -50
  180. package/styles/v-scroll/bootstrap.css +7 -50
  181. package/styles/v-scroll/bootstrap4.css +7 -50
  182. package/styles/v-scroll/bootstrap5-dark.css +7 -50
  183. package/styles/v-scroll/bootstrap5.css +7 -50
  184. package/styles/v-scroll/fabric-dark.css +7 -50
  185. package/styles/v-scroll/fabric.css +7 -50
  186. package/styles/v-scroll/fluent-dark.css +7 -50
  187. package/styles/v-scroll/fluent.css +7 -50
  188. package/styles/v-scroll/highcontrast-light.css +7 -53
  189. package/styles/v-scroll/highcontrast.css +7 -53
  190. package/styles/v-scroll/material-dark.css +7 -51
  191. package/styles/v-scroll/material.css +7 -51
  192. package/styles/v-scroll/tailwind-dark.css +7 -50
  193. package/styles/v-scroll/tailwind.css +7 -50
@@ -1,26 +1,21 @@
1
1
  /*! Carousel component bootstrap5 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: 4px;
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: 2px;
@@ -179,7 +168,6 @@
179
168
  transition-timing-function: ease-in-out;
180
169
  width: 20px;
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: #0d6efd;
235
216
  border-color: #0d6efd;
236
- }
217
+ }
@@ -1,26 +1,21 @@
1
1
  /*! Carousel component fabric-dark 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: '\e219';
6
+ content: "\e219";
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: '\e219';
15
+ content: "\e219";
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: #0074cc;
235
216
  border-color: #0074cc;
236
- }
217
+ }
@@ -1,26 +1,21 @@
1
1
  /*! Carousel component fabric 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: '\e219';
6
+ content: "\e219";
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: '\e219';
15
+ content: "\e219";
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: #0078d6;
235
216
  border-color: #0078d6;
236
- }
217
+ }