@syncfusion/ej2-navigations 20.1.47 → 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 (201) hide show
  1. package/CHANGELOG.md +31 -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 +35 -13
  5. package/dist/es6/ej2-navigations.es2015.js.map +1 -1
  6. package/dist/es6/ej2-navigations.es5.js +38 -16
  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/h-scroll.js +4 -2
  14. package/src/common/menu-base.js +9 -5
  15. package/src/tab/tab.js +2 -2
  16. package/src/toolbar/toolbar.js +4 -0
  17. package/src/treeview/treeview.js +1 -1
  18. package/styles/accordion/bootstrap-dark.css +6 -94
  19. package/styles/accordion/bootstrap.css +6 -94
  20. package/styles/accordion/bootstrap4.css +9 -109
  21. package/styles/accordion/bootstrap5-dark.css +3 -88
  22. package/styles/accordion/bootstrap5.css +3 -88
  23. package/styles/accordion/fabric-dark.css +6 -90
  24. package/styles/accordion/fabric.css +6 -90
  25. package/styles/accordion/fluent-dark.css +6 -87
  26. package/styles/accordion/fluent.css +6 -87
  27. package/styles/accordion/highcontrast-light.css +10 -116
  28. package/styles/accordion/highcontrast.css +10 -116
  29. package/styles/accordion/material-dark.css +6 -93
  30. package/styles/accordion/material.css +6 -93
  31. package/styles/accordion/tailwind-dark.css +6 -93
  32. package/styles/accordion/tailwind.css +6 -93
  33. package/styles/bootstrap-dark.css +272 -2023
  34. package/styles/bootstrap.css +272 -2023
  35. package/styles/bootstrap4.css +278 -2086
  36. package/styles/bootstrap5-dark.css +268 -2064
  37. package/styles/bootstrap5.css +268 -2064
  38. package/styles/breadcrumb/_layout.scss +1 -1
  39. package/styles/breadcrumb/_tailwind-dark-definition.scss +1 -60
  40. package/styles/breadcrumb/_tailwind-definition.scss +3 -3
  41. package/styles/breadcrumb/bootstrap-dark.css +9 -91
  42. package/styles/breadcrumb/bootstrap.css +9 -91
  43. package/styles/breadcrumb/bootstrap4.css +9 -91
  44. package/styles/breadcrumb/bootstrap5-dark.css +9 -95
  45. package/styles/breadcrumb/bootstrap5.css +9 -95
  46. package/styles/breadcrumb/fabric-dark.css +9 -90
  47. package/styles/breadcrumb/fabric.css +9 -90
  48. package/styles/breadcrumb/fluent-dark.css +9 -83
  49. package/styles/breadcrumb/fluent.css +9 -83
  50. package/styles/breadcrumb/highcontrast-light.css +9 -92
  51. package/styles/breadcrumb/highcontrast.css +9 -92
  52. package/styles/breadcrumb/material-dark.css +9 -86
  53. package/styles/breadcrumb/material.css +9 -86
  54. package/styles/breadcrumb/tailwind-dark.css +16 -100
  55. package/styles/breadcrumb/tailwind.css +16 -100
  56. package/styles/carousel/_layout.scss +19 -1
  57. package/styles/carousel/bootstrap-dark.css +24 -43
  58. package/styles/carousel/bootstrap.css +24 -43
  59. package/styles/carousel/bootstrap4.css +24 -43
  60. package/styles/carousel/bootstrap5-dark.css +24 -43
  61. package/styles/carousel/bootstrap5.css +24 -43
  62. package/styles/carousel/fabric-dark.css +24 -43
  63. package/styles/carousel/fabric.css +24 -43
  64. package/styles/carousel/fluent-dark.css +24 -43
  65. package/styles/carousel/fluent.css +24 -43
  66. package/styles/carousel/highcontrast-light.css +24 -43
  67. package/styles/carousel/highcontrast.css +24 -43
  68. package/styles/carousel/material-dark.css +24 -43
  69. package/styles/carousel/material.css +24 -43
  70. package/styles/carousel/tailwind-dark.css +24 -43
  71. package/styles/carousel/tailwind.css +24 -43
  72. package/styles/context-menu/bootstrap-dark.css +6 -60
  73. package/styles/context-menu/bootstrap.css +6 -60
  74. package/styles/context-menu/bootstrap4.css +6 -60
  75. package/styles/context-menu/bootstrap5-dark.css +6 -60
  76. package/styles/context-menu/bootstrap5.css +6 -60
  77. package/styles/context-menu/fabric-dark.css +6 -60
  78. package/styles/context-menu/fabric.css +6 -60
  79. package/styles/context-menu/fluent-dark.css +6 -60
  80. package/styles/context-menu/fluent.css +6 -60
  81. package/styles/context-menu/highcontrast-light.css +6 -60
  82. package/styles/context-menu/highcontrast.css +6 -60
  83. package/styles/context-menu/material-dark.css +6 -60
  84. package/styles/context-menu/material.css +6 -60
  85. package/styles/context-menu/tailwind-dark.css +6 -60
  86. package/styles/context-menu/tailwind.css +6 -60
  87. package/styles/fabric-dark.css +263 -2008
  88. package/styles/fabric.css +263 -2008
  89. package/styles/fluent-dark.css +263 -2019
  90. package/styles/fluent.css +263 -2019
  91. package/styles/h-scroll/bootstrap-dark.css +11 -67
  92. package/styles/h-scroll/bootstrap.css +11 -67
  93. package/styles/h-scroll/bootstrap4.css +11 -69
  94. package/styles/h-scroll/bootstrap5-dark.css +11 -68
  95. package/styles/h-scroll/bootstrap5.css +11 -68
  96. package/styles/h-scroll/fabric-dark.css +11 -67
  97. package/styles/h-scroll/fabric.css +11 -67
  98. package/styles/h-scroll/fluent-dark.css +11 -68
  99. package/styles/h-scroll/fluent.css +11 -68
  100. package/styles/h-scroll/highcontrast-light.css +11 -70
  101. package/styles/h-scroll/highcontrast.css +11 -70
  102. package/styles/h-scroll/material-dark.css +11 -68
  103. package/styles/h-scroll/material.css +11 -68
  104. package/styles/h-scroll/tailwind-dark.css +11 -68
  105. package/styles/h-scroll/tailwind.css +11 -68
  106. package/styles/highcontrast-light.css +268 -2080
  107. package/styles/highcontrast.css +268 -2083
  108. package/styles/material-dark.css +266 -1977
  109. package/styles/material.css +259 -1969
  110. package/styles/menu/bootstrap-dark.css +27 -201
  111. package/styles/menu/bootstrap.css +27 -201
  112. package/styles/menu/bootstrap4.css +28 -211
  113. package/styles/menu/bootstrap5-dark.css +27 -202
  114. package/styles/menu/bootstrap5.css +27 -202
  115. package/styles/menu/fabric-dark.css +27 -201
  116. package/styles/menu/fabric.css +27 -201
  117. package/styles/menu/fluent-dark.css +27 -204
  118. package/styles/menu/fluent.css +27 -204
  119. package/styles/menu/highcontrast-light.css +27 -201
  120. package/styles/menu/highcontrast.css +27 -201
  121. package/styles/menu/material-dark.css +27 -203
  122. package/styles/menu/material.css +27 -203
  123. package/styles/menu/tailwind-dark.css +27 -202
  124. package/styles/menu/tailwind.css +27 -202
  125. package/styles/sidebar/bootstrap-dark.css +12 -27
  126. package/styles/sidebar/bootstrap.css +12 -27
  127. package/styles/sidebar/bootstrap4.css +12 -27
  128. package/styles/sidebar/bootstrap5-dark.css +10 -25
  129. package/styles/sidebar/bootstrap5.css +10 -25
  130. package/styles/sidebar/fabric-dark.css +12 -27
  131. package/styles/sidebar/fabric.css +12 -27
  132. package/styles/sidebar/fluent-dark.css +10 -25
  133. package/styles/sidebar/fluent.css +10 -25
  134. package/styles/sidebar/highcontrast-light.css +12 -27
  135. package/styles/sidebar/highcontrast.css +12 -27
  136. package/styles/sidebar/material-dark.css +12 -27
  137. package/styles/sidebar/material.css +12 -27
  138. package/styles/sidebar/tailwind-dark.css +10 -25
  139. package/styles/sidebar/tailwind.css +10 -25
  140. package/styles/tab/bootstrap-dark.css +150 -963
  141. package/styles/tab/bootstrap.css +150 -963
  142. package/styles/tab/bootstrap4.css +150 -970
  143. package/styles/tab/bootstrap5-dark.css +150 -975
  144. package/styles/tab/bootstrap5.css +150 -975
  145. package/styles/tab/fabric-dark.css +141 -954
  146. package/styles/tab/fabric.css +141 -954
  147. package/styles/tab/fluent-dark.css +143 -949
  148. package/styles/tab/fluent.css +143 -949
  149. package/styles/tab/highcontrast-light.css +142 -980
  150. package/styles/tab/highcontrast.css +142 -980
  151. package/styles/tab/material-dark.css +144 -916
  152. package/styles/tab/material.css +137 -909
  153. package/styles/tab/tailwind-dark.css +137 -907
  154. package/styles/tab/tailwind.css +137 -907
  155. package/styles/tailwind-dark.css +264 -1996
  156. package/styles/tailwind.css +264 -1996
  157. package/styles/toolbar/bootstrap-dark.css +7 -246
  158. package/styles/toolbar/bootstrap.css +7 -246
  159. package/styles/toolbar/bootstrap4.css +8 -258
  160. package/styles/toolbar/bootstrap5-dark.css +7 -251
  161. package/styles/toolbar/bootstrap5.css +7 -251
  162. package/styles/toolbar/fabric-dark.css +7 -245
  163. package/styles/toolbar/fabric.css +7 -245
  164. package/styles/toolbar/fluent-dark.css +7 -244
  165. package/styles/toolbar/fluent.css +7 -244
  166. package/styles/toolbar/highcontrast-light.css +7 -257
  167. package/styles/toolbar/highcontrast.css +7 -257
  168. package/styles/toolbar/material-dark.css +7 -248
  169. package/styles/toolbar/material.css +7 -248
  170. package/styles/toolbar/tailwind-dark.css +7 -245
  171. package/styles/toolbar/tailwind.css +7 -245
  172. package/styles/treeview/bootstrap-dark.css +23 -191
  173. package/styles/treeview/bootstrap.css +23 -191
  174. package/styles/treeview/bootstrap4.css +24 -208
  175. package/styles/treeview/bootstrap5-dark.css +24 -217
  176. package/styles/treeview/bootstrap5.css +24 -217
  177. package/styles/treeview/fabric-dark.css +23 -191
  178. package/styles/treeview/fabric.css +23 -191
  179. package/styles/treeview/fluent-dark.css +23 -216
  180. package/styles/treeview/fluent.css +23 -216
  181. package/styles/treeview/highcontrast-light.css +23 -191
  182. package/styles/treeview/highcontrast.css +23 -194
  183. package/styles/treeview/material-dark.css +23 -192
  184. package/styles/treeview/material.css +23 -191
  185. package/styles/treeview/tailwind-dark.css +23 -213
  186. package/styles/treeview/tailwind.css +23 -213
  187. package/styles/v-scroll/bootstrap-dark.css +7 -50
  188. package/styles/v-scroll/bootstrap.css +7 -50
  189. package/styles/v-scroll/bootstrap4.css +7 -50
  190. package/styles/v-scroll/bootstrap5-dark.css +7 -50
  191. package/styles/v-scroll/bootstrap5.css +7 -50
  192. package/styles/v-scroll/fabric-dark.css +7 -50
  193. package/styles/v-scroll/fabric.css +7 -50
  194. package/styles/v-scroll/fluent-dark.css +7 -50
  195. package/styles/v-scroll/fluent.css +7 -50
  196. package/styles/v-scroll/highcontrast-light.css +7 -53
  197. package/styles/v-scroll/highcontrast.css +7 -53
  198. package/styles/v-scroll/material-dark.css +7 -51
  199. package/styles/v-scroll/material.css +7 -51
  200. package/styles/v-scroll/tailwind-dark.css +7 -50
  201. package/styles/v-scroll/tailwind.css +7 -50
@@ -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
+ }
@@ -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
+ }