issuable.scss 11.2 KB
Newer Older
1 2 3 4 5 6 7 8
// 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 {
9 10 11 12 13 14
  .detail-page-header,
  .page-content-header,
  .commit-box,
  .info-well,
  .commit-ci-menu,
  .files-changed {
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
    @extend .fixed-width-container;
  }

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

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

  .diffs {
34
    .mr-version-controls {
35 36 37 38 39
      @extend .fixed-width-container;
    }
  }
}

40
.issuable-details {
41
  section {
42
    .issuable-discussion {
43 44 45
      margin-right: 1px;
    }
  }
46

47 48
  .title {
    padding: 0;
49
    margin-bottom: 16px;
50 51 52
    border-bottom: none;
  }

53
  // Border around images in issue and MR descriptions.
54
  .description img:not(.emoji) {
55
    border: 1px solid $white-normal;
56
    padding: 5px;
57
    max-height: calc(100vh - 100px);
58
  }
59 60 61 62

  .emoji-block {
    padding: 10px 0 4px;
  }
63
}
64 65 66 67 68 69 70 71

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

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

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

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

Phil Hughes's avatar
Phil Hughes committed
90
.right-sidebar {
91 92
  a,
  .btn-link {
93 94 95
    color: inherit;
  }

96 97 98 99
  .btn-link {
    outline: none;
  }

100 101 102 103
  .issuable-header-text {
    margin-top: 7px;
  }

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

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

118 119 120
    &:last-child {
      border: none;
    }
121

Jacob Schatz's avatar
Jacob Schatz committed
122
    span {
123 124 125
      display: inline-block;
    }

Jacob Schatz's avatar
Jacob Schatz committed
126 127 128 129
    .select2-container span {
      margin-top: 0;
    }

130
    .gutter-toggle {
Jacob Schatz's avatar
Jacob Schatz committed
131
      margin-left: 20px;
132
      padding-left: 10px;
133 134 135 136

      &:hover {
        color: $gray-darkest;
      }
137
    }
138
  }
139

Phil Hughes's avatar
Phil Hughes committed
140 141 142 143
  .block-first {
    padding-top: 0;
  }

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

149 150
    .avatar {
      margin-left: 0;
Valery Sizov's avatar
Valery Sizov committed
151 152
    }

153
    .edit-link {
154
      color: $gl-text-color;
Phil Hughes's avatar
Phil Hughes committed
155

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

162
  .cross-project-reference {
163
    color: inherit;
164

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

174 175 176 177
    cite {
      font-style: normal;
    }

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

185
  .selectbox {
186
    display: none;
187
  }
188

189
  .btn-clipboard:hover {
190
    color: $gl-text-color;
Valery Sizov's avatar
Valery Sizov committed
191
  }
192
}
193 194

.right-sidebar {
195
  position: absolute;
196
  top: $header-height;
197
  bottom: 0;
198
  right: 0;
199
  transition: width .3s;
200
  background: $gray-light;
201
  padding: 0 20px;
202
  z-index: 200;
203 204 205 206 207 208 209 210 211
  overflow: hidden;

  .issuable-sidebar {
    width: calc(100% + 100px);
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
212

213 214
  &.right-sidebar-expanded {
    width: $gutter_width;
215

Phil Hughes's avatar
Phil Hughes committed
216 217
    .value {
      line-height: 1;
218 219 220 221 222

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

225 226 227 228
    .issuable-sidebar-header {
      padding-top: 10px;
    }

229 230 231 232
    .assign-yourself .btn-link {
      padding-left: 0;
    }

Phil Hughes's avatar
Phil Hughes committed
233 234 235 236
    .light {
      font-weight: normal;
    }

237
    .no-value {
238
      color: $gl-text-color-secondary;
239 240
    }

241 242 243 244 245
    .sidebar-collapsed-icon {
      display: none;
    }

    .gutter-toggle {
Phil Hughes's avatar
Phil Hughes committed
246
      margin-top: 7px;
247
      border-left: 1px solid $border-gray-normal;
248
    }
Phil Hughes's avatar
Phil Hughes committed
249

250
    .assignee .avatar {
Phil Hughes's avatar
Phil Hughes committed
251 252 253 254 255 256
      float: left;
      margin-right: 10px;
      margin-bottom: 0;
      margin-left: 0;
    }

257 258 259 260
    .assignee .user-list .avatar {
      margin: 0;
    }

Phil Hughes's avatar
Phil Hughes committed
261 262 263 264 265 266
    .username {
      display: block;
      margin-top: 4px;
      font-size: 13px;
      font-weight: normal;
    }
Phil Hughes's avatar
Phil Hughes committed
267 268 269 270

    .hide-expanded {
      display: none;
    }
271 272 273
  }

  &.right-sidebar-collapsed {
274 275 276
    /* Extra small devices (phones, less than 768px) */
    display: none;
    /* Small devices (tablets, 768px and up) */
277
    @media (min-width: $screen-sm-min) {
278
      display: block;
279 280
    }

281
    width: $gutter_collapsed_width;
282
    padding: 0;
283 284

    .block {
285
      width: $gutter_collapsed_width - 2px;
286
      padding: 15px 0 0;
287 288
      border-bottom: none;
      overflow: hidden;
289
    }
290

Phil Hughes's avatar
Phil Hughes committed
291
    .participants {
292
      border-bottom: 1px solid $border-gray-normal;
Phil Hughes's avatar
Phil Hughes committed
293 294
    }

295
    .hide-collapsed {
Jacob Schatz's avatar
Jacob Schatz committed
296 297 298
      display: none;
    }

299
    .gutter-toggle {
Phil Hughes's avatar
Phil Hughes committed
300 301 302
      width: 100%;
      margin-left: 0;
      padding-left: 25px;
303 304 305 306
    }

    .sidebar-collapsed-icon {
      display: block;
307
      width: 100%;
308
      text-align: center;
Phil Hughes's avatar
Phil Hughes committed
309
      margin-bottom: 10px;
310
      color: $issuable-sidebar-color;
311

dimitrieh's avatar
dimitrieh committed
312 313
      &:hover,
      &:hover .todo-undone {
314
        color: $gl-text-color;
315 316
      }

317 318 319 320
      span {
        display: block;
        margin-top: 0;
      }
321

322 323 324 325
      .sidebar-avatar-counter {
        padding-top: 2px;
      }

326 327 328 329
      .todo-undone {
        color: $gl-link-color;
      }

330 331 332 333
      .author {
        display: none;
      }

334 335
      .avatar:hover,
      .avatar-counter:hover {
336
        border-color: $issuable-sidebar-color;
337 338
      }

339 340 341 342
      .avatar-counter:hover {
        color: $issuable-sidebar-color;
      }

343 344
      .btn-clipboard {
        border: none;
345
        color: $issuable-sidebar-color;
346 347 348

        &:hover {
          background: transparent;
349
          color: $gl-text-color;
350 351
        }
      }
352 353 354 355 356 357 358 359 360 361 362

      &.multiple-users {
        display: flex;
        justify-content: center;
      }
    }

    .sidebar-avatar-counter {
      width: 24px;
      height: 24px;
      border-radius: 12px;
363
    }
Phil Hughes's avatar
Phil Hughes committed
364 365 366 367 368

    .sidebar-collapsed-user {
      padding-bottom: 0;
      margin-bottom: 10px;
    }
369 370 371 372

    .issuable-header-btn {
      display: none;
    }
373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403

    .multiple-users {
      height: 24px;
      margin-bottom: 17px;
      margin-top: 4px;
      padding-bottom: 4px;

      .btn-link {
        padding: 0;
        border: 0;

        .avatar {
          margin: 0;
        }
      }

      .btn-link:first-child {
        position: absolute;
        left: 10px;
        z-index: 1;
      }

      .btn-link:last-child {
        position: absolute;
        right: 10px;

        &:hover {
          text-decoration: none;
        }
      }
    }
Jacob Schatz's avatar
Jacob Schatz committed
404 405
  }

406
  a {
Phil Hughes's avatar
Phil Hughes committed
407 408 409
    &:hover {
      color: $md-link-color;
      text-decoration: none;
410 411

      .avatar {
412
        border-color: rgba($avatar-border, .2);
413
      }
Phil Hughes's avatar
Phil Hughes committed
414 415
    }
  }
416

417 418 419 420 421 422
  .dropdown-content {
    a:hover {
      color: inherit;
    }
  }

423 424
  .dropdown-menu-toggle {
    width: 100%;
425
    padding-top: 6px;
426 427 428 429 430
  }

  .open .dropdown-menu {
    width: 100%;
  }
431
}
432 433

.detail-page-description {
434
  padding: 16px 0;
435

436 437 438
  small {
    color: $gray-darkest;
  }
439
}
440 441 442

.edited-text {
  color: $gray-darkest;
443
  display: block;
444
  margin: 16px 0 0;
445 446 447 448 449

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

.participants-list {
452
  margin: -5px;
Phil Hughes's avatar
Phil Hughes committed
453 454
}

455

456 457 458 459 460
.user-list {
  display: flex;
  flex-wrap: wrap;
}

Phil Hughes's avatar
Phil Hughes committed
461
.participants-author {
462
  display: inline-block;
463
  padding: 5px;
Phil Hughes's avatar
Phil Hughes committed
464

465 466 467 468
  &:nth-of-type(7n) {
    padding-right: 0;
  }

Phil Hughes's avatar
Phil Hughes committed
469 470 471 472 473 474 475 476 477
  .author_link {
    display: block;
  }

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

478 479 480 481 482 483 484 485 486 487 488 489
.user-item {
  display: inline-block;
  padding: 5px;
  flex-basis: 20%;

  .user-link {
    display: inline-block;
  }
}

.participants-more,
.user-list-more {
Phil Hughes's avatar
Phil Hughes committed
490 491 492
  margin-top: 5px;
  margin-left: 5px;

493 494
  a,
  .btn-link {
495
    color: $gl-text-color-secondary;
Phil Hughes's avatar
Phil Hughes committed
496
  }
497 498 499 500 501 502 503 504 505 506 507 508 509 510

  .btn-link {
    outline: none;
    padding: 0;
  }

  .btn-link:hover {
    @extend a:hover;
    text-decoration: none;
  }

  .btn-link:focus {
    text-decoration: none;
  }
Phil Hughes's avatar
Phil Hughes committed
511
}
512 513 514 515 516 517

.issuable-form-padding-top {
  @media (min-width: $screen-sm-min) {
    padding-top: 7px;
  }
}
518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563

.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;
564
  font-size: 14px;
565
}
566 567 568 569 570

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

572 573 574 575
  @media (max-width: $screen-sm-max) {
    margin-bottom: $gl-padding;
  }
}
576 577 578

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

580 581 582 583 584 585 586 587 588
    .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
589 590
    }

591
    .issue-check {
592
      padding-right: $gl-padding;
593 594 595 596 597 598 599 600 601
      margin-bottom: 10px;
      min-width: 15px;

      .selected_issue {
        vertical-align: text-top;
      }
    }
  }
}
602

603 604 605 606 607 608 609 610 611 612 613 614 615
.issuable-list li,
.issue-info-container .controls {
  .avatar-counter {
    display: inline-block;
    vertical-align: middle;
    min-width: 16px;
    line-height: 14px;
    height: 16px;
    padding-left: 2px;
    padding-right: 2px;
  }
}

616 617 618 619 620 621 622 623 624 625 626 627 628 629
.time_tracker {
  padding-bottom: 0;
  border-bottom: 0;


  .sidebar-collapsed-icon {

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

    svg {
      width: 16px;
      height: 16px;
630
      fill: $issuable-sidebar-color;
631 632 633
    }

    &:hover svg {
Bryce Johnson's avatar
Bryce Johnson committed
634
      fill: $gl-text-color;
635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651
    }
  }

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

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

    &.over_estimate {
      .meter-fill {
652
        background: $red-500;
653 654 655 656
      }

      .time-remaining,
      .compare-value.spent {
657
        color: $red-500;
658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680
      }
    }
  }

  .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
681
      color: $compare-display-color;
682 683

      .compare-value {
Bryce Johnson's avatar
Bryce Johnson committed
684
        color: $gl-text-color;
685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713
      }
    }
  }

  .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
714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731

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

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

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