From d3343f1f7bfe3a5bba1814421f198b6d0d7f07a5 Mon Sep 17 00:00:00 2001 From: Ilia Mashkov Date: Mon, 24 Nov 2025 12:21:04 +0300 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=D0=A3=D1=81=D1=82=D0=B0=D0=B2?= =?UTF-8?q?=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=20=D0=BF=D0=BB=D0=B0=D0=B3?= =?UTF-8?q?=D0=B8=D0=BD=20=D0=B4=D0=BB=D1=8F=20=D1=81=D0=BE=D0=B1=D0=BB?= =?UTF-8?q?=D1=8E=D0=B4=D0=B5=D0=BD=D0=B8=D1=8F=20=D1=81=D1=82=D0=B8=D0=BB?= =?UTF-8?q?=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D0=B8=20=D0=BA=D0=BE=D0=B4=D0=B0?= =?UTF-8?q?=20=D0=B2=20=D1=84=D0=B0=D0=B9=D0=BB=D0=B0=D1=85=20=D1=81=D1=82?= =?UTF-8?q?=D0=B8=D0=BB=D0=B5=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 25 +++++++++++++++++++++++++ stylelint.config.js | 6 +++++- 3 files changed, 31 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index a0592c5..ff45996 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "@storybook/addon-webpack5-compiler-babel": "^4.0.0", "@storybook/react": "^8.6.14", "@storybook/react-webpack5": "^8.6.14", + "@stylistic/stylelint-plugin": "^4.0.0", "@svgr/webpack": "^8.1.0", "@testing-library/jest-dom": "^6.9.1", "@testing-library/react": "^16.3.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 49ec6d0..351f9e0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -63,6 +63,9 @@ importers: '@storybook/react-webpack5': 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) + '@stylistic/stylelint-plugin': + specifier: ^4.0.0 + version: 4.0.0(stylelint@16.25.0(typescript@5.9.3)) '@svgr/webpack': specifier: ^8.1.0 version: 8.1.0(typescript@5.9.3) @@ -1664,6 +1667,12 @@ packages: peerDependencies: 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': resolution: {integrity: sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==} engines: {node: '>=14'} @@ -5224,6 +5233,9 @@ packages: peerDependencies: webpack: ^5.27.0 + style-search@0.1.0: + resolution: {integrity: sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==} + stylelint-config-recommended-scss@14.1.0: resolution: {integrity: sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg==} engines: {node: '>=18.12.0'} @@ -7531,6 +7543,17 @@ snapshots: dependencies: 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)': dependencies: '@babel/core': 7.28.5 @@ -11617,6 +11640,8 @@ snapshots: dependencies: 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)): dependencies: postcss-scss: 4.0.9(postcss@8.5.6) diff --git a/stylelint.config.js b/stylelint.config.js index 7ead2f2..f51a6f5 100644 --- a/stylelint.config.js +++ b/stylelint.config.js @@ -46,8 +46,12 @@ const { module.exports = { extends: 'stylelint-config-standard-scss', - plugins: ['stylelint-order'], + plugins: [ + 'stylelint-order', + '@stylistic/stylelint-plugin', + ], rules: { + '@stylistic/indentation': 2, 'selector-class-pattern': null, 'order/order': selectorOrdering, 'order/properties-order': propertyOrdering, From d3816b0952273b03d1d978380703fdba2e6996fd Mon Sep 17 00:00:00 2001 From: Ilia Mashkov Date: Mon, 24 Nov 2025 12:22:02 +0300 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=D0=9F=D1=80=D0=B0=D0=B2=D0=BA=D0=B8?= =?UTF-8?q?=20=D0=BB=D0=B8=D0=BD=D1=82=D0=B5=D1=80=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/styles/reset.scss | 30 +- src/app/styles/variables.scss | 38 +- src/shared/ui/Button/Button.module.scss | 200 ++++----- src/shared/ui/Card/Card.module.scss | 32 +- .../CircleTimeline/CircleTimeline.module.scss | 126 +++--- .../EventsCarousel/EventsCarousel.module.scss | 48 +-- .../TimeFrameSlider.module.scss | 386 +++++++++--------- 7 files changed, 430 insertions(+), 430 deletions(-) diff --git a/src/app/styles/reset.scss b/src/app/styles/reset.scss index 04103d1..1c7822e 100644 --- a/src/app/styles/reset.scss +++ b/src/app/styles/reset.scss @@ -1,34 +1,34 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; } body { - color: var(--color-text); - font-family: var(--font-family-main); + color: var(--color-text); + font-family: var(--font-family-main); - background-color: var(--color-bg); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; + background-color: var(--color-bg); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } button { - font-family: inherit; + font-family: inherit; - border: none; + border: none; - background: none; + background: none; - cursor: pointer; + cursor: pointer; } a { - color: inherit; - text-decoration: none; + color: inherit; + text-decoration: none; } ul, ol { - list-style: none; + list-style: none; } \ No newline at end of file diff --git a/src/app/styles/variables.scss b/src/app/styles/variables.scss index 575989b..3af2867 100644 --- a/src/app/styles/variables.scss +++ b/src/app/styles/variables.scss @@ -1,23 +1,23 @@ :root { - // Цвета - --color-primary: #42567A; - --color-accent: #EF5DA8; - --color-text: #42567A; - --color-bg: #F4F5F9; - --color-border: rgb(66 86 122 / 10%); - --color-blue: #3877EE; - --color-white: #FFF; + // Цвета + --color-primary: #42567A; + --color-accent: #EF5DA8; + --color-text: #42567A; + --color-bg: #F4F5F9; + --color-border: rgb(66 86 122 / 10%); + --color-blue: #3877EE; + --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-size-h1: 56px; - --font-size-h2: 32px; - --font-size-h3: 20px; - --font-size-body: 16px; - --font-size-small: 14px; - --line-height-h1: 120%; - --line-height-body: 150%; + // Типографика + --font-family-main: 'PT Sans', sans-serif; + --font-size-h1: 56px; + --font-size-h2: 32px; + --font-size-h3: 20px; + --font-size-body: 16px; + --font-size-small: 14px; + --line-height-h1: 120%; + --line-height-body: 150%; } \ No newline at end of file diff --git a/src/shared/ui/Button/Button.module.scss b/src/shared/ui/Button/Button.module.scss index 0c4c970..0a85b6d 100644 --- a/src/shared/ui/Button/Button.module.scss +++ b/src/shared/ui/Button/Button.module.scss @@ -1,108 +1,108 @@ .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; align-items: center; - padding: 0; + width: 100%; + height: 100%; - font-family: var(--font-family-main); + svg { + width: 40%; + height: 40%; - 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; - align-items: center; - - width: 100%; - height: 100%; - - svg { - width: 40%; - height: 40%; - - object-fit: contain; - } + object-fit: contain; } + } } \ No newline at end of file diff --git a/src/shared/ui/Card/Card.module.scss b/src/shared/ui/Card/Card.module.scss index fa57ef4..48ceb27 100644 --- a/src/shared/ui/Card/Card.module.scss +++ b/src/shared/ui/Card/Card.module.scss @@ -1,27 +1,27 @@ .card { - padding: 20px 0; + padding: 20px 0; } .title { - margin-bottom: 15px; + margin-bottom: 15px; - color: var(--color-blue); - font-weight: 400; - font-size: 25px; - line-height: 120%; + color: var(--color-blue); + font-weight: 400; + font-size: 25px; + line-height: 120%; - @media (width <=768px) { - font-size: 16px; - } + @media (width <=768px) { + font-size: 16px; + } } .description { - color: var(--color-text); - font-weight: 400; - font-size: 20px; - line-height: 145%; + color: var(--color-text); + font-weight: 400; + font-size: 20px; + line-height: 145%; - @media (width <=768px) { - font-size: 14px; - } + @media (width <=768px) { + font-size: 14px; + } } \ No newline at end of file diff --git a/src/widgets/TimeFrameSlider/ui/CircleTimeline/CircleTimeline.module.scss b/src/widgets/TimeFrameSlider/ui/CircleTimeline/CircleTimeline.module.scss index bcdfddc..e8904fb 100644 --- a/src/widgets/TimeFrameSlider/ui/CircleTimeline/CircleTimeline.module.scss +++ b/src/widgets/TimeFrameSlider/ui/CircleTimeline/CircleTimeline.module.scss @@ -1,76 +1,76 @@ .circleContainer { - position: absolute; - top: 50%; - left: 50%; + position: absolute; + top: 50%; + left: 50%; - width: calc(var(--circle-radius, 265px) * 2); - height: calc(var(--circle-radius, 265px) * 2); + width: calc(var(--circle-radius, 265px) * 2); + height: calc(var(--circle-radius, 265px) * 2); - border: 1px solid rgba(#42567A, 0.2); - border-radius: 50%; + border: 1px solid rgba(#42567A, 0.2); + border-radius: 50%; - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); } .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; + left: 100%; - width: 56px; - height: 56px; - margin-top: -28px; - margin-left: -28px; + margin-left: 20px; - border: 25px solid transparent; - border-radius: 50%; + color: var(--color-text); + font-weight: 700; + font-size: 20px; + white-space: nowrap; - background: var(--color-text); - background-clip: content-box; + visibility: hidden; - 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; - left: 100%; - - margin-left: 20px; - - color: var(--color-text); - font-weight: 700; - font-size: 20px; - white-space: nowrap; - - visibility: hidden; - - opacity: 0; - } + opacity: 0; + } } \ No newline at end of file diff --git a/src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.module.scss b/src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.module.scss index c7b0618..4b06125 100644 --- a/src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.module.scss +++ b/src/widgets/TimeFrameSlider/ui/EventsCarousel/EventsCarousel.module.scss @@ -1,51 +1,51 @@ .container { - position: relative; + position: relative; - opacity: 0; + opacity: 0; } .prevButtonWrapper { - position: absolute; - top: 50%; - left: -60px; - z-index: 10; + position: absolute; + top: 50%; + left: -60px; + z-index: 10; - transform: translateY(-50%); + transform: translateY(-50%); - transition: opacity 0.3s ease; + transition: opacity 0.3s ease; } .nextButtonWrapper { - position: absolute; - top: 50%; - right: -60px; - z-index: 10; + position: absolute; + top: 50%; + right: -60px; + z-index: 10; - transform: translateY(-50%) rotate(180deg); + transform: translateY(-50%) rotate(180deg); - transition: opacity 0.3s ease; + transition: opacity 0.3s ease; } .hidden { - opacity: 0; + opacity: 0; - pointer-events: none; + pointer-events: none; } :global(.swiper) { - @container timeframe-slider (width <= 768px) { - padding: 0 40px; - } + @container timeframe-slider (width <= 768px) { + padding: 0 40px; + } } :global(.swiper-slide-visible) { - transition: opacity 0.3s ease; + transition: opacity 0.3s ease; - @container timeframe-slider (width < 768px) { - opacity: 0.4; - } + @container timeframe-slider (width < 768px) { + opacity: 0.4; + } } :global(.swiper-slide-fully-visible) { - opacity: 1; + opacity: 1; } \ No newline at end of file diff --git a/src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.module.scss b/src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.module.scss index c478744..4f69807 100644 --- a/src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.module.scss +++ b/src/widgets/TimeFrameSlider/ui/TimeFrameSlider/TimeFrameSlider.module.scss @@ -1,303 +1,303 @@ /* Wrapper для container queries - должен быть родителем контейнера */ .wrapper { - /* Включаем container queries для адаптивности виджета */ - container-type: inline-size; - container-name: timeframe-slider; + /* Включаем container queries для адаптивности виджета */ + container-type: inline-size; + container-name: timeframe-slider; } .container { - position: relative; + position: relative; - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; - width: 100%; - max-width: 1440px; - min-height: 100vh; - margin: 0 auto; - padding-top: 180px; + width: 100%; + max-width: 1440px; + min-height: 100vh; + margin: 0 auto; + padding-top: 180px; - color: var(--color-text); - font-family: var(--font-family-main); + color: var(--color-text); + font-family: var(--font-family-main); - border-right: 1px solid var(--color-border); - border-left: 1px solid var(--color-border); + border-right: 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%; + 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; - @container timeframe-slider (width <= 1024px) { - padding-top: 100px; - } + @container timeframe-slider (width <= 1024px) { + padding-top: 100px; + } - @container timeframe-slider (width <= 576px) { - padding: 60px 20px 20px; + @container timeframe-slider (width <= 576px) { + padding: 60px 20px 20px; - background-image: unset; - } + background-image: unset; + } } .title { - position: absolute; - top: 170px; - left: 0; - z-index: 2; + position: absolute; + top: 170px; + left: 0; + z-index: 2; - max-width: 15ch; - padding-left: 75px; + max-width: 15ch; + padding-left: 75px; - font-weight: 700; - font-size: 56px; - line-height: 120%; + font-weight: 700; + font-size: 56px; + line-height: 120%; - border-left: 5px solid transparent; - border-image: var(--gradient-primary) 1; + border-left: 5px solid transparent; + border-image: var(--gradient-primary) 1; - @container timeframe-slider (width <= 1024px) { - top: 80px; + @container timeframe-slider (width <= 1024px) { + top: 80px; - font-size: 40px; - } + font-size: 40px; + } - @container timeframe-slider (width <= 768px) { - padding-left: 20px; + @container timeframe-slider (width <= 768px) { + padding-left: 20px; - font-size: 34px; - } + font-size: 34px; + } - @container timeframe-slider (width <= 576px) { - position: relative; - inset: unset; + @container timeframe-slider (width <= 576px) { + position: relative; + inset: unset; - margin-bottom: 20px; - padding-left: 0; + margin-bottom: 20px; + padding-left: 0; - border: none; - } + border: none; + } } .content { - position: relative; + position: relative; - display: grid; - grid-template-columns: 1fr; + display: grid; + grid-template-columns: 1fr; - width: calc(100% + 40px); - height: 600px; - margin: 0 -20px; + width: calc(100% + 40px); + 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; + background-image: linear-gradient(to bottom, rgba(#42567A, 0.1) 1px, transparent 1px); + background-repeat: no-repeat; + background-position: center; + background-size: 100% 1px; - @container timeframe-slider (width <= 576px) { - 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; + @container timeframe-slider (width <= 576px) { + position: unset; display: flex; flex-direction: column; - gap: 20px; - transform-origin: left; + width: 100%; + height: auto; + margin: 0; - @container timeframe-slider (width <= 1024px) { - left: 100px; - bottom: 40px; - } + background-image: unset; + } +} - @container timeframe-slider (width <= 768px) { - left: 40px; +.controls { + position: absolute; + left: 100px; + bottom: 0; + z-index: 10; - gap: 10px; - } + display: flex; + flex-direction: column; + gap: 20px; - @container timeframe-slider (width <= 576px) { - left: 20px; - bottom: 13px; + transform-origin: left; - order: 2; + @container timeframe-slider (width <= 1024px) { + left: 100px; + bottom: 40px; + } - margin-top: 20px; - padding: 0; - } + @container timeframe-slider (width <= 768px) { + left: 40px; + + gap: 10px; + } + + @container timeframe-slider (width <= 576px) { + left: 20px; + bottom: 13px; + + order: 2; + + margin-top: 20px; + padding: 0; + } } .pagination { - font-weight: 400; - font-size: 14px; + font-weight: 400; + font-size: 14px; } .buttons { - display: flex; - gap: 20px; + display: flex; + gap: 20px; - @container timeframe-slider (width <= 768px) { - gap: 8px; - } + @container timeframe-slider (width <= 768px) { + gap: 8px; + } } .chevronIcon { - width: 9px; - height: 14px; + width: 9px; + height: 14px; - @container timeframe-slider (width <= 576px) { - width: 6px; - height: 11.5px; - } + @container timeframe-slider (width <= 576px) { + width: 6px; + height: 11.5px; + } } .dots { - display: none; + display: none; - @container timeframe-slider (width <= 576px) { - position: absolute; - left: 50%; - bottom: 32px; + @container timeframe-slider (width <= 576px) { + position: absolute; + left: 50%; + bottom: 32px; - display: flex; - gap: 10px; - justify-content: center; + display: flex; + gap: 10px; + justify-content: center; - width: 100%; + width: 100%; - transform: translate(-50%, -50%); - } + transform: translate(-50%, -50%); + } } .dot { - width: 6px; - height: 6px; - padding: 0; + width: 6px; + height: 6px; + padding: 0; - border: none; - border-radius: 50%; + border: none; + 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 { - opacity: 1; - } + &.activeDot { + opacity: 1; + } } .rotated { - transform: rotate(180deg); + transform: rotate(180deg); } .centerDate { - position: absolute; - top: 50%; - left: 50%; - z-index: 0; + position: absolute; + top: 50%; + left: 50%; + z-index: 0; - display: flex; - gap: 60px; + display: flex; + gap: 60px; - color: var(--color-text); - font-weight: 700; - font-size: 200px; - line-height: 160px; + color: var(--color-text); + font-weight: 700; + font-size: 200px; + line-height: 160px; - transform: translate(-50%, -50%); + transform: translate(-50%, -50%); - pointer-events: none; + pointer-events: none; - @container timeframe-slider (width <= 1024px) { - gap: 40px; + @container timeframe-slider (width <= 1024px) { + gap: 40px; - font-size: 140px; - line-height: 120px; - } + font-size: 140px; + line-height: 120px; + } - @container timeframe-slider (width <= 768px) { - font-size: 100px; - line-height: 80px; - } + @container timeframe-slider (width <= 768px) { + font-size: 100px; + line-height: 80px; + } - @container timeframe-slider (width <= 576px) { - position: static; + @container timeframe-slider (width <= 576px) { + position: static; - gap: 20px; - justify-content: center; + gap: 20px; + justify-content: center; - margin-bottom: 40px; + margin-bottom: 40px; - font-size: 56px; + font-size: 56px; - transform: none; - } + transform: none; + } - span:first-child { - color: #5d5fef; - } + span:first-child { + color: #5d5fef; + } - span:last-child { - color: #ef5da8; - } + span:last-child { + color: #ef5da8; + } } .periodLabel { - display: none; + display: none; - @container timeframe-slider (width <= 576px) { - order: 1; + @container timeframe-slider (width <= 576px) { + order: 1; - display: block; + display: block; - padding-bottom: 20px; + padding-bottom: 20px; - color: var(--color-text); - font-weight: 700; - font-size: 16px; - text-align: left; + color: var(--color-text); + font-weight: 700; + font-size: 16px; + text-align: left; - border-bottom: 1px solid #C7CDD9; - } + border-bottom: 1px solid #C7CDD9; + } } .circleContainer { - width: 100%; - height: 100%; + width: 100%; + height: 100%; - @container timeframe-slider (width <= 576px) { - display: none; - } + @container timeframe-slider (width <= 576px) { + display: none; + } } .carouselContainer { - padding: 55px 80px 105px; + padding: 55px 80px 105px; - @container timeframe-slider (width <= 768px) { - width: calc(100% + 40px); - margin: 0 -20px; - padding: 0; - } + @container timeframe-slider (width <= 768px) { + width: calc(100% + 40px); + margin: 0 -20px; + padding: 0; + } } \ No newline at end of file