issuable.scss 9.33 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
// Limit MR description for side-by-side diff view
.fixed-width-container {
  max-width: $limited-layout-width - ($gl-padding * 2);
  margin-left: auto;
  margin-right: auto;
}

.limit-container-width {
  .detail-page-header {
    @extend .fixed-width-container;
  }

  .issuable-details {
    .detail-page-description,
    .mr-source-target,
    .mr-state-widget,
    .merge-manually {
      @extend .fixed-width-container;
    }

    .merge-request-tabs-holder {
      &.affix {
        border-bottom: 1px solid $border-color;

        .nav-links {
          border: 0;
        }
      }
    }
  }

  .merge-request-details {
    .emoji-list-container {
      @extend .fixed-width-container;
    }
  }

  .diffs {
    .mr-version-controls,
    .files-changed {
      @extend .fixed-width-container;
    }
  }
}

46
.issuable-details {
47
  section {
48
    .issuable-discussion {
49 50 51
      margin-right: 1px;
    }
  }
52

53 54 55 56 57 58
  .title {
    padding: 0;
    margin: 0;
    border-bottom: none;
  }

59
  // Border around images in issue and MR descriptions.
60
  .description img:not(.emoji) {
61
    border: 1px solid $white-normal;
62
    padding: 5px;
63
    max-height: calc(100vh - 100px);
64
  }
65
}
66 67 68 69 70 71 72 73

.issuable-filter-count {
  span {
    display: block;
    margin-bottom: -16px;
    padding: 13px 0;
  }
}
74

Douwe Maan's avatar
Douwe Maan committed
75 76 77 78 79
.issuable-show-labels {
  a {
    margin-right: 5px;
    margin-bottom: 5px;
    display: inline-block;
80

Douwe Maan's avatar
Douwe Maan committed
81 82
    .color-label {
      padding: 6px 10px;
83
      border-radius: $label-border-radius;
Douwe Maan's avatar
Douwe Maan committed
84 85
    }
  }
Phil Hughes's avatar
Phil Hughes committed
86 87 88 89

  &.has-labels {
    margin-bottom: -5px;
  }
Douwe Maan's avatar
Douwe Maan committed
90 91
}

Phil Hughes's avatar
Phil Hughes committed
92
.right-sidebar {
93 94 95 96
  a {
    color: inherit;
  }

97 98 99 100
  .issuable-header-text {
    margin-top: 7px;
  }

101 102
  .block {
    @include clearfix;
103
    padding: $gl-padding 0;
104
    border-bottom: 1px solid $border-gray-normal;
105
    // This prevents the mess when resizing the sidebar
106
    // of elements repositioning themselves..
Jacob Schatz's avatar
Jacob Schatz committed
107
    width: $gutter_inner_width;
108
    // --
109

Phil Hughes's avatar
Phil Hughes committed
110 111 112
    &.issuable-sidebar-header {
      padding-top: 0;
      padding-bottom: 10px;
113 114
    }

115 116 117
    &:last-child {
      border: none;
    }
118

Jacob Schatz's avatar
Jacob Schatz committed
119
    span {
120 121 122
      display: inline-block;
    }

Jacob Schatz's avatar
Jacob Schatz committed
123 124 125 126
    .select2-container span {
      margin-top: 0;
    }

127
    .gutter-toggle {
Jacob Schatz's avatar
Jacob Schatz committed
128
      margin-left: 20px;
129
      padding-left: 10px;
130 131 132 133

      &:hover {
        color: $gray-darkest;
      }
134
    }
135
  }
136

Phil Hughes's avatar
Phil Hughes committed
137 138 139 140
  .block-first {
    padding-top: 0;
  }

141 142
  .title {
    color: $gl-text-color;
Phil Hughes's avatar
Phil Hughes committed
143 144
    margin-bottom: 10px;
    line-height: 1;
Valery Sizov's avatar
Valery Sizov committed
145

146 147
    .avatar {
      margin-left: 0;
Valery Sizov's avatar
Valery Sizov committed
148 149
    }

150
    .edit-link {
151
      color: $gl-text-color;
Phil Hughes's avatar
Phil Hughes committed
152

153 154
      &:not([href]):hover {
        color: rgba($avatar-border, .2);
Phil Hughes's avatar
Phil Hughes committed
155
      }
156
    }
Valery Sizov's avatar
Valery Sizov committed
157 158
  }

159
  .cross-project-reference {
160
    color: inherit;
161

162 163
    span {
      white-space: nowrap;
Jacob Schatz's avatar
Jacob Schatz committed
164
      width: 85%;
165 166 167 168 169
      overflow: hidden;
      position: relative;
      display: inline-block;
      text-overflow: ellipsis;
    }
Valery Sizov's avatar
Valery Sizov committed
170

171 172 173 174
    cite {
      font-style: normal;
    }

175 176
    button {
      float: right;
177 178
      padding: 1px 5px;
      background-color: $gray-light;
Valery Sizov's avatar
Valery Sizov committed
179
    }
180
  }
181

182
  .selectbox {
183
    display: none;
184
  }
185

186
  .btn-clipboard:hover {
187
    color: $gl-text-color;
Valery Sizov's avatar
Valery Sizov committed
188
  }
189
}
190 191

.right-sidebar {
192
  position: absolute;
193
  top: $header-height;
194
  bottom: 0;
195
  right: 0;
196
  transition: width .3s;
197 198
  background: $gray-light;
  padding: 10px 20px;
199
  z-index: 2;
200

201 202
  &.right-sidebar-expanded {
    width: $gutter_width;
203

Phil Hughes's avatar
Phil Hughes committed
204 205
    .value {
      line-height: 1;
206 207 208 209 210

      .assign-yourself {
        margin-top: 10px;
        display: block;
      }
Phil Hughes's avatar
Phil Hughes committed
211 212
    }

Phil Hughes's avatar
Phil Hughes committed
213 214 215 216
    .light {
      font-weight: normal;
    }

217
    .no-value {
218
      color: $gl-text-color-secondary;
219 220
    }

221 222 223 224 225
    .sidebar-collapsed-icon {
      display: none;
    }

    .gutter-toggle {
Phil Hughes's avatar
Phil Hughes committed
226
      margin-top: 7px;
227
      border-left: 1px solid $border-gray-normal;
228
    }
Phil Hughes's avatar
Phil Hughes committed
229

230
    .assignee .avatar {
Phil Hughes's avatar
Phil Hughes committed
231 232 233 234 235 236 237 238 239 240 241 242
      float: left;
      margin-right: 10px;
      margin-bottom: 0;
      margin-left: 0;
    }

    .username {
      display: block;
      margin-top: 4px;
      font-size: 13px;
      font-weight: normal;
    }
Phil Hughes's avatar
Phil Hughes committed
243 244 245 246

    .hide-expanded {
      display: none;
    }
247 248 249
  }

  &.right-sidebar-collapsed {
250 251 252
    /* Extra small devices (phones, less than 768px) */
    display: none;
    /* Small devices (tablets, 768px and up) */
253
    @media (min-width: $screen-sm-min) {
254
      display: block;
255 256
    }

257
    width: $gutter_collapsed_width;
258 259 260
    padding-top: 0;

    .block {
261
      width: $gutter_collapsed_width - 2px;
262
      margin-left: -19px;
263
      padding: 15px 0 0;
264 265
      border-bottom: none;
      overflow: hidden;
266
    }
267

Phil Hughes's avatar
Phil Hughes committed
268
    .participants {
269
      border-bottom: 1px solid $border-gray-normal;
Phil Hughes's avatar
Phil Hughes committed
270 271
    }

272
    .hide-collapsed {
Jacob Schatz's avatar
Jacob Schatz committed
273 274 275
      display: none;
    }

276
    .gutter-toggle {
Phil Hughes's avatar
Phil Hughes committed
277 278 279
      width: 100%;
      margin-left: 0;
      padding-left: 25px;
280 281 282 283
    }

    .sidebar-collapsed-icon {
      display: block;
284
      width: 100%;
285
      text-align: center;
Phil Hughes's avatar
Phil Hughes committed
286
      margin-bottom: 10px;
287
      color: $issuable-sidebar-color;
288

dimitrieh's avatar
dimitrieh committed
289 290
      &:hover,
      &:hover .todo-undone {
291
        color: $gl-text-color;
292 293
      }

294 295 296 297
      span {
        display: block;
        margin-top: 0;
      }
298

299 300 301 302
      .todo-undone {
        color: $gl-link-color;
      }

303 304 305 306
      .author {
        display: none;
      }

307
      .avatar:hover {
308
        border-color: $issuable-sidebar-color;
309 310
      }

311 312
      .btn-clipboard {
        border: none;
313
        color: $issuable-sidebar-color;
314 315 316

        &:hover {
          background: transparent;
317
          color: $gl-text-color;
318 319
        }
      }
320
    }
Phil Hughes's avatar
Phil Hughes committed
321 322 323 324 325

    .sidebar-collapsed-user {
      padding-bottom: 0;
      margin-bottom: 10px;
    }
326 327 328 329

    .issuable-header-btn {
      display: none;
    }
Jacob Schatz's avatar
Jacob Schatz committed
330 331
  }

332
  a {
Phil Hughes's avatar
Phil Hughes committed
333 334 335
    &:hover {
      color: $md-link-color;
      text-decoration: none;
336 337

      .avatar {
338
        border-color: rgba($avatar-border, .2);
339
      }
Phil Hughes's avatar
Phil Hughes committed
340 341
    }
  }
342

343 344 345 346 347 348
  .dropdown-content {
    a:hover {
      color: inherit;
    }
  }

349 350
  .dropdown-menu-toggle {
    width: 100%;
351
    padding-top: 6px;
352 353 354 355 356
  }

  .open .dropdown-menu {
    width: 100%;
  }
357
}
358 359 360 361 362

.detail-page-description {
  small {
    color: $gray-darkest;
  }
363
}
364 365 366 367 368 369 370 371

.edited-text {
  color: $gray-darkest;

  .author_link {
    color: $gray-darkest;
  }
}
Phil Hughes's avatar
Phil Hughes committed
372 373

.participants-list {
374
  margin: -5px;
Phil Hughes's avatar
Phil Hughes committed
375 376 377 378
}

.participants-author {
  display: inline-block;
379
  padding: 5px;
Phil Hughes's avatar
Phil Hughes committed
380

381 382 383 384
  &:nth-of-type(7n) {
    padding-right: 0;
  }

Phil Hughes's avatar
Phil Hughes committed
385 386 387 388 389 390 391 392 393 394 395 396 397 398
  .author_link {
    display: block;
  }

  .avatar.avatar-inline {
    margin: 0;
  }
}

.participants-more {
  margin-top: 5px;
  margin-left: 5px;

  a {
399
    color: $gl-text-color-secondary;
Phil Hughes's avatar
Phil Hughes committed
400 401
  }
}
402 403 404 405 406 407

.issuable-form-padding-top {
  @media (min-width: $screen-sm-min) {
    padding-top: 7px;
  }
}
408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453

.issuable-status-box {
  float: none;
  display: inline-block;
  margin-top: 0;

  @media (max-width: $screen-xs-max) {
    position: absolute;
    top: 0;
    left: 0;
  }
}

.issuable-header {
  position: relative;
  padding-left: 45px;
  padding-right: 45px;
  line-height: 35px;

  @media (min-width: $screen-sm-min) {
    float: left;
    padding-left: 0;
    padding-right: 0;
  }
}

.issuable-actions {
  padding-top: 10px;

  @media (min-width: $screen-sm-min) {
    float: right;
    padding-top: 0;
  }
}

.issuable-gutter-toggle {
  @media (max-width: $screen-sm-max) {
    position: absolute;
    top: 0;
    right: 0;
  }
}

.issuable-meta {
  display: inline-block;
  line-height: 18px;
454
  font-size: 14px;
455
}
456 457 458 459 460

.js-issuable-selector-wrap {
  .js-issuable-selector {
    width: 100%;
  }
461

462 463 464 465
  @media (max-width: $screen-sm-max) {
    margin-bottom: $gl-padding;
  }
}
466 467 468

.issuable-list {
  li {
Nur Rony's avatar
Nur Rony committed
469

470 471 472 473 474 475 476 477 478
    .issue-box {
      display: -webkit-flex;
      display: flex;
    }

    .issue-info-container {
      -webkit-flex: 1;
      flex: 1;
      padding-right: $gl-padding;
Nur Rony's avatar
Nur Rony committed
479 480
    }

481
    .issue-check {
482
      padding-right: $gl-padding;
483 484 485 486 487 488 489 490 491
      margin-bottom: 10px;
      min-width: 15px;

      .selected_issue {
        vertical-align: text-top;
      }
    }
  }
}
492 493 494 495 496 497 498 499 500 501 502 503 504 505 506

.time_tracker {
  padding-bottom: 0;
  border-bottom: 0;


  .sidebar-collapsed-icon {

    > .stopwatch-svg {
      display: inline-block;
    }

    svg {
      width: 16px;
      height: 16px;
507
      fill: $issuable-sidebar-color;
508 509 510
    }

    &:hover svg {
Bryce Johnson's avatar
Bryce Johnson committed
511
      fill: $gl-text-color;
512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528
    }
  }

  .help-button,
  .close-help-button {
    cursor: pointer;
  }

  .compare-meter {
    &.within_estimate {
      .meter-fill {
        background: $gl-primary;
      }
    }

    &.over_estimate {
      .meter-fill {
529
        background: $red-500;
530 531 532 533
      }

      .time-remaining,
      .compare-value.spent {
534
        color: $red-500;
535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557
      }
    }
  }

  .meter-container {
    background: $border-gray-light;
    border-radius: 3px;

    .meter-fill {
      max-width: 100%;
      height: 5px;
      border-radius: 3px;
      background: $gl-primary;
    }
  }

  .compare-display-container {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;

    .compare-display {
      font-size: 13px;
Bryce Johnson's avatar
Bryce Johnson committed
558
      color: $compare-display-color;
559 560

      .compare-value {
Bryce Johnson's avatar
Bryce Johnson committed
561
        color: $gl-text-color;
562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590
      }
    }
  }

  .time-tracking-help-state {
    background: $white-light;
    margin: 16px -20px 0;
    padding: 16px 20px;
    border-top: 1px solid $border-gray-light;
    border-bottom: 1px solid $border-gray-light;

    a:hover {
      color: $btn-white-active;
    }
  }

  .help-state-toggle-enter-active {
    transition: all .8s ease;
  }

  .help-state-toggle-leave-active {
    transition: all .5s ease;
  }

  .help-state-toggle-enter,
  .help-state-toggle-leave-active {
    opacity: 0;
  }
}
Phil Hughes's avatar
Phil Hughes committed
591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608

.issuable-todo-btn {
  .fa-spinner {
    display: none;
  }

  &.is-loading {
    .fa-spinner {
      display: inline-block;
    }

    &.sidebar-collapsed-icon {
      .issuable-todo-inner {
        display: none;
      }
    }
  }
}