2024-04-02 18:29:03 +03:00

125 lines
2.0 KiB
SCSS

.project {
display: flex;
flex-direction: column;
position: relative;
width: 22%;
height: 140px;
background: #f1f1f1;
border-radius: 12px;
cursor: pointer;
transition: 0.4s;
&:hover {
transition: 0.4s;
box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.11);
}
@media (max-width: 1068px) {
width: 47%;
}
@media (max-width: 785px) {
width: 100%;
}
&__link {
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 18px;
color: #111112;
margin: 0 0 15px 0;
&:hover {
color: black;
}
}
&__info {
display: flex;
align-items: center;
position: relative;
p {
color: #6f6f6f;
margin-bottom: 0;
font-size: 9px;
font-weight: 300;
line-height: 17px;
}
span {
color: blue;
font-size: 15px;
font-weight: 400;
}
.count {
margin-left: 8px;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
background: #dddddd;
border-radius: 4px;
font-weight: 500;
font-size: 14px;
line-height: 24px;
color: #6f6f6f;
}
.add {
color: #6f6f6f;
font-size: 17px;
margin: 0 25px 0 auto;
@media (max-width: 430px) {
display: none;
}
}
}
&-stats {
font-size: 12px;
font-weight: 300;
line-height: 17px;
text-decoration: underline;
color: #678eda;
position: absolute;
left: 18px;
bottom: 16px;
}
.menu-settings {
position: absolute;
font-size: 30px;
color: #6f6f6f;
right: 15px;
bottom: 10px;
}
&__avatar {
width: 30px;
height: 30px;
margin: 0 10px 0 0;
}
&__open-tracker {
padding: 10px 15px;
}
&__statistics {
position: absolute;
bottom: 13px;
left: 15px;
color: #0042b4;
text-decoration: underline;
font-size: 14px;
font-weight: 400;
line-height: 17px;
}
}