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

Compare commits

merge into: ilia:feature/minor-adjustments
Branches Tags
ilia:main ilia:feature/stylelint ilia:feature/minor-adjustments ilia:feature/adaptive ilia:feature/minor-changes ilia:feature/time-frame-slider ilia:feature/fsd-structure ilia:fixes/configs-tweaks
...
pull from: ilia:feature/stylelint
Branches Tags
ilia:main ilia:feature/stylelint ilia:feature/minor-adjustments ilia:feature/adaptive ilia:feature/minor-changes ilia:feature/time-frame-slider ilia:feature/fsd-structure ilia:fixes/configs-tweaks

3 Commits
feature/mi ... feature/st

Author SHA1 Message Date
Ilia Mashkov
d3816b0952 fix: Правки линтера 2025-11-24 12:22:02 +03:00
Ilia Mashkov
d3343f1f7b feat: Уставновлен плагин для соблюдения стилизации кода в файлах стилей 2025-11-24 12:21:04 +03:00
Ilia Mashkov
7c94fa8ffe Merge pull request #6 from e7f3/feature/minor-adjustments 
Feature/minor adjustments
 2025-11-23 16:20:18 +03:00
10 changed files with 461 additions and 431 deletions
Expand all files Collapse all files

1
package.json
View File

@@ -40,6 +40,7 @@
"@storybook/addon-webpack5-compiler-babel": "^4.0.0", "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
"@storybook/react": "^8.6.14", "@storybook/react": "^8.6.14",
"@storybook/react-webpack5": "^8.6.14", "@storybook/react-webpack5": "^8.6.14",
"@stylistic/stylelint-plugin": "^4.0.0",
"@svgr/webpack": "^8.1.0", "@svgr/webpack": "^8.1.0",
"@testing-library/jest-dom": "^6.9.1", "@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.0", "@testing-library/react": "^16.3.0",

25
pnpm-lock.yaml generated
View File

@@ -63,6 +63,9 @@ importers:
'@storybook/react-webpack5': '@storybook/react-webpack5':
specifier: ^8.6.14 specifier: ^8.6.14
version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(esbuild@0.25.12)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@8.6.14(prettier@3.6.2))(typescript@5.9.3)(webpack-cli@5.1.4) version: 8.6.14(@storybook/test@8.6.14(storybook@8.6.14(prettier@3.6.2)))(esbuild@0.25.12)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@8.6.14(prettier@3.6.2))(typescript@5.9.3)(webpack-cli@5.1.4)
'@stylistic/stylelint-plugin':
specifier: ^4.0.0
version: 4.0.0(stylelint@16.25.0(typescript@5.9.3))
'@svgr/webpack': '@svgr/webpack':
specifier: ^8.1.0 specifier: ^8.1.0
version: 8.1.0(typescript@5.9.3) version: 8.1.0(typescript@5.9.3)
@@ -1664,6 +1667,12 @@ packages:
peerDependencies: peerDependencies:
storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0 storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
'@stylistic/stylelint-plugin@4.0.0':
resolution: {integrity: sha512-CFwt3K4Y/7bygNCLCQ8Sy4Hzgbhxq3BsNW0FIuYxl17HD3ywptm54ocyeiLVRrk5jtz1Zwks7Xr9eiZt8SWHAw==}
engines: {node: ^18.12 || >=20.9}
peerDependencies:
stylelint: ^16.22.0
'@svgr/babel-plugin-add-jsx-attribute@8.0.0': '@svgr/babel-plugin-add-jsx-attribute@8.0.0':
resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==} resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==}
engines: {node: '>=14'} engines: {node: '>=14'}
@@ -5224,6 +5233,9 @@ packages:
peerDependencies: peerDependencies:
webpack: ^5.27.0 webpack: ^5.27.0
style-search@0.1.0:
resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==}
stylelint-config-recommended-scss@14.1.0: stylelint-config-recommended-scss@14.1.0:
resolution: {integrity: sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg==} resolution: {integrity: sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg==}
engines: {node: '>=18.12.0'} engines: {node: '>=18.12.0'}
@@ -7531,6 +7543,17 @@ snapshots:
dependencies: dependencies:
storybook: 8.6.14(prettier@3.6.2) storybook: 8.6.14(prettier@3.6.2)
'@stylistic/stylelint-plugin@4.0.0(stylelint@16.25.0(typescript@5.9.3))':
dependencies:
'@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
'@csstools/css-tokenizer': 3.0.4
'@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
postcss: 8.5.6
postcss-selector-parser: 7.1.0
postcss-value-parser: 4.2.0
style-search: 0.1.0
stylelint: 16.25.0(typescript@5.9.3)
'@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.28.5)': '@svgr/babel-plugin-add-jsx-attribute@8.0.0(@babel/core@7.28.5)':
dependencies: dependencies:
'@babel/core': 7.28.5 '@babel/core': 7.28.5
@@ -11617,6 +11640,8 @@ snapshots:
dependencies: dependencies:
webpack: 5.103.0(esbuild@0.25.12)(webpack-cli@5.1.4) webpack: 5.103.0(esbuild@0.25.12)(webpack-cli@5.1.4)
style-search@0.1.0: {}
stylelint-config-recommended-scss@14.1.0(postcss@8.5.6)(stylelint@16.25.0(typescript@5.9.3)): stylelint-config-recommended-scss@14.1.0(postcss@8.5.6)(stylelint@16.25.0(typescript@5.9.3)):
dependencies: dependencies:
postcss-scss: 4.0.9(postcss@8.5.6) postcss-scss: 4.0.9(postcss@8.5.6)

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;
} }
} }

6
stylelint.config.js
View File

@@ -46,8 +46,12 @@ const {
module.exports = { module.exports = {
extends: 'stylelint-config-standard-scss', extends: 'stylelint-config-standard-scss',
plugins: ['stylelint-order'], plugins: [
'stylelint-order',
'@stylistic/stylelint-plugin',
],
rules: { rules: {
'@stylistic/indentation': 2,
'selector-class-pattern': null, 'selector-class-pattern': null,
'order/order': selectorOrdering, 'order/order': selectorOrdering,
'order/properties-order': propertyOrdering, 'order/properties-order': propertyOrdering,