redrockjs/fire-exam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: convert px to rem

Browse Source
This commit is contained in:
Valery Grunenko
2025-06-05 11:31:49 +03:00
parent 0ba1538520
commit 6c653aa196
13 changed files with 160 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/svg/check.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="32" height="23" viewBox="0 0 32 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.5 12L9.75 18.25C10.9004 19.4004 12.7662 19.4004 13.9167 18.25L28.5 3.66666" stroke="#00FF1E"
stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 288 B

1
src/core/styles/index.scss
View File

@@ -1,2 +1,3 @@
@import './variables.scss';
@import './mixins.scss';
@import './functions.scss';

2
src/core/styles/variables.scss
View File

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

7
src/shared/ui/advanced-phone-input/advancedPhoneInput.module.scss
View File

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

14
src/shared/ui/button/button.module.scss
View File

@@ -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 {

6
src/shared/ui/input/input.module.scss
View File

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

14
src/shared/ui/text-area/text-area.module.scss
View File

@@ -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; // цвет дорожки

67
src/views/home/ui/contacts/contacts.module.scss
View File

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

18
src/views/home/ui/footer/footer.module.scss
View File

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

26
src/views/home/ui/license/license.module.scss
View File

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

49
src/views/home/ui/main/main.module.scss
View File

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

71
src/views/home/ui/offer/offer.module.scss
View File

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

18
src/views/home/ui/result/result.module.scss
View File

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