.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(); background: $gray-light; //Fallback height: .3rem; } .kanban-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: none; overflow: hidden; position: relative; text-overflow: ellipsis; top: -6px; white-space: nowrap; width: 50px; } } .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%; } }