gitlab-org--gitlab-foss/app/assets/stylesheets/sections/notes.scss

361 lines
5.5 KiB
SCSS
Raw Normal View History

2012-02-26 17:41:53 -05:00
/**
* 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 {
&:before {
content: "\00b7";
}
font-size: 13px;
}
.author {
color: #555;
font-weight: bold;
font-size: 14px;
&:hover {
color: $link_hover_color;
}
}
}
.discussion {
padding: 10px 0;
overflow: hidden;
display: block;
position:relative;
border-bottom: 1px solid #EEE;
.discussion-body {
margin-left: 50px;
}
}
.note {
display: block;
position:relative;
p { color: $style_color; }
.avatar {
margin: 0;
2012-11-21 21:20:41 -05:00
}
.attachment {
2013-01-15 04:12:17 -05:00
font-size: 14px;
}
.note-body {
2013-03-04 14:34:26 -05:00
@include md-typography;
}
.note-header {
padding-bottom: 3px;
}
&:last-child {
border-bottom: none;
}
}
.note:target {
-webkit-animation:target-note 2s linear;
background: #fffff0;
}
}
.diff-file .notes_holder {
font-size: 13px;
line-height: 18px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
2012-11-20 11:46:55 -05:00
td {
border: 1px solid #ddd;
border-left: none;
&.notes_line {
text-align: center;
padding: 10px 0;
background: #eee;
2012-11-20 11:46:55 -05:00
}
&.notes_line2 {
text-align: center;
padding: 10px 0;
border-left: 1px solid #ddd !important;
}
2012-11-20 11:46:55 -05:00
&.notes_content {
background-color: #fff;
2012-11-20 11:46:55 -05:00
border-width: 1px 0;
padding-top: 0;
vertical-align: top;
2012-11-20 11:46:55 -05:00
}
}
}
/**
2012-12-03 15:43:17 -05:00
* Actions for Discussions/Notes
*/
2012-12-03 15:43:17 -05:00
.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: $link_hover_color;
&.danger { @extend .cred; }
}
}
}
}
.diff-file .note .note-actions {
right: 0;
top: 0;
2011-11-12 06:04:43 -05:00
}
2012-09-12 20:12:44 -04:00
2012-11-20 11:46:55 -05:00
/**
2012-12-03 15:43:17 -05:00
* Line note button on the side of diffs
2012-11-20 11:46:55 -05:00
*/
2012-12-03 15:43:17 -05:00
.diff-file tr.line_holder {
2012-11-20 11:46:55 -05:00
.add-diff-note {
background: image-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
2012-11-20 11:46:55 -05:00
opacity: 0.0;
filter: alpha(opacity=0);
2012-11-20 11:46:55 -05:00
&:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
}
// "show" the icon also if we just hover somewhere over the line
2012-11-20 11:46:55 -05:00
&:hover > td {
background: $hover !important;
.add-diff-note {
opacity: 1.0;
filter: alpha(opacity=100);
}
2012-07-10 13:15:33 -04:00
}
}
2012-11-20 11:46:55 -05:00
/**
2012-12-03 15:43:17 -05:00
* Note Form
2012-11-20 11:46:55 -05:00
*/
2013-01-29 15:18:19 -05:00
.comment-btn {
2013-01-29 15:29:21 -05:00
@extend .btn-create;
2013-01-29 15:18:19 -05:00
}
2012-12-02 14:43:39 -05:00
.reply-btn {
2013-01-29 15:29:21 -05:00
@extend .btn-primary;
2012-11-20 11:46:55 -05:00
}
.diff-file .diff-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;
}
}
tr.line_holder:hover > td .line_note_link {
opacity: 1.0;
filter: alpha(opacity=100);
}
}
.diff-file,
.discussion {
.new_note {
margin: 0;
border: none;
}
}
.new_note {
2012-12-02 14:43:39 -05:00
display: none;
.buttons {
float: left;
margin-top: 8px;
}
2012-12-03 16:34:50 -05:00
.clearfix {
margin-bottom: 0;
}
.note-preview-holder,
.note_text {
background: #FFF;
border: 1px solid #ddd;
min-height: 100px;
padding: 5px;
font-size: 14px;
box-shadow: none;
}
.note-preview-holder {
> p {
overflow-x: auto;
}
}
.note_text {
width: 100%;
}
.nav-tabs {
margin-bottom: 0;
border: none;
li a,
li.active a {
border: 1px solid #DDD;
2012-12-02 14:43:39 -05:00
}
2012-11-20 11:46:55 -05:00
}
2012-12-03 15:43:17 -05:00
}
2012-11-20 11:46:55 -05:00
2012-12-03 15:43:17 -05:00
/* loading indicator */
.notes-busy {
margin: 18px;
2012-12-02 14:43:39 -05:00
}
2013-01-15 04:12:17 -05:00
.note-image-attach {
@extend .col-md-4;
2013-01-15 04:12:17 -05:00
@extend .thumbnail;
margin-left: 45px;
float: none;
2013-01-15 04:12:17 -05:00
}
.common-note-form {
margin: 0;
background: #F9F9F9;
padding: 5px;
border: 1px solid #DDD;
}
.note-form-actions {
background: #F9F9F9;
height: 45px;
.note-form-option {
margin-top: 8px;
margin-left: 30px;
@extend .pull-left;
}
.js-notify-commit-author {
float: left;
}
.write-preview-btn {
// makes the "absolute" position for links relative to this
position: relative;
// preview/edit buttons
> a {
position: absolute;
right: 5px;
top: 8px;
}
}
}
2013-06-26 10:32:34 -04:00
.note-edit-form {
display: none;
.note_text {
border: 1px solid #DDD;
box-shadow: none;
font-size: 14px;
height: 80px;
2014-01-30 06:33:29 -05:00
width: 100%;
2013-06-26 10:32:34 -04:00
}
.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;
}
.error-alert > .alert {
margin-top: 5px;
margin-bottom: 5px;
}
.discussion-body,
.diff-file {
.notes .note {
border-color: #ddd;
padding: 10px 15px;
}
.discussion-reply-holder {
background: #f9f9f9;
padding: 10px 15px;
border-top: 1px solid #DDD;
}
}