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-24 12:22:02 +03:00
parent d3343f1f7b
commit d3816b0952
7 changed files with 430 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/styles/reset.scss
View File

@@ -1,34 +1,34 @@
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
color: var(--color-text); color: var(--color-text);
font-family: var(--font-family-main); font-family: var(--font-family-main);
background-color: var(--color-bg); background-color: var(--color-bg);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
button { button {
font-family: inherit; font-family: inherit;
border: none; border: none;
background: none; background: none;
cursor: pointer; cursor: pointer;
} }
a { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
ul, ul,
ol { ol {
list-style: none; list-style: none;
} }

38
src/app/styles/variables.scss
View File

@@ -1,23 +1,23 @@
:root { :root {
// Цвета // Цвета
--color-primary: #42567A; --color-primary: #42567A;
--color-accent: #EF5DA8; --color-accent: #EF5DA8;
--color-text: #42567A; --color-text: #42567A;
--color-bg: #F4F5F9; --color-bg: #F4F5F9;
--color-border: rgb(66 86 122 / 10%); --color-border: rgb(66 86 122 / 10%);
--color-blue: #3877EE; --color-blue: #3877EE;
--color-white: #FFF; --color-white: #FFF;
// Градиенты // Градиенты
--gradient-primary: linear-gradient(to bottom, #3877EE, #EF5DA8); --gradient-primary: linear-gradient(to bottom, #3877EE, #EF5DA8);
// Типографика // Типографика
--font-family-main: 'PT Sans', sans-serif; --font-family-main: 'PT Sans', sans-serif;
--font-size-h1: 56px; --font-size-h1: 56px;
--font-size-h2: 32px; --font-size-h2: 32px;
--font-size-h3: 20px; --font-size-h3: 20px;
--font-size-body: 16px; --font-size-body: 16px;
--font-size-small: 14px; --font-size-small: 14px;
--line-height-h1: 120%; --line-height-h1: 120%;
--line-height-body: 150%; --line-height-body: 150%;
} }

200
src/shared/ui/Button/Button.module.scss
View File

@@ -1,108 +1,108 @@
.button { .button {
display: inline-flex; display: inline-flex;
justify-content: center;
align-items: center;
padding: 0;
font-family: var(--font-family-main);
border: none;
background: transparent;
outline: none;
cursor: pointer;
transition: all 0.3s ease;
&:disabled {
cursor: not-allowed;
opacity: 0.5;
}
// Variants
&.round {
border-radius: 50%;
aspect-ratio: 1;
}
&.regular {
padding: 0.5em 1em;
border-radius: 1em;
}
// Sizes
&.small {
height: 40px;
font-size: 14px;
@media (width <=768px) {
height: 20px;
}
}
&.medium {
height: 50px;
font-size: 18px;
@media (width <=768px) {
height: 25px;
}
}
&.large {
height: 60px;
font-size: 24px;
@media (width <=768px) {
height: 30px;
}
}
// Color Schemes
&.primary {
$color-primary: var(--color-primary);
color: $color-primary;
border: 1px solid $color-primary;
background-color: transparent;
&:hover:not(:disabled) {
background-color: var(--color-white);
}
}
&.secondary {
$color-blue: var(--color-blue);
color: $color-blue;
background-color: var(--color-white);
box-shadow: 0 0 15px rgb($color-blue / 10%);
}
// Icon handling
.icon {
display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 0; width: 100%;
height: 100%;
font-family: var(--font-family-main); svg {
width: 40%;
height: 40%;
border: none; object-fit: contain;
background: transparent;
outline: none;
cursor: pointer;
transition: all 0.3s ease;
&:disabled {
cursor: not-allowed;
opacity: 0.5;
}
// Variants
&.round {
border-radius: 50%;
aspect-ratio: 1;
}
&.regular {
padding: 0.5em 1em;
border-radius: 1em;
}
// Sizes
&.small {
height: 40px;
font-size: 14px;
@media (width <=768px) {
height: 20px;
}
}
&.medium {
height: 50px;
font-size: 18px;
@media (width <=768px) {
height: 25px;
}
}
&.large {
height: 60px;
font-size: 24px;
@media (width <=768px) {
height: 30px;
}
}
// Color Schemes
&.primary {
$color-primary: var(--color-primary);
color: $color-primary;
border: 1px solid $color-primary;
background-color: transparent;
&:hover:not(:disabled) {
background-color: var(--color-white);
}
}
&.secondary {
$color-blue: var(--color-blue);
color: $color-blue;
background-color: var(--color-white);
box-shadow: 0 0 15px rgb($color-blue / 10%);
}
// Icon handling
.icon {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
svg {
width: 40%;
height: 40%;
object-fit: contain;
}
} }
}
} }

32
src/shared/ui/Card/Card.module.scss
View File

@@ -1,27 +1,27 @@
.card { .card {
padding: 20px 0; padding: 20px 0;
} }
.title { .title {
margin-bottom: 15px; margin-bottom: 15px;
color: var(--color-blue); color: var(--color-blue);
font-weight: 400; font-weight: 400;
font-size: 25px; font-size: 25px;
line-height: 120%; line-height: 120%;
@media (width <=768px) { @media (width <=768px) {
font-size: 16px; font-size: 16px;
} }
} }
.description { .description {
color: var(--color-text); color: var(--color-text);
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 20px;
line-height: 145%; line-height: 145%;
@media (width <=768px) { @media (width <=768px) {
font-size: 14px; font-size: 14px;
} }
} }

126
src/widgets/TimeFrameSlider/ui/CircleTimeline/CircleTimeline.module.scss
View File

@@ -1,76 +1,76 @@
.circleContainer { .circleContainer {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
width: calc(var(--circle-radius, 265px) * 2); width: calc(var(--circle-radius, 265px) * 2);
height: calc(var(--circle-radius, 265px) * 2); height: calc(var(--circle-radius, 265px) * 2);
border: 1px solid rgba(#42567A, 0.2); border: 1px solid rgba(#42567A, 0.2);
border-radius: 50%; border-radius: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.point { .point {
position: absolute;
width: 56px;
height: 56px;
margin-top: -28px;
margin-left: -28px;
border: 25px solid transparent;
border-radius: 50%;
background: var(--color-text);
background-clip: content-box;
cursor: pointer;
transform-origin: center;
transition: all 0.3s ease;
&:hover,
&.active {
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid rgba(#303E58, 0.5);
background: #F4F5F9;
background-clip: padding-box;
}
&:hover .number,
&.active .number {
display: block;
}
.number {
display: none;
color: var(--color-text);
font-size: 20px;
}
.title {
position: absolute; position: absolute;
left: 100%;
width: 56px; margin-left: 20px;
height: 56px;
margin-top: -28px;
margin-left: -28px;
border: 25px solid transparent; color: var(--color-text);
border-radius: 50%; font-weight: 700;
font-size: 20px;
white-space: nowrap;
background: var(--color-text); visibility: hidden;
background-clip: content-box;
cursor: pointer; opacity: 0;
}
transform-origin: center;
transition: all 0.3s ease;
&:hover,
&.active {
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid rgba(#303E58, 0.5);
background: #F4F5F9;
background-clip: padding-box;
}
&:hover .number,
&.active .number {
display: block;
}
.number {
display: none;
color: var(--color-text);
font-size: 20px;
}
.title {
position: absolute;
left: 100%;
margin-left: 20px;
color: var(--color-text);
font-weight: 700;
font-size: 20px;
white-space: nowrap;
visibility: hidden;
opacity: 0;
}
} }

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

@@ -1,51 +1,51 @@
.container { .container {
position: relative; position: relative;
opacity: 0; opacity: 0;
} }
.prevButtonWrapper { .prevButtonWrapper {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: -60px; left: -60px;
z-index: 10; z-index: 10;
transform: translateY(-50%); transform: translateY(-50%);
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
.nextButtonWrapper { .nextButtonWrapper {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: -60px; right: -60px;
z-index: 10; z-index: 10;
transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg);
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
.hidden { .hidden {
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
:global(.swiper) { :global(.swiper) {
@container timeframe-slider (width <= 768px) { @container timeframe-slider (width <= 768px) {
padding: 0 40px; padding: 0 40px;
} }
} }
:global(.swiper-slide-visible) { :global(.swiper-slide-visible) {
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
@container timeframe-slider (width < 768px) { @container timeframe-slider (width < 768px) {
opacity: 0.4; opacity: 0.4;
} }
} }
:global(.swiper-slide-fully-visible) { :global(.swiper-slide-fully-visible) {
opacity: 1; opacity: 1;
} }

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

@@ -1,303 +1,303 @@
/* Wrapper для container queries - должен быть родителем контейнера */ /* Wrapper для container queries - должен быть родителем контейнера */
.wrapper { .wrapper {
/* Включаем container queries для адаптивности виджета */ /* Включаем container queries для адаптивности виджета */
container-type: inline-size; container-type: inline-size;
container-name: timeframe-slider; container-name: timeframe-slider;
} }
.container { .container {
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
max-width: 1440px; max-width: 1440px;
min-height: 100vh; min-height: 100vh;
margin: 0 auto; margin: 0 auto;
padding-top: 180px; padding-top: 180px;
color: var(--color-text); color: var(--color-text);
font-family: var(--font-family-main); font-family: var(--font-family-main);
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-image: linear-gradient(to right, rgba(#42567A, 0.1) 1px, transparent 1px);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center top; background-position: center top;
background-size: 1px 100%; background-size: 1px 100%;
overflow: hidden; overflow: hidden;
@container timeframe-slider (width <= 1024px) { @container timeframe-slider (width <= 1024px) {
padding-top: 100px; padding-top: 100px;
} }
@container timeframe-slider (width <= 576px) { @container timeframe-slider (width <= 576px) {
padding: 60px 20px 20px; padding: 60px 20px 20px;
background-image: unset; background-image: unset;
} }
} }
.title { .title {
position: absolute; position: absolute;
top: 170px; top: 170px;
left: 0; left: 0;
z-index: 2; z-index: 2;
max-width: 15ch; max-width: 15ch;
padding-left: 75px; padding-left: 75px;
font-weight: 700; font-weight: 700;
font-size: 56px; font-size: 56px;
line-height: 120%; line-height: 120%;
border-left: 5px solid transparent; border-left: 5px solid transparent;
border-image: var(--gradient-primary) 1; border-image: var(--gradient-primary) 1;
@container timeframe-slider (width <= 1024px) { @container timeframe-slider (width <= 1024px) {
top: 80px; top: 80px;
font-size: 40px; font-size: 40px;
} }
@container timeframe-slider (width <= 768px) { @container timeframe-slider (width <= 768px) {
padding-left: 20px; padding-left: 20px;
font-size: 34px; font-size: 34px;
} }
@container timeframe-slider (width <= 576px) { @container timeframe-slider (width <= 576px) {
position: relative; position: relative;
inset: unset; inset: unset;
margin-bottom: 20px; margin-bottom: 20px;
padding-left: 0; padding-left: 0;
border: none; border: none;
} }
} }
.content { .content {
position: relative; position: relative;
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
width: calc(100% + 40px); width: calc(100% + 40px);
height: 600px; height: 600px;
margin: 0 -20px; margin: 0 -20px;
background-image: linear-gradient(to bottom, rgba(#42567A, 0.1) 1px, transparent 1px); background-image: linear-gradient(to bottom, rgba(#42567A, 0.1) 1px, transparent 1px);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
background-size: 100% 1px; background-size: 100% 1px;
@container timeframe-slider (width <= 576px) { @container timeframe-slider (width <= 576px) {
position: unset; position: unset;
display: flex;
flex-direction: column;
width: 100%;
height: auto;
margin: 0;
background-image: unset;
}
}
.controls {
position: absolute;
left: 100px;
bottom: 0;
z-index: 10;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px;
transform-origin: left; width: 100%;
height: auto;
margin: 0;
@container timeframe-slider (width <= 1024px) { background-image: unset;
left: 100px; }
bottom: 40px; }
}
@container timeframe-slider (width <= 768px) { .controls {
left: 40px; position: absolute;
left: 100px;
bottom: 0;
z-index: 10;
gap: 10px; display: flex;
} flex-direction: column;
gap: 20px;
@container timeframe-slider (width <= 576px) { transform-origin: left;
left: 20px;
bottom: 13px;
order: 2; @container timeframe-slider (width <= 1024px) {
left: 100px;
bottom: 40px;
}
margin-top: 20px; @container timeframe-slider (width <= 768px) {
padding: 0; left: 40px;
}
gap: 10px;
}
@container timeframe-slider (width <= 576px) {
left: 20px;
bottom: 13px;
order: 2;
margin-top: 20px;
padding: 0;
}
} }
.pagination { .pagination {
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
} }
.buttons { .buttons {
display: flex; display: flex;
gap: 20px; gap: 20px;
@container timeframe-slider (width <= 768px) { @container timeframe-slider (width <= 768px) {
gap: 8px; gap: 8px;
} }
} }
.chevronIcon { .chevronIcon {
width: 9px; width: 9px;
height: 14px; height: 14px;
@container timeframe-slider (width <= 576px) { @container timeframe-slider (width <= 576px) {
width: 6px; width: 6px;
height: 11.5px; height: 11.5px;
} }
} }
.dots { .dots {
display: none; display: none;
@container timeframe-slider (width <= 576px) { @container timeframe-slider (width <= 576px) {
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 32px; bottom: 32px;
display: flex; display: flex;
gap: 10px; gap: 10px;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
} }
.dot { .dot {
width: 6px; width: 6px;
height: 6px; height: 6px;
padding: 0; padding: 0;
border: none; border: none;
border-radius: 50%; border-radius: 50%;
background-color: var(--color-primary); background-color: var(--color-primary);
cursor: pointer; cursor: pointer;
opacity: 0.4; opacity: 0.4;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
&.activeDot { &.activeDot {
opacity: 1; opacity: 1;
} }
} }
.rotated { .rotated {
transform: rotate(180deg); transform: rotate(180deg);
} }
.centerDate { .centerDate {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
z-index: 0; z-index: 0;
display: flex; display: flex;
gap: 60px; gap: 60px;
color: var(--color-text); color: var(--color-text);
font-weight: 700; font-weight: 700;
font-size: 200px; font-size: 200px;
line-height: 160px; line-height: 160px;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
pointer-events: none; pointer-events: none;
@container timeframe-slider (width <= 1024px) { @container timeframe-slider (width <= 1024px) {
gap: 40px; gap: 40px;
font-size: 140px; font-size: 140px;
line-height: 120px; line-height: 120px;
} }
@container timeframe-slider (width <= 768px) { @container timeframe-slider (width <= 768px) {
font-size: 100px; font-size: 100px;
line-height: 80px; line-height: 80px;
} }
@container timeframe-slider (width <= 576px) { @container timeframe-slider (width <= 576px) {
position: static; position: static;
gap: 20px; gap: 20px;
justify-content: center; justify-content: center;
margin-bottom: 40px; margin-bottom: 40px;
font-size: 56px; font-size: 56px;
transform: none; transform: none;
} }
span:first-child { span:first-child {
color: #5d5fef; color: #5d5fef;
} }
span:last-child { span:last-child {
color: #ef5da8; color: #ef5da8;
} }
} }
.periodLabel { .periodLabel {
display: none; display: none;
@container timeframe-slider (width <= 576px) { @container timeframe-slider (width <= 576px) {
order: 1; order: 1;
display: block; display: block;
padding-bottom: 20px; padding-bottom: 20px;
color: var(--color-text); color: var(--color-text);
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
text-align: left; text-align: left;
border-bottom: 1px solid #C7CDD9; border-bottom: 1px solid #C7CDD9;
} }
} }
.circleContainer { .circleContainer {
width: 100%; width: 100%;
height: 100%; height: 100%;
@container timeframe-slider (width <= 576px) { @container timeframe-slider (width <= 576px) {
display: none; display: none;
} }
} }
.carouselContainer { .carouselContainer {
padding: 55px 80px 105px; padding: 55px 80px 105px;
@container timeframe-slider (width <= 768px) { @container timeframe-slider (width <= 768px) {
width: calc(100% + 40px); width: calc(100% + 40px);
margin: 0 -20px; margin: 0 -20px;
padding: 0; padding: 0;
} }
} }