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