From d1635ce7c4b72082495e8c446c6cd05182dfe3c8 Mon Sep 17 00:00:00 2001 From: Yulia Demir Date: Tue, 13 May 2025 07:44:20 +0300 Subject: [PATCH 1/6] refactor: 830 - add const for border radiuses --- src/core/styles/_constants.scss | 44 +++++++++++++++++++ src/core/styles/index.scss | 2 +- .../ui/course-card/course-card.module.scss | 6 +-- .../ui/event-card/event-card.module.scss | 6 +-- .../mentor-feedback-card.module.scss | 2 +- .../ui/trainers-card/trainer-card.module.scss | 4 +- .../ui/link-custom/link-custom.module.scss | 2 +- src/shared/ui/modal/modal.module.scss | 4 +- .../playlist/playlist.module.scss | 4 +- .../video-playlist-with-player.module.scss | 2 +- .../about-course-grid.module.scss | 2 +- .../benefits/ui/benefits/benefits.module.scss | 4 +- .../ui/dropdown/dropdown-wrapper.module.scss | 2 +- .../activity-card/activity-card.module.scss | 2 +- .../ui/mentorship-hero.module.scss | 2 +- .../principle-card/principle-card.module.scss | 2 +- 16 files changed, 67 insertions(+), 23 deletions(-) diff --git a/src/core/styles/_constants.scss b/src/core/styles/_constants.scss index 8dc6a0045..1465e0579 100644 --- a/src/core/styles/_constants.scss +++ b/src/core/styles/_constants.scss @@ -94,3 +94,47 @@ $ease-standard-accelerate: cubic-bezier(0.3, 0, 1, 1); $ease-emphasize-decelerate: cubic-bezier(0, 0, 0, 1); $ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0); $standard-decelerate: cubic-bezier(0, 0, 0, 1); + +// Border radius +$border-radius-xs: 8px; +$border-radius-s: 12px; +$border-radius-m: 16px; +$border-radius-l: 20px; +$border-radius-xxxl: 999px; + +// Font sizes +$font-size-xxs: 12px; +$font-size-xs: 14px; +$font-size-s: 16px; +$font-size-m: 18px; +$font-size-l: 20px; +$font-size-xl: 24px; +$font-size-xxl: 36px; + +// Gap +$gap-4: 4px; +$gap-5: 5px; +$gap-8: 8px; +$gap-10: 10px; +$gap-12: 12px; +$gap-16: 16px; +$gap-18: 18px; +$gap-19: 19px; +$gap-20: 20px; +$gap-22: 22px; +$gap-24: 24px; +$gap-26: 26px; +$gap-28: 28px; +$gap-30: 30px; +$gap-32: 32px; +$gap-40: 40px; +$gap-48: 48px; +$gap-50: 50px; +$gap-74: 74px; +$gap-64: 64px; +$gap-75: 75px; +$gap-80: 80px; +$gap-100: 100px; +$gap-120: 120px; +$gap-167: 167px; +$gap-176: 176px; diff --git a/src/core/styles/index.scss b/src/core/styles/index.scss index 6b06f5082..06e78890f 100644 --- a/src/core/styles/index.scss +++ b/src/core/styles/index.scss @@ -131,7 +131,7 @@ figure { height: var(--slider-arrow-btn-height); margin: 2px; - border-radius: 8px; + border-radius: $border-radius-xs; opacity: $opacity-100; backdrop-filter: blur(20px); diff --git a/src/entities/course/ui/course-card/course-card.module.scss b/src/entities/course/ui/course-card/course-card.module.scss index 6bca91441..51719ed08 100644 --- a/src/entities/course/ui/course-card/course-card.module.scss +++ b/src/entities/course/ui/course-card/course-card.module.scss @@ -10,7 +10,7 @@ min-width: 100px; height: 100%; - border-radius: 12px; + border-radius: $border-radius-s; &::before { content: ''; @@ -39,7 +39,7 @@ height: 100%; min-height: 112px; padding: 36px 32px; - border-radius: 12px 12px 0 0; + border-radius: $border-radius-s $border-radius-s 0 0; background-color: $color-purple-50; @@ -65,7 +65,7 @@ border-color: $color-gray-200; border-style: solid; border-width: 0 1px 1px 1px; - border-radius: 0 0 12px 12px; + border-radius: 0 0 $border-radius-s $border-radius-s; background-color: $color-white; diff --git a/src/entities/event/ui/event-card/event-card.module.scss b/src/entities/event/ui/event-card/event-card.module.scss index 14d460e15..60dc6507c 100644 --- a/src/entities/event/ui/event-card/event-card.module.scss +++ b/src/entities/event/ui/event-card/event-card.module.scss @@ -5,7 +5,7 @@ width: 320px; padding: 0; - border-radius: 12px; + border-radius: $border-radius-s; .card-header { position: relative; @@ -16,7 +16,7 @@ padding: 32px 24px 24px 24px; border: solid $color-gray-200; border-width: 1px 1px 0 1px; - border-radius: 12px 12px 0 0; + border-radius: $border-radius-s $border-radius-s 0 0; background-color: $color-purple-50; @@ -100,7 +100,7 @@ padding: 24px; border: solid $color-gray-200; border-width: 0 1px 1px 1px; - border-radius: 0 0 12px 12px; + border-radius: 0 0 $border-radius-s $border-radius-s; background-color: hsla(from $color-gray-100 h s l/ $opacity-20); diff --git a/src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss b/src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss index 4a95e0d64..39aea4504 100644 --- a/src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss +++ b/src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss @@ -8,7 +8,7 @@ max-width: 624px; min-height: 510px; padding: 40px 32px 40px 32px; - border-radius: 12px; + border-radius: $border-radius-s; box-shadow: 0 4px 12px 0 hsla(from $color-black h s l / $opacity-10); diff --git a/src/entities/trainer/ui/trainers-card/trainer-card.module.scss b/src/entities/trainer/ui/trainers-card/trainer-card.module.scss index 68f8c9ddb..abc217f36 100644 --- a/src/entities/trainer/ui/trainers-card/trainer-card.module.scss +++ b/src/entities/trainer/ui/trainers-card/trainer-card.module.scss @@ -6,7 +6,7 @@ max-width: 700px; padding: 40px 32px 40px 32px; - border-radius: 16px; + border-radius: $border-radius-m; box-shadow: 0 4px 16px 0 rgb(0 0 0 / 12%); @@ -17,7 +17,7 @@ img { width: 100%; height: auto; - border-radius: 12px; + border-radius: $border-radius-s; } } diff --git a/src/shared/ui/link-custom/link-custom.module.scss b/src/shared/ui/link-custom/link-custom.module.scss index 4d4645fcb..fbf1d0396 100644 --- a/src/shared/ui/link-custom/link-custom.module.scss +++ b/src/shared/ui/link-custom/link-custom.module.scss @@ -61,7 +61,7 @@ width: max-content; height: 36px; padding: 10px 12px; - border-radius: 9999px; + border-radius: $border-radius-xxxl; font-size: 14px; line-height: 16px; diff --git a/src/shared/ui/modal/modal.module.scss b/src/shared/ui/modal/modal.module.scss index 5b67836e4..76744face 100644 --- a/src/shared/ui/modal/modal.module.scss +++ b/src/shared/ui/modal/modal.module.scss @@ -6,7 +6,7 @@ max-width: 889px; padding: 0 32px; border: none; - border-radius: 12px; + border-radius: $border-radius-s; line-height: 24px; @@ -121,7 +121,7 @@ padding: 16px; border: none; - border-radius: 999px; + border-radius: $border-radius-xxxl; font-size: 24px; diff --git a/src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss b/src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss index 0c07987e6..26f68e115 100644 --- a/src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss +++ b/src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss @@ -68,7 +68,7 @@ img { display: block; max-width: 100%; - border-radius: 8px; + border-radius: $border-radius-xs; @include media-tablet-large { max-width: 200px; @@ -90,7 +90,7 @@ width: 100%; height: 100%; - border-radius: 8px; + border-radius: $border-radius-xs; font-size: 14px; font-weight: $font-weight-bold; diff --git a/src/shared/ui/video-playlist-with-player/video-playlist-with-player.module.scss b/src/shared/ui/video-playlist-with-player/video-playlist-with-player.module.scss index d2cc883f8..e65356e39 100644 --- a/src/shared/ui/video-playlist-with-player/video-playlist-with-player.module.scss +++ b/src/shared/ui/video-playlist-with-player/video-playlist-with-player.module.scss @@ -15,6 +15,6 @@ .video-player { iframe { - border-radius: 12px; + border-radius: $border-radius-s; } } diff --git a/src/widgets/about-course/ui/about-course-grid/about-course-grid.module.scss b/src/widgets/about-course/ui/about-course-grid/about-course-grid.module.scss index a356554c7..91ae08aa3 100644 --- a/src/widgets/about-course/ui/about-course-grid/about-course-grid.module.scss +++ b/src/widgets/about-course/ui/about-course-grid/about-course-grid.module.scss @@ -16,7 +16,7 @@ width: 100%; padding: 24px; border: 1px solid hsla(from $color-yellow h s l/ $opacity-8); - border-radius: 12px; + border-radius: $border-radius-s; background-color: $color-yellow-50; diff --git a/src/widgets/benefits/ui/benefits/benefits.module.scss b/src/widgets/benefits/ui/benefits/benefits.module.scss index f6649b077..c6556abb8 100644 --- a/src/widgets/benefits/ui/benefits/benefits.module.scss +++ b/src/widgets/benefits/ui/benefits/benefits.module.scss @@ -11,7 +11,7 @@ .grid-item { padding: 24px; border: 1px solid $color-yellow-100; - border-radius: 12px; + border-radius: $border-radius-s; font-size: 18px; line-height: 28px; @@ -64,7 +64,7 @@ width: 100%; padding: 24px; border: 1px solid $color-yellow-100; - border-radius: 12px; + border-radius: $border-radius-s; font-size: 18px; line-height: 28px; diff --git a/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss b/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss index bc6d181f8..9a2443556 100644 --- a/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss +++ b/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss @@ -16,7 +16,7 @@ max-width: calc(100vw - var(--page-padding)); height: max-content; padding: 32px; - border-radius: 20px; + border-radius: $border-radius-l; visibility: hidden; opacity: 0; diff --git a/src/widgets/mentorship-activities/ui/activity-card/activity-card.module.scss b/src/widgets/mentorship-activities/ui/activity-card/activity-card.module.scss index cc8c90380..99d30ee13 100644 --- a/src/widgets/mentorship-activities/ui/activity-card/activity-card.module.scss +++ b/src/widgets/mentorship-activities/ui/activity-card/activity-card.module.scss @@ -6,7 +6,7 @@ max-width: 624px; padding: 32px; border: 1px solid hsla(from $color-yellow h s l / $opacity-8); - border-radius: 12px; + border-radius: $border-radius-s; box-shadow: 0 4px 8px 0 hsla(from $color-black h s l / $opacity-10); diff --git a/src/widgets/mentorship-hero/ui/mentorship-hero.module.scss b/src/widgets/mentorship-hero/ui/mentorship-hero.module.scss index a8d071971..d262ba06c 100644 --- a/src/widgets/mentorship-hero/ui/mentorship-hero.module.scss +++ b/src/widgets/mentorship-hero/ui/mentorship-hero.module.scss @@ -11,7 +11,7 @@ width: fit-content; padding: 32px; - border-radius: 12px; + border-radius: $border-radius-s; text-align: left; diff --git a/src/widgets/principles/ui/principle-card/principle-card.module.scss b/src/widgets/principles/ui/principle-card/principle-card.module.scss index 304cdc12f..e75e756bd 100644 --- a/src/widgets/principles/ui/principle-card/principle-card.module.scss +++ b/src/widgets/principles/ui/principle-card/principle-card.module.scss @@ -11,7 +11,7 @@ width: 100%; padding: 24px; border: 1px solid rgb(255 219 32 / 8%); - border-radius: 12px; + border-radius: $border-radius-s; background-color: $color-yellow-50; From dbdb1b57691bcf9f234c2dff58a1e58892c08d80 Mon Sep 17 00:00:00 2001 From: Yulia Demir Date: Tue, 13 May 2025 07:55:36 +0300 Subject: [PATCH 2/6] refactor: 830 - add const for font sizes --- .../docs/components/docs-menu/docs-menu.module.scss | 2 +- src/app/docs/components/search/search.module.scss | 2 +- src/core/styles/index.scss | 2 +- .../course/ui/course-card/course-card.module.scss | 4 ++-- .../event/ui/event-card/event-card.module.scss | 8 ++++---- .../mentor-feedback-card.module.scss | 2 +- .../ui/trainers-card/trainer-card.module.scss | 10 +++++----- src/shared/ui/date-simple/date-simple.module.scss | 2 +- src/shared/ui/link-custom/link-custom.module.scss | 6 +++--- src/shared/ui/list/list.module.scss | 6 +++--- src/shared/ui/main-title/main-title.module.scss | 2 +- src/shared/ui/modal/modal.module.scss | 4 ++-- src/shared/ui/paragraph/paragraph.module.scss | 8 ++++---- .../ui/section-label/section-label.module.scss | 2 +- .../ui/short-info-panel/short-info-panel.module.scss | 2 +- .../social-media-item/social-media-item.module.scss | 4 ++-- src/shared/ui/subtitle/subtitle.module.scss | 12 ++++++------ .../playlist/playlist.module.scss | 4 ++-- src/shared/ui/widget-title/widget-title.module.scss | 6 +++--- .../benefits/ui/benefits/benefits.module.scss | 4 ++-- src/widgets/breadcrumbs/ui/breadcrumbs.module.scss | 2 +- .../certification/ui/certification.module.scss | 8 ++++---- src/widgets/faq/ui/faq.module.scss | 6 +++--- src/widgets/footer/footer.scss | 2 +- src/widgets/header/ui/nav-item/nav-item.module.scss | 2 +- src/widgets/hero-course/ui/hero-course.module.scss | 4 ++-- src/widgets/hero-page/ui/hero-page.module.scss | 2 +- .../ui/onboard-links/onboard-links.module.scss | 4 ++-- src/widgets/mobile-view/ui/mobile-view.module.scss | 2 +- .../numbers/ui/info-cell/info-cell.module.scss | 4 ++-- src/widgets/partnered/partnered.scss | 2 +- .../places/ui/place-item/place-item.module.scss | 6 +++--- .../ui/principle-card/principle-card.module.scss | 4 ++-- .../ui/school-item/school-item.module.scss | 2 +- .../ui/school-menu/school-menu.module.scss | 2 +- src/widgets/speakers/ui/speakers.module.scss | 4 ++-- .../study-path/ui/stage-card/stage-card.module.scss | 4 ++-- 37 files changed, 76 insertions(+), 76 deletions(-) diff --git a/src/app/docs/components/docs-menu/docs-menu.module.scss b/src/app/docs/components/docs-menu/docs-menu.module.scss index 3cfe5762a..274355317 100644 --- a/src/app/docs/components/docs-menu/docs-menu.module.scss +++ b/src/app/docs/components/docs-menu/docs-menu.module.scss @@ -8,7 +8,7 @@ padding-left: 12px; - font-size: 14px; + font-size: $font-size-xs; text-align: left; list-style-type: none; diff --git a/src/app/docs/components/search/search.module.scss b/src/app/docs/components/search/search.module.scss index 1543a4f1c..c0c3f1fac 100644 --- a/src/app/docs/components/search/search.module.scss +++ b/src/app/docs/components/search/search.module.scss @@ -43,5 +43,5 @@ } .subresult p { - font-size: 14px; + font-size: $font-size-xs; } diff --git a/src/core/styles/index.scss b/src/core/styles/index.scss index 06e78890f..7e46be99c 100644 --- a/src/core/styles/index.scss +++ b/src/core/styles/index.scss @@ -205,7 +205,7 @@ figure { width: 100%; height: 100%; - font-size: 24px; + font-size: $font-size-xl; color: $color-white; background: $color-gray-400; diff --git a/src/entities/course/ui/course-card/course-card.module.scss b/src/entities/course/ui/course-card/course-card.module.scss index 51719ed08..9420e0eaf 100644 --- a/src/entities/course/ui/course-card/course-card.module.scss +++ b/src/entities/course/ui/course-card/course-card.module.scss @@ -103,7 +103,7 @@ .course-info { padding: 24px; - font-size: 14px; + font-size: $font-size-xs; @include media-laptop-medium { flex-direction: row; @@ -117,7 +117,7 @@ .course-link { gap: 4px; padding: 10px 12px; - font-size: 14px; + font-size: $font-size-xs; } section { diff --git a/src/entities/event/ui/event-card/event-card.module.scss b/src/entities/event/ui/event-card/event-card.module.scss index 60dc6507c..8e2b098d3 100644 --- a/src/entities/event/ui/event-card/event-card.module.scss +++ b/src/entities/event/ui/event-card/event-card.module.scss @@ -38,7 +38,7 @@ border: 4px solid $color-purple-100; border-radius: 36px; - font-size: 16px; + font-size: $font-size-s; line-height: 1.2; } @@ -52,7 +52,7 @@ .event-organization { margin-top: 10px; - font-size: 20px; + font-size: $font-size-l; font-weight: $font-weight-medium; } } @@ -81,7 +81,7 @@ margin-top: 0; margin-bottom: 8px; - font-size: 16px; + font-size: $font-size-s; text-overflow: ellipsis; white-space: nowrap; } @@ -112,7 +112,7 @@ margin-bottom: 16px; - font-size: 14px; + font-size: $font-size-xs; font-weight: $font-weight-medium; color: $color-gray-500; } diff --git a/src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss b/src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss index 39aea4504..a49155612 100644 --- a/src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss +++ b/src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss @@ -51,7 +51,7 @@ .card-subtitle { margin: 0; - font-size: 18px; + font-size: $font-size-m; font-weight: $font-weight-medium; } } diff --git a/src/entities/trainer/ui/trainers-card/trainer-card.module.scss b/src/entities/trainer/ui/trainers-card/trainer-card.module.scss index abc217f36..f968180f7 100644 --- a/src/entities/trainer/ui/trainers-card/trainer-card.module.scss +++ b/src/entities/trainer/ui/trainers-card/trainer-card.module.scss @@ -27,28 +27,28 @@ .card-title { margin: 0; - font-size: 24px; + font-size: $font-size-xl; font-weight: $font-weight-medium; line-height: 32px; @include media-tablet { - font-size: 20px; + font-size: $font-size-l; } } .card-subtitle { margin: 0; - font-size: 18px; + font-size: $font-size-m; font-weight: $font-weight-medium; color: $color-gray-500; @include media-tablet { - font-size: 18px; + font-size: $font-size-m; } } .card-content { - font-size: 16px; + font-size: $font-size-s; font-weight: $font-weight-regular; line-height: 24px; } diff --git a/src/shared/ui/date-simple/date-simple.module.scss b/src/shared/ui/date-simple/date-simple.module.scss index b7dfb603c..db0833f57 100644 --- a/src/shared/ui/date-simple/date-simple.module.scss +++ b/src/shared/ui/date-simple/date-simple.module.scss @@ -6,7 +6,7 @@ margin: 0; - font-size: 14px; + font-size: $font-size-xs; } .icon { diff --git a/src/shared/ui/link-custom/link-custom.module.scss b/src/shared/ui/link-custom/link-custom.module.scss index fbf1d0396..c954769cc 100644 --- a/src/shared/ui/link-custom/link-custom.module.scss +++ b/src/shared/ui/link-custom/link-custom.module.scss @@ -19,7 +19,7 @@ padding: 12px 24px; border: 1px solid $color-black; - font-size: 18px; + font-size: $font-size-m; color: $color-black; .icon-wrapper { @@ -41,7 +41,7 @@ padding: 16px 24px; border: 2px solid $color-black; - font-size: 18px; + font-size: $font-size-m; line-height: 24px; color: $color-white; @@ -63,7 +63,7 @@ padding: 10px 12px; border-radius: $border-radius-xxxl; - font-size: 14px; + font-size: $font-size-xs; line-height: 16px; color: $color-black; diff --git a/src/shared/ui/list/list.module.scss b/src/shared/ui/list/list.module.scss index 5d4d1032d..8f5adc46d 100644 --- a/src/shared/ui/list/list.module.scss +++ b/src/shared/ui/list/list.module.scss @@ -3,7 +3,7 @@ flex-direction: column; gap: 8px; - font-size: 18px; + font-size: $font-size-m; line-height: 28px; letter-spacing: 0.5px; list-style-type: none; @@ -13,7 +13,7 @@ letter-spacing: 0; @include media-laptop { - font-size: 16px; + font-size: $font-size-s; line-height: 24px; } } @@ -23,6 +23,6 @@ } @include media-tablet-large { - font-size: 16px; + font-size: $font-size-s; } } diff --git a/src/shared/ui/main-title/main-title.module.scss b/src/shared/ui/main-title/main-title.module.scss index 909532d6b..e282822ed 100644 --- a/src/shared/ui/main-title/main-title.module.scss +++ b/src/shared/ui/main-title/main-title.module.scss @@ -16,7 +16,7 @@ @include media-tablet { padding-bottom: 16px; - font-size: 36px; + font-size: $font-size-xxl; line-height: 44px; } } diff --git a/src/shared/ui/modal/modal.module.scss b/src/shared/ui/modal/modal.module.scss index 76744face..d7bc3f86a 100644 --- a/src/shared/ui/modal/modal.module.scss +++ b/src/shared/ui/modal/modal.module.scss @@ -99,7 +99,7 @@ } .modal-title { - font-size: 20px; + font-size: $font-size-l; } .modal-body { @@ -123,7 +123,7 @@ border: none; border-radius: $border-radius-xxxl; - font-size: 24px; + font-size: $font-size-xl; background-color: transparent; diff --git a/src/shared/ui/paragraph/paragraph.module.scss b/src/shared/ui/paragraph/paragraph.module.scss index 09bb7495b..d4ba70473 100644 --- a/src/shared/ui/paragraph/paragraph.module.scss +++ b/src/shared/ui/paragraph/paragraph.module.scss @@ -5,24 +5,24 @@ &.medium-font-size { padding-bottom: 18px; - font-size: 18px; + font-size: $font-size-m; font-weight: $font-weight-regular; } &.large-font-size { padding-bottom: 16px; - font-size: 20px; + font-size: $font-size-l; font-weight: $font-weight-medium; } @include media-laptop { &.medium-font-size { - font-size: 16px; + font-size: $font-size-s; line-height: 24px; } &.large-font-size { - font-size: 18px; + font-size: $font-size-m; font-weight: $font-weight-regular; } } diff --git a/src/shared/ui/section-label/section-label.module.scss b/src/shared/ui/section-label/section-label.module.scss index d8e9c8dc5..973effb37 100644 --- a/src/shared/ui/section-label/section-label.module.scss +++ b/src/shared/ui/section-label/section-label.module.scss @@ -1,7 +1,7 @@ .label { margin: 8px 8px 8px 0; - font-size: 14px; + font-size: $font-size-xs; font-weight: $font-weight-regular; line-height: 16px; text-transform: uppercase; diff --git a/src/shared/ui/short-info-panel/short-info-panel.module.scss b/src/shared/ui/short-info-panel/short-info-panel.module.scss index 7df1d0e58..88a3992ef 100644 --- a/src/shared/ui/short-info-panel/short-info-panel.module.scss +++ b/src/shared/ui/short-info-panel/short-info-panel.module.scss @@ -17,7 +17,7 @@ margin: 0; - font-size: 14px; + font-size: $font-size-xs; color: $color-gray-600; } diff --git a/src/shared/ui/social-media-item/social-media-item.module.scss b/src/shared/ui/social-media-item/social-media-item.module.scss index e44d10cbf..a2efd7495 100644 --- a/src/shared/ui/social-media-item/social-media-item.module.scss +++ b/src/shared/ui/social-media-item/social-media-item.module.scss @@ -10,7 +10,7 @@ width: 112px; margin-top: 36px; - font-size: 14px; + font-size: $font-size-xs; font-weight: $font-weight-medium; line-height: 16px; color: $color-gray-900; @@ -45,7 +45,7 @@ } @include media-tablet { - font-size: 12px; + font-size: $font-size-xxs; line-height: 16px; } } diff --git a/src/shared/ui/subtitle/subtitle.module.scss b/src/shared/ui/subtitle/subtitle.module.scss index e041d5842..fdc08622c 100644 --- a/src/shared/ui/subtitle/subtitle.module.scss +++ b/src/shared/ui/subtitle/subtitle.module.scss @@ -3,21 +3,21 @@ color: $color-gray-900; &.extra-small-font-size { - font-size: 20px; + font-size: $font-size-l; line-height: 28px; @include media-tablet { - font-size: 18px; + font-size: $font-size-m; line-height: 24px; } } &.small-font-size { - font-size: 24px; + font-size: $font-size-xl; line-height: 32px; @include media-tablet { - font-size: 20px; + font-size: $font-size-l; line-height: 28px; } } @@ -27,7 +27,7 @@ line-height: 36px; @include media-tablet { - font-size: 24px; + font-size: $font-size-xl; line-height: 32px; } } @@ -43,7 +43,7 @@ } &.extra-large-font-size { - font-size: 36px; + font-size: $font-size-xxl; line-height: 44px; @include media-tablet { diff --git a/src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss b/src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss index 26f68e115..787056204 100644 --- a/src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss +++ b/src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss @@ -21,7 +21,7 @@ .playlist-title { margin: 0; - font-size: 24px; + font-size: $font-size-xl; line-height: 32px; text-align: center; @@ -92,7 +92,7 @@ height: 100%; border-radius: $border-radius-xs; - font-size: 14px; + font-size: $font-size-xs; font-weight: $font-weight-bold; color: $color-white; diff --git a/src/shared/ui/widget-title/widget-title.module.scss b/src/shared/ui/widget-title/widget-title.module.scss index 15a96a0e0..f4414bed6 100644 --- a/src/shared/ui/widget-title/widget-title.module.scss +++ b/src/shared/ui/widget-title/widget-title.module.scss @@ -11,7 +11,7 @@ .small { padding-bottom: 24px; - font-size: 36px; + font-size: $font-size-xxl; line-height: 44px; letter-spacing: 0; } @@ -23,7 +23,7 @@ @include media-tablet { padding-bottom: 16px; - font-size: 36px; + font-size: $font-size-xxl; line-height: 44px; } } @@ -35,7 +35,7 @@ @include media-tablet { padding-bottom: 16px; - font-size: 36px; + font-size: $font-size-xxl; line-height: 44px; } } diff --git a/src/widgets/benefits/ui/benefits/benefits.module.scss b/src/widgets/benefits/ui/benefits/benefits.module.scss index c6556abb8..58c9e8661 100644 --- a/src/widgets/benefits/ui/benefits/benefits.module.scss +++ b/src/widgets/benefits/ui/benefits/benefits.module.scss @@ -13,7 +13,7 @@ border: 1px solid $color-yellow-100; border-radius: $border-radius-s; - font-size: 18px; + font-size: $font-size-m; line-height: 28px; background-color: $color-yellow-50; @@ -66,7 +66,7 @@ border: 1px solid $color-yellow-100; border-radius: $border-radius-s; - font-size: 18px; + font-size: $font-size-m; line-height: 28px; letter-spacing: 0; diff --git a/src/widgets/breadcrumbs/ui/breadcrumbs.module.scss b/src/widgets/breadcrumbs/ui/breadcrumbs.module.scss index bfdd16f70..c01846667 100644 --- a/src/widgets/breadcrumbs/ui/breadcrumbs.module.scss +++ b/src/widgets/breadcrumbs/ui/breadcrumbs.module.scss @@ -2,7 +2,7 @@ ul { display: flex; align-items: flex-start; - font-size: 14px; + font-size: $font-size-xs; list-style: none; } diff --git a/src/widgets/certification/ui/certification.module.scss b/src/widgets/certification/ui/certification.module.scss index 41607667e..a4f161074 100644 --- a/src/widgets/certification/ui/certification.module.scss +++ b/src/widgets/certification/ui/certification.module.scss @@ -6,13 +6,13 @@ align-items: flex-start; justify-content: flex-start; - font-size: 20px; + font-size: $font-size-l; @include media-tablet-large { flex-direction: column; gap: 40px; align-items: flex-start; - font-size: 18px; + font-size: $font-size-m; .paragraph-wrapper { display: flex; @@ -26,10 +26,10 @@ p { padding-top: 5px; - font-size: 18px; + font-size: $font-size-m; @include media-tablet-large { - font-size: 16px; + font-size: $font-size-s; } } } diff --git a/src/widgets/faq/ui/faq.module.scss b/src/widgets/faq/ui/faq.module.scss index 6b4db3a04..6c7f034f6 100644 --- a/src/widgets/faq/ui/faq.module.scss +++ b/src/widgets/faq/ui/faq.module.scss @@ -9,7 +9,7 @@ flex-direction: column; gap: 26px; - font-size: 20px; + font-size: $font-size-l; line-height: 28px; letter-spacing: 0; @@ -25,7 +25,7 @@ } @include media-tablet { - font-size: 18px; + font-size: $font-size-m; font-weight: $font-weight-regular; line-height: 28px; } @@ -33,6 +33,6 @@ } @include media-tablet-large { - font-size: 16px; + font-size: $font-size-s; } } diff --git a/src/widgets/footer/footer.scss b/src/widgets/footer/footer.scss index 7e8750dc1..4c4e5b302 100644 --- a/src/widgets/footer/footer.scss +++ b/src/widgets/footer/footer.scss @@ -23,7 +23,7 @@ align-items: baseline; justify-content: flex-start; - font-size: 18px; + font-size: $font-size-m; font-weight: $font-weight-medium; line-height: 24px; color: $color-gray-100; diff --git a/src/widgets/header/ui/nav-item/nav-item.module.scss b/src/widgets/header/ui/nav-item/nav-item.module.scss index ad24928f5..4999f613f 100644 --- a/src/widgets/header/ui/nav-item/nav-item.module.scss +++ b/src/widgets/header/ui/nav-item/nav-item.module.scss @@ -35,7 +35,7 @@ @extend %transition-all; font-family: $font-primary; - font-size: 16px; + font-size: $font-size-s; font-weight: $font-weight-regular; line-height: 20px; color: $color-gray-900; diff --git a/src/widgets/hero-course/ui/hero-course.module.scss b/src/widgets/hero-course/ui/hero-course.module.scss index b44bfbcb8..366fc3073 100644 --- a/src/widgets/hero-course/ui/hero-course.module.scss +++ b/src/widgets/hero-course/ui/hero-course.module.scss @@ -21,12 +21,12 @@ .hero-subtitle { margin: 0; - font-size: 24px; + font-size: $font-size-xl; font-weight: $font-weight-medium; line-height: 32px; @include media-tablet { - font-size: 20px; + font-size: $font-size-l; line-height: 28px; } } diff --git a/src/widgets/hero-page/ui/hero-page.module.scss b/src/widgets/hero-page/ui/hero-page.module.scss index aa7ff23a9..291b30f07 100644 --- a/src/widgets/hero-page/ui/hero-page.module.scss +++ b/src/widgets/hero-page/ui/hero-page.module.scss @@ -27,7 +27,7 @@ .description-title { @include media-tablet { - font-size: 24px; + font-size: $font-size-xl; line-height: 32px; } } diff --git a/src/widgets/mentors-docs/ui/onboard-links/onboard-links.module.scss b/src/widgets/mentors-docs/ui/onboard-links/onboard-links.module.scss index 2ad3e1be9..478acafa9 100644 --- a/src/widgets/mentors-docs/ui/onboard-links/onboard-links.module.scss +++ b/src/widgets/mentors-docs/ui/onboard-links/onboard-links.module.scss @@ -3,11 +3,11 @@ flex-direction: column; justify-content: flex-start; - font-size: 18px; + font-size: $font-size-m; font-weight: $font-weight-regular; @include media-laptop { - font-size: 16px; + font-size: $font-size-s; line-height: 24px; } } diff --git a/src/widgets/mobile-view/ui/mobile-view.module.scss b/src/widgets/mobile-view/ui/mobile-view.module.scss index f2ddae3c8..91364c50f 100644 --- a/src/widgets/mobile-view/ui/mobile-view.module.scss +++ b/src/widgets/mobile-view/ui/mobile-view.module.scss @@ -14,7 +14,7 @@ } .category-link { - font-size: 24px; + font-size: $font-size-xl; font-weight: $font-weight-bold; } diff --git a/src/widgets/numbers/ui/info-cell/info-cell.module.scss b/src/widgets/numbers/ui/info-cell/info-cell.module.scss index b16b86684..34319b2d1 100644 --- a/src/widgets/numbers/ui/info-cell/info-cell.module.scss +++ b/src/widgets/numbers/ui/info-cell/info-cell.module.scss @@ -46,7 +46,7 @@ letter-spacing: 0.04em; &.medium-font-size { - font-size: 36px; + font-size: $font-size-xxl; font-weight: 700; line-height: 46px; @@ -71,7 +71,7 @@ .description { height: 56px; margin: 0; - font-size: 16px; + font-size: $font-size-s; font-weight: 400; } } diff --git a/src/widgets/partnered/partnered.scss b/src/widgets/partnered/partnered.scss index a11e91633..23993c9f8 100644 --- a/src/widgets/partnered/partnered.scss +++ b/src/widgets/partnered/partnered.scss @@ -4,7 +4,7 @@ flex-direction: column; & .title { - font-size: 36px; + font-size: $font-size-xxl; font-weight: $font-weight-medium; line-height: 44px; color: $color-black; diff --git a/src/widgets/places/ui/place-item/place-item.module.scss b/src/widgets/places/ui/place-item/place-item.module.scss index 15296aeac..62a245be6 100644 --- a/src/widgets/places/ui/place-item/place-item.module.scss +++ b/src/widgets/places/ui/place-item/place-item.module.scss @@ -5,7 +5,7 @@ align-items: center; justify-content: space-between; - font-size: 20px; + font-size: $font-size-l; font-weight: $font-weight-medium; line-height: 28px; color: $color-black; @@ -19,12 +19,12 @@ .divider { display: inline-block; height: 12px; - font-size: 36px; + font-size: $font-size-xxl; color: $color-red; } @include media-tablet { - font-size: 16px; + font-size: $font-size-s; font-weight: $font-weight-regular; line-height: 24px; } diff --git a/src/widgets/principles/ui/principle-card/principle-card.module.scss b/src/widgets/principles/ui/principle-card/principle-card.module.scss index e75e756bd..63a6f9e42 100644 --- a/src/widgets/principles/ui/principle-card/principle-card.module.scss +++ b/src/widgets/principles/ui/principle-card/principle-card.module.scss @@ -48,7 +48,7 @@ grid-column: span 2; - font-size: 18px; + font-size: $font-size-m; font-weight: $font-weight-regular; line-height: 1.4; text-align: left; @@ -107,7 +107,7 @@ padding: 32px 24px; .card-description { - font-size: 16px; + font-size: $font-size-s; line-height: 24px; } } diff --git a/src/widgets/school-menu/ui/school-item/school-item.module.scss b/src/widgets/school-menu/ui/school-item/school-item.module.scss index 3ad42676a..8504e4365 100644 --- a/src/widgets/school-menu/ui/school-item/school-item.module.scss +++ b/src/widgets/school-menu/ui/school-item/school-item.module.scss @@ -53,7 +53,7 @@ align-items: flex-start; .description { - font-size: 12px; + font-size: $font-size-xxs; color: $color-gray-500; } } diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss index 1bd26433e..389dd5fbc 100644 --- a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss +++ b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss @@ -6,7 +6,7 @@ .heading { margin: 0; - font-size: 12px; + font-size: $font-size-xxs; font-weight: $font-weight-medium; text-transform: uppercase; diff --git a/src/widgets/speakers/ui/speakers.module.scss b/src/widgets/speakers/ui/speakers.module.scss index 7ef30d561..28f09ece0 100644 --- a/src/widgets/speakers/ui/speakers.module.scss +++ b/src/widgets/speakers/ui/speakers.module.scss @@ -16,12 +16,12 @@ margin-top: 8px; - font-size: 18px; + font-size: $font-size-m; font-style: normal; line-height: 24px; @include media-tablet { - font-size: 16px; + font-size: $font-size-s; line-height: 20px; } } diff --git a/src/widgets/study-path/ui/stage-card/stage-card.module.scss b/src/widgets/study-path/ui/stage-card/stage-card.module.scss index 21f2feb99..ab127bdc5 100644 --- a/src/widgets/study-path/ui/stage-card/stage-card.module.scss +++ b/src/widgets/study-path/ui/stage-card/stage-card.module.scss @@ -22,7 +22,7 @@ border: 1px solid $color-yellow-100; border-radius: 50%; - font-size: 24px; + font-size: $font-size-xl; color: $color-gray-600; background-color: $color-yellow-50; @@ -30,7 +30,7 @@ @include media-tablet { width: $number-size-tablet; height: $number-size-tablet; - font-size: 16px; + font-size: $font-size-s; } } From c8f50fef03729269af81eac0eba171c1961e3321 Mon Sep 17 00:00:00 2001 From: Yulia Demir Date: Tue, 13 May 2025 08:21:20 +0300 Subject: [PATCH 3/6] refactor: 830 - add const for gars --- .../docs-layout/docs-layout.module.scss | 6 ++-- src/core/styles/_constants.scss | 33 ++++--------------- .../ui/course-card/course-card.module.scss | 4 +-- .../ui/course-item/course-item.module.scss | 2 +- .../mentor-feedback-card.module.scss | 6 ++-- .../ui/trainers-card/trainer-card.module.scss | 2 +- .../ui/date-simple/date-simple.module.scss | 2 +- .../ui/link-custom/link-custom.module.scss | 2 +- src/shared/ui/list/list.module.scss | 2 +- .../short-info-panel.module.scss | 4 +-- .../social-media-item.module.scss | 2 +- .../playlist/playlist.module.scss | 8 ++--- .../video-playlist-with-player.module.scss | 2 +- .../ui/about-community.module.scss | 6 ++-- .../about-course-grid.module.scss | 8 ++--- .../ui/about-course/about-course.module.scss | 2 +- .../ui/angular-topics.module.scss | 2 +- .../benefits/ui/benefits/benefits.module.scss | 10 +++--- .../ui/certification.module.scss | 2 +- .../ui/communication.module.scss | 2 +- .../ui/community-media.module.scss | 4 +-- .../contribute/ui/contribute.module.scss | 8 ++--- .../course-main/course-main.module.scss | 2 +- src/widgets/courses/ui/courses.module.scss | 2 +- src/widgets/events/ui/events.module.scss | 4 +-- src/widgets/faq/ui/faq.module.scss | 2 +- src/widgets/footer/footer.scss | 6 ++-- src/widgets/general/ui/general.module.scss | 4 +-- .../hero-course/ui/hero-course.module.scss | 2 +- .../hero-page/ui/hero-page.module.scss | 2 +- .../ui/mentors-feedback.module.scss | 2 +- .../ui/mentors-register.module.scss | 4 +-- .../ui/mentors-wanted-course.module.scss | 2 +- .../ui/mentors-wanted.module.scss | 2 +- .../activity-card/activity-card.module.scss | 2 +- .../mentor-activities.module.scss | 4 +-- .../ui/mentorship-after-register.module.scss | 10 +++--- .../mentorship-courses.module.scss | 2 +- .../mentorship-details.module.scss | 2 +- src/widgets/merch/ui/merch.module.scss | 2 +- .../mobile-view/ui/mobile-view.module.scss | 2 +- .../ui/info-cell/info-cell.module.scss | 2 +- .../ui/info-grid/info-grid.module.scss | 2 +- .../numbers/ui/numbers/numbers.module.scss | 2 +- src/widgets/partnered/partnered.scss | 2 +- .../principle-card/principle-card.module.scss | 4 +-- .../ui/principles/principles.module.scss | 6 ++-- .../course-module/course-module.module.scss | 2 +- .../required/ui/required/required.module.scss | 2 +- .../requirements/ui/requirements.module.scss | 4 +-- .../ui/school-menu/school-menu.module.scss | 2 +- src/widgets/speakers/ui/speakers.module.scss | 4 +-- .../ui/stage-card/stage-card.module.scss | 6 ++-- .../study-path/ui/stages/stages.module.scss | 2 +- .../ui/study-with-us.module.scss | 12 +++---- src/widgets/support/ui/support.module.scss | 10 +++--- src/widgets/trainers/ui/trainers.module.scss | 2 +- .../ui/training-program.module.scss | 2 +- .../ui/upcoming-courses.module.scss | 2 +- 59 files changed, 113 insertions(+), 132 deletions(-) diff --git a/src/app/docs/components/docs-layout/docs-layout.module.scss b/src/app/docs/components/docs-layout/docs-layout.module.scss index 845f78e3a..4513f4d7d 100644 --- a/src/app/docs/components/docs-layout/docs-layout.module.scss +++ b/src/app/docs/components/docs-layout/docs-layout.module.scss @@ -31,7 +31,7 @@ overflow-y: initial; display: flex; flex-direction: column; - gap: 20px; + gap: $gap-m; height: initial; } @@ -40,7 +40,7 @@ .docs-content { display: flex; flex-direction: column; - gap: 40px; + gap: $gap-xxl; width: 100%; min-width: 0; @@ -59,7 +59,7 @@ align-items: center; @include media-mobile-landscape { - gap: 20px; + gap: $gap-m; } } diff --git a/src/core/styles/_constants.scss b/src/core/styles/_constants.scss index 1465e0579..34737ecf3 100644 --- a/src/core/styles/_constants.scss +++ b/src/core/styles/_constants.scss @@ -112,29 +112,10 @@ $font-size-xl: 24px; $font-size-xxl: 36px; // Gap -$gap-4: 4px; -$gap-5: 5px; -$gap-8: 8px; -$gap-10: 10px; -$gap-12: 12px; -$gap-16: 16px; -$gap-18: 18px; -$gap-19: 19px; -$gap-20: 20px; -$gap-22: 22px; -$gap-24: 24px; -$gap-26: 26px; -$gap-28: 28px; -$gap-30: 30px; -$gap-32: 32px; -$gap-40: 40px; -$gap-48: 48px; -$gap-50: 50px; -$gap-74: 74px; -$gap-64: 64px; -$gap-75: 75px; -$gap-80: 80px; -$gap-100: 100px; -$gap-120: 120px; -$gap-167: 167px; -$gap-176: 176px; +$gap-xs: 8px; +$gap-s: 16px; +$gap-m: 20px; +$gap-l: 24px; +$gap-xl: 32px; +$gap-xxl: 40px; +$gap-xxxl: 50px; diff --git a/src/entities/course/ui/course-card/course-card.module.scss b/src/entities/course/ui/course-card/course-card.module.scss index 9420e0eaf..ff1d659dd 100644 --- a/src/entities/course/ui/course-card/course-card.module.scss +++ b/src/entities/course/ui/course-card/course-card.module.scss @@ -33,7 +33,7 @@ overflow: hidden; display: flex; - gap: 16px; + gap: $gap-s; align-items: center; height: 100%; @@ -57,7 +57,7 @@ .course-info { display: flex; - gap: 16px; + gap: $gap-s; align-items: center; justify-content: space-between; diff --git a/src/entities/course/ui/course-item/course-item.module.scss b/src/entities/course/ui/course-item/course-item.module.scss index a681a2a26..36da21d6a 100644 --- a/src/entities/course/ui/course-item/course-item.module.scss +++ b/src/entities/course/ui/course-item/course-item.module.scss @@ -22,7 +22,7 @@ .course-info { display: flex; flex-direction: column; - gap: 8px; + gap: $gap-xs; width: 100%; diff --git a/src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss b/src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss index a49155612..267b4b38a 100644 --- a/src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss +++ b/src/entities/mentor/ui/mentor-feedback-card/mentor-feedback-card.module.scss @@ -1,7 +1,7 @@ .card { display: flex; flex-direction: column; - gap: 24px; + gap: $gap-l; } .card-wrapper { @@ -36,7 +36,7 @@ .card-info { display: flex; - gap: 24px; + gap: $gap-l; align-items: center; } @@ -59,7 +59,7 @@ .card-content-wrapper { display: flex; flex-direction: column; - gap: 24px; + gap: $gap-l; align-items: flex-start; } diff --git a/src/entities/trainer/ui/trainers-card/trainer-card.module.scss b/src/entities/trainer/ui/trainers-card/trainer-card.module.scss index f968180f7..4fa80df4d 100644 --- a/src/entities/trainer/ui/trainers-card/trainer-card.module.scss +++ b/src/entities/trainer/ui/trainers-card/trainer-card.module.scss @@ -1,6 +1,6 @@ .trainer-card { display: flex; - gap: 24px; + gap: $gap-l; align-items: flex-start; justify-content: space-between; diff --git a/src/shared/ui/date-simple/date-simple.module.scss b/src/shared/ui/date-simple/date-simple.module.scss index db0833f57..181d43db9 100644 --- a/src/shared/ui/date-simple/date-simple.module.scss +++ b/src/shared/ui/date-simple/date-simple.module.scss @@ -1,6 +1,6 @@ .date { display: flex; - gap: 8px; + gap: $gap-xs; align-items: center; justify-content: flex-start; diff --git a/src/shared/ui/link-custom/link-custom.module.scss b/src/shared/ui/link-custom/link-custom.module.scss index c954769cc..777150942 100644 --- a/src/shared/ui/link-custom/link-custom.module.scss +++ b/src/shared/ui/link-custom/link-custom.module.scss @@ -5,7 +5,7 @@ display: flex; flex-flow: row nowrap; - gap: 8px; + gap: $gap-xs; place-content: center center; align-items: center; diff --git a/src/shared/ui/list/list.module.scss b/src/shared/ui/list/list.module.scss index 8f5adc46d..8f75e71da 100644 --- a/src/shared/ui/list/list.module.scss +++ b/src/shared/ui/list/list.module.scss @@ -1,7 +1,7 @@ .list { display: flex; flex-direction: column; - gap: 8px; + gap: $gap-xs; font-size: $font-size-m; line-height: 28px; diff --git a/src/shared/ui/short-info-panel/short-info-panel.module.scss b/src/shared/ui/short-info-panel/short-info-panel.module.scss index 88a3992ef..7e6eff7e3 100644 --- a/src/shared/ui/short-info-panel/short-info-panel.module.scss +++ b/src/shared/ui/short-info-panel/short-info-panel.module.scss @@ -1,7 +1,7 @@ .info { display: flex; flex-direction: column; - gap: 16px; + gap: $gap-s; align-items: flex-start; &.margin { @@ -11,7 +11,7 @@ .additional-info { display: flex; - gap: 8px; + gap: $gap-xs; align-items: center; justify-content: flex-start; diff --git a/src/shared/ui/social-media-item/social-media-item.module.scss b/src/shared/ui/social-media-item/social-media-item.module.scss index a2efd7495..0eea0177c 100644 --- a/src/shared/ui/social-media-item/social-media-item.module.scss +++ b/src/shared/ui/social-media-item/social-media-item.module.scss @@ -3,7 +3,7 @@ display: flex; flex-direction: column; - gap: 8px; + gap: $gap-xs; align-items: center; justify-content: center; diff --git a/src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss b/src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss index 787056204..d4c2c6c8b 100644 --- a/src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss +++ b/src/shared/ui/video-playlist-with-player/playlist/playlist.module.scss @@ -1,7 +1,7 @@ .playlist { display: flex; flex-direction: column; - gap: 8px; + gap: $gap-xs; } .videos-container { @@ -10,12 +10,12 @@ overflow-y: scroll; display: flex; flex-direction: column; - gap: 8px; + gap: $gap-xs; @include media-tablet-large { overflow: scroll auto; flex-direction: row; - gap: 24px; + gap: $gap-l; } } @@ -35,7 +35,7 @@ display: flex; flex-direction: column; - gap: 8px; + gap: $gap-xs; margin-right: 5px; padding: 16px; diff --git a/src/shared/ui/video-playlist-with-player/video-playlist-with-player.module.scss b/src/shared/ui/video-playlist-with-player/video-playlist-with-player.module.scss index e65356e39..09ba6f3a7 100644 --- a/src/shared/ui/video-playlist-with-player/video-playlist-with-player.module.scss +++ b/src/shared/ui/video-playlist-with-player/video-playlist-with-player.module.scss @@ -1,7 +1,7 @@ .video-player-container { position: relative; display: flex; - gap: 24px; + gap: $gap-l; @include media-tablet-large { flex-direction: column; diff --git a/src/widgets/about-community/ui/about-community.module.scss b/src/widgets/about-community/ui/about-community.module.scss index 568541246..82e5e5e59 100644 --- a/src/widgets/about-community/ui/about-community.module.scss +++ b/src/widgets/about-community/ui/about-community.module.scss @@ -5,7 +5,7 @@ min-width: 640px; @include media-laptop { - gap: 20px; + gap: $gap-m; min-width: 400px; } @@ -25,10 +25,10 @@ } @include media-laptop { - gap: 50px; + gap: $gap-xxxl; } @include media-tablet-large { - gap: 32px; + gap: $gap-xl; } } diff --git a/src/widgets/about-course/ui/about-course-grid/about-course-grid.module.scss b/src/widgets/about-course/ui/about-course-grid/about-course-grid.module.scss index 91ae08aa3..bf312978a 100644 --- a/src/widgets/about-course/ui/about-course-grid/about-course-grid.module.scss +++ b/src/widgets/about-course/ui/about-course-grid/about-course-grid.module.scss @@ -4,7 +4,7 @@ 'a a b' 'c d e'; grid-template-columns: repeat(3, 1fr); - gap: 32px 30px; + gap: $gap-xl 30px; margin-bottom: 16px; @@ -22,7 +22,7 @@ .item-title { display: flex; - gap: 16px; + gap: $gap-s; align-items: center; .grid-icon { @@ -57,10 +57,10 @@ @include media-laptop { display: flex; flex-direction: column; - gap: 24px; + gap: $gap-l; } @include media-tablet { - gap: 16px; + gap: $gap-s; } } diff --git a/src/widgets/about-course/ui/about-course/about-course.module.scss b/src/widgets/about-course/ui/about-course/about-course.module.scss index 104b7f88b..bc7e5dad0 100644 --- a/src/widgets/about-course/ui/about-course/about-course.module.scss +++ b/src/widgets/about-course/ui/about-course/about-course.module.scss @@ -1,5 +1,5 @@ .about-course { display: flex; flex-direction: column; - gap: 24px; + gap: $gap-l; } diff --git a/src/widgets/angular-topics/ui/angular-topics.module.scss b/src/widgets/angular-topics/ui/angular-topics.module.scss index 862f37250..58c29c062 100644 --- a/src/widgets/angular-topics/ui/angular-topics.module.scss +++ b/src/widgets/angular-topics/ui/angular-topics.module.scss @@ -2,6 +2,6 @@ .angular-topics-content { display: flex; flex-direction: column; - gap: 20px; + gap: $gap-m; } } diff --git a/src/widgets/benefits/ui/benefits/benefits.module.scss b/src/widgets/benefits/ui/benefits/benefits.module.scss index 58c9e8661..988dd1f3c 100644 --- a/src/widgets/benefits/ui/benefits/benefits.module.scss +++ b/src/widgets/benefits/ui/benefits/benefits.module.scss @@ -38,11 +38,11 @@ @include media-laptop { display: flex; flex-direction: column; - gap: 24px; + gap: $gap-l; } @include media-tablet { - gap: 16px; + gap: $gap-s; } } @@ -58,7 +58,7 @@ .flex-item { display: flex; - gap: 16px; + gap: $gap-s; align-items: center; width: 100%; @@ -91,11 +91,11 @@ @include media-laptop { display: flex; - gap: 24px; + gap: $gap-l; } @include media-tablet { flex-direction: column; - gap: 16px; + gap: $gap-s; } } diff --git a/src/widgets/certification/ui/certification.module.scss b/src/widgets/certification/ui/certification.module.scss index a4f161074..afedf719d 100644 --- a/src/widgets/certification/ui/certification.module.scss +++ b/src/widgets/certification/ui/certification.module.scss @@ -10,7 +10,7 @@ @include media-tablet-large { flex-direction: column; - gap: 40px; + gap: $gap-xxl; align-items: flex-start; font-size: $font-size-m; diff --git a/src/widgets/communication/ui/communication.module.scss b/src/widgets/communication/ui/communication.module.scss index 789f5f7f4..aecfd9b7e 100644 --- a/src/widgets/communication/ui/communication.module.scss +++ b/src/widgets/communication/ui/communication.module.scss @@ -10,7 +10,7 @@ @include media-tablet-large { flex-direction: column; - gap: 40px; + gap: $gap-xxl; align-items: flex-start; } } diff --git a/src/widgets/community-media/ui/community-media.module.scss b/src/widgets/community-media/ui/community-media.module.scss index 24b913dfb..df80e3c05 100644 --- a/src/widgets/community-media/ui/community-media.module.scss +++ b/src/widgets/community-media/ui/community-media.module.scss @@ -1,10 +1,10 @@ .community-media-content { @include media-laptop { - gap: 50px; + gap: $gap-xxxl; } @include media-tablet-large { - gap: 16px; + gap: $gap-s; } } diff --git a/src/widgets/contribute/ui/contribute.module.scss b/src/widgets/contribute/ui/contribute.module.scss index 6228433a0..ec35f1a19 100644 --- a/src/widgets/contribute/ui/contribute.module.scss +++ b/src/widgets/contribute/ui/contribute.module.scss @@ -1,7 +1,7 @@ .contribute { display: flex; flex-direction: column; - gap: 24px; + gap: $gap-l; justify-content: space-between; @include media-laptop { @@ -33,7 +33,7 @@ } .general { - gap: 50px; + gap: $gap-xxxl; width: 100%; @include media-tablet-large { @@ -43,7 +43,7 @@ .contribute-options { display: flex; - gap: 24px; + gap: $gap-l; align-items: center; justify-content: space-between; @@ -58,7 +58,7 @@ .option-item { display: flex; flex-direction: column; - gap: 16px; + gap: $gap-s; max-width: 500px; @include media-laptop { diff --git a/src/widgets/course-main/course-main.module.scss b/src/widgets/course-main/course-main.module.scss index 0785e9d10..ec324f5dc 100644 --- a/src/widgets/course-main/course-main.module.scss +++ b/src/widgets/course-main/course-main.module.scss @@ -4,7 +4,7 @@ .content { display: flex; - gap: 40px; + gap: $gap-xxl; align-items: center; justify-content: flex-start; diff --git a/src/widgets/courses/ui/courses.module.scss b/src/widgets/courses/ui/courses.module.scss index a2a857b84..4c9aeff92 100644 --- a/src/widgets/courses/ui/courses.module.scss +++ b/src/widgets/courses/ui/courses.module.scss @@ -1,7 +1,7 @@ .courses-content { display: flex; flex-direction: column; - gap: 24px; + gap: $gap-l; @include media-laptop { width: 100%; diff --git a/src/widgets/events/ui/events.module.scss b/src/widgets/events/ui/events.module.scss index e53cbc05f..1fa274fa9 100644 --- a/src/widgets/events/ui/events.module.scss +++ b/src/widgets/events/ui/events.module.scss @@ -1,13 +1,13 @@ .events { &-content { display: flex; - gap: 24px; + gap: $gap-l; align-items: flex-start; justify-content: space-between; .cards { display: flex; - gap: 16px; + gap: $gap-s; align-items: center; justify-content: space-between; diff --git a/src/widgets/faq/ui/faq.module.scss b/src/widgets/faq/ui/faq.module.scss index 6c7f034f6..714920617 100644 --- a/src/widgets/faq/ui/faq.module.scss +++ b/src/widgets/faq/ui/faq.module.scss @@ -16,7 +16,7 @@ .list { display: flex; flex-direction: column; - gap: 20px; + gap: $gap-m; .question { display: block; diff --git a/src/widgets/footer/footer.scss b/src/widgets/footer/footer.scss index 4c4e5b302..a0254feb9 100644 --- a/src/widgets/footer/footer.scss +++ b/src/widgets/footer/footer.scss @@ -19,7 +19,7 @@ .about-list { display: flex; flex-direction: column; - gap: 24px; + gap: $gap-l; align-items: baseline; justify-content: flex-start; @@ -53,10 +53,10 @@ } @include media-laptop-medium { - gap: 50px; + gap: $gap-xxxl; & .left { - gap: 50px; + gap: $gap-xxxl; } } diff --git a/src/widgets/general/ui/general.module.scss b/src/widgets/general/ui/general.module.scss index 5e008adb5..a4da952b7 100644 --- a/src/widgets/general/ui/general.module.scss +++ b/src/widgets/general/ui/general.module.scss @@ -2,7 +2,7 @@ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, max-content); - column-gap: 24px; + column-gap: $gap-l; .title { grid-column: 1 / -1; @@ -11,7 +11,7 @@ .info-block { display: flex; flex-direction: column; - gap: 16px; + gap: $gap-s; max-width: 380px; } diff --git a/src/widgets/hero-course/ui/hero-course.module.scss b/src/widgets/hero-course/ui/hero-course.module.scss index 366fc3073..62fb06253 100644 --- a/src/widgets/hero-course/ui/hero-course.module.scss +++ b/src/widgets/hero-course/ui/hero-course.module.scss @@ -4,7 +4,7 @@ .hero-course-content { display: flex; - gap: 40px; + gap: $gap-xxl; align-items: center; justify-content: flex-start; diff --git a/src/widgets/hero-page/ui/hero-page.module.scss b/src/widgets/hero-page/ui/hero-page.module.scss index 291b30f07..2da65c7b1 100644 --- a/src/widgets/hero-page/ui/hero-page.module.scss +++ b/src/widgets/hero-page/ui/hero-page.module.scss @@ -1,5 +1,5 @@ .hero-page { - gap: 16px; + gap: $gap-s; min-height: 440px; background: $color-yellow; diff --git a/src/widgets/mentors-feedback/ui/mentors-feedback.module.scss b/src/widgets/mentors-feedback/ui/mentors-feedback.module.scss index 7d117145d..11b6cc03e 100644 --- a/src/widgets/mentors-feedback/ui/mentors-feedback.module.scss +++ b/src/widgets/mentors-feedback/ui/mentors-feedback.module.scss @@ -1,7 +1,7 @@ .mentors-feedback-wrapper { display: flex; flex-direction: column; - gap: 32px; + gap: $gap-xl; } .mentors-feedback-slider { diff --git a/src/widgets/mentors-register/ui/mentors-register.module.scss b/src/widgets/mentors-register/ui/mentors-register.module.scss index 47cb7326a..c7b907d47 100644 --- a/src/widgets/mentors-register/ui/mentors-register.module.scss +++ b/src/widgets/mentors-register/ui/mentors-register.module.scss @@ -10,12 +10,12 @@ gap: 176px; @include media-laptop { - gap: 50px; + gap: $gap-xxxl; } @include media-tablet-large { flex-direction: column; - gap: 32px; + gap: $gap-xl; } } } diff --git a/src/widgets/mentors-wanted-course/ui/mentors-wanted-course.module.scss b/src/widgets/mentors-wanted-course/ui/mentors-wanted-course.module.scss index e0b735c6e..fd8a524b5 100644 --- a/src/widgets/mentors-wanted-course/ui/mentors-wanted-course.module.scss +++ b/src/widgets/mentors-wanted-course/ui/mentors-wanted-course.module.scss @@ -25,7 +25,7 @@ } @include media-tablet { - gap: 40px; + gap: $gap-xxl; } } } diff --git a/src/widgets/mentors-wanted/ui/mentors-wanted.module.scss b/src/widgets/mentors-wanted/ui/mentors-wanted.module.scss index 5cfa38d09..3fd330e72 100644 --- a/src/widgets/mentors-wanted/ui/mentors-wanted.module.scss +++ b/src/widgets/mentors-wanted/ui/mentors-wanted.module.scss @@ -18,7 +18,7 @@ } @include media-tablet-large { - gap: 40px; + gap: $gap-xxl; } } } diff --git a/src/widgets/mentorship-activities/ui/activity-card/activity-card.module.scss b/src/widgets/mentorship-activities/ui/activity-card/activity-card.module.scss index 99d30ee13..98f0ab921 100644 --- a/src/widgets/mentorship-activities/ui/activity-card/activity-card.module.scss +++ b/src/widgets/mentorship-activities/ui/activity-card/activity-card.module.scss @@ -1,7 +1,7 @@ .activity-card { display: flex; flex-direction: column; - gap: 16px; + gap: $gap-s; max-width: 624px; padding: 32px; diff --git a/src/widgets/mentorship-activities/ui/mentor-activities/mentor-activities.module.scss b/src/widgets/mentorship-activities/ui/mentor-activities/mentor-activities.module.scss index 7f86b67be..15cc15ded 100644 --- a/src/widgets/mentorship-activities/ui/mentor-activities/mentor-activities.module.scss +++ b/src/widgets/mentorship-activities/ui/mentor-activities/mentor-activities.module.scss @@ -2,14 +2,14 @@ .activity-cards { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 32px; + gap: $gap-xl; @include media-tablet { grid-template-columns: 1fr; } @include media-tablet { - gap: 16px; + gap: $gap-s; } } } diff --git a/src/widgets/mentorship-after-register/ui/mentorship-after-register.module.scss b/src/widgets/mentorship-after-register/ui/mentorship-after-register.module.scss index f7fe49f45..db36828ef 100644 --- a/src/widgets/mentorship-after-register/ui/mentorship-after-register.module.scss +++ b/src/widgets/mentorship-after-register/ui/mentorship-after-register.module.scss @@ -1,17 +1,17 @@ .mentors-after-register { display: flex; flex-direction: column; - gap: 20px; + gap: $gap-m; .steps { display: flex; flex-direction: column; - gap: 40px; + gap: $gap-xxl; .step { display: flex; flex-direction: column; - gap: 16px; + gap: $gap-s; p { margin: 0; @@ -22,12 +22,12 @@ } @include media-tablet { - gap: 8px; + gap: $gap-xs; } } @include media-tablet { - gap: 24px; + gap: $gap-l; } } } diff --git a/src/widgets/mentorship-courses/mentorship-courses.module.scss b/src/widgets/mentorship-courses/mentorship-courses.module.scss index acb44b4dd..69e857967 100644 --- a/src/widgets/mentorship-courses/mentorship-courses.module.scss +++ b/src/widgets/mentorship-courses/mentorship-courses.module.scss @@ -5,7 +5,7 @@ .courses-list { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 32px; + gap: $gap-xl; .mentorship-course-card { width: 100%; diff --git a/src/widgets/mentorship-details/mentorship-details.module.scss b/src/widgets/mentorship-details/mentorship-details.module.scss index bae0ecf84..8359e1776 100644 --- a/src/widgets/mentorship-details/mentorship-details.module.scss +++ b/src/widgets/mentorship-details/mentorship-details.module.scss @@ -4,7 +4,7 @@ .details-content { display: flex; flex-direction: column; - gap: 40px; + gap: $gap-xxl; justify-content: center; } } diff --git a/src/widgets/merch/ui/merch.module.scss b/src/widgets/merch/ui/merch.module.scss index 5cae2f7b8..adc99c6c1 100644 --- a/src/widgets/merch/ui/merch.module.scss +++ b/src/widgets/merch/ui/merch.module.scss @@ -1,5 +1,5 @@ .merch { - gap: 50px; + gap: $gap-xxxl; .info { width: 600px; diff --git a/src/widgets/mobile-view/ui/mobile-view.module.scss b/src/widgets/mobile-view/ui/mobile-view.module.scss index 91364c50f..bfb7949ad 100644 --- a/src/widgets/mobile-view/ui/mobile-view.module.scss +++ b/src/widgets/mobile-view/ui/mobile-view.module.scss @@ -2,7 +2,7 @@ display: none; flex-direction: column; flex-grow: 1; - gap: 16px; + gap: $gap-s; align-items: baseline; justify-content: flex-start; diff --git a/src/widgets/numbers/ui/info-cell/info-cell.module.scss b/src/widgets/numbers/ui/info-cell/info-cell.module.scss index 34319b2d1..38cce2c59 100644 --- a/src/widgets/numbers/ui/info-cell/info-cell.module.scss +++ b/src/widgets/numbers/ui/info-cell/info-cell.module.scss @@ -4,7 +4,7 @@ width: 100%; .with-gap { - gap: 16px; + gap: $gap-s; } .large-card-size { diff --git a/src/widgets/numbers/ui/info-grid/info-grid.module.scss b/src/widgets/numbers/ui/info-grid/info-grid.module.scss index f4c47a9cc..41f04ebb9 100644 --- a/src/widgets/numbers/ui/info-grid/info-grid.module.scss +++ b/src/widgets/numbers/ui/info-grid/info-grid.module.scss @@ -41,7 +41,7 @@ @include media-tablet { grid-auto-flow: row; - gap: 24px; + gap: $gap-l; :nth-child(n + 3) { grid-row: 2 / 3; diff --git a/src/widgets/numbers/ui/numbers/numbers.module.scss b/src/widgets/numbers/ui/numbers/numbers.module.scss index 8bf282999..bea7969d3 100644 --- a/src/widgets/numbers/ui/numbers/numbers.module.scss +++ b/src/widgets/numbers/ui/numbers/numbers.module.scss @@ -3,7 +3,7 @@ display: flex; flex-direction: column; - gap: 24px; + gap: $gap-l; align-items: center; justify-content: center; diff --git a/src/widgets/partnered/partnered.scss b/src/widgets/partnered/partnered.scss index 23993c9f8..9f4f8d68e 100644 --- a/src/widgets/partnered/partnered.scss +++ b/src/widgets/partnered/partnered.scss @@ -34,7 +34,7 @@ } @include media-tablet { - row-gap: 16px; + row-gap: $gap-s; padding: 16px 0; } } diff --git a/src/widgets/principles/ui/principle-card/principle-card.module.scss b/src/widgets/principles/ui/principle-card/principle-card.module.scss index 63a6f9e42..4c68e4a9e 100644 --- a/src/widgets/principles/ui/principle-card/principle-card.module.scss +++ b/src/widgets/principles/ui/principle-card/principle-card.module.scss @@ -6,7 +6,7 @@ overflow: hidden; display: grid; grid-template-columns: max-content 1fr; - column-gap: 16px; + column-gap: $gap-s; width: 100%; padding: 24px; @@ -32,7 +32,7 @@ .card-header { display: flex; - gap: 16px; + gap: $gap-s; align-items: center; min-height: 80px; diff --git a/src/widgets/principles/ui/principles/principles.module.scss b/src/widgets/principles/ui/principles/principles.module.scss index 4de4dff73..e63a60dda 100644 --- a/src/widgets/principles/ui/principles/principles.module.scss +++ b/src/widgets/principles/ui/principles/principles.module.scss @@ -1,16 +1,16 @@ .principles { .cards { - gap: 32px; + gap: $gap-xl; align-items: stretch; margin-top: 24px; @include media-laptop { - gap: 16px; + gap: $gap-s; width: 100%; } @include media-tablet { - gap: 8px; + gap: $gap-xs; } } } diff --git a/src/widgets/required/ui/course-module/course-module.module.scss b/src/widgets/required/ui/course-module/course-module.module.scss index 46dc5fe81..29f8af438 100644 --- a/src/widgets/required/ui/course-module/course-module.module.scss +++ b/src/widgets/required/ui/course-module/course-module.module.scss @@ -1,5 +1,5 @@ .course-module-element { display: flex; flex-direction: column; - gap: 8px; + gap: $gap-xs; } diff --git a/src/widgets/required/ui/required/required.module.scss b/src/widgets/required/ui/required/required.module.scss index 0b72380ce..033d84402 100644 --- a/src/widgets/required/ui/required/required.module.scss +++ b/src/widgets/required/ui/required/required.module.scss @@ -20,7 +20,7 @@ @include media-laptop-medium { flex-direction: column; - gap: 32px; + gap: $gap-xl; } } } diff --git a/src/widgets/requirements/ui/requirements.module.scss b/src/widgets/requirements/ui/requirements.module.scss index 0c92490bf..fd39f29a7 100644 --- a/src/widgets/requirements/ui/requirements.module.scss +++ b/src/widgets/requirements/ui/requirements.module.scss @@ -1,7 +1,7 @@ .requirements { display: flex; flex-direction: column; - gap: 32px; + gap: $gap-xl; } .title { @@ -10,7 +10,7 @@ .requirements-info { display: flex; - gap: 32px; + gap: $gap-xl; @include media-tablet-large { flex-direction: column; diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss index 389dd5fbc..f35da77a0 100644 --- a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss +++ b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss @@ -1,7 +1,7 @@ .school-menu { display: flex; flex-direction: column; - gap: 16px; + gap: $gap-s; color: $color-gray-100; .heading { diff --git a/src/widgets/speakers/ui/speakers.module.scss b/src/widgets/speakers/ui/speakers.module.scss index 28f09ece0..a2ec081b3 100644 --- a/src/widgets/speakers/ui/speakers.module.scss +++ b/src/widgets/speakers/ui/speakers.module.scss @@ -1,6 +1,6 @@ .speakers { display: flex; - gap: 50px; + gap: $gap-xxxl; background-color: $color-gray-100; .info { @@ -12,7 +12,7 @@ .email-wrapper { display: flex; - gap: 8px; + gap: $gap-xs; margin-top: 8px; diff --git a/src/widgets/study-path/ui/stage-card/stage-card.module.scss b/src/widgets/study-path/ui/stage-card/stage-card.module.scss index ab127bdc5..9748deef9 100644 --- a/src/widgets/study-path/ui/stage-card/stage-card.module.scss +++ b/src/widgets/study-path/ui/stage-card/stage-card.module.scss @@ -1,6 +1,6 @@ .stage-card { display: flex; - gap: 40px; + gap: $gap-xxl; .stage-number { $number-size: 80px; @@ -49,7 +49,7 @@ display: flex; flex: 1 1 40%; flex-direction: column; - gap: 8px; + gap: $gap-xs; max-width: 600px; @@ -103,6 +103,6 @@ } @include media-tablet { - gap: 16px; + gap: $gap-s; } } diff --git a/src/widgets/study-path/ui/stages/stages.module.scss b/src/widgets/study-path/ui/stages/stages.module.scss index 9deaa69df..0cea1b896 100644 --- a/src/widgets/study-path/ui/stages/stages.module.scss +++ b/src/widgets/study-path/ui/stages/stages.module.scss @@ -1,7 +1,7 @@ .stages { display: flex; flex-direction: column; - gap: 32px; + gap: $gap-xl; padding-top: 40px; @include media-tablet-large { diff --git a/src/widgets/study-with-us/ui/study-with-us.module.scss b/src/widgets/study-with-us/ui/study-with-us.module.scss index 5cf8ec72a..e5c8d24e8 100644 --- a/src/widgets/study-with-us/ui/study-with-us.module.scss +++ b/src/widgets/study-with-us/ui/study-with-us.module.scss @@ -1,7 +1,7 @@ .study-with-us { display: flex; flex-direction: column; - gap: 24px; + gap: $gap-l; @include media-laptop { gap: 48px; @@ -9,10 +9,10 @@ } .study-wrap { - gap: 50px; + gap: $gap-xxxl; @include media-tablet-large { - gap: 40px; + gap: $gap-xxl; } } @@ -42,13 +42,13 @@ .study-options { display: flex; flex-direction: row; - gap: 24px; + gap: $gap-l; align-items: flex-start; justify-content: space-between; @include media-tablet-large { flex-direction: column; - gap: 32px; + gap: $gap-xl; } @include media-tablet { @@ -59,7 +59,7 @@ .option-item { display: flex; flex-direction: column; - gap: 16px; + gap: $gap-s; max-width: 380px; @include media-laptop { diff --git a/src/widgets/support/ui/support.module.scss b/src/widgets/support/ui/support.module.scss index e871294c4..b51576285 100644 --- a/src/widgets/support/ui/support.module.scss +++ b/src/widgets/support/ui/support.module.scss @@ -2,7 +2,7 @@ background-color: $color-gray-100; .support-content { - gap: 50px; + gap: $gap-xxxl; .support-info { width: 640px; @@ -37,7 +37,7 @@ .donate-options { display: flex; flex-wrap: wrap; - gap: 16px; + gap: $gap-s; justify-content: space-between; margin-top: 24px; @@ -45,10 +45,10 @@ .donate-item { display: flex; flex-direction: column; - gap: 24px; + gap: $gap-l; @include media-tablet { - gap: 16px; + gap: $gap-s; } } @@ -58,7 +58,7 @@ } @include media-tablet-large { - gap: 40px; + gap: $gap-xxl; } } } diff --git a/src/widgets/trainers/ui/trainers.module.scss b/src/widgets/trainers/ui/trainers.module.scss index a5b8042e9..f3bc70463 100644 --- a/src/widgets/trainers/ui/trainers.module.scss +++ b/src/widgets/trainers/ui/trainers.module.scss @@ -5,7 +5,7 @@ .trainers-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); - gap: 32px; + gap: $gap-xl; @include media-tablet-large { grid-template-columns: 1fr; diff --git a/src/widgets/training-program/ui/training-program.module.scss b/src/widgets/training-program/ui/training-program.module.scss index 1c13ccdda..66c7f2e01 100644 --- a/src/widgets/training-program/ui/training-program.module.scss +++ b/src/widgets/training-program/ui/training-program.module.scss @@ -60,7 +60,7 @@ } @include media-tablet-large { - gap: 40px; + gap: $gap-xxl; align-items: flex-start; } } diff --git a/src/widgets/upcoming-courses/ui/upcoming-courses.module.scss b/src/widgets/upcoming-courses/ui/upcoming-courses.module.scss index e1862b7de..e264c2ae3 100644 --- a/src/widgets/upcoming-courses/ui/upcoming-courses.module.scss +++ b/src/widgets/upcoming-courses/ui/upcoming-courses.module.scss @@ -16,7 +16,7 @@ .course-list { display: flex; flex-direction: column; - gap: 24px; + gap: $gap-l; align-items: flex-start; justify-content: space-between; From 13fc61222619db28328b0b83e7f185f77adfc766 Mon Sep 17 00:00:00 2001 From: Yulia Demir Date: Mon, 16 Jun 2025 21:30:01 +0300 Subject: [PATCH 4/6] feat: 830 - add constants for z indexes --- src/core/styles/_constants.scss | 12 ++++++++++-- .../course/ui/course-card/course-card.module.scss | 4 ++-- src/shared/ui/link-custom/link-custom.module.scss | 2 +- src/shared/ui/modal/modal.module.scss | 2 +- src/widgets/header/header.module.scss | 2 +- src/widgets/header/ui/burger/burger.module.scss | 2 +- .../header/ui/dropdown/dropdown-wrapper.module.scss | 2 +- src/widgets/header/ui/nav-item/nav-item.module.scss | 4 ++-- src/widgets/numbers/ui/numbers/numbers.module.scss | 2 +- .../ui/principle-card/principle-card.module.scss | 2 +- 10 files changed, 21 insertions(+), 13 deletions(-) diff --git a/src/core/styles/_constants.scss b/src/core/styles/_constants.scss index 8a47f67e9..dd59a67f6 100644 --- a/src/core/styles/_constants.scss +++ b/src/core/styles/_constants.scss @@ -97,11 +97,12 @@ $ease-in-cubic: cubic-bezier(0.32, 0, 0.67, 0); $standard-decelerate: cubic-bezier(0, 0, 0, 1); // Border radius +$border-radius-xxs: 4px; $border-radius-xs: 8px; $border-radius-s: 12px; $border-radius-m: 16px; $border-radius-l: 20px; -$border-radius-xxxl: 999px; +$border-radius-max: 999px; // Font sizes $font-size-xxs: 12px; @@ -112,7 +113,7 @@ $font-size-l: 20px; $font-size-xl: 24px; $font-size-xxl: 36px; -// Gap +// Standard gap $gap-xs: 8px; $gap-s: 16px; $gap-m: 20px; @@ -120,3 +121,10 @@ $gap-l: 24px; $gap-xl: 32px; $gap-xxl: 40px; $gap-xxxl: 50px; + +// Z-indexes +$z-index-negative: -1; +$z-index-s: 1; +$z-index-m: 2; +$z-index-l: 10; +$z-index-max: 100; diff --git a/src/entities/course/ui/course-card/course-card.module.scss b/src/entities/course/ui/course-card/course-card.module.scss index ff1d659dd..6edbaa14c 100644 --- a/src/entities/course/ui/course-card/course-card.module.scss +++ b/src/entities/course/ui/course-card/course-card.module.scss @@ -16,7 +16,7 @@ content: ''; position: absolute; - z-index: -1; + z-index: $z-index-negative; inset: 0; border-radius: inherit; @@ -143,7 +143,7 @@ } .course-title { - z-index: 2; + z-index: $z-index-m; } @include media-hover { diff --git a/src/shared/ui/link-custom/link-custom.module.scss b/src/shared/ui/link-custom/link-custom.module.scss index 777150942..1580ae5a5 100644 --- a/src/shared/ui/link-custom/link-custom.module.scss +++ b/src/shared/ui/link-custom/link-custom.module.scss @@ -61,7 +61,7 @@ width: max-content; height: 36px; padding: 10px 12px; - border-radius: $border-radius-xxxl; + border-radius: $border-radius-max; font-size: $font-size-xs; line-height: 16px; diff --git a/src/shared/ui/modal/modal.module.scss b/src/shared/ui/modal/modal.module.scss index 1bc6ff87f..d9562fadf 100644 --- a/src/shared/ui/modal/modal.module.scss +++ b/src/shared/ui/modal/modal.module.scss @@ -117,7 +117,7 @@ padding: 16px; border: none; - border-radius: $border-radius-xxxl; + border-radius: $border-radius-max; font-size: $font-size-xl; diff --git a/src/widgets/header/header.module.scss b/src/widgets/header/header.module.scss index 8e37e3b45..996de14df 100644 --- a/src/widgets/header/header.module.scss +++ b/src/widgets/header/header.module.scss @@ -1,6 +1,6 @@ .header { position: sticky; - z-index: 100; + z-index: $z-index-max; top: 0; left: 0; } diff --git a/src/widgets/header/ui/burger/burger.module.scss b/src/widgets/header/ui/burger/burger.module.scss index a947d6601..812cd6b22 100644 --- a/src/widgets/header/ui/burger/burger.module.scss +++ b/src/widgets/header/ui/burger/burger.module.scss @@ -66,7 +66,7 @@ } @include media-tablet-large { - z-index: 10; + z-index: $z-index-l; display: block; } } diff --git a/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss b/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss index cacf08c66..ca4651eed 100644 --- a/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss +++ b/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss @@ -7,7 +7,7 @@ pointer-events: none; position: absolute; - z-index: 1; + z-index: $z-index-s; top: 64px; left: 0; transform: translateY(-10px); diff --git a/src/widgets/header/ui/nav-item/nav-item.module.scss b/src/widgets/header/ui/nav-item/nav-item.module.scss index d1fa279ab..6a81ccf70 100644 --- a/src/widgets/header/ui/nav-item/nav-item.module.scss +++ b/src/widgets/header/ui/nav-item/nav-item.module.scss @@ -19,7 +19,7 @@ background: none; &:focus-visible { - z-index: 100; + z-index: $z-index-max; border-radius: 2px; @@ -34,7 +34,7 @@ content: ''; position: absolute; - z-index: 100; + z-index: $z-index-max; bottom: 1px; left: 0; transform: scaleX(0); diff --git a/src/widgets/numbers/ui/numbers/numbers.module.scss b/src/widgets/numbers/ui/numbers/numbers.module.scss index bea7969d3..38921746b 100644 --- a/src/widgets/numbers/ui/numbers/numbers.module.scss +++ b/src/widgets/numbers/ui/numbers/numbers.module.scss @@ -35,7 +35,7 @@ .numbers-map { position: absolute; - z-index: -1; + z-index: $z-index-negative; top: -56px; left: 0; diff --git a/src/widgets/principles/ui/principle-card/principle-card.module.scss b/src/widgets/principles/ui/principle-card/principle-card.module.scss index 4c68e4a9e..74569d9a7 100644 --- a/src/widgets/principles/ui/principle-card/principle-card.module.scss +++ b/src/widgets/principles/ui/principle-card/principle-card.module.scss @@ -44,7 +44,7 @@ } .card-description { - z-index: 1; + z-index: $z-index-s; grid-column: span 2; From edb65aac64e11caac0b204d5a396a01605eb7bea Mon Sep 17 00:00:00 2001 From: Yulia Demir Date: Sun, 22 Jun 2025 13:58:38 +0300 Subject: [PATCH 5/6] fix: 830 - add consts for some missing values --- src/shared/ui/paragraph/paragraph.module.scss | 2 +- .../about-course-section.module.scss | 8 ++++---- .../about-course/ui/grid-item/grid-item.module.scss | 4 ++-- src/widgets/header/header.module.scss | 2 +- .../header/ui/dropdown/dropdown-wrapper.module.scss | 4 ++-- src/widgets/header/ui/nav-item/nav-item.module.scss | 2 +- .../learning-path-stage-item.module.scss | 10 +++++----- .../learning-path-stages.module.scss | 2 +- .../media-text-block/ui/media-text-block.module.scss | 6 +++--- .../ui/mobile-nav-item/mobile-nav-item.module.scss | 4 ++-- .../school-menu/ui/school-item/school-item.module.scss | 2 +- .../school-menu/ui/school-menu/school-menu.module.scss | 2 +- 12 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/shared/ui/paragraph/paragraph.module.scss b/src/shared/ui/paragraph/paragraph.module.scss index 94133781c..cd7fd2e6c 100644 --- a/src/shared/ui/paragraph/paragraph.module.scss +++ b/src/shared/ui/paragraph/paragraph.module.scss @@ -16,7 +16,7 @@ } &.small-font-size { - font-size: 14px; + font-size: $font-size-xs; font-weight: $font-weight-regular; line-height: 24px; } diff --git a/src/widgets/about-course/ui/about-course-section/about-course-section.module.scss b/src/widgets/about-course/ui/about-course-section/about-course-section.module.scss index 6eebfde5f..c83b4fe38 100644 --- a/src/widgets/about-course/ui/about-course-section/about-course-section.module.scss +++ b/src/widgets/about-course/ui/about-course-section/about-course-section.module.scss @@ -1,7 +1,7 @@ .about-course { display: flex; flex-direction: column; - gap: 24px; + gap: $gap-l; .about-course-grid { display: grid; @@ -9,18 +9,18 @@ 'a a b' 'c d e'; grid-template-columns: repeat(3, 1fr); - gap: 32px 30px; + gap: $gap-xl 30px; margin-bottom: 16px; @include media-laptop { display: flex; flex-direction: column; - gap: 24px; + gap: $gap-l; } @include media-tablet { - gap: 16px; + gap: $gap-s; } } } diff --git a/src/widgets/about-course/ui/grid-item/grid-item.module.scss b/src/widgets/about-course/ui/grid-item/grid-item.module.scss index ab2ecdd17..c4079abe0 100644 --- a/src/widgets/about-course/ui/grid-item/grid-item.module.scss +++ b/src/widgets/about-course/ui/grid-item/grid-item.module.scss @@ -6,13 +6,13 @@ width: 100%; padding: 24px; border: 1px solid hsla(from $color-yellow h s l/ $opacity-8); - border-radius: 12px; + border-radius: $border-radius-s; background-color: $color-yellow-50; .item-title { display: flex; - gap: 16px; + gap: $gap-s; align-items: center; .grid-icon { diff --git a/src/widgets/header/header.module.scss b/src/widgets/header/header.module.scss index 996de14df..d165bf3e1 100644 --- a/src/widgets/header/header.module.scss +++ b/src/widgets/header/header.module.scss @@ -36,7 +36,7 @@ position: relative; display: flex; - gap: 32px; + gap: $gap-xl; align-items: center; height: 100%; diff --git a/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss b/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss index ca4651eed..186fb98b5 100644 --- a/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss +++ b/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss @@ -21,7 +21,7 @@ max-width: calc(100vw - var(--page-padding)); height: max-content; padding: 32px; - border-radius: 0 0 0 4px; + border-radius: 0 0 0 $border-radius-xxs; visibility: hidden; opacity: $opacity-0; @@ -76,6 +76,6 @@ @include media-laptop-large { right: 0; min-width: 100%; - border-radius: 0 0 4px 4px; + border-radius: 0 0 $border-radius-xxs $border-radius-xxs; } } diff --git a/src/widgets/header/ui/nav-item/nav-item.module.scss b/src/widgets/header/ui/nav-item/nav-item.module.scss index 6a81ccf70..0a6d173a1 100644 --- a/src/widgets/header/ui/nav-item/nav-item.module.scss +++ b/src/widgets/header/ui/nav-item/nav-item.module.scss @@ -8,7 +8,7 @@ position: relative; display: flex; - gap: 8px; + gap: $gap-xs; align-items: center; justify-content: center; diff --git a/src/widgets/learning-path-stages/ui/learning-path-stage-item/learning-path-stage-item.module.scss b/src/widgets/learning-path-stages/ui/learning-path-stage-item/learning-path-stage-item.module.scss index 58cebdf2d..813cd4e91 100644 --- a/src/widgets/learning-path-stages/ui/learning-path-stage-item/learning-path-stage-item.module.scss +++ b/src/widgets/learning-path-stages/ui/learning-path-stage-item/learning-path-stage-item.module.scss @@ -1,6 +1,6 @@ .learning-path-stage-item { display: flex; - gap: 40px; + gap: $gap-xxl; .stage-number { $number-size: 80px; @@ -22,7 +22,7 @@ border: 1px solid $color-yellow-100; border-radius: 50%; - font-size: 24px; + font-size: $font-size-xl; color: $color-gray-600; background-color: $color-yellow-50; @@ -30,7 +30,7 @@ @include media-tablet { width: $number-size-tablet; height: $number-size-tablet; - font-size: 16px; + font-size: $font-size-s; } } @@ -49,7 +49,7 @@ display: flex; flex: 1 1 40%; flex-direction: column; - gap: 8px; + gap: $gap-xs; max-width: 600px; @@ -103,6 +103,6 @@ } @include media-tablet { - gap: 16px; + gap: $gap-s; } } diff --git a/src/widgets/learning-path-stages/ui/learning-path-stages/learning-path-stages.module.scss b/src/widgets/learning-path-stages/ui/learning-path-stages/learning-path-stages.module.scss index d54d986e4..ca133de88 100644 --- a/src/widgets/learning-path-stages/ui/learning-path-stages/learning-path-stages.module.scss +++ b/src/widgets/learning-path-stages/ui/learning-path-stages/learning-path-stages.module.scss @@ -2,7 +2,7 @@ .stages { display: flex; flex-direction: column; - gap: 32px; + gap: $gap-xl; padding-top: 40px; @include media-tablet-large { diff --git a/src/widgets/media-text-block/ui/media-text-block.module.scss b/src/widgets/media-text-block/ui/media-text-block.module.scss index b11a1a015..a62b78c31 100644 --- a/src/widgets/media-text-block/ui/media-text-block.module.scss +++ b/src/widgets/media-text-block/ui/media-text-block.module.scss @@ -12,11 +12,11 @@ display: grid; grid-auto-flow: column; grid-template-rows: max-content 1fr; - gap: 24px 100px; + gap: $gap-l 100px; @include media-tablet-large { grid-auto-flow: row; - gap: 40px; + gap: $gap-xxl; } } @@ -25,7 +25,7 @@ grid-column: 1 / 2; grid-row: 2 / 3; flex-direction: column; - gap: 24px; + gap: $gap-l; } .content-wrapper-right { diff --git a/src/widgets/mobile-view/ui/mobile-nav-item/mobile-nav-item.module.scss b/src/widgets/mobile-view/ui/mobile-nav-item/mobile-nav-item.module.scss index 99993d299..bcff5f980 100644 --- a/src/widgets/mobile-view/ui/mobile-nav-item/mobile-nav-item.module.scss +++ b/src/widgets/mobile-view/ui/mobile-nav-item/mobile-nav-item.module.scss @@ -7,7 +7,7 @@ padding: 0; border: none; - font-size: 20px; + font-size: $font-size-l; font-weight: $font-weight-bold; background: none; @@ -28,7 +28,7 @@ .category-title { display: flex; - gap: 8px; + gap: $gap-xs; align-items: center; } diff --git a/src/widgets/school-menu/ui/school-item/school-item.module.scss b/src/widgets/school-menu/ui/school-item/school-item.module.scss index aadfe3ebd..612dea2be 100644 --- a/src/widgets/school-menu/ui/school-item/school-item.module.scss +++ b/src/widgets/school-menu/ui/school-item/school-item.module.scss @@ -72,5 +72,5 @@ } .support-title { - font-size: 14px; + font-size: $font-size-xs; } diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss index 669161374..0521f0d0f 100644 --- a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss +++ b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss @@ -22,7 +22,7 @@ } .school-list { - gap: 24px 32px; + gap: $gap-l $gap-xl; max-height: 408px; list-style-type: none; From 766318064d31df5fc99a8e58027b2dc6e9ed9a63 Mon Sep 17 00:00:00 2001 From: Yulia Demir Date: Mon, 23 Jun 2025 18:55:32 +0300 Subject: [PATCH 6/6] fix: 830 - add gap consts for row and column gaps --- src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss | 2 +- src/widgets/school-menu/ui/school-menu/school-menu.module.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss b/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss index 186fb98b5..d21103e3c 100644 --- a/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss +++ b/src/widgets/header/ui/dropdown/dropdown-wrapper.module.scss @@ -14,7 +14,7 @@ display: grid; grid-template-columns: 1fr 1fr 1fr; - column-gap: 32px; + column-gap: $gap-xl; width: max-content; min-width: calc(100% + var(--header-padding)); diff --git a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss index 0521f0d0f..17d11b082 100644 --- a/src/widgets/school-menu/ui/school-menu/school-menu.module.scss +++ b/src/widgets/school-menu/ui/school-menu/school-menu.module.scss @@ -44,7 +44,7 @@ } @include media-mobile-landscape { - row-gap: 16px; + row-gap: $gap-s; max-height: 816px; } }