diff --git a/app/styles/modules/common/attachments.scss b/app/styles/modules/common/attachments.scss index e14a2eda..f5cfac80 100644 --- a/app/styles/modules/common/attachments.scss +++ b/app/styles/modules/common/attachments.scss @@ -3,8 +3,11 @@ } .attachments-header { - @include table-flex(space-between, center, flex, row, wrap, space-between); + align-content: space-between; + align-items: center; background: $whitish; + display: flex; + justify-content: space-between; padding: .5rem 1rem; .attachments-title { @extend %medium; @@ -28,9 +31,9 @@ .single-attachment { @extend %small; - @include table-flex(); align-items: center; border-bottom: 1px solid $whitish; + display: flex; padding: .5rem 0 .5rem 1rem; position: relative; &:hover { @@ -59,25 +62,33 @@ .attachment-name { @extend %bold; @include ellipsis(200px); - @include table-flex-child(1, 35%, 0); + flex-basis: 35%; + flex-grow: 1; padding-right: 1rem; .icon { margin-right: .5rem; } } .attachment-size { - @include table-flex-child(1, 15%, 0); color: $gray-light; + flex-basis: 15%; + flex-grow: 1; margin-right: .5rem; } - .attachment-comments { - @include table-flex-child(1, 35%, 0); + .attachment-comments, + .editable-attachment-comment { + flex-basis: 35%; + flex-grow: 1; span { color: $gray; } } + .editable-attachment-comment { + @extend %medium; + } .attachment-settings { - @include table-flex-child(1, 15%, 0); + flex-basis: 15%; + flex-grow: 1; .settings, .editable-settings { @extend %large; @@ -123,13 +134,11 @@ span { color: $gray-light; } - input[type="checkbox"] { + input { margin-right: .2rem; vertical-align: middle; - &:checked { - + span { - color: $grayer; - } + &:checked+span { + color: $grayer; } } }