.issues-table { display: flex; margin-bottom: 2rem; &.empty { display: none; } .row { &:hover { background: lighten($primary, 60%); transition: background .2s ease-in; } .icon { display: inline; } } .row-selected { background: lighten($primary, 60%); transition: background .2s ease-in; } .title { @extend %medium; @extend %bold; border-bottom: 1px solid $gray-light; &:hover { background: transparent; } div { cursor: pointer; } } .table-main { @extend %small; border-bottom: 1px solid darken($whitish, 4%); } .avatar { align-items: center; display: flex; img { width: 35px; } figcaption { flex-basis: 60%; flex-grow: 1; margin-left: .5rem; } } .level-field { flex-basis: 75px; flex-grow: 0; flex-shrink: 0; text-align: center; width: 75px; } .subject { overflow: hidden; padding-right: 1rem; width: 100%; a { @include ellipsis(100%); display: block; } span { vertical-align: middle; &:first-child { margin-right: .5rem; } } } .issue-field, .assigned-field, .created-field , .assigned-field { flex-basis: 140px; flex-grow: 1; flex-shrink: 0; padding: 0 1rem; position: relative; text-align: left; } .assigned-field { flex: 0 0 160px; max-width: 160px; } .issue-assignedto { cursor: pointer; position: relative; &:hover { .icon { opacity: 1; transition: opacity .3s linear; } } figcaption { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .icon { opacity: 0; position: absolute; right: 0; top: .5rem; transition: opacity .3s linear; } } .pop-status { @include popover(200px, 20px, 0, '', ''); &.fix { bottom: 0; top: auto; } } .level-field, .created-field { @include breakpoint(laptop) { display: none; } } .level-field, .created-field, .assigned-field { @include breakpoint(tablet) { display: none; } } }