.issues-table { display: flex; margin-bottom: 2rem; &.empty { display: none; } .row { &:hover { background: lighten($primary, 65%); transition: background .2s ease-in; } .icon { display: inline; } &.is-blocked { background: lighten($red-light, 20%); .blocked-text { color: $red; margin-right: .5rem; } } } .title { @include font-size(medium); @include font-type(bold); border-bottom: 1px solid $gray-light; &:hover { background: transparent; } div { cursor: pointer; } .votes { color: $gray; } } .table-main { @include font-size(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: 85px; flex-grow: 0; flex-shrink: 0; text-align: center; width: 85px; } .votes { color: $gray; cursor: pointer; flex-basis: 75px; flex-shrink: 0; text-align: center; width: 75px; &:hover { color: $primary-light; transition: all .2s linear; svg { fill: $primary-light; transition: all .2s linear; } } &.inactive { color: $gray-light; } } .icon-upvote { @include svg-size(.75rem); fill: $gray; margin-right: .25rem; vertical-align: middle; } .icon-arrow-up, .icon-arrow-down { @include svg-size(.7rem); fill: $gray-light; margin-left: .25rem; vertical-align: middle; } .is-voted { color: $primary-light; transition: all .2s linear; svg { fill: $primary-light; transition: all .2s linear; } &:hover { color: $red-light; svg { fill: $red-light; transform: rotate(180deg); } } } .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; .icon { @include svg-size(.75rem); fill: currentColor; margin-left: .25rem; vertical-align: middle; } } .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 { @include svg-size(.75rem); opacity: 0; position: absolute; right: 0; top: .75rem; 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; } } .issue-status { display: inline-block; } }