apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added new modal in tracker

Browse Source
This commit is contained in:
MaxOvs19
2023-12-19 20:42:46 +03:00
parent 5d03502e5c
commit 369b77c1aa
4 changed files with 360 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
src/pages/Tracker/tracker.scss
View File

@ -305,257 +305,6 @@
}
}
&__persons {
position: relative;
display: flex;
align-items: center;
@media (max-width: 700px) {
right: -15px;
}
@media (max-width: 465px) {
width: 100%;
}
.projectPersons {
display: flex;
position: relative;
left: 5px;
img {
position: relative;
display: flex;
width: 32px;
height: 32px;
}
img:nth-child(1) {
left: -5px;
}
img:nth-child(2) {
left: -10px;
}
img:nth-child(3) {
left: -15px;
}
}
.onePerson {
display: flex;
position: relative;
left: -15px;
img {
position: relative;
display: flex;
width: 32px;
height: 32px;
}
}
span {
width: 32px;
height: 32px;
font-weight: 500;
font-size: 12px;
line-height: 16px;
border-radius: 50px;
align-items: center;
justify-content: center;
position: relative;
display: flex;
}
.countPersons {
color: #252c32;
border: 1px solid #dde2e4;
background: white;
left: -20px;
}
.addPerson {
background: #00c5a8;
color: white;
font-size: 14px;
transition: all 0.15s ease;
left: -28px;
z-index: 2;
cursor: pointer;
&:hover {
background: #10d5bb;
}
}
p {
position: relative;
left: -25px;
font-weight: 300;
font-size: 14px;
line-height: 17px;
max-width: 125px;
}
.persons__list {
position: absolute;
z-index: 8;
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
border-radius: 20px;
padding: 30px;
cursor: default;
width: 800px;
&__close {
cursor: pointer;
position: absolute;
right: 25px;
top: 25px;
margin-left: auto;
width: 35px;
height: 35px;
}
&__count {
display: flex;
align-items: end;
color: #1458dd;
font-size: 22px;
span {
font-size: 44px;
font-weight: 700;
line-height: 40px;
width: auto;
height: auto;
margin-right: 5px;
}
}
&__info {
display: flex;
margin: 11px 0 35px;
align-items: center;
span {
display: flex;
width: auto;
font-size: 18px;
line-height: 22px;
color: #263238;
font-weight: 500;
white-space: nowrap;
}
p {
color: #1458dd;
font-weight: 600;
font-size: 18px;
line-height: 22px;
display: flex;
max-width: 250px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-left: 30px;
}
}
&__items {
display: flex;
flex-wrap: wrap;
row-gap: 32px;
column-gap: 85px;
margin-bottom: 38px;
}
&__item {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 300px;
width: 100%;
.avatar {
width: 38px;
height: 38px;
margin-right: 12px;
}
span {
display: block;
font-weight: 400;
font-size: 15px;
line-height: initial;
color: #807777;
width: auto;
height: auto;
max-width: 215px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.delete {
cursor: pointer;
width: 20px;
height: 20px;
}
}
&__add {
display: flex;
margin-left: 3px;
cursor: pointer;
span {
background: #8bcc60;
left: 0;
}
p {
margin-left: 17px;
color: #000000;
font-weight: 400;
font-size: 16px;
line-height: 32px;
position: initial;
max-width: none;
}
}
@media (max-width: 1000px) {
width: 390px;
padding: 30px;
.persons__list__info {
margin: 10px;
}
.persons__list__items {
flex-direction: column;
margin-bottom: 20px;
row-gap: 15px;
.persons__list__item {
max-width: none;
span {
max-width: none;
width: 100%;
}
}
}
}
@media (max-width: 440px) {
width: 290px;
padding: 15px 20px;
}
}
}
.noProjectUsers {
@media (max-width: 900px) {
position: inherit;