ilia/gsap-carousel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Правки линтера, правки документации

Browse Source
This commit is contained in:
Ilia Mashkov
2025-11-23 16:18:23 +03:00
parent 174547791b
commit dad6253877
3 changed files with 23 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.module.scss
View File

@@ -33,7 +33,7 @@
}
:global(.swiper) {
@container timeframe-slider (width <=768px) {
@container timeframe-slider (width <= 768px) {
padding: 0 40px;
}
}
@@ -41,7 +41,7 @@
:global(.swiper-slide-visible) {
transition: opacity 0.3s ease;
@container timeframe-slider (width <768px) {
@container timeframe-slider (width < 768px) {
opacity: 0.4;
}
}

38
src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.module.scss
View File

@@ -30,11 +30,11 @@
overflow: hidden;
@container timeframe-slider (width <=1024px) {
@container timeframe-slider (width <= 1024px) {
padding-top: 100px;
}
@container timeframe-slider (width <=576px) {
@container timeframe-slider (width <= 576px) {
padding: 60px 20px 20px;
background-image: unset;
@@ -58,18 +58,19 @@
border-image: var(--gradient-primary) 1;
@container timeframe-slider (width <=1024px) {
@container timeframe-slider (width <= 1024px) {
top: 80px;
font-size: 40px;
}
@container timeframe-slider (width <=768px) {
@container timeframe-slider (width <= 768px) {
padding-left: 20px;
font-size: 34px;
}
@container timeframe-slider (width <=576px) {
@container timeframe-slider (width <= 576px) {
position: relative;
inset: unset;
@@ -96,7 +97,7 @@
background-position: center;
background-size: 100% 1px;
@container timeframe-slider (width <=576px) {
@container timeframe-slider (width <= 576px) {
position: unset;
display: flex;
@@ -122,17 +123,18 @@
transform-origin: left;
@container timeframe-slider (width <=1024px) {
@container timeframe-slider (width <= 1024px) {
left: 100px;
bottom: 40px;
}
@container timeframe-slider (width <=768px) {
@container timeframe-slider (width <= 768px) {
left: 40px;
gap: 10px;
}
@container timeframe-slider (width <=576px) {
@container timeframe-slider (width <= 576px) {
left: 20px;
bottom: 13px;
@@ -152,7 +154,7 @@
display: flex;
gap: 20px;
@container timeframe-slider (width <=768px) {
@container timeframe-slider (width <= 768px) {
gap: 8px;
}
}
@@ -161,7 +163,7 @@
width: 9px;
height: 14px;
@container timeframe-slider (width <=576px) {
@container timeframe-slider (width <= 576px) {
width: 6px;
height: 11.5px;
}
@@ -170,7 +172,7 @@
.dots {
display: none;
@container timeframe-slider (width <=576px) {
@container timeframe-slider (width <= 576px) {
position: absolute;
left: 50%;
bottom: 32px;
@@ -228,19 +230,19 @@
pointer-events: none;
@container timeframe-slider (width <=1024px) {
@container timeframe-slider (width <= 1024px) {
gap: 40px;
font-size: 140px;
line-height: 120px;
}
@container timeframe-slider (width <=768px) {
@container timeframe-slider (width <= 768px) {
font-size: 100px;
line-height: 80px;
}
@container timeframe-slider (width <=576px) {
@container timeframe-slider (width <= 576px) {
position: static;
gap: 20px;
@@ -265,7 +267,7 @@
.periodLabel {
display: none;
@container timeframe-slider (width <=576px) {
@container timeframe-slider (width <= 576px) {
order: 1;
display: block;
@@ -285,7 +287,7 @@
width: 100%;
height: 100%;
@container timeframe-slider (width <=576px) {
@container timeframe-slider (width <= 576px) {
display: none;
}
}
@@ -293,7 +295,7 @@
.carouselContainer {
padding: 55px 80px 105px;
@container timeframe-slider (width <=768px) {
@container timeframe-slider (width <= 768px) {
width: calc(100% + 40px);
margin: 0 -20px;
padding: 0;

1
src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.tsx
View File

@@ -101,6 +101,7 @@ export const TimeFrameSlider = memo(() => {
prevYearFromRef.current = currentPeriod.yearFrom
prevYearToRef.current = currentPeriod.yearTo
// Анимация появления лейбла периода
if (periodLabelRef.current) {
gsap.fromTo(
periodLabelRef.current,