.project-values-row { @include table-flex(stretch, center, flex, row, wrap, center); border-bottom: 1px solid $whitish; padding: 1rem; &:hover { @include transition (background .2s ease-in); background: lighten($green-taiga, 60%); cursor: move; .icon { @include transition (opacity .2s ease-in); opacity: 1; } } div { margin-left: 1rem; position: relative; &:first-child { margin: 0; } } .icon { @extend %large; color: $gray-light; opacity: 0; &:hover { @include transition (all .2s ease-in); color: $grayer; } } } .project-values-header { @extend %bold; border-bottom: 2px solid $gray-light; } .project-values-name { @include table-flex-child(3, 0, 0); } .project-values-value { @include table-flex-child(1, 0, 0); } .project-values-isclosed, .project-values-settings { @include table-flex-child(1, 0, 0); text-align: right; } .project-values-settings { a { @extend %large; color: $gray; margin-right: .5rem; &:hover { @include transition(color .3s linear); color: $green-taiga; &.icon-delete { color: $red; } } } }