.kanban-task { background: $postit; margin-bottom: 1rem; 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 { padding: 1rem 1rem 2rem; } .task-num { color: $postit-hover; margin-right: .5em; } .task-text { margin-bottom: .5rem; padding-right: 2rem; } .assigned-to { @extend %small; } .avatar { display: inline-block; vertical-align: middle; img { margin-right: .5rem; max-width: 1.5rem; } } .task-points { @extend %large; color: $postit-hover; padding: .5rem 1rem; position: absolute; right: 0; top: .5rem; } .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%; } }