notes.scss 4.99 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;
61

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

      .note-edit-form {
        display: block;
      }
    }

74
    .note-body {
75
      overflow: auto;
76

77 78 79 80
      .note-text {
        overflow: auto;
        word-wrap: break-word;
        @include md-typography;
81

82
        // On diffs code should wrap nicely and not overflow
83 84
        pre {
          code {
85
            white-space: pre;
86 87 88
          }
        }

89 90 91 92 93 94 95 96 97 98 99 100 101
        // 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;
            }
          }
        }

102 103 104
        ul.task-list {
          ul:not(.task-list) {
            padding-left: 1.3em;
105 106 107
          }
        }

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

116
    .note-header {
117
      padding-bottom: 3px;
118
    }
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
119 120

    &:last-child {
121
      border-bottom: 1px solid $border-color;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
122
    }
123 124
  }
}
125

126
// Diff code in discussion view
127 128 129 130 131 132 133
.discussion-body .diff-file {
  .diff-header > span {
    margin-right: 10px;
  }
  .line_content {
    white-space: pre-wrap;
  }
134 135
}

136
.diff-file .notes_holder {
137
  font-family: $regular_font;
138

139 140 141 142 143
  td {
    border: 1px solid #ddd;
    border-left: none;

    &.notes_line {
144
      vertical-align: middle;
145 146
      text-align: center;
      padding: 10px 0;
147
      background: #fff;
148
      color: $text-color;
149
    }
150 151 152 153 154
    &.notes_line2 {
      text-align: center;
      padding: 10px 0;
      border-left: 1px solid #ddd !important;
    }
155
    &.notes_content {
156
      background-color: #fff;
157
      border-width: 1px 0;
Phil Hughes's avatar
Phil Hughes committed
158
      padding: 0;
159
      vertical-align: top;
160
      &.parallel {
161 162
        border-width: 1px;
      }
163
    }
164 165
  }
}
166

167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184
.discussion-header,
.note-header {
  a {
    color: inherit;

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

  .author_link {
    font-weight: 600;
  }
}

.note-headline-light,
.discussion-headline-light {
Phil Hughes's avatar
Phil Hughes committed
185
  color: $notes-light-color;
186 187
}

188
/**
189
 * Actions for Discussions/Notes
190
 */
191

192 193 194 195
.discussion-actions,
.note-actions {
  float: right;
  margin-left: 10px;
Phil Hughes's avatar
Phil Hughes committed
196
  color: $notes-action-color;
197
}
198

199 200
.note-action-button,
.discussion-action-button {
201
  display: inline-block;
202
  margin-left: 10px;
203
  line-height: 24px;
204

205
  .fa {
Phil Hughes's avatar
Phil Hughes committed
206 207 208 209 210 211 212
    position: relative;
    top: 1px;
    font-size: 17px;
  }

  .fa-trash-o {
    top: 0;
213 214
    font-size: 16px;
  }
215
}
216

217 218 219
.discussion-toggle-button {
  line-height: 20px;
  font-size: 13px;
220

221 222 223 224 225
  .fa {
    margin-right: 3px;
    font-size: 10px;
    line-height: 18px;
    vertical-align: top;
226 227
  }
}
228 229 230 231 232 233 234

.note-role {
  position: relative;
  top: -2px;
  display: inline-block;
  padding-left: 4px;
  padding-right: 4px;
Phil Hughes's avatar
Phil Hughes committed
235
  color: $notes-role-color;
236 237
  font-size: 12px;
  line-height: 20px;
Phil Hughes's avatar
Phil Hughes committed
238
  border: 1px solid $notes-role-border-color;
239 240 241
  border-radius: $border-radius-base;
}

242
.diff-file .note .note-actions {
243 244
  right: 0;
  top: 0;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
245 246
}

247

248
/**
249
 * Line note button on the side of diffs
250
 */
251

252
.diff-file tr.line_holder {
253 254 255 256 257
  @mixin show-add-diff-note {
    filter: alpha(opacity=100);
    opacity: 1.0;
  }

258
  .add-diff-note {
259 260
    margin-top: -4px;
    @include border-radius(40px);
261
    background: #fff;
262 263
    padding: 4px;
    font-size: 16px;
264
    color: $gl-link-color;
265
    margin-left: -60px;
266 267
    position: absolute;
    z-index: 10;
268
    width: 32px;
269

270 271
    transition: all 0.2s ease;

272
    // "hide" it by default
273 274
    opacity: 0.0;
    filter: alpha(opacity=0);
275

276
    &:hover {
277
      background: $gl-info;
278
      color: #fff;
279
      @include show-add-diff-note;
280
    }
281
  }
282

Kevin Lyda's avatar
Kevin Lyda committed
283
  // "show" the icon also if we just hover somewhere over the line
284 285
  &:hover > td {
    .add-diff-note {
286
      @include show-add-diff-note;
287
    }
randx's avatar
randx committed
288
  }
289
}
Phil Hughes's avatar
Phil Hughes committed
290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307

.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;
  }
}