src/components/tasks/style.less
.reframe-tasks {
flex: 1;
display: flex;
}
.reframe-tasks-overlay {
.opacity-transition(0, 0.5, .25s);
.opacity(0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgb(0, 0, 0);
}
.reframe-tasks-title {
border-bottom: 1px solid fadeout(@black, 90);
background-color: fadeout(@black, 92);
color: fadeout(@black, 50);
display: flex;
.reframe-tasks-title-icon {
&:first-child {
padding: 0.8em 0 0.8em 0.8em;
}
&:last-child {
padding: 0.8em 0.8em 0.8em 0;
}
.fa {
font-size: 1.2em;
}
}
}
.reframe-tasks-title-label {
padding: 0.8em;
flex: 1;
word-break: break-all;
height: 3em;
overflow: hidden;
}
.reframe-tasks-list {
position: absolute;
display: flex;
flex-direction: column;
.border-radius(5px);
background-color: #FFFFFF;
@media only screen and (max-width: 768px) {
.translate-y-transition(100%, 0, .25s);
max-height: calc(100vh - 1.6em);
bottom: 0;
left: 0;
right: 0;
margin: 10px;
}
@media only screen and (min-width: 769px) {
.opacity-transition(0, 1, .25s);
width: 320px;
top: 50%;
left: 50%;
.translateXY(-50%, -50%);
}
.reframe-task,
.reframe-tasks-cancel {
.hover(background-color, darken(@white, 5%));
border-top: 1px solid #CCC;
display: block;
padding: 15px;
text-align: center;
color: #1e70bf;
cursor: pointer;
&:first-child {
border-radius: 5px 5px 0 0;
border-top: none;
}
&:last-child {
border-radius: 0 0 5px 5px;
}
}
}
.reframe-tasks-list-body {
.scrollable();
}
@media (max-width: 768px) {
.reframe-task {
&:not(.mobile) {
display: none;
}
}
}