From 6c653aa19698d9121133fafe7a1efc7fd1b7e392 Mon Sep 17 00:00:00 2001 From: RedrockJS Date: Thu, 5 Jun 2025 11:31:49 +0300 Subject: [PATCH] fix: convert px to rem --- public/svg/check.svg | 4 ++ src/core/styles/index.scss | 3 +- src/core/styles/variables.scss | 2 + .../advancedPhoneInput.module.scss | 7 +- src/shared/ui/button/button.module.scss | 14 ++-- src/shared/ui/input/input.module.scss | 6 +- src/shared/ui/text-area/text-area.module.scss | 14 ++-- .../home/ui/contacts/contacts.module.scss | 67 +++++++++-------- src/views/home/ui/footer/footer.module.scss | 18 ++--- src/views/home/ui/license/license.module.scss | 26 +++---- src/views/home/ui/main/main.module.scss | 49 ++++++++----- src/views/home/ui/offer/offer.module.scss | 71 ++++++++++--------- src/views/home/ui/result/result.module.scss | 18 ++--- 13 files changed, 160 insertions(+), 139 deletions(-) create mode 100644 public/svg/check.svg diff --git a/public/svg/check.svg b/public/svg/check.svg new file mode 100644 index 0000000..9ea7b38 --- /dev/null +++ b/public/svg/check.svg @@ -0,0 +1,4 @@ + + + diff --git a/src/core/styles/index.scss b/src/core/styles/index.scss index e682ecd..2b78af2 100644 --- a/src/core/styles/index.scss +++ b/src/core/styles/index.scss @@ -1,2 +1,3 @@ @import './variables.scss'; -@import './mixins.scss'; \ No newline at end of file +@import './mixins.scss'; +@import './functions.scss'; \ No newline at end of file diff --git a/src/core/styles/variables.scss b/src/core/styles/variables.scss index 331471b..c518824 100644 --- a/src/core/styles/variables.scss +++ b/src/core/styles/variables.scss @@ -8,6 +8,8 @@ $desktop: 1440px; //fonts $font-open-sans: var(--open-sans), sans-serif; +$base-font-size: 16px; + $font-light: 300; $font-regular: 400; $font-medium: 500; diff --git a/src/shared/ui/advanced-phone-input/advancedPhoneInput.module.scss b/src/shared/ui/advanced-phone-input/advancedPhoneInput.module.scss index 01434a0..c5e6429 100644 --- a/src/shared/ui/advanced-phone-input/advancedPhoneInput.module.scss +++ b/src/shared/ui/advanced-phone-input/advancedPhoneInput.module.scss @@ -1,6 +1,5 @@ .Container { position: relative; - //width: 100%; } .Phone { @@ -12,8 +11,8 @@ .Button { position: absolute; - right: 4px; - top: calc(50% - 25px); + right: rem(2px); + top: calc(50% - 1.6rem); z-index: 3; - min-height: calc(100% - 4px); + min-height: calc(100% - .25rem); } \ 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 1202bdd..84e8fec 100644 --- a/src/shared/ui/button/button.module.scss +++ b/src/shared/ui/button/button.module.scss @@ -2,13 +2,13 @@ display: flex; align-items: center; justify-content: center; - padding: 10px 32px; - border-radius: 28px; - min-height: 55px; + padding: rem(10px) rem(32px); + border-radius: rem(28px); + min-height: rem(54px); font-family: $font-open-sans; font-weight: $font-regular; - font-size: 24px; + font-size: rem(24px); line-height: 100%; transition: all 0.15s linear; @@ -20,11 +20,11 @@ } svg { - width: 18px; - height: 18px; + width: rem(18px); + height: rem(18px); //fill: var(--text-primary); - margin-right: 18px; + margin-right: rem(18px); } &:hover { diff --git a/src/shared/ui/input/input.module.scss b/src/shared/ui/input/input.module.scss index 7b7e2f8..62e14de 100644 --- a/src/shared/ui/input/input.module.scss +++ b/src/shared/ui/input/input.module.scss @@ -2,13 +2,13 @@ display: flex; background: $color-white; border: 1px solid $color-darkgray; - border-radius: 28px; - padding: 10px 24px; + border-radius: rem(28px); + padding: rem(10px) rem(24px); transition: border ease .5s; font-family: $font-open-sans; font-weight: $font-regular; - font-size: 24px; + font-size: rem(24px); line-height: 100%; color: $color-text; width: max-content; diff --git a/src/shared/ui/text-area/text-area.module.scss b/src/shared/ui/text-area/text-area.module.scss index e8ab19f..af84452 100644 --- a/src/shared/ui/text-area/text-area.module.scss +++ b/src/shared/ui/text-area/text-area.module.scss @@ -14,13 +14,13 @@ .Area { background: $color-white; border: 1px solid $color-darkgray; - border-radius: 20px; - padding: 10px 24px; + border-radius: rem(20px); + padding: rem(10px) rem(24px); transition: border ease .5s; font-family: $font-open-sans; font-weight: $font-regular; - font-size: 24px; + font-size: rem(24px); line-height: 100%; color: $color-text; @@ -35,14 +35,14 @@ cursor: auto; } &::-webkit-scrollbar { - width: 12px; - height: 12px; + width: rem(12px); + height: rem(12px); } &::-webkit-scrollbar-track, &::-webkit-scrollbar-thumb { background-clip: content-box; - border: 4px solid transparent; - border-radius: 12px; + border: rem(4px) solid transparent; + border-radius: rem(12px); } &::-webkit-scrollbar-track { background-color: #333; // цвет дорожки diff --git a/src/views/home/ui/contacts/contacts.module.scss b/src/views/home/ui/contacts/contacts.module.scss index 27bf5c3..8f25284 100644 --- a/src/views/home/ui/contacts/contacts.module.scss +++ b/src/views/home/ui/contacts/contacts.module.scss @@ -1,15 +1,15 @@ .Contacts { background: $color-lightgray; - border-radius: 28px; - padding: 160px; + border-radius: rem(28px); + padding: rem(160px); .Header { font-family: $font-open-sans; font-weight: $font-semi-bold; - font-size: 60px; + font-size: rem(60px); line-height: 100%; color: $color-text; - margin-bottom: 80px; + margin-bottom: rem(80px); } .Clients { @@ -19,14 +19,14 @@ flex-wrap: wrap; justify-content: space-around; align-items: center; - gap: 40px; - max-width: 1200px; - margin-bottom: 160px; + gap: rem(40px); + max-width: rem(1200px); + margin-bottom: rem(160px); .Client { img { - width: 300px; + width: rem(300px); height: auto; } } @@ -37,11 +37,11 @@ background: #292E3D; display: flex; flex-direction: row; - padding: 60px 50px; - border-radius: 28px; + padding: rem(60px) rem(50px); + border-radius: rem(28px); overflow: hidden; - margin-bottom: 80px; + margin-bottom: rem(80px); &:after { content: ''; @@ -72,10 +72,10 @@ z-index: 2; font-family: $font-open-sans; font-weight: $font-semi-bold; - font-size: 48px; + font-size: rem(48px); line-height: 100%; color: $color-white; - margin-bottom: 80px; + margin-bottom: rem(80px); } .SubTitle { @@ -83,10 +83,10 @@ z-index: 2; font-family: $font-open-sans; font-weight: $font-light; - font-size: 32px; + font-size: rem(32px); line-height: 100%; color: $color-white; - max-width: 720px; + max-width: rem(720px); } } @@ -97,7 +97,7 @@ display: flex; flex-direction: column; justify-content: center; - gap: 20px; + gap: rem(20px); } } @@ -105,19 +105,18 @@ position: relative; iframe { - border-radius: 28px; + border-radius: rem(28px); } .Contacts { position: absolute; z-index: 2; - top: -40px; - right: 180px; - border-radius: 28px; + top: rem(-40px); + right: rem(180px); + border-radius: rem(28px); background: $color-white; - width: 440px; - //height: 540px; - padding: 40px 35px 20px; + width: rem(440px); + padding: rem(40px) rem(35px) rem(20px); display: flex; flex-direction: column; @@ -128,17 +127,17 @@ position: relative; font-family: $font-open-sans; font-weight: $font-semi-bold; - font-size: 48px; + font-size: rem(48px); line-height: 100%; color: $color-text; text-align: right; - margin-bottom: 32px; + margin-bottom: rem(32px); align-self: center; .LedOn { position: absolute; - bottom: 6px; - left: 6px; + bottom: rem(6px); + left: rem(6px); } } @@ -146,18 +145,18 @@ position: relative; font-family: $font-open-sans; font-weight: $font-regular; - font-size: 32px; + font-size: rem(32px); line-height: 130%; color: $color-text; - margin-bottom: 20px; - margin-left: 32px; + margin-bottom: rem(20px); + margin-left: rem(32px); .Icon { position: absolute; - left: -48px; - top: 8px; - width: 32px; - height: 32px; + left: rem(-48px); + top: rem(8px); + width: rem(32px); + height: rem(32px); stroke: #E96526; } } diff --git a/src/views/home/ui/footer/footer.module.scss b/src/views/home/ui/footer/footer.module.scss index 163bdaa..9d6009d 100644 --- a/src/views/home/ui/footer/footer.module.scss +++ b/src/views/home/ui/footer/footer.module.scss @@ -1,16 +1,16 @@ .Footer { background-color: #1B1B25; - padding: 80px 160px; + padding: rem(80px) rem(160px); display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; - gap: 20px; + gap: rem(20px); - .Block{ + .Block { display: flex; flex-direction: column; - gap: 20px; + gap: rem(20px); max-width: 40vw; } @@ -22,25 +22,25 @@ .Header { font-family: $font-open-sans; font-weight: $font-semi-bold; - font-size: 60px; + font-size: rem(60px); line-height: 100%; color: $color-white; - margin-bottom: 40px; + margin-bottom: rem(40px); } .Bottom { width: 100%; - height: 80px; + height: rem(80px); border-top: 1px solid $color-white; display: flex; flex-direction: row; align-items: center; - gap: 20px; + gap: rem(20px); .Policy { font-family: $font-open-sans; font-weight: $font-regular; - font-size: 16px; + font-size: rem(16px); line-height: 100%; color: $color-white; margin-left: auto; diff --git a/src/views/home/ui/license/license.module.scss b/src/views/home/ui/license/license.module.scss index 2de070b..10bc6e4 100644 --- a/src/views/home/ui/license/license.module.scss +++ b/src/views/home/ui/license/license.module.scss @@ -1,30 +1,30 @@ .License { - padding: 160px; + padding: rem(160px); .Header { font-family: $font-open-sans; font-weight: $font-semi-bold; - font-size: 60px; + font-size: rem(60px); line-height: 100%; color: $color-text; - margin-bottom: 80px; + margin-bottom: rem(80px); } .Slider { - margin-bottom: 80px; + margin-bottom: rem(80px); } .Form { position: relative; background: #292E3D; - padding: 40px 60px; - border-radius: 28px; + padding: rem(40px) rem(60px); + border-radius: rem(28px); overflow: hidden; display: flex; flex-direction: row; - gap: 40px; + gap: rem(40px); &:after { content: ''; @@ -53,10 +53,10 @@ z-index: 2; font-family: $font-open-sans; font-weight: $font-regular; - font-size: 48px; + font-size: rem(48px); line-height: 110%; color: $color-white; - margin: 0 0 50px; + margin: 0 0 rem(50px); } .SubTitle { @@ -64,11 +64,11 @@ z-index: 2; font-family: $font-open-sans; font-weight: $font-light; - font-size: 30px; + font-size: rem(30px); line-height: 100%; color: $color-white; - margin-bottom: 16px; - max-width: 820px; + margin-bottom: rem(16px); + max-width: rem(820px); } } @@ -79,7 +79,7 @@ display: flex; flex-direction: column; justify-content: center; - gap: 20px; + gap: rem(20px); } } diff --git a/src/views/home/ui/main/main.module.scss b/src/views/home/ui/main/main.module.scss index 1892a1b..0fbc6f4 100644 --- a/src/views/home/ui/main/main.module.scss +++ b/src/views/home/ui/main/main.module.scss @@ -1,12 +1,12 @@ .Main { - padding: 0px 160px 0px; + padding: 0 rem(160px) 0; &_BgWrapper { position: absolute; top: 0; left: 0; width: 100vw; - height: 900px; + height: rem(900px); z-index: -1; & img { @@ -22,7 +22,8 @@ justify-content: space-between; align-items: center; border-bottom: 1px solid $color-white; - height: 80px; + height: rem(80px); + .Logo { color: $color-white; } @@ -32,20 +33,20 @@ display: flex; flex-direction: row; align-items: center; - gap: 30px; + gap: rem(30px); .Icon { - width: 60px; - height: 60px; + width: rem(60px); + height: rem(60px); cursor: pointer; } .Button { display: flex; flex-direction: row; - gap: 16px; - height: 48px; - padding: 24px; + gap: rem(16px); + height: rem(48px); + padding: rem(24px); } } } @@ -54,36 +55,50 @@ margin: 0 auto; display: flex; flex-direction: row; - padding: 160px 0 200px; + padding: rem(160px) 0 rem(200px); .Content { display: flex; flex-direction: column; justify-content: flex-start; - gap: 60px; + gap: rem(60px); .Title { font-family: $font-open-sans; font-weight: $font-regular; - font-size: 60px; + font-size: rem(60px); line-height: 1; color: $color-white; - max-width: 960px; + max-width: rem(960px); } .List { display: flex; flex-direction: column; justify-content: flex-start; - gap: 16px; + gap: rem(16px); } .ListItem { + position: relative; font-family: $font-open-sans; font-weight: $font-semi-bold; - font-size: 26px; + font-size: rem(26px); line-height: 1; color: $color-white; + margin-left: rem(36px); + + &:after { + position: absolute; + top: rem(2px); + left: 0; + content: ''; + width: rem(24px); + height: rem(24px); + background: url("/svg/check.svg") no-repeat; + background-size: rem(24px) rem(24px); + margin-left: rem(-36px); + } } } @@ -93,12 +108,12 @@ justify-content: center; align-items: center; flex-basis: 40%; - gap: 40px; + gap: rem(40px); .Title { font-family: $font-open-sans; font-weight: $font-semi-bold; - font-size: 60px; + font-size: rem(60px); line-height: 1; color: $color-white; } diff --git a/src/views/home/ui/offer/offer.module.scss b/src/views/home/ui/offer/offer.module.scss index f6cf422..5139bb9 100644 --- a/src/views/home/ui/offer/offer.module.scss +++ b/src/views/home/ui/offer/offer.module.scss @@ -1,51 +1,51 @@ .Offer { background: $color-lightgray; - border-radius: 28px; - padding: 160px; + border-radius: rem(28px); + padding: rem(160px); .Title { font-family: $font-open-sans; font-weight: $font-semi-bold; - font-size: 60px; + font-size: rem(60px); line-height: 100%; color: $color-text; - max-width: 1330px; - margin-bottom: 80px; + max-width: rem(1330px); + margin-bottom: rem(80px); } .Text { font-family: $font-open-sans; font-weight: $font-regular; - font-size: 32px; + font-size: rem(32px); line-height: 100%; color: $color-text; - margin-bottom: 20px; + margin-bottom: rem(20px); } .List { display: flex; flex-direction: column; align-items: flex-start; - max-width: 1330px; - margin-bottom: 60px; + max-width: rem(1330px); + margin-bottom: rem(60px); .ListItem { font-family: $font-open-sans; font-weight: $font-regular; - font-size: 32px; + font-size: rem(32px); line-height: 160%; color: $color-text; list-style-type: decimal; - margin-left: 40px; + margin-left: rem(40px); } } .RowForm { display: flex; flex-direction: row; - gap: 40px; + gap: rem(40px); justify-content: center; - margin-bottom: 80px; + margin-bottom: rem(80px); } .Inner { @@ -53,15 +53,15 @@ flex-direction: column; align-items: flex-start; background-color: $color-white; - border-radius: 28px; - padding: 80px 40px; - margin-bottom: 130px; + border-radius: rem(28px); + padding: rem(80px) rem(40px); + margin-bottom: rem(130px); .Title { font-family: $font-open-sans; font-weight: $font-semi-bold; - font-size: 60px; - line-height: 1; + font-size: rem(60px); + line-height: 100%; color: $color-text; } @@ -69,15 +69,15 @@ display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr); - gap: 40px; - padding: 40px 0; + gap: rem(40px); + padding: rem(40px) 0; } .Tile { position: relative; - padding: 25px; - height: 352px; - border-radius: 28px; + padding: rem(25px); + height: rem(352px); + border-radius: rem(28px); overflow: hidden; &:after { @@ -121,7 +121,7 @@ z-index: 2; font-family: $font-open-sans; font-weight: $font-regular; - font-size: 42px; + font-size: rem(42px); line-height: 100%; color: $color-white; } @@ -132,7 +132,7 @@ display: none; font-family: $font-open-sans; font-weight: $font-regular; - font-size: 24px; + font-size: rem(24px); line-height: 130%; color: $color-white; } @@ -140,10 +140,10 @@ .Arrow { position: absolute; z-index: 2; - right: 25px; - bottom: 25px; - width: 64px; - height: 64px; + right: rem(25px); + bottom: rem(25px); + width: rem(64px); + height: rem(64px); transform: rotate(-135deg); transition: transform 250ms ease-in-out; } @@ -152,9 +152,9 @@ .Form { position: relative; - padding: 40px 60px; + padding: rem(40px) rem(60px); background: #292E3D; - border-radius: 28px; + border-radius: rem(28px); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; @@ -182,6 +182,7 @@ display: flex; flex-direction: column; } + .PanelRight { width: 100%; place-self: end end; @@ -192,10 +193,10 @@ z-index: 2; font-family: $font-open-sans; font-weight: $font-light; - font-size: 30px; + font-size: rem(30px); line-height: 100%; color: $color-white; - margin-bottom: 16px; + margin-bottom: rem(16px); } .Title { @@ -203,10 +204,10 @@ z-index: 2; font-family: $font-open-sans; font-weight: $font-regular; - font-size: 48px; + font-size: rem(48px); line-height: 130%; color: $color-white; - max-width: 660px; + max-width: rem(660px); margin: 0; } } diff --git a/src/views/home/ui/result/result.module.scss b/src/views/home/ui/result/result.module.scss index afb42db..3542273 100644 --- a/src/views/home/ui/result/result.module.scss +++ b/src/views/home/ui/result/result.module.scss @@ -1,13 +1,13 @@ .Result { - padding: 160px; + padding: rem(160px); .Header { font-family: $font-open-sans; font-weight: $font-semi-bold; - font-size: 60px; + font-size: rem(60px); line-height: 100%; color: $color-text; - margin-bottom: 96px; + margin-bottom: rem(96px); } .Row { @@ -16,7 +16,7 @@ flex-direction: row; justify-content: space-between; gap: 10vw; - margin-bottom: 80px; + margin-bottom: rem(80px); &:nth-child(odd) { flex-direction: row-reverse; @@ -28,10 +28,10 @@ .Title { font-family: $font-open-sans; font-weight: $font-regular; - font-size: 48px; + font-size: rem(48px); line-height: 100%; color: $color-text; - margin-bottom: 40px; + margin-bottom: rem(40px); } .Description { @@ -47,10 +47,10 @@ flex: 1; position: relative; overflow: hidden; - border-radius: 28px; + border-radius: rem(28px); object-fit: contain; - max-width: 720px; - height: 540px; + max-width: rem(720px); + height: rem(540px); &:after { content: ''; display: block;