multi-project/projects/app-root/src/assets/css/list-items.scss

87 lines
1.6 KiB
SCSS

.list.item.default {
padding: 24px;
margin-bottom: 24px;
background-color: #FFFFFF;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
.main-bar {
display: flex;
flex-direction: row;
width: 100%;
.left {
flex-grow: 1;
}
.right {
display: flex;
flex-direction: column;
margin-left: 24px;
flex-shrink: 0;
.row {
display: flex;
flex-direction: row;
button {
margin: 0 12px 0 0;
&:last-child {
margin-right: 0;
}
}
}
}
.params {
p {
margin-bottom: 14px;
&:last-child {
margin-bottom: 0;
}
}
}
}
.title {
margin-bottom: 12px;
font-weight: bold;
}
.status {
margin-bottom: 14px;
font-size: 0.875rem;
font-weight: bold;
color: #7f7f7f;
}
.yellow, .reviewing {color: #c48723;}
.green, .active {color: #669933;}
.red, .declined {color: #e60046;}
.edit {
//background-image: url("~projects/app-root/src/assets/images/icons/edit_24dp.svg");
}
.delete {
//background-image: url("~projects/app-root/src/assets/images/icons/delete_24dp.svg");
}
.toggle {
margin-top: auto;
margin-left: auto;
//background-image: url("~projects/app-root/src/assets/images/icons/arrow_down_24dp.svg");
transition: transform 0.2s;
&.active {
transform: rotateZ(180deg);
}
}
.name {
margin-bottom: 14px;
font-weight: bold;
}
.details {
margin-top: 24px;
}
}
@media screen and (max-width: 767px) {
.list.item.default {
padding: 16px;
margin-left: -16px;
margin-right: -16px;
}
}