taiga
/
taiga-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix attachments coherence and styles

stable
Xavier Julián 2015-01-15 11:06:57 +01:00
parent 1c2468a2f3
commit b1a0ba2345
1 changed files with 21 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/styles/modules/common/attachments.scss
View File

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