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

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

11
ul.notes {
12 13
  display: block;
  list-style: none;
14 15
  margin: 0;
  padding: 0;
16

17 18 19 20 21
  .timeline-icon {
    float: left;
  }

  .timeline-content {
Alfredo Sumaran's avatar
Alfredo Sumaran committed
22
    margin-left: 55px;
23 24 25 26 27 28

    &.timeline-content-form {
      @media (max-width: $screen-sm-max) {
        margin-left: 0;
      }
    }
29 30
  }

31
  .note-created-ago, .note-updated-at {
32 33 34
    white-space: nowrap;
  }

35 36 37 38
  .system-note {
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
39
    background: #fdfdfd;
40 41 42 43 44 45 46 47

    .timeline-icon {
      .avatar {
        visibility: hidden;
      }
    }
  }

48 49 50 51
  .discussion-body {
    padding-top: 15px;
  }

52 53 54
  .discussion {
    overflow: hidden;
    display: block;
55
    position: relative;
56 57 58 59
  }

  .note {
    display: block;
60
    position: relative;
Annabel Dunstone's avatar
Annabel Dunstone committed
61
    border-bottom: 1px solid $table-border-gray;
62

63 64 65 66 67 68 69 70 71
    &.is-editting {
      .note-header,
      .note-text,
      .edited-text {
        display: none;
      }

      .note-edit-form {
        display: block;
Fatih Acet's avatar
Fatih Acet committed
72 73 74 75

        &.current-note-edit-form + .note-awards {
          display: none;
        }
76 77 78
      }
    }

79
    .note-body {
80
      overflow: auto;
81

82 83 84 85
      .note-text {
        overflow: auto;
        word-wrap: break-word;
        @include md-typography;
86

87
        // On diffs code should wrap nicely and not overflow
Annabel Dunstone's avatar
Annabel Dunstone committed
88 89
        code {
          white-space: pre-wrap;
90 91
        }

92 93 94 95 96 97 98 99 100 101 102 103 104
        // Reset ul style types since we're nested inside a ul already
        & > ul {
          list-style-type: disc;

          ul {
            list-style-type: circle;

            ul {
              list-style-type: square;
            }
          }
        }

105 106 107
        ul.task-list {
          ul:not(.task-list) {
            padding-left: 1.3em;
108 109 110
          }
        }

111
        hr {
112
          // Darken 'whitesmoke' a bit to make it more visible in note bodies
113
          border-color: darken(#f5f5f5, 8%);
114
          margin: 10px 0;
115
        }
116 117 118 119

        code {
          word-break: keep-all;
        }
120
      }
121
    }
122

Fatih Acet's avatar
Fatih Acet committed
123 124
    .note-awards {
      .js-awards-block {
125
        padding: 2px;
Fatih Acet's avatar
Fatih Acet committed
126 127 128 129 130 131 132 133 134
        margin-top: 10px;
      }

      .award-control {
        font-size: 13px;
        padding: 2px 5px;
      }
    }

135
    .note-header {
136
      padding-bottom: 3px;
137 138 139 140 141
      padding-right: 20px;

      @media (min-width: $screen-sm-min) {
        padding-right: 0;
      }
142
    }
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
143

Fatih Acet's avatar
Fatih Acet committed
144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159
    .note-emoji-button {
      .fa-spinner {
        display: none;
      }

      &.is-loading {
        .fa-smile-o {
          display: none;
        }

        .fa-spinner {
          display: inline-block;
        }
      }
    }

160 161
  }
}
162

163
// Diff code in discussion view
164 165 166 167 168
.discussion-body .diff-file {
  .diff-header > span {
    margin-right: 10px;
  }
  .line_content {
Annabel Dunstone's avatar
Annabel Dunstone committed
169
    white-space: pre-wrap;
170
  }
171 172
}

173
.diff-file .notes_holder {
174
  font-family: $regular_font;
175

176
  td {
Annabel Dunstone's avatar
Annabel Dunstone committed
177
    border: 1px solid $table-border-gray;
178 179 180
    border-left: none;

    &.notes_line {
181
      vertical-align: middle;
182 183
      text-align: center;
      padding: 10px 0;
Annabel Dunstone's avatar
Annabel Dunstone committed
184
      background: $background-color;
185
      color: $text-color;
186
    }
Annabel Dunstone's avatar
Annabel Dunstone committed
187

188 189 190 191 192
    &.notes_line2 {
      text-align: center;
      padding: 10px 0;
      border-left: 1px solid #ddd !important;
    }
Annabel Dunstone's avatar
Annabel Dunstone committed
193

194
    &.notes_content {
Annabel Dunstone's avatar
Annabel Dunstone committed
195
      background-color: $background-color;
196
      border-width: 1px 0;
Phil Hughes's avatar
Phil Hughes committed
197
      padding: 0;
198
      vertical-align: top;
199
      white-space: normal;
Annabel Dunstone's avatar
Annabel Dunstone committed
200

201
      &.parallel {
202 203
        border-width: 1px;
      }
Annabel Dunstone's avatar
Annabel Dunstone committed
204 205 206 207

      .notes {
        background-color: $white-light;
      }
208 209 210 211 212

      a code {
        top: 0;
        margin-right: 0;
      }
213
    }
214 215
  }
}
216

217 218
.discussion-header,
.note-header {
219 220
  position: relative;

221 222 223 224 225 226 227 228 229
  a {
    color: inherit;

    &:hover {
      color: $gl-link-color;
      text-decoration: none;
    }
  }

230 231 232
  .author_link {
    color: $gl-gray;
  }
233 234 235 236
}

.note-headline-light,
.discussion-headline-light {
Phil Hughes's avatar
Phil Hughes committed
237
  color: $notes-light-color;
238 239
}

Phil Hughes's avatar
Phil Hughes committed
240 241 242 243 244 245
.discussion-headline-light {
  a {
    color: $gl-link-color;
  }
}

246
/**
247
 * Actions for Discussions/Notes
248
 */
249

250 251 252 253
.discussion-actions,
.note-actions {
  float: right;
  margin-left: 10px;
Phil Hughes's avatar
Phil Hughes committed
254
  color: $notes-action-color;
255
}
256

257 258 259 260
.note-actions {
  position: absolute;
  right: 0;
  top: 0;
261
  
262 263 264 265 266
  @media (min-width: $screen-sm-min) {
    position: relative;
  }
}

Phil Hughes's avatar
Phil Hughes committed
267
.discussion-actions {
268
  @media (max-width: $screen-md-max) {
Phil Hughes's avatar
Phil Hughes committed
269 270 271 272 273 274 275 276 277
    float: none;
    margin-left: 0;

    .note-action-button {
      margin-left: 0;
    }
  }
}

278
.note-action-button {
279
  display: inline-block;
280 281 282 283 284 285 286
  margin-left: 0;
  line-height: 20px;

  @media (min-width: $screen-sm-min) {
    margin-left: 10px;
    line-height: 24px;
  }
287

288
  .fa {
Annabel Dunstone's avatar
Annabel Dunstone committed
289
    color: $notes-action-color;
Phil Hughes's avatar
Phil Hughes committed
290 291 292 293 294
    position: relative;
    top: 1px;
    font-size: 17px;
  }

Annabel Dunstone's avatar
Annabel Dunstone committed
295 296 297 298 299 300 301 302 303 304 305 306 307 308
  &.js-note-delete {
    i {
      &:hover {
        color: $gl-text-red;
      }
    }
  }

  &.js-note-edit {
    i {
      &:hover {
        color: $gl-link-color;
      }
    }
309
  }
310
}
311

312 313 314
.discussion-toggle-button {
  line-height: 20px;
  font-size: 13px;
315

316 317 318 319 320
  .fa {
    margin-right: 3px;
    font-size: 10px;
    line-height: 18px;
    vertical-align: top;
321 322
  }
}
323 324 325 326 327 328 329

.note-role {
  position: relative;
  top: -2px;
  display: inline-block;
  padding-left: 4px;
  padding-right: 4px;
Phil Hughes's avatar
Phil Hughes committed
330
  color: $notes-role-color;
331 332
  font-size: 12px;
  line-height: 20px;
Phil Hughes's avatar
Phil Hughes committed
333
  border: 1px solid $notes-role-border-color;
334 335 336
  border-radius: $border-radius-base;
}

337
.diff-file .note .note-actions {
338 339
  right: 0;
  top: 0;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
340 341
}

342

343
/**
344
 * Line note button on the side of diffs
345
 */
346

347
.diff-file tr.line_holder {
348
  @mixin show-add-diff-note {
349
    display: inline-block;
350 351
  }

352
  .add-diff-note {
353 354
    margin-top: -4px;
    @include border-radius(40px);
355
    background: #fff;
356 357
    padding: 4px;
    font-size: 16px;
358
    color: $gl-link-color;
359
    margin-left: -56px;
360 361
    position: absolute;
    z-index: 10;
362
    width: 32px;
363
    // "hide" it by default
364
    display: none;
365
    &:hover {
366
      background: $gl-info;
367
      color: #fff;
368
      @include show-add-diff-note;
369
    }
370
  }
371

Kevin Lyda's avatar
Kevin Lyda committed
372
  // "show" the icon also if we just hover somewhere over the line
373 374
  &:hover > td {
    .add-diff-note {
375
      @include show-add-diff-note;
376
    }
randx's avatar
randx committed
377
  }
378
}
Phil Hughes's avatar
Phil Hughes committed
379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396

.disabled-comment {
  margin-left: -$gl-padding-top;
  margin-right: -$gl-padding-top;
  background-color: $gray-light;
  border-radius: $border-radius-base;
  border: 1px solid $border-gray-normal;
  color: $note-disabled-comment-color;
  line-height: 200px;

  .disabled-comment-text {
    line-height: normal;
  }

  a {
    color: $gl-link-color;
  }
}