shadow to smooth carousel animationh (#348)

This commit is contained in:
trean
2023-10-16 14:07:44 +02:00
committed by GitHub
parent 505faf46d9
commit b1d6245495
4 changed files with 20 additions and 7 deletions
@@ -13,7 +13,7 @@
position: relative;
.sec-title {
margin-bottom: lib.rem(80);
margin-bottom: lib.rem(40);
}
.inner-container {
@@ -62,6 +62,16 @@
display: flex;
width: 100%;
position: relative;
&:after {
@include media-breakpoint-up(lg) {
content: "";
width: 100%;
position: absolute;
top: 0;
left: 0;
box-shadow: 0 0 lib.rem(20) lib.rem(40) white;
}
}
.tabs-content {
width: 100%;
@@ -83,6 +93,7 @@
@include media-breakpoint-up(lg) {
height: lib.rem(500);
padding-top: lib.rem(40);
}
.content-column {
@@ -158,7 +169,7 @@
width: lib.rem(360);
margin-top: lib.rem(38);
padding-left: lib.rem(40);
top: 0;
top: lib.rem(40);
left: unset;
bottom: lib.rem(150);
}
File diff suppressed because one or more lines are too long
@@ -1,6 +1,8 @@
@use "sass:math";
@mixin base($height, $itemWidth: 200px, $total-marquee-items: 6, $visible-marquee-items: 6, $item-padding: 20px, $pauseOnHover: false, $speed: 25s) {
$inner-width: $total-marquee-items / $visible-marquee-items * 2 * 100%;
$inner-width: math.div($total-marquee-items, $visible-marquee-items) * 2 * 100%;
max-width: 100%;
text-align: center;
@@ -82,12 +84,12 @@
left: 0;
}
100% {
left: $inner-width / 2 * -1;
left: $inner-width * 0.5 * -1;
}
}
@keyframes marqueeRight {
0% {
left: $inner-width / 2 * -1;
left: $inner-width * 0.5 * -1;
}
100% {
left: 0;