taiga-front/app/styles/components/kanban-task.scss

102 lines
2.2 KiB
SCSS

.kanban-task {
background: $postit;
position: relative;
&:last-child {
margin: 0;
}
&:hover {
.icon-edit,
.icon-drag-h {
@include transition(opacity .2s linear);
opacity: 1;
}
}
.kanban-tagline {
@include table-flex();
}
.taskboard-tag {
@include table-flex-child(1, 0, 0, 0);
background: $postit-hover; //Fallback
height: .3rem;
}
.kanban-task-inner {
@include table-flex();
padding: 1rem 1rem 2rem;
}
.task-num {
color: $postit-hover;
margin-right: .5em;
}
.avatar {
@include table-flex-child($flex-basis: 50px);
a {
@extend %small;
text-align: center;
}
img {
margin: 0 auto;
}
.assigned-to {
color: darken($postit-hover, 15%);
display: block;
overflow: hidden;
position: relative;
text-overflow: ellipsis;
top: -6px;
white-space: nowrap;
width: 50px;
display: none;
}
}
.task-assigned {
@extend %small;
color: $postit-dark-hover;
display: block;
}
.task-num {
color: $grayer;
margin-right: .5em;
}
.task-name {
@extend %bold;
color: $grayer;
}
.task-text {
@include table-flex-child($flex-grow: 10, $flex-basis: 50px);
@extend %small;
padding: 0 .5rem 0 1rem;
}
.task-points {
@extend %small;
color: darken($postit-hover, 15%);
margin: 0;
span {
display: inline-block;
&:first-child {
padding-right: .2rem;
}
}
}
.icon-edit,
.icon-drag-h {
@include transition(opacity .2s linear);
@extend %large;
bottom: .2rem;
color: $postit-hover;
opacity: 0;
position: absolute;
&:hover {
@include transition(color .3s linear);
color: darken($postit-hover, 15%);
}
}
.icon-edit {
right: .5rem;
}
.icon-drag-h {
@extend %xlarge;
cursor: move;
right: 45%;
}
}