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

fix: add preview modal

Browse Source
This commit is contained in:
Valery Grunenko
2025-12-04 12:40:53 +03:00
parent bd9937e86c
commit 1a49b3f8e2
20 changed files with 193 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/views/home/about/styles.module.scss
View File

@@ -1,8 +1,8 @@
.About{
.About {
background: #f7f7f7;
}
.Inner{
.Inner {
margin: 0 auto;
max-width: rem(1540px);
padding: rem(80px) rem(10px);
@@ -20,13 +20,13 @@
margin-bottom: rem(80px);
}
.Block{
.Block {
display: flex;
flex-direction: column;
align-items: center;
gap: rem(40px);
@include iflaptop{
@include iflaptop {
flex-direction: row;
}
}
@@ -49,17 +49,17 @@
box-shadow: rem(15px) 0 rem(40px) 0 rgba(0, 0, 0, 0.5);
transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
@include iftablet{
@include iftablet {
gap: rem(80px) rem(20px);
margin: 0 rem(40px);
padding: rem(40px);
max-width: rem(760px);
}
@include iflaptop{
@include iflaptop {
max-width: unset;
}
.Left{
.Left {
grid-area: left;
display: flex;
flex-direction: column;
@@ -72,24 +72,24 @@
color: $color-white;
text-align: center;
@include iftablet{
@include iftablet {
font-size: rem(20px);
}
& p:first-child{
& p:first-child {
font-weight: 500;
font-size: rem(20px);
margin-bottom: rem(16px);
@include iftablet{
@include iftablet {
font-size: rem(28px);
margin-bottom: rem(16px);
}
}
}
.Right{
.Right {
grid-area: right;
display: flex;
flex-direction: column;
@@ -102,29 +102,39 @@
color: $color-white;
text-align: center;
@include iftablet{
@include iftablet {
font-size: rem(20px);
}
& p:first-child{
& p:first-child {
font-weight: 500;
font-size: rem(20px);
margin-bottom: rem(16px);
@include iftablet{
@include iftablet {
font-size: rem(28px);
margin-bottom: rem(16px);
}
}
}
.Bottom{
.Bottom {
grid-area: bottom;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.Btn {
background: #58c644;
}
.Icon {
path {
fill: $color-white;
}
}
}
}
@@ -134,7 +144,7 @@
padding: rem(20px) rem(20px);
width: 100%;
@include iftablet{
@include iftablet {
flex: 1;
display: block;
padding: 0 rem(20px);
@@ -145,4 +155,33 @@
display: flex;
justify-content: center;
align-items: center;
}
.ModalContainer {
background: $color-white;
width: 100%;
border-radius: rem(16px);
padding: rem(10px) rem(10px);
margin-bottom: 20px;
display: flex;
flex-direction: column;
max-width: 460px;
justify-content: center;
align-self: center;
@include iftablet{
max-width: unset;
align-self: unset;
width: max-content;
height: auto;
}
& > svg {
z-index: 1;
path {
stroke: #FFFFFF;
stroke-opacity: 0.8;
}
}
}