Styles for preview, edit and save a user story description

stable
Xavier Julián 2014-10-22 13:18:50 +02:00 committed by David Barragán Merino
parent 3c168606c7
commit bc31ef2bca
3 changed files with 51 additions and 28 deletions

View File

@ -32,7 +32,7 @@ tgMarkitupDirective = ($rootscope, $rs, $tr) ->
previewTemplate = _.template(""" previewTemplate = _.template("""
<div class="preview"> <div class="preview">
<div class="actions"> <div class="actions">
<a href="#" title="Edit">Edit</a> <a href="#" title="Edit" class="icon icon-edit edit"></a>
</div> </div>
<div class="content wysiwyg"> <div class="content wysiwyg">
<%= data %> <%= data %>

View File

@ -19,3 +19,16 @@
} }
} }
} }
.markItUpContainer {
padding: 0;
}
.preview {
.actions {
background: $whitish;
margin-top: .5rem;
min-height: 2rem;
padding: .3rem;
}
}

View File

@ -64,14 +64,6 @@
} }
} }
} }
//.save-container {
// &.loading {
// span {
// @include animation (loading .5s linear);
// @include animation (spin 1s linear infinite);
// }
// }
//}
.us-number { .us-number {
@extend %xlarge; @extend %xlarge;
@extend %title; @extend %title;
@ -172,14 +164,16 @@
position: relative; position: relative;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
p { .view-description {
@include transition(background .2s linear); .edit {
background: $whitish; @include transition(all .2s linear);
} opacity: 1;
.edit { top: -1.5rem;
@include transition(all .2s linear); }
opacity: 1; p {
top: -1.5rem; @include transition(background .2s linear);
background: $whitish;
}
} }
} }
&.wysiwyg { &.wysiwyg {
@ -190,19 +184,9 @@
height: 10rem; height: 10rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.edit {
@include transition(all .2s linear);
background: $whitish;
color: $grayer;
left: 0;
opacity: 0;
padding: .2rem .5rem;
position: absolute;
top: 0;
}
a.save { a.save {
color: $blackish; color: $blackish;
opacity: .8; opacity: .6;
position: absolute; position: absolute;
right: 1rem; right: 1rem;
top: .6rem; top: .6rem;
@ -217,6 +201,32 @@
@include animation (spin 1s linear infinite); @include animation (spin 1s linear infinite);
} }
} }
.edit {
color: $grayer;
}
.view-description {
.edit {
@include transition(all .2s linear);
background: $whitish;
left: 0;
opacity: 0;
padding: .2rem .5rem;
position: absolute;
top: 0;
}
}
.edit-description {
.save {
top: .4rem;
}
.edit {
@include transition(all .2s linear);
position: absolute;
right: 2.5rem;
top: .4rem;
}
}
} }
.comment-list { .comment-list {