PluginProbe
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News / 4.0.8
Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News v4.0.8
4.0.8 4.0.7 4.0.6 4.0.5 4.0.4 4.0.3 4.0.2 4.0.1 2.3.5 2.3.6 2.4.0 2.4.1 2.4.10 2.4.11 2.4.12 2.4.13 2.4.14 2.4.15 2.4.16 2.4.17 2.4.18 2.4.19 2.4.2 2.4.20 2.4.21 All 88 releases
post-carousel / src / blocks / post-carousel-two / style.scss

style.scss in Smart Post – Post Grid, Post Carousel, Post Slider Gutenberg Blocks for Blog & News 4.0.8, at src/blocks/post-carousel-two/style.scss

715 lines 17.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .sp-smart-post-carousel-two {
2 padding-bottom: 35px;
3 }
4
5 .sp-smart-post-carousel-two .sp-smart-post-carousel-center .swiper-slide-active.sp-slide-item {
6 transform: scale(1.1);
7 }
8
9 .sp-smart-post-carousel-two .sp-smart-post-pagination-dots {
10 // bottom: -50px !important;
11 // left: 50% !important;
12 }
13
14 //--------- orientation two------------------
15 .sp-smart-post-carousel-two .sp-smart-post-card.overlay-type-orientations-two .image-overlay {
16 width: 90%;
17 height: 86% !important;
18
19 position: absolute;
20 top: 7%;
21 left: 5%;
22 z-index: 1;
23 pointer-events: none;
24 z-index: 1;
25 pointer-events: none;
26 }
27
28 //--------- orientation three------------------
29 .sp-smart-post-carousel-two .sp-smart-post-card.overlay-type-orientation-three .image-overlay.overlay-custom,
30 .sp-smart-post-carousel-two .sp-smart-post-card.overlay-type-orientation-three:hover .image-overlay.overlay-custom,
31 .sp-smart-post-carousel-two .sp-smart-post-card.overlay-type-orientation-three .image-overlay.overlay-custom::after,
32 .sp-smart-post-carousel-two .sp-smart-post-card.overlay-type-orientation-three:hover .image-overlay.overlay-custom::after {
33 background: #00000000 !important;
34 }
35
36 .sp-smart-post-carousel-two .sp-smart-post-card.overlay-type-orientation-three .sp-smart-post-card-content {
37 background: #00000080;
38 }
39
40 .sp-smart-post-carousel-two .sp-smart-post-card.overlay-type-orientation-three:hover .sp-smart-post-card-content {
41 background: #000000ad;
42 }
43
44 //--------- orientation four------------------
45
46 .sp-smart-post-carousel-two .overlay-type-orientations-four .overlay-custom,
47 .sp-smart-post-carousel-two .overlay-type-orientations-four:hover .overlay-custom,
48 .sp-smart-post-carousel-two .overlay-type-orientations-four .overlay-custom::after,
49 .sp-smart-post-carousel-two .overlay-type-orientations-four:hover .overlay-custom::after {
50 background: #00000000 !important;
51 }
52
53 .sp-smart-post-carousel-two .overlay-type-orientations-four .sp-smart-post-card-content {
54 background: #00000080;
55 margin: 0% 4% 4% 4%;
56 }
57
58 .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title {
59 transition:
60 all 0.4s ease,
61 opacity 0.4s ease-out,
62 max-height 0.6s ease-out,
63 margin 0.4s ease;
64 }
65
66 // single content hover animation........
67
68 .sp-smart-post-carousel-two .sp-smart-post-card:hover .sp-smart-post-title,
69 .sp-smart-post-carousel-two .sp-smart-post-card:hover .sp-smart-post-category,
70 .sp-smart-post-carousel-two .sp-smart-post-card:hover .sp-meta-data,
71 .sp-smart-post-carousel-two .sp-smart-post-card:hover .sp-smart-post-read-more-button,
72 .sp-smart-post-carousel-two .sp-smart-post-card:hover .sp-smart-post-excerpt-wrapper,
73 .sp-smart-post-carousel-two .sp-smart-post-card:hover .sp-smart-post-social-share {
74 opacity: 1 !important;
75 // max-height: 100px !important;
76 max-height: 100% !important;
77 transition:
78 opacity 0.4s ease-out,
79 height 0.9s ease-out;
80 }
81
82 .sp-smart-post-carousel-two .sp-smart-post-card:hover .sp-smart-post-card-content {
83 opacity: 1 !important;
84 transform: translateY(0) translateX(0) scale(1) !important;
85 transition:
86 opacity 0.4s ease,
87 transform 0.4s ease;
88 }
89
90 .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title {
91 position: relative;
92 display: inline-block;
93 }
94
95 .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:after {
96 content: "";
97 position: absolute;
98 transition: width 0.6s ease;
99 }
100
101 .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title::before {
102 content: "";
103 position: absolute;
104 transition: width 0.6s ease;
105 }
106
107 .sp-smart-post-carousel-two .sp-smart-post-category .sp-taxonomy-type-category a {
108 border-width: 1px;
109 }
110
111 // Swiper navigation css.
112 .sp-smart-post-swiper-nav-arrow {
113 position: absolute;
114 display: flex;
115
116 .sp-smart-post-swiper-nav-arrow-btn.btn-prev i {
117 transform: rotate(180deg);
118 }
119 }
120
121 .sp-smart-post-swiper-nav-arrow {
122 left: 0;
123 z-index: 2;
124 }
125
126 .sp-smart-post-swiper-nav-arrow.visible-on-hover {
127 opacity: 0;
128 visibility: hidden;
129 transition: all 0.3s linear;
130
131 .btn-prev {
132 transform: translateX(-20px);
133 transition: all 0.3s linear;
134 }
135
136 .btn-next {
137 transform: translateX(20px);
138 transition: all 0.3s linear;
139 }
140 }
141
142 .sp-smart-post-wrapper:hover .sp-smart-post-swiper-nav-arrow.visible-on-hover {
143 opacity: 1;
144 visibility: visible;
145
146 .btn-prev {
147 transform: translateX(0px);
148 }
149
150 .btn-next {
151 transform: translateX(0px);
152 }
153 }
154
155 .sp-smart-post-swiper-nav-arrow .sp-smart-post-swiper-nav-arrow-btn {
156 position: relative;
157 }
158
159
160 // Pagination Dots css.
161 .sp-smart-post-pagination-dot {
162 padding: 5px 0;
163 }
164
165 .sp-pagination-horizontal {
166 align-items: center;
167 flex-wrap: wrap;
168 max-width: 100%;
169 }
170
171 .sp-smart-post-block-wrapper .sp-smart-post-pagination-strokes.swiper-pagination-horizontal,
172 .sp-smart-post-block-wrapper .sp-smart-post-pagination-dynamic.swiper-pagination-horizontal,
173 .sp-smart-post-block-wrapper .sp-smart-post-pagination-numbers.swiper-pagination-horizontal,
174 .sp-smart-post-block-wrapper .sp-smart-post-pagination-fraction.swiper-pagination-horizontal,
175 .sp-smart-post-block-wrapper .sp-smart-post-pagination-dots.swiper-pagination-horizontal {
176 transform: translate(-50%, -50%);
177 left: 50%;
178 display: flex;
179 justify-content: center;
180 position: absolute;
181 z-index: 1;
182
183 }
184
185 .sp-smart-post-block-wrapper .sp-smart-post-pagination-fraction {
186 transform: translateY(0) !important;
187 color: var(--smart-post-secondary);
188 }
189
190 .sp-smart-post-pagination-fraction,
191 .sp-smart-post-pagination-numbers .swiper-pagination-bullet {
192 display: flex;
193 justify-content: center;
194 align-items: center;
195 }
196
197 .sp-smart-post-pagination-fraction {
198 font-weight: 500;
199 border-radius: 50%;
200 transition: background 0.3s ease-in-out;
201 }
202
203 .sp-smart-post-pagination-strokes .swiper-pagination-bullet {
204 width: 50px;
205 transition: width 0.3s ease;
206 }
207
208 html[dir="rtl"]="rtl""] body.rtl .sp-smart-post-swiper-nav-arrow,
209 html[dir="rtl"]="rtl""] body.rtl .sp-smart-post-timeline-container {
210 direction: ltr;
211 }
212
213 .sp-smart-post-carousel .sp-smart-post-card-image a {
214 height: 100%;
215 }
216
217 .sp-smart-post-slider .sp-smart-post-card-image img,
218 .sp-smart-post-slider-two .sp-smart-post-card-image img,
219 .sp-smart-post-thumbnail-slider .sp-smart-post-card-image img,
220 .sp-smart-post-thumbnail-slider-two .sp-smart-post-card-image img {
221 border-style: none !important;
222 }
223
224 .sp-smart-post-carousel-two .sp-smart-post-swiper-nav-arrow-btn i,
225 .sp-smart-post-slider-two .sp-smart-post-swiper-nav-arrow-btn i,
226 .sp-smart-post-timeline-three .sp-smart-post-swiper-nav-arrow-btn i {
227 background: #4E4F52;
228 border-color: #4E4F52;
229 }
230
231 .sp-smart-post-wrapper .sp-smart-post-swiper-nav-arrow-btn i:hover {
232 background: var(--smart-post-secondary);
233 border-color: var(--smart-post-secondary);
234 }
235
236 .sp-smart-post-block-wrapper .swiper-pagination-bullet {
237 background: #cacbcf;
238 }
239
240 .sp-smart-post-block-wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active {
241 background: var(--smart-post-secondary);
242 }
243
244
245 /* Carousel Navigation Arrow */
246 .sp-smart-post-swiper-nav-arrow-btn i {
247 display: flex;
248 justify-content: center;
249 align-items: center;
250 transition: 0.3s;
251 cursor: pointer;
252 }
253
254 .sp-smart-post-swiper-nav-arrow {
255 pointer-events: none;
256 /* padding: 0 3px; */
257 transform: translate(0, -50%);
258 }
259
260 .sp-smart-post-swiper-nav-arrow .sp-smart-post-swiper-nav-arrow-btn {
261 pointer-events: all;
262 }
263
264 .sp-smart-post-swiper-nav-arrow .sp-smart-post-swiper-nav-arrow-btn:focus {
265 outline: none;
266 }
267
268 .sp-smart-post-swiper .sp-swiper-slide {
269 width: auto;
270 }
271
272 .sp-smart-post-swiper .swiper-pagination {
273 display: flex;
274 align-items: center;
275 justify-content: center;
276 }
277
278 .sp-pagination-horizontal .swiper-pagination-bullet {
279 box-sizing: content-box;
280 }
281
282
283
284 //...
285 .sp-smart-post-carousel-center .swiper-slide.sp-slide-item {
286 transform: scale(0.9);
287 opacity: .5;
288 transition: transform 0.6s ease, opacity 0.6s ease;
289 }
290
291 .sp-smart-post-carousel-center .swiper-slide-active.sp-slide-item {
292 transform: scale(1.1);
293 opacity: 1;
294 transition: transform 0.6s ease, opacity 0.6s ease;
295 }
296
297
298
299 .sp-smart-post-carousel-two .swiper-fade .swiper-slide,
300 .sp-smart-post-carousel-two .swiper-cube .swiper-slide,
301 .sp-smart-post-carousel-two .swiper-flip .swiper-slide {
302 display: grid;
303 }
304
305 .sp-smart-post-carousel-two .sp-swiper-slide.layout-center .swiper-wrapper {
306 padding-top: 40px;
307 padding-bottom: 60px;
308 max-height: -webkit-fill-available;
309 }
310
311 .sp-smart-post-carousel-two .sp-smart-post-swiper .swiper-fade .swiper-slide-prev,
312 .sp-smart-post-carousel-two .sp-smart-post-swiper .swiper-fade .swiper-slide-next {
313 opacity: 0 !important;
314 visibility: hidden;
315 }
316
317 .sp-smart-post-carousel-two .sp-smart-post-swiper .swiper-fade .swiper-slide-visible {
318 opacity: 1 !important;
319 visibility: visible;
320 transition: all 0.3s linear;
321 }
322
323 .sp-smart-post-carousel-two .swiper-coverflow .swiper-wrapper {
324 padding: 1.5% 0;
325 }
326
327 .sp-smart-post-carousel-two .swiper .swiper-scrollbar,
328 .sp-smart-post-carousel-two .swiper-scrollbar {
329 width: 80%;
330 left: 50%;
331 transform: translateX(-50%);
332 }
333
334 .sp-smart-post-wrapper .swiper .swiper-scrollbar .swiper-scrollbar-drag,
335 .sp-smart-post-wrapper .swiper-scrollbar .swiper-scrollbar-drag {
336 width: 23%;
337 background: var(--smart-post-secondary);
338 }
339
340 .sp-smart-post-carousel-two .swiper-pagination-bullet {
341 box-sizing: content-box;
342 }
343
344 .sp-smart-post-carousel-two .sp-smart-post-pagination-strokes .swiper-pagination-bullet.swiper-pagination-bullet-active {
345 width: 50px;
346 // transition: width 0.3s linear;
347 }
348
349 //...
350
351
352 //.......................................................................................................................
353 .sp-smart-post-carousel-center .swiper-slide.sp-slide-item {
354 transform: scale(0.9);
355 opacity: .5;
356 transition: transform 0.6s ease, opacity 0.6s ease;
357 }
358
359 .sp-smart-post-carousel-center .swiper-slide-active.sp-slide-item {
360 transform: scale(1.1);
361 opacity: 1;
362 transition: transform 0.6s ease, opacity 0.6s ease;
363 }
364
365
366
367 .sp-smart-post-carousel .swiper-fade .swiper-slide,
368 .sp-smart-post-carousel .swiper-cube .swiper-slide,
369 .sp-smart-post-carousel .swiper-flip .swiper-slide {
370 display: grid;
371 }
372
373 .sp-smart-post-carousel .sp-swiper-slide.layout-center .swiper-wrapper {
374 padding-top: 40px;
375 padding-bottom: 60px;
376 max-height: -webkit-fill-available;
377 }
378
379 .sp-smart-post-carousel .sp-smart-post-swiper .swiper-fade .swiper-slide-prev,
380 .sp-smart-post-carousel .sp-smart-post-swiper .swiper-fade .swiper-slide-next {
381 opacity: 0 !important;
382 visibility: hidden;
383 }
384
385 .sp-smart-post-carousel .sp-smart-post-swiper .swiper-fade .swiper-slide-visible {
386 opacity: 1 !important;
387 visibility: visible;
388 transition: all 0.3s linear;
389 }
390
391 .sp-smart-post-carousel .swiper-coverflow .swiper-wrapper {
392 padding: 1.5% 0;
393 }
394
395 .sp-smart-post-carousel .swiper .swiper-scrollbar,
396 .sp-smart-post-carousel .swiper-scrollbar {
397 width: 80%;
398 left: 50%;
399 transform: translateX(-50%);
400 }
401
402 .sp-smart-post-wrapper .swiper .swiper-scrollbar .swiper-scrollbar-drag,
403 .sp-smart-post-wrapper .swiper-scrollbar .swiper-scrollbar-drag {
404 width: 23%;
405 background: var(--smart-post-secondary);
406 }
407
408 .sp-smart-post-carousel .swiper-pagination-bullet {
409 box-sizing: content-box;
410 }
411
412 .sp-smart-post-carousel .sp-smart-post-pagination-strokes .swiper-pagination-bullet.swiper-pagination-bullet-active {
413 width: 50px;
414 // transition: width 0.3s linear;
415 }
416
417
418 .sp-smart-post-swiper-nav-arrow {
419 z-index: 2;
420 width: -webkit-fill-available;
421 left: 0;
422 }
423
424
425 // Navigation arrow default style
426 .sp-smart-post-swiper-nav-arrow {
427 top: 50%;
428
429 i {
430 border-radius: 50%;
431 }
432
433 }
434
435 // Pagination Dots css.
436
437
438
439 .sp-smart-post-carousel .sp-smart-post-swiper-nav-arrow-btn i,
440 .sp-smart-post-slider-two .sp-smart-post-swiper-nav-arrow-btn i,
441 .sp-smart-post-timeline-three .sp-smart-post-swiper-nav-arrow-btn i {
442 background: #4E4F52;
443 border-color: #4E4F52;
444 }
445
446
447 /* sp_marquee */
448 .sp_marquee-container {
449 overflow: hidden;
450 position: relative;
451 width: 100%;
452 }
453
454 .sp_marquee-content {
455 display: inline-flex;
456 animation: scroll linear infinite;
457 }
458
459
460
461 .sp_marquee-container::before {
462 left: 0;
463 background: linear-gradient(to right, white, transparent);
464 }
465
466 .sp_marquee-container::after {
467 right: 0;
468 background: linear-gradient(to left, white, transparent);
469 }
470
471 @keyframes scroll {
472 0% {
473 transform: translateX(0);
474 }
475
476 100% {
477 transform: translateX(-100%);
478 }
479 }
480
481 /* Horizontal base styles */
482 .sp_marquee-horizontal .sp_marquee-content {
483 flex-direction: row;
484 white-space: nowrap;
485 }
486
487 /* Left direction (default) */
488 .sp_marquee-left {
489 animation-name: scroll-left;
490 }
491
492 @keyframes scroll-left {
493 0% {
494 transform: translateX(0);
495 }
496
497 100% {
498 transform: translateX(calc(-100% + var(--sps_extrawidth)));
499 }
500 }
501
502 /* Right direction */
503 .sp_marquee-right {
504 animation-name: scroll-right;
505 }
506
507 @keyframes scroll-right {
508 0% {
509 transform: translateX(calc(-100% + var(--sps_extrawidth)));
510 }
511
512 100% {
513 transform: translateX(0);
514 }
515 }
516
517
518 /* Horizontal gradient fade */
519 .sp_marquee-horizontal::before {
520 left: 0;
521 top: 0;
522 bottom: 0;
523 width: 50px;
524 }
525
526 .sp_marquee-horizontal::after {
527 right: 0;
528 top: 0;
529 bottom: 0;
530 width: 50px;
531 }
532
533 /* Vertical sp_marquee styles */
534 .sp_marquee-vertical {
535 display: flex;
536 flex-direction: column;
537 white-space: normal;
538 height: 200px;
539 }
540
541 .sp_marquee-up {
542 animation: scroll-up linear infinite;
543 }
544
545 .sp_marquee-down {
546 animation: scroll-down linear infinite;
547 }
548
549 @keyframes scroll-up {
550 0% {
551 transform: translateY(0);
552 }
553
554 100% {
555 transform: translateY(-50%);
556 }
557 }
558
559 @keyframes scroll-down {
560 0% {
561 transform: translateY(-100%);
562 }
563
564 100% {
565 transform: translateY(0);
566 }
567 }
568
569
570 .sp-smart-post-carousel-two:not(.orientation_three) .sp-smart-post-category .sp-taxonomy-type-category a {
571 color: #E1D8CE;
572 background: #FFFFFF00;
573 }
574
575 .sp-smart-post-carousel-two .orientation_three .sp-smart-post-category .sp-taxonomy-type-category a {
576 color: #023047;
577 background: #fff;
578 }
579
580
581 // .sp-smart-post-carousel-two .sp-smart-post-carousel-center.sp-cat-position-top-left .sp-smart-post-carousel-center .sp-smart-post-category {
582
583 // top: 14px
584 // }
585
586 .sp-smart-post-carousel-two .sp-smart-post-carousel-center.sp-cat-position-top-left .sp-smart-post-card-image .sp-smart-post-category {
587 top: 14px !important
588 }
589
590 // // title animate effect..................................................
591 .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title {
592 position: relative;
593 display: inline-block;
594 }
595
596 .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:after {
597 content: "";
598 position: absolute;
599 transition: width 0.6s ease;
600 }
601
602 .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title::before {
603 content: "";
604 position: absolute;
605 transition: width 0.6s ease;
606 }
607
608
609 .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title .line {
610 position: relative;
611 display: inline-block;
612 padding-bottom: 2px;
613 }
614
615 .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title .line::after {
616 content: '';
617 position: absolute;
618 bottom: 0;
619 left: 0;
620 width: 100%;
621
622 transform: scaleX(0);
623 transition: transform 0.4s ease;
624 z-index: -1;
625 }
626
627 .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover .line::after {
628 transform: scaleX(1);
629 }
630
631 /* Using :nth-of-type to target only .line elements */
632 .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(1)::after {
633 transition-delay: 0s;
634 }
635
636 .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(2)::after {
637 transition-delay: 0.2s;
638 }
639
640 .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(3)::after {
641 transition-delay: 0.4s;
642 }
643
644 .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(4)::after {
645 transition-delay: 0.6s;
646 }
647
648 .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(5)::after {
649 transition-delay: 0.8s;
650 }
651
652 .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(6)::after {
653 transition-delay: 1s;
654 }
655
656 .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(7)::after {
657 transition-delay: 1.2s;
658 }
659
660 .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(7)::after {
661 transition-delay: 1.2s;
662 }
663
664 .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(8)::after {
665 transition-delay: 1.4s;
666 }
667
668 .sp-smart-post-carousel-two .sp-content-on-hover .overlay-type-orientations-two .sp-smart-post-card-image .image-overlay {
669 opacity: 0;
670 transition: all 0.3s ease;
671 }
672 .sp-smart-post-carousel-two .sp-content-on-hover .overlay-type-orientations-two:hover .sp-smart-post-card-image .image-overlay {
673 opacity: 1;
674 }
675
676 // Image overlay solid & gradient color transition
677 .sp-smart-post-card.overlay-type-orientation-three .sp-smart-post-card-content {
678 transition: all 0.3s ease-in-out;
679 }
680 .sp-smart-post-card.overlay-type-orientation-three .sp-smart-post-card-content:after,
681 .sp-smart-post-card.overlay-type-orientations-four .sp-smart-post-card-content:after {
682 content: '';
683 position: absolute;
684 top: 0;
685 left: 0;
686 width: 100%;
687 height: 100%;
688 opacity: 0;
689 transition: opacity 0.3s ease-in-out;
690 }
691 .sp-smart-post-card.overlay-type-orientation-three:hover .sp-smart-post-card-content:after,
692 .sp-smart-post-card.overlay-type-orientations-four:hover .sp-smart-post-card-content:after {
693 opacity: 1;
694 transition: opacity 0.3s ease-in-out;
695 }
696
697 // @keyframes marqueeAnimation {
698 // 0% { transform: translateX(0); }
699 // 100% { transform: translateX(-100%); }
700 // }
701
702 // .rfm-marquee {
703 // display: flex;
704 // white-space: nowrap;
705 // animation: marqueeAnimation var(--duration) linear infinite;
706 // }
707 // .rfm-initial-child-container {
708 // display: flex;
709 // display: flex;
710 // white-space: nowrap;
711 // }
712 // .rfm-marquee-container {
713 // overflow: hidden;
714 // display: flex;
715 // }