gitlab-org--gitlab-foss/app/assets/stylesheets/sections/notes.scss
Dmitriy Zaporozhets 8c1d414674
Include tw bootstrap manually. Fix hide class
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
2014-01-01 21:42:42 +02:00

367 lines
5.9 KiB
SCSS

/**
* Notes
*/
@-webkit-keyframes targe3-note {
from { background:#fffff0; }
50% { background:#ffffd3; }
to { background:#fffff0; }
}
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;
.highlight {
@include border-radius(4px);
}
}
.note-header {
padding-bottom: 5px;
}
}
.note:target {
-webkit-animation:target-note 2s linear;
background: #fffff0;
}
// 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-size: 13px;
line-height: 18px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
td {
border: 1px solid #ddd;
border-left: none;
&.notes_line {
text-align: center;
padding: 10px 0;
background: #eee;
}
&.notes_line2 {
text-align: center;
padding: 10px 0;
border-left: 1px solid #ddd !important;
}
&.notes_content {
background-color: #fff;
border-width: 1px 0;
padding-top: 0;
li {
padding: 5px;
}
}
}
.reply-btn {
margin: 5px;
}
}
/**
* 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 somewhere 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.line_content {
background: $hover !important;
border-color: darken($hover, 10%) !important;
}
&> td.new_line,
&> td.old_line {
background: darken($hover, 4%) !important;
border-color: darken($hover, 10%) !important;
}
}
.file .content tr.line_holder:hover > td .line_note_link {
opacity: 1.0;
filter: alpha(opacity=100);
}
.file,
.discussion {
.new_note {
margin: 0;
border: none;
}
}
.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 {
position: absolute;
right: 5px;
bottom: -60px;
}
.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 .col-md-4;
@extend .thumbnail;
margin-left: 45px;
}
.common-note-form {
margin: 0;
background: #F9F9F9;
padding: 3px;
border: 1px solid #DDD;
}
.note-form-actions {
background: #F9F9F9;
height: 45px;
padding: 0 5px;
.note-form-option {
margin-top: 8px;
margin-left: 30px;
@extend .pull-left;
}
.js-notify-commit-author {
float: left;
}
}
.note-edit-form {
display: none;
.note_text {
border: 1px solid #DDD;
box-shadow: none;
font-size: 14px;
height: 80px;
width: 98.6%;
}
.form-actions {
padding-left: 20px;
.btn-save {
float: left;
}
.note-form-option {
float: left;
padding: 2px 0 0 25px;
}
}
}
.js-note-attachment-delete {
display: none;
}
.parallel-comment {
padding: 6px;
}