gitlabhq/app/assets/stylesheets/sections/notes.scss
2013-03-04 21:34:26 +02:00

290 lines
4.6 KiB
SCSS

/**
* Notes
*/
ul.notes {
display: block;
list-style: none;
margin: 0px;
padding: 0px;
.discussion-header,
.note-header {
@extend .cgray;
padding-top: 5px;
padding-bottom: 15px;
.avatar {
float: left;
margin-right: 10px;
}
.discussion-last-update,
.note-last-update {
font-style: italic;
}
.author {
color: $style_color;
font-weight: bold;
&:hover {
color: $primary_color;
}
}
}
.discussion {
padding: 8px 0;
overflow: hidden;
display: block;
position:relative;
.discussion-body {
margin-left: 50px;
.file,
.discussion-hidden,
.notes {
@extend .borders;
background-color: #F9F9F9;
}
.file .notes {
/* reset */
background: inherit;
border: none;
@include box-shadow(none);
}
.discussion-hidden .note {
@extend .cgray;
padding: 8px;
text-align: center;
}
.notes .note {
border-color: #ddd;
padding: 8px;
}
.reply-btn {
margin-top: 8px;
}
}
}
.note {
padding: 8px 0;
overflow: hidden;
display: block;
position:relative;
p { color: $style_color; }
.avatar {
margin-top: 3px;
}
.attachment {
font-size: 14px;
margin-top: -20px;
}
.note-body {
@include md-typography;
margin-left: 45px;
}
.note-header {
padding-bottom: 5px;
}
}
// paint top or bottom borders depending on notes direction
&:not(.reversed) .note,
&:not(.reversed) .discussion {
border-bottom: 1px solid #eee;
}
&.reversed .note,
&.reversed .discussion {
border-top: 1px solid #eee;
}
}
.file .notes_holder {
font-family: $sansFontFamily;
font-size: 13px;
line-height: 18px;
td {
border: 1px solid #ddd;
border-left: none;
&.notes_line {
text-align: center;
padding: 10px 0;
}
&.notes_content {
background-color: $white;
border-width: 1px 0;
padding-top: 0;
}
}
.reply-btn {
margin-top: 8px;
}
}
/**
* Actions for Discussions/Notes
*/
.discussion,
.note {
&.note:hover {
.note-actions { display: block; }
}
.discussion-header:hover {
.discussion-actions { display: block; }
}
.discussion-actions,
.note-actions {
display: none;
float: right;
[class^="icon-"],
[class*="icon-"] {
font-size: 16px;
line-height: 16px;
vertical-align: middle;
}
a {
@extend .cgray;
&:hover {
color: $primary_color;
&.danger { @extend .cred; }
}
}
}
}
.file .note .note-actions {
right: 0;
top: 0;
}
/**
* Line note button on the side of diffs
*/
.file tr.line_holder {
.add-diff-note {
background: url("diff_note_add.png") no-repeat left 0;
height: 22px;
margin-left: -65px;
position: absolute;
width: 22px;
z-index: 10;
// "hide" it by default
opacity: 0.0;
filter: alpha(opacity=0);
&:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
}
// "show" the icon also if we just hover somwhere over the line
&:hover > td {
background: $hover !important;
.add-diff-note {
opacity: 1.0;
filter: alpha(opacity=100);
}
}
}
/**
* Note Form
*/
.comment-btn {
@extend .btn-create;
}
.reply-btn {
@extend .btn-primary;
}
.file .content tr.line_holder:hover > td { background: $hover !important; }
.file .content tr.line_holder:hover > td .line_note_link {
opacity: 1.0;
filter: alpha(opacity=100);
}
.file,
.discussion {
.new_note {
margin: 8px 5px 8px 0;
}
}
.new_note {
display: none;
.buttons {
float: left;
margin-top: 8px;
}
.clearfix {
margin-bottom: 0;
}
.note_text_and_preview {
// makes the "absolute" position for links relative to this
position: relative;
// preview/edit buttons
> a {
font-size: 24px;
padding: 4px;
position: absolute;
right: 10px;
}
.note_preview {
background: #f5f5f5;
border: 1px solid #ddd;
@include border-radius(4px);
min-height: 80px;
padding: 4px 6px;
}
.note_text {
border: 1px solid #DDD;
box-shadow: none;
font-size: 14px;
height: 80px;
width: 98.6%;
}
}
}
/* loading indicator */
.notes-busy {
margin: 18px;
}
.note-image-attach {
@extend .span4;
@extend .thumbnail;
margin-left: 45px;
}
.note-form-actions {
background: #F9F9F9;
height: 45px;
padding: 0 5px;
.note-form-option {
margin-top: 8px;
margin-left: 15px;
@extend .pull-left;
@extend .span4;
}
}