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-21 12:53:34 +03:00
parent 8fec89a699
commit 5a2a7642d3
1 changed files with 31 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,13 +3,12 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
width: 100%; width: 100%;
max-width: 1440px; max-width: 1440px;
min-height: 100vh; min-height: 100vh;
margin: 0 auto; margin: 0 auto;
padding: 0 20px; padding-top: 180px;
color: var(--color-text); color: var(--color-text);
font-family: var(--font-family-main); font-family: var(--font-family-main);
@@ -17,6 +16,11 @@
border-right: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
border-left: 1px solid var(--color-border); border-left: 1px solid var(--color-border);
background-image: linear-gradient(to right, rgba(#42567A, 0.1) 1px, transparent 1px);
background-repeat: no-repeat;
background-position: center top;
background-size: 1px 100%;
overflow: hidden; overflow: hidden;
@media (width <=768px) { @media (width <=768px) {
@@ -26,15 +30,22 @@
} }
.title { .title {
position: relative; position: absolute;
z-index: 2; z-index: 2;
margin-bottom: 40px; left: 0;
padding-left: 60px; top: 170px;
padding-left: 75px;
font-weight: 700; font-weight: 700;
font-size: 56px; font-size: 56px;
line-height: 120%; line-height: 120%;
max-width: 15ch;
border-left: 5px solid transparent;
border-image: var(--gradient-primary) 1;
@media (width <=768px) { @media (width <=768px) {
margin-bottom: 20px; margin-bottom: 20px;
@@ -50,7 +61,14 @@
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
width: calc(100% + 40px);
height: 600px; height: 600px;
margin: 0 -20px;
background-image: linear-gradient(to bottom, rgba(#42567A, 0.1) 1px, transparent 1px);
background-repeat: no-repeat;
background-position: center;
background-size: 100% 1px;
@media (width <=768px) { @media (width <=768px) {
display: flex; display: flex;
@@ -62,8 +80,9 @@
.controls { .controls {
position: absolute; position: absolute;
left: 60px; transform-origin: left;
bottom: 50px; left: 100px;
bottom: 0;
z-index: 10; z-index: 10;
display: flex; display: flex;
@@ -81,8 +100,7 @@
} }
.pagination { .pagination {
margin-bottom: 10px; font-weight: 400;
font-size: 14px; font-size: 14px;
} }
@@ -160,3 +178,7 @@
display: none; display: none;
} }
} }
.eventCarousel {
padding: 55px 80px 105px;
}