PluginProbe
Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits / 3.1.2
Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits v3.1.2
3.2.2 3.2.3 3.2.1 3.2.0 3.1.9 3.1.8 3.1.7 3.1.6 3.1.5 3.1.4 3.1.3 3.1.2 3.1.1 3.1.0 3.0.9 trunk 1.0.6 1.0.7 1.0.8 1.0.9 1.1.0 1.1.1 1.1.3 1.1.4 1.1.5 All 174 releases
master-addons / assets / css / addons / ma-timeline.css

ma-timeline.css in Master Addons for Elementor – Elementor Addons, Widgets, Mega Menu Builder, Popup Builder, Widget Builder & Template Kits 3.1.2, at assets/css/addons/ma-timeline.css

510 lines 13.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Start of MA Timeline */
2 .jltma-timeline {
3 position: relative;
4 display: inline-block;
5 width: 100%;
6 max-width: 100%;
7 margin: 0 auto;
8 }
9 .jltma-timeline .jltma-timeline__line__inner {
10 width: 100%;
11 height: 20%;
12 }
13 .jltma-timeline .timeline-item {
14 display: flex;
15 align-items: flex-start;
16 }
17 .jltma-timeline .timeline-item__meta-wrapper {
18 display: flex;
19 align-items: center;
20 padding: 0 10px;
21 }
22 .jltma-timeline .timeline-item__card__arrow:after {
23 content: "";
24 width: 0px;
25 height: 0px;
26 border-top: 10px solid transparent;
27 border-bottom: 10px solid transparent;
28 position: absolute;
29 }
30 .jltma-timeline .timeline-item__card-wrapper,
31 .jltma-timeline .timeline-item__meta-wrapper {
32 max-width: 100%;
33 position: relative;
34 }
35 .jltma-timeline .timeline-item__content-wrapper {
36 overflow: hidden;
37 background-color: #f7f7f7;
38 border-radius: 5px;
39 padding: 1.875rem;
40 }
41 .jltma-timeline .jltma-timeline__item {
42 margin-bottom: 20px;
43 }
44 .jltma-timeline .jltma-timeline-entry-thimbnail {
45 border-radius: 5px;
46 margin-bottom: 30px;
47 }
48 .jltma-timeline .jltma-timeline-entry-thimbnail img {
49 border-radius: 5px;
50 }
51 .jltma-timeline .jltma-timeline-post-type-icon,
52 .jltma-timeline .jltma-timeline-post-mini-thumb {
53 background-color: #4b00e7;
54 border-radius: 50%;
55 color: #fff;
56 display: flex;
57 align-items: center;
58 justify-content: center;
59 height: 64px;
60 width: 64px;
61 padding: 6px;
62 overflow: hidden;
63 transition: all 0.25s ease;
64 }
65 .jltma-timeline .jltma-timeline-post-type-icon img,
66 .jltma-timeline .jltma-timeline-post-mini-thumb img {
67 height: 65px;
68 width: auto;
69 }
70 .jltma-timeline .jltma-timeline-post-type-icon svg,
71 .jltma-timeline .jltma-timeline-post-mini-thumb svg {
72 fill: #fff;
73 height: 20px;
74 width: 20px;
75 }
76 .jltma-timeline .jltma-timeline-post-type-icon:hover {
77 animation: none;
78 }
79 .jltma-timeline .timeline-item__card__arrow {
80 width: 10px;
81 height: 40px;
82 top: 0;
83 position: absolute;
84 }
85 .jltma-timeline.jltma-timeline--horizontal {
86 margin: 0 -15px;
87 padding-top: 2.5rem;
88 }
89 .jltma-timeline.jltma-timeline--horizontal .jltma-timeline__line {
90 height: 4px;
91 width: calc(100% - 30px) !important;
92 top: 0 !important;
93 margin-left: 15px !important;
94 transform: none !important;
95 }
96 .jltma-timeline.jltma-timeline--horizontal .jltma-timeline__line .jltma-timeline__line__inner {
97 height: 4px !important;
98 }
99 .jltma-timeline.jltma-timeline--horizontal .jltma-timeline__item {
100 float: left;
101 padding: 0 15px;
102 position: relative;
103 width: 50%;
104 }
105 .jltma-timeline.jltma-timeline--horizontal .jltma-timeline__item .timeline-item__point {
106 top: -20px;
107 left: 50%;
108 position: absolute;
109 transform: translate(-50%, -100%);
110 }
111 .jltma-timeline.jltma-timeline--horizontal .jltma-timeline__item .jltma-icon {
112 margin: 0 auto;
113 }
114 .jltma-timeline.jltma-timeline--horizontal .jltma-timeline__item .timeline-item__card-wrapper {
115 margin-left: 0;
116 }
117 .jltma-timeline.jltma-timeline--horizontal .jltma-timeline__item .timeline-item__card-wrapper .timeline-item__card__arrow {
118 margin-left: -5px;
119 top: -5px;
120 left: 50%;
121 transform: translateY(-50%) rotate(90deg);
122 }
123 .jltma-timeline .timeline-item__card-wrapper .timeline-item__meta {
124 display: none;
125 }
126
127 .jltma-center-vertical,
128 .jltma-timeline .timeline-item__card__arrow:after {
129 top: 50%;
130 transform: translateY(-50%);
131 }
132
133 @media (min-width: 1025px) {
134 .jltma-timeline-animate .jltma-timeline .timeline-item__card {
135 visibility: hidden;
136 }
137 .jltma-timeline-animate .jltma-timeline .timeline-item.bounce-in .timeline-item__card,
138 .jltma-timeline-animate .jltma-timeline .timeline-item.bounce-in .timeline-item__meta {
139 visibility: visible;
140 }
141 .jltma-timeline-animate .jltma-timeline .timeline-item__meta {
142 visibility: hidden;
143 }
144 .jltma-timeline-animate .jltma-timeline .timeline-item.bounce-in .timeline-item__card {
145 animation: cd-bounce-odd 1s;
146 }
147 .jltma-timeline-animate .jltma-timeline .timeline-item.bounce-in .timeline-item__meta {
148 animation: cd-bounce-even 1s;
149 }
150 .jltma-timeline-animate .jltma-timeline .timeline-item:nth-child(even).bounce-in .timeline-item__card {
151 animation: cd-bounce-even 1s;
152 }
153 .jltma-timeline-animate .jltma-timeline .timeline-item:nth-child(even).bounce-in .timeline-item__meta {
154 animation: cd-bounce-odd 1s;
155 }
156 [class*=jltma-timeline-align-] .jltma-timeline .timeline-item__card,
157 [class*=jltma-timeline-align-] .jltma-timeline .timeline-item__meta {
158 visibility: visible;
159 }
160 .jltma-timeline-align--center .jltma-timeline .timeline-item__card__arrow:after {
161 border-right-color: #f7f7f7;
162 border-left-color: #f7f7f7;
163 }
164 .jltma-timeline-align--center .jltma-timeline .timeline-item__point {
165 flex-shrink: 0;
166 flex-grow: 0;
167 order: 1;
168 }
169 .jltma-timeline-align--center .jltma-timeline .timeline-item__meta-wrapper {
170 justify-content: flex-end;
171 order: 0;
172 }
173 .jltma-timeline-align--center .jltma-timeline .timeline-item__card-wrapper {
174 padding-left: 15px;
175 order: 2;
176 }
177 .jltma-timeline-align--center .jltma-timeline .timeline-item__card-wrapper,
178 .jltma-timeline-align--center .jltma-timeline .timeline-item__meta-wrapper {
179 flex-grow: 1;
180 flex-basis: 50%;
181 }
182 .jltma-timeline-align--center .jltma-timeline .timeline-item__meta {
183 margin-right: 10px;
184 }
185 .jltma-timeline-align--center .jltma-timeline .timeline-item:nth-child(odd) .timeline-item__card__arrow {
186 left: 5px;
187 }
188 .jltma-timeline-align--center .jltma-timeline .timeline-item:nth-child(odd) .timeline-item__card__arrow:after {
189 border-right-width: 10px;
190 border-right-style: solid;
191 }
192 .jltma-timeline-align--center .jltma-timeline .timeline-item:nth-child(odd) .timeline-item__meta {
193 text-align: right;
194 }
195 .jltma-timeline-align--center .jltma-timeline .timeline-item:nth-child(even) {
196 flex-direction: row-reverse;
197 }
198 .jltma-timeline-align--center .jltma-timeline .timeline-item:nth-child(even) .timeline-item__meta-wrapper {
199 flex-direction: initial;
200 justify-content: flex-start;
201 }
202 .jltma-timeline-align--center .jltma-timeline .timeline-item:nth-child(even) .timeline-item__meta {
203 margin-left: 10px;
204 }
205 .jltma-timeline-align--center .jltma-timeline .timeline-item:nth-child(even) .timeline-item__card-wrapper {
206 padding-left: 0;
207 padding-right: 15px;
208 }
209 .jltma-timeline-align--center .jltma-timeline .timeline-item:nth-child(even) .timeline-item__card__arrow {
210 right: 8px;
211 }
212 .jltma-timeline-align--center .jltma-timeline .timeline-item:nth-child(even) .timeline-item__card__arrow:after {
213 border-left-width: 10px;
214 border-left-style: solid;
215 }
216 .jltma-timeline-align--center .jltma-timeline .jltma-timeline__line {
217 left: 50%;
218 }
219 .jltma-timeline-align--overlay .jltma-timeline .timeline-item {
220 flex-direction: column;
221 align-items: center;
222 }
223 .jltma-timeline-align--overlay .jltma-timeline .timeline-item__point,
224 .jltma-timeline-align--overlay .jltma-timeline .timeline-item__meta {
225 margin-bottom: 12px;
226 }
227 .jltma-timeline-align--overlay .jltma-timeline .timeline-item__meta-wrapper {
228 display: none;
229 }
230 .jltma-timeline-align--overlay .jltma-timeline .timeline-item__card-wrapper .timeline-item__meta {
231 display: block !important;
232 }
233 .jltma-timeline-align--overlay .jltma-timeline .jltma-timeline__line {
234 left: 50%;
235 }
236 .jltma-timeline-align--left .jltma-timeline {
237 justify-content: flex-start;
238 }
239 .jltma-timeline-align--left .jltma-timeline__line {
240 left: -6px;
241 margin-left: 20px;
242 }
243 .jltma-timeline-align--left .timeline-item {
244 flex-wrap: nowrap;
245 }
246 .jltma-timeline-align--left .timeline-item__meta-wrapper {
247 display: none;
248 }
249 .jltma-timeline-align--left .timeline-item__card-wrapper .timeline-item__meta {
250 display: block !important;
251 }
252 .jltma-timeline-align--left .timeline-item__card-wrapper {
253 flex-grow: 1;
254 order: 1;
255 }
256 .jltma-timeline-align--left .timeline-item__card__arrow {
257 left: -10px;
258 }
259 .jltma-timeline-align--left .timeline-item__card__arrow:after {
260 border-right-width: 10px;
261 border-right-style: solid;
262 border-right-color: #f7f7f7;
263 }
264 .jltma-timeline-align--left .timeline-item__card-wrapper {
265 margin-left: 20px;
266 }
267 .jltma-timeline-align--right .jltma-timeline .jltma-timeline__line {
268 left: auto;
269 right: 0;
270 margin-right: 20px;
271 transform: translateX(50%);
272 }
273 .jltma-timeline-align--right .jltma-timeline .timeline-item {
274 flex-wrap: nowrap;
275 justify-content: flex-end;
276 }
277 .jltma-timeline-align--right .jltma-timeline .timeline-item__point {
278 order: 2;
279 margin-right: 0 !important;
280 }
281 .jltma-timeline-align--right .jltma-timeline .timeline-item__meta {
282 order: 1;
283 }
284 .jltma-timeline-align--right .jltma-timeline .timeline-item__meta-wrapper {
285 display: none;
286 }
287 .jltma-timeline-align--right .jltma-timeline .timeline-item__card-wrapper .timeline-item__meta {
288 display: block !important;
289 }
290 .jltma-timeline-align--right .jltma-timeline .timeline-item__card-wrapper {
291 flex-grow: 1;
292 order: 1;
293 }
294 .jltma-timeline-align--right .jltma-timeline .timeline-item__card__arrow {
295 right: -10px;
296 }
297 .jltma-timeline-align--right .jltma-timeline .timeline-item__card__arrow:after {
298 border-left-width: 10px;
299 border-left-style: solid;
300 border-left-color: #f7f7f7;
301 }
302 .jltma-timeline-align--right .jltma-timeline .timeline-item__card-wrapper {
303 margin-right: 10px;
304 }
305 .jltma-timeline-align--right .jltma-timeline .timeline-item__meta {
306 margin-bottom: 12px;
307 }
308 .jltma-timeline-cards-align--middle .jltma-timeline .timeline-item {
309 align-items: center;
310 }
311 .jltma-timeline-cards-align--middle .jltma-timeline .timeline-item__card__arrow {
312 position: absolute;
313 top: 50%;
314 transform: translateY(-50%);
315 }
316 .jltma-timeline-cards-align--bottom .jltma-timeline .timeline-item {
317 align-items: flex-end;
318 }
319 .jltma-timeline-cards-align--bottom .jltma-timeline .timeline-item__card__arrow {
320 top: auto;
321 bottom: 0;
322 }
323 }
324 .active .jltma-timeline-post-type-icon i {
325 color: #f7f7f7;
326 }
327
328 .jltma-timeline-entry-title {
329 color: #333;
330 font-size: 18px;
331 line-height: 28px;
332 margin-top: -7px;
333 }
334 .jltma-timeline-entry-title a {
335 color: #333;
336 }
337
338 .jltma-blog-timeline-post article p {
339 color: #78909c;
340 }
341 .jltma-blog-timeline-post .jltma-post-btn {
342 background-color: #4b00e7;
343 border-radius: 3rem;
344 color: #fff;
345 display: inline-block;
346 font-size: 13px;
347 font-weight: 500;
348 line-height: 50px;
349 margin-top: 0.5rem;
350 padding: 0 1.5rem;
351 }
352 .jltma-blog-timeline-post .jltma-post-btn i {
353 margin-left: 5px;
354 }
355
356 .jltma-timeline.solid-bg-color .hexagon {
357 background-color: #f7f7f7;
358 border-left: solid 3px #7f49f0;
359 border-right: solid 3px #7f49f0;
360 display: inline-block;
361 height: 16px;
362 width: 25px;
363 top: 2px;
364 position: relative;
365 }
366 .jltma-timeline.solid-bg-color .hexagon:before, .jltma-timeline.solid-bg-color .hexagon:after {
367 content: "";
368 height: 18px;
369 width: 18px;
370 left: 1px;
371 position: absolute;
372 z-index: 1;
373 transform: scaleY(0.5774) rotate(-45deg);
374 background-color: inherit;
375 }
376 .jltma-timeline.solid-bg-color .hexagon:before {
377 border-top: solid 4px #7f49f0;
378 border-right: solid 4px #7f49f0;
379 top: -9px;
380 }
381 .jltma-timeline.solid-bg-color .hexagon:after {
382 border-bottom: solid 4px #7f49f0;
383 border-left: solid 4px #7f49f0;
384 bottom: -9px;
385 }
386
387 .jltma-timeline-post-inner {
388 position: initial;
389 }
390
391 .jltma-timeline-horz-pointer {
392 margin-bottom: 20px;
393 min-height: 19px;
394 position: relative;
395 text-align: center;
396 z-index: 0;
397 }
398
399 .jltma-timeline.solid-bg-color .jltma-timeline-horz-pointer:before {
400 content: "";
401 background-color: #7f49f0;
402 height: 4px;
403 width: calc(100% + 30px);
404 top: 50%;
405 left: 15px;
406 margin-top: -2px;
407 position: absolute;
408 z-index: -1;
409 }
410
411 .jltma-timeline.solid-bg-color .jltma-blog-timeline-post article {
412 margin-left: 0;
413 margin-right: 0;
414 }
415
416 /* Update Styles */
417 .jltma-timeline__line {
418 position: absolute;
419 background-color: #f7f7f7;
420 }
421
422 .jltma-timeline .jltma-timeline__line {
423 width: 4px;
424 bottom: 0;
425 top: 0;
426 z-index: -1;
427 transform: translateX(-50%);
428 }
429
430 .jltma-timeline-align--left .jltma-timeline {
431 justify-content: flex-start;
432 }
433 .jltma-timeline-align--left .jltma-timeline .jltma-timeline__line {
434 left: 0px;
435 margin-left: 20px;
436 }
437 .jltma-timeline-align--left .jltma-timeline .timeline-item {
438 flex-wrap: nowrap;
439 }
440 .jltma-timeline-align--left .jltma-timeline .timeline-item__point {
441 margin-left: 0 !important;
442 }
443 .jltma-timeline-align--left .jltma-timeline .timeline-item__meta-wrapper {
444 display: none;
445 }
446 .jltma-timeline-align--left .jltma-timeline .timeline-item__card-wrapper .timeline-item__meta {
447 display: block !important;
448 }
449 .jltma-timeline-align--left .jltma-timeline .timeline-item__meta {
450 margin-bottom: 12px;
451 }
452 .jltma-timeline-align--left .jltma-slider__item {
453 text-align: left;
454 }
455 .jltma-timeline-align--left .jltma-slider__item .jltma-timeline-horz-pointer {
456 justify-content: flex-start;
457 }
458
459 .jltma-timeline-align--center .jltma-slider__item {
460 text-align: center;
461 }
462 .jltma-timeline-align--center .jltma-slider__item .jltma-timeline-horz-pointer {
463 justify-content: center;
464 }
465
466 .jltma-timeline-align--right .jltma-slider__item {
467 text-align: right;
468 }
469 .jltma-timeline-align--right .jltma-slider__item .jltma-timeline-horz-pointer {
470 justify-content: flex-end;
471 }
472
473 .jltma-timeline .timeline-item__point__text {
474 font-size: 1em;
475 }
476 .jltma-timeline .timeline-item__card {
477 background-color: transparent;
478 padding: 0;
479 display: block;
480 position: relative;
481 }
482
483 .elementor-widget-ma-timeline .timeline-item.is--focused .timeline-item__point {
484 background-color: transparent;
485 }
486
487 /* Horizontal Slider */
488 .jltma-timeline-slider .jltma-slider__item {
489 padding: 0 15px;
490 }
491 .jltma-timeline-slider .jltma-slider__item .jltma-timeline-horz-pointer {
492 display: flex;
493 }
494
495 .jltma-timeline-post-date {
496 display: inline-block;
497 }
498
499 @media (max-width: 1024px) {
500 .jltma-timeline .jltma-timeline__line {
501 left: 20px;
502 }
503 .timeline-item__meta-wrapper {
504 display: none !important;
505 }
506 .timeline-item__card-wrapper .timeline-item__meta {
507 display: block !important;
508 }
509 }
510 /* End of MA Timeline */