118 lines
2.0 KiB
SCSS
Raw Normal View History

2023-04-10 21:22:22 +03:00
.modal-add {
z-index: 9;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.11);
position: fixed;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
transform: scale(0);
&__content {
position: relative;
width: 424px;
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
2023-04-20 20:10:08 +03:00
border-radius: 24px;
2023-04-10 21:22:22 +03:00
2023-04-12 18:22:25 +03:00
padding: 60px 60px 30px 60px;
2023-04-10 21:22:22 +03:00
display: flex;
flex-direction: column;
2023-04-12 18:22:25 +03:00
align-items: flex-start;
2023-04-10 21:22:22 +03:00
justify-content: center;
}
.title-project {
display: flex;
align-items: flex-start;
flex-direction: column;
.input-container {
width: 287px;
height: 35px;
background: #ffffff;
border-radius: 8px;
}
h4 {
font-weight: 500;
font-size: 22px;
line-height: 26px;
2023-04-12 18:22:25 +03:00
color: #263238 !important;
margin-bottom: 22px !important;
}
&__decs {
font-weight: 300;
font-size: 12px;
line-height: 14px;
margin: -13px 0 16px 0;
}
&__textarea {
resize: none;
width: 302px;
height: 83px;
background: #ffffff;
border-radius: 8px;
border: none;
font-size: 15px;
line-height: 18px;
2023-04-10 21:22:22 +03:00
}
}
.name-project {
margin-left: 10px;
border: none;
outline: none;
height: 100%;
width: 90%;
font-size: 14px;
}
.button-add {
2023-04-12 18:22:25 +03:00
margin: 20px 40% 0 0;
2023-04-10 21:22:22 +03:00
width: 130px;
height: 37px;
background: #52b709;
border-radius: 44px;
border: none;
font-weight: 400;
font-size: 15px;
line-height: 32px;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
}
2023-04-10 21:22:22 +03:00
.modal-add.active {
transform: scale(1);
}
2023-04-10 21:22:22 +03:00
.exit {
cursor: pointer;
position: absolute;
top: 35px;
right: 40px;
2023-04-10 21:22:22 +03:00
&:before,
&:after {
content: "";
position: absolute;
width: 16px;
height: 2px;
background: #263238;
2023-04-10 21:22:22 +03:00
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
2023-04-10 21:22:22 +03:00
}