notes.scss 5.88 KB
Newer Older
1 2 3
/**
 * Notes
 */
4

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
5
@-webkit-keyframes targe3-note {
6 7 8 9 10
  from { background:#fffff0; }
  50% { background:#ffffd3; }
  to { background:#fffff0; }
}

11
ul.notes {
12 13 14 15
  display: block;
  list-style: none;
  margin: 0px;
  padding: 0px;
16 17 18 19 20 21 22 23 24 25 26 27 28 29

  .discussion-header,
  .note-header {
    @extend .cgray;
    padding-top: 5px;
    padding-bottom: 15px;

    .avatar {
      float: left;
      margin-right: 10px;
    }

    .discussion-last-update,
    .note-last-update {
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
30 31 32 33
      &:before {
        content: "\00b7";
      }
      font-size: 13px;
34
    }
35
    .author {
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
36
      color: #555;
37
      font-weight: bold;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
38
      font-size: 14px;
39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
      &:hover {
        color: $primary_color;
      }
    }
  }

  .discussion {
    padding: 8px 0;
    overflow: hidden;
    display: block;
    position:relative;

    .discussion-body {
      margin-left: 50px;

54
      .diff-file,
55 56 57 58
      .discussion-hidden,
      .notes {
        background-color: #F9F9F9;
      }
59
      .diff-file .notes {
Riyad Preukschas's avatar
Riyad Preukschas committed
60 61 62 63 64
        /* reset */
        background: inherit;
        border: none;
        @include box-shadow(none);

65 66 67 68 69 70 71 72 73 74
      }
      .discussion-hidden .note {
        @extend .cgray;
        padding: 8px;
        text-align: center;
      }
      .notes .note {
        border-color: #ddd;
        padding: 8px;
      }
Riyad Preukschas's avatar
Riyad Preukschas committed
75 76 77
      .reply-btn {
        margin-top: 8px;
      }
78 79 80 81 82 83 84 85
    }
  }

  .note {
    padding: 8px 0;
    overflow: hidden;
    display: block;
    position:relative;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
86
    border-bottom: 1px solid #eee;
87 88 89
    p { color: $style_color; }

    .avatar {
90 91 92
      margin-top: 3px;
    }
    .attachment {
93
      font-size: 14px;
94 95
    }
    .note-body {
96
      @include md-typography;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
97
      margin-left: 43px;
98 99
    }
    .note-header {
100
      padding-bottom: 3px;
101
    }
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
102 103 104 105

    &:last-child {
      border-bottom: none;
    }
106 107
  }

108 109 110 111
  .note:target {
    -webkit-animation:target-note 2s linear;
    background: #fffff0;
  }
112
}
113

114
.diff-file .notes_holder {
115 116
  font-size: 13px;
  line-height: 18px;
117
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
118

119 120 121 122 123 124 125
  td {
    border: 1px solid #ddd;
    border-left: none;

    &.notes_line {
      text-align: center;
      padding: 10px 0;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
126
      background: #eee;
127
    }
128 129 130 131 132
    &.notes_line2 {
      text-align: center;
      padding: 10px 0;
      border-left: 1px solid #ddd !important;
    }
133
    &.notes_content {
134
      background-color: #fff;
135 136
      border-width: 1px 0;
      padding-top: 0;
137
      vertical-align: top;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
138 139 140 141

      li {
        padding: 5px;
      }
142
    }
143 144
  }

Riyad Preukschas's avatar
Riyad Preukschas committed
145
  .reply-btn {
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
146
    margin: 5px;
147 148
  }
}
149 150

/**
151
 * Actions for Discussions/Notes
152
 */
153

154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184
.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; }
      }
    }
  }
}
185
.diff-file .note .note-actions {
186 187
  right: 0;
  top: 0;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
188 189
}

190

191
/**
192
 * Line note button on the side of diffs
193
 */
194

195
.diff-file tr.line_holder {
196
  .add-diff-note {
197
    background: image-url("diff_note_add.png") no-repeat left 0;
198 199 200 201 202 203 204
    height: 22px;
    margin-left: -65px;
    position: absolute;
    width: 22px;
    z-index: 10;

    // "hide" it by default
205 206
    opacity: 0.0;
    filter: alpha(opacity=0);
207

208 209 210 211
    &:hover {
      opacity: 1.0;
      filter: alpha(opacity=100);
    }
212
  }
213

Kevin Lyda's avatar
Kevin Lyda committed
214
  // "show" the icon also if we just hover somewhere over the line
215 216 217 218 219 220
  &:hover > td {
    background: $hover !important;

    .add-diff-note {
      opacity: 1.0;
      filter: alpha(opacity=100);
221
    }
randx's avatar
randx committed
222
  }
223 224
}

225
/**
226
 * Note Form
227 228
 */

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
229
.comment-btn {
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
230
  @extend .btn-create;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
231
}
Riyad Preukschas's avatar
Riyad Preukschas committed
232
.reply-btn {
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
233
  @extend .btn-primary;
234
}
235 236 237 238 239 240 241 242 243 244 245
.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;
    }
246
  }
247 248 249 250

  tr.line_holder:hover > td .line_note_link {
    opacity: 1.0;
    filter: alpha(opacity=100);
251 252
  }
}
253
.diff-file,
254 255
.discussion {
  .new_note {
256 257
    margin: 0;
    border: none;
258 259 260
  }
}
.new_note {
Riyad Preukschas's avatar
Riyad Preukschas committed
261
  display: none;
262 263 264 265
  .buttons {
    float: left;
    margin-top: 8px;
  }
266 267 268
  .clearfix {
    margin-bottom: 0;
  }
269 270 271 272 273 274 275
  .note_text_and_preview {
    .note_preview {
      background: #f5f5f5;
      border: 1px solid #ddd;
      @include border-radius(4px);
      min-height: 80px;
      padding: 4px 6px;
276 277 278 279

      > p {
        overflow-x: auto;
      }
280 281
    }
    .note_text {
282 283
      border: 1px solid #DDD;
      box-shadow: none;
284 285
      font-size: 14px;
      height: 80px;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
286
      width: 100%;
Riyad Preukschas's avatar
Riyad Preukschas committed
287
    }
288
  }
289
}
290

291 292 293
/* loading indicator */
.notes-busy {
  margin: 18px;
Riyad Preukschas's avatar
Riyad Preukschas committed
294
}
295 296

.note-image-attach {
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
297
  @extend .col-md-4;
298 299
  @extend .thumbnail;
  margin-left: 45px;
300
  float: none;
301
}
302

303 304 305
.common-note-form {
  margin: 0;
  background: #F9F9F9;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
306
  padding: 5px;
307 308 309
  border: 1px solid #DDD;
}

310 311 312 313 314
.note-form-actions {
  background: #F9F9F9;
  height: 45px;

  .note-form-option {
315
    margin-top: 8px;
316
    margin-left: 30px;
317
    @extend .pull-left;
318 319 320 321
  }

  .js-notify-commit-author {
    float: left;
322
  }
323 324 325 326 327 328 329 330 331 332 333 334

  .write-preview-btn {
    // makes the "absolute" position for links relative to this
    position: relative;

    // preview/edit buttons
    > a {
      position: absolute;
      right: 5px;
      top: 8px;
    }
  }
335
}
Jack Weeden's avatar
Jack Weeden committed
336 337 338 339 340 341 342 343 344

.note-edit-form {
  display: none;

  .note_text {
    border: 1px solid #DDD;
    box-shadow: none;
    font-size: 14px;
    height: 80px;
345
    width: 100%;
Jack Weeden's avatar
Jack Weeden committed
346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364
  }

  .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;
}
365 366 367

.parallel-comment {
  padding: 6px;
368
}
369 370 371 372 373

.error-alert > .alert {
  margin-top: 5px;
  margin-bottom: 5px;
}