repo.scss 16 KB
Newer Older
Luke "Jared" Bennett's avatar
Luke "Jared" Bennett committed
1 2
.project-refs-form,
.project-refs-target-form {
3 4 5
  display: inline-block;
}

6
.fade-enter,
7
.fade-leave-to {
8
  opacity: 0;
Jacob Schatz's avatar
Jacob Schatz committed
9 10
}

11
.commit-message {
Jacob Schatz's avatar
Jacob Schatz committed
12
  @include str-truncated(250px);
13 14
}

Jacob Schatz's avatar
Jacob Schatz committed
15
.editable-mode {
16 17 18
  display: inline-block;
}

19
.ide-view {
20
  position: relative;
Phil Hughes's avatar
Phil Hughes committed
21
  display: flex;
22
  height: calc(100vh - #{$header-height});
23
  margin-top: 0;
Phil Hughes's avatar
Phil Hughes committed
24 25 26 27 28 29 30
  border-top: 1px solid $white-dark;
  border-bottom: 1px solid $white-dark;

  &.is-collapsed {
    .ide-file-list {
      max-width: 250px;
    }
Fatih Acet's avatar
Fatih Acet committed
31
  }
Phil Hughes's avatar
Phil Hughes committed
32 33 34 35 36

  .file-status-icon {
    width: 10px;
    height: 10px;
  }
Phil Hughes's avatar
Phil Hughes committed
37
}
Jacob Schatz's avatar
Jacob Schatz committed
38

Phil Hughes's avatar
Phil Hughes committed
39 40 41 42 43
.ide-file-list {
  flex: 1;

  .file {
    cursor: pointer;
44 45

    &.file-open {
46
      background: $link-active-background;
47 48
    }

49 50 51 52
    &.file-active {
      font-weight: $gl-font-weight-bold;
    }

Phil Hughes's avatar
Phil Hughes committed
53 54
    .ide-file-name {
      flex: 1;
55 56
      white-space: nowrap;
      text-overflow: ellipsis;
57
      max-width: inherit;
58
      line-height: 22px;
Phil Hughes's avatar
Phil Hughes committed
59 60 61 62 63 64 65 66 67 68

      svg {
        vertical-align: middle;
        margin-right: 2px;
      }

      .loading-container {
        margin-right: 4px;
        display: inline-block;
      }
69 70
    }

Phil Hughes's avatar
Phil Hughes committed
71 72 73 74 75
    .ide-file-icon-holder {
      display: flex;
      align-items: center;
    }

Phil Hughes's avatar
Phil Hughes committed
76 77
    .ide-file-changed-icon {
      margin-left: auto;
78 79 80 81

      > svg {
        display: block;
      }
82 83
    }

Phil Hughes's avatar
Phil Hughes committed
84
    .ide-new-btn {
85
      display: none;
Phil Hughes's avatar
Phil Hughes committed
86
      margin-right: -8px;
87 88
    }

89 90 91 92
    &:hover,
    &:focus {
      background: $link-active-background;

Phil Hughes's avatar
Phil Hughes committed
93
      .ide-new-btn {
94 95
        display: block;
      }
Phil Hughes's avatar
Phil Hughes committed
96
    }
97

98 99
    .folder-icon {
      fill: $gl-text-color-secondary;
100
    }
Fatih Acet's avatar
Fatih Acet committed
101 102
  }

Phil Hughes's avatar
Phil Hughes committed
103 104
  a {
    color: $gl-text-color;
105 106
  }

Phil Hughes's avatar
Phil Hughes committed
107 108 109
  th {
    position: sticky;
    top: 0;
110
  }
Phil Hughes's avatar
Phil Hughes committed
111
}
112

Phil Hughes's avatar
Phil Hughes committed
113 114 115
.file-name,
.file-col-commit-message {
  display: flex;
116
  overflow: visible;
Phil Hughes's avatar
Phil Hughes committed
117
  align-items: center;
118
  padding: 6px 12px;
Phil Hughes's avatar
Phil Hughes committed
119
}
120

121 122 123 124 125
.multi-file-loading-container {
  margin-top: 10px;
  padding: 10px;
}

Phil Hughes's avatar
Phil Hughes committed
126
.multi-file-table-col-commit-message {
127
  white-space: nowrap;
Phil Hughes's avatar
Phil Hughes committed
128
  width: 50%;
Phil Hughes's avatar
Phil Hughes committed
129
}
130

Phil Hughes's avatar
Phil Hughes committed
131 132 133 134 135 136 137
.multi-file-edit-pane {
  display: flex;
  flex-direction: column;
  flex: 1;
  border-left: 1px solid $white-dark;
  overflow: hidden;
}
138

Phil Hughes's avatar
Phil Hughes committed
139 140 141 142
.multi-file-tabs {
  display: flex;
  background-color: $white-normal;
  box-shadow: inset 0 -1px $white-dark;
143

Phil Hughes's avatar
Phil Hughes committed
144 145 146 147 148 149
  > ul {
    display: flex;
    overflow-x: auto;
  }

  li {
Phil Hughes's avatar
Phil Hughes committed
150 151 152 153 154 155 156 157 158 159 160
    display: flex;
    align-items: center;
    padding: $grid-size $gl-padding;
    background-color: $gray-normal;
    border-right: 1px solid $white-dark;
    border-bottom: 1px solid $white-dark;

    &.active {
      background-color: $white-light;
      border-bottom-color: $white-light;
    }
Phil Hughes's avatar
Phil Hughes committed
161 162
  }
}
Jacob Schatz's avatar
Jacob Schatz committed
163

Phil Hughes's avatar
Phil Hughes committed
164
.multi-file-tab {
Phil Hughes's avatar
Phil Hughes committed
165
  @include str-truncated(141px);
Phil Hughes's avatar
Phil Hughes committed
166 167
  cursor: pointer;

168 169 170
  svg {
    vertical-align: middle;
  }
Phil Hughes's avatar
Phil Hughes committed
171
}
172

Phil Hughes's avatar
Phil Hughes committed
173
.multi-file-tab-close {
Phil Hughes's avatar
Phil Hughes committed
174 175
  width: 16px;
  height: 16px;
Phil Hughes's avatar
Phil Hughes committed
176
  padding: 0;
Phil Hughes's avatar
Phil Hughes committed
177
  margin-left: $grid-size;
Phil Hughes's avatar
Phil Hughes committed
178 179
  background: none;
  border: 0;
Phil Hughes's avatar
Phil Hughes committed
180 181
  border-radius: $border-radius-default;
  color: $theme-gray-900;
Phil Hughes's avatar
Phil Hughes committed
182

Phil Hughes's avatar
Phil Hughes committed
183 184 185
  svg {
    position: relative;
    top: -1px;
Phil Hughes's avatar
Phil Hughes committed
186
  }
187

188 189 190 191 192 193 194
  .ide-file-changed-icon {
    display: block;
    position: relative;
    top: 1px;
    right: 3px;
  }

195
  &:not([disabled]):hover {
Phil Hughes's avatar
Phil Hughes committed
196 197 198
    background-color: $theme-gray-200;
  }

199
  &:not([disabled]):focus {
Phil Hughes's avatar
Phil Hughes committed
200 201 202 203 204 205 206
    background-color: $blue-500;
    color: $white-light;
    outline: 0;

    svg {
      fill: currentColor;
    }
Phil Hughes's avatar
Phil Hughes committed
207 208
  }
}
209

Phil Hughes's avatar
Phil Hughes committed
210 211 212 213
.multi-file-edit-pane-content {
  flex: 1;
  height: 0;
}
Jacob Schatz's avatar
Jacob Schatz committed
214

215 216 217 218 219 220 221 222 223 224
.blob-editor-container {
  flex: 1;
  height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .vertical-center {
    min-height: auto;
  }
Phil Hughes's avatar
Phil Hughes committed
225 226 227 228 229

  .monaco-editor .lines-content .cigr {
    display: none;
  }

230 231 232 233 234 235 236 237 238 239 240
  .is-readonly,
  .editor.original {
    .view-lines {
      cursor: default;
    }

    .cursors-layer {
      display: none;
    }
  }

Phil Hughes's avatar
Phil Hughes committed
241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299
  .monaco-diff-editor.vs {
    .editor.modified {
      box-shadow: none;
    }

    .diagonal-fill {
      display: none !important;
    }

    .diffOverview {
      background-color: $white-light;
      border-left: 1px solid $white-dark;
      cursor: ns-resize;
    }

    .diffViewport {
      display: none;
    }

    .char-insert {
      background-color: $line-added-dark;
    }

    .char-delete {
      background-color: $line-removed-dark;
    }

    .line-numbers {
      color: $black-transparent;
    }

    .view-overlays {
      .line-insert {
        background-color: $line-added;
      }

      .line-delete {
        background-color: $line-removed;
      }
    }

    .margin {
      background-color: $gray-light;
      border-right: 1px solid $white-normal;

      .line-insert {
        border-right: 1px solid $line-added-dark;
      }

      .line-delete {
        border-right: 1px solid $line-removed-dark;
      }
    }

    .margin-view-overlays .insert-sign,
    .margin-view-overlays .delete-sign {
      opacity: 0.4;
    }
  }
300 301 302 303
}

.multi-file-editor-holder {
  height: 100%;
Phil Hughes's avatar
Phil Hughes committed
304
  min-height: 0;
305 306
}

Tim Zallmann's avatar
Tim Zallmann committed
307 308 309 310
.preview-container {
  height: 100%;
  overflow: auto;

311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349
  .file-container {
    background-color: $gray-darker;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;

    text-align: center;

    .file-content {
      padding: $gl-padding;
      max-width: 100%;
      max-height: 100%;

      img {
        max-width: 90%;
        max-height: 90%;
      }

      .isZoomable {
        cursor: pointer;
        cursor: zoom-in;

        &.isZoomed {
          cursor: pointer;
          cursor: zoom-out;
          max-width: none;
          max-height: none;
          margin-right: $gl-padding;
        }
      }
    }

    .file-info {
      font-size: $label-font-size;
      color: $diff-image-info-color;
    }
  }

Tim Zallmann's avatar
Tim Zallmann committed
350 351 352 353 354 355
  .md-previewer {
    padding: $gl-padding;
  }
}

.ide-mode-tabs {
356
  border-bottom: 1px solid $white-dark;
Tim Zallmann's avatar
Tim Zallmann committed
357 358 359 360 361 362 363 364 365 366 367 368 369

  .nav-links {
    border-bottom: 0;

    li a {
      padding: $gl-padding-8 $gl-padding;
      line-height: $gl-btn-line-height;
    }
  }
}

.ide-btn-group {
  padding: $gl-padding-4 $gl-vert-padding;
370
  line-height: 24px;
371 372 373
}

.ide-status-bar {
Tim Zallmann's avatar
Tim Zallmann committed
374
  border-top: 1px solid $white-dark;
375 376 377
  padding: $gl-bar-padding $gl-padding;
  background: $white-light;
  display: flex;
378 379 380 381 382
  justify-content: flex-end;

  > div + div {
    padding-left: $gl-padding;
  }
383 384 385 386

  svg {
    vertical-align: middle;
  }
Phil Hughes's avatar
Phil Hughes committed
387 388 389 390 391 392 393
}

// Not great, but this is to deal with our current output
.multi-file-preview-holder {
  height: 100%;
  overflow: scroll;

Phil Hughes's avatar
Phil Hughes committed
394 395
  .file-content.code {
    display: flex;
396

Phil Hughes's avatar
Phil Hughes committed
397 398
    i {
      margin-left: -10px;
399
    }
400 401
  }

Phil Hughes's avatar
Phil Hughes committed
402 403
  .line-numbers {
    min-width: 50px;
Jacob Schatz's avatar
Jacob Schatz committed
404
  }
405

Phil Hughes's avatar
Phil Hughes committed
406 407 408 409 410
  .file-content,
  .line-numbers,
  .blob-content,
  .code {
    min-height: 100%;
411
  }
Phil Hughes's avatar
Phil Hughes committed
412
}
Jacob Schatz's avatar
Jacob Schatz committed
413

414 415 416 417 418 419 420
.file-content.blob-no-preview {
  a {
    margin-left: auto;
    margin-right: auto;
  }
}

Phil Hughes's avatar
Phil Hughes committed
421 422
.multi-file-commit-panel {
  display: flex;
423
  position: relative;
Phil Hughes's avatar
Phil Hughes committed
424
  width: 340px;
425
  padding: 0;
Phil Hughes's avatar
Phil Hughes committed
426
  background-color: $gray-light;
427
  padding-right: 1px;
Phil Hughes's avatar
Phil Hughes committed
428

429 430 431
  .context-header {
    width: auto;
    margin-right: 0;
432 433 434 435 436

    a:hover,
    a:focus {
      text-decoration: none;
    }
437 438
  }

439 440 441
  .projects-sidebar {
    display: flex;
    flex-direction: column;
442
    flex: 1;
443 444 445 446 447
  }

  .multi-file-commit-panel-inner {
    display: flex;
    flex-direction: column;
448
    height: 100%;
Phil Hughes's avatar
Phil Hughes committed
449 450
    min-width: 0;
    width: 100%;
451 452 453 454 455 456 457
  }

  .multi-file-commit-panel-inner-scroll {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: auto;
458 459 460 461
    background-color: $white-light;
    border-left: 1px solid $white-dark;
    border-top: 1px solid $white-dark;
    border-top-left-radius: $border-radius-small;
462 463 464
  }
}

Phil Hughes's avatar
Phil Hughes committed
465 466 467 468
.multi-file-commit-panel-section {
  display: flex;
  flex-direction: column;
  flex: 1;
469 470
  max-height: 100%;
  overflow: auto;
Phil Hughes's avatar
Phil Hughes committed
471
}
472

Phil Hughes's avatar
Phil Hughes committed
473
.ide-commit-empty-state {
474 475 476 477 478 479
  padding: 0 $gl-padding;
}

.ide-commit-empty-state-container {
  margin-top: auto;
  margin-bottom: auto;
Phil Hughes's avatar
Phil Hughes committed
480 481
}

Phil Hughes's avatar
Phil Hughes committed
482 483 484
.multi-file-commit-panel-header {
  display: flex;
  align-items: center;
485
  margin-bottom: 0;
Phil Hughes's avatar
Phil Hughes committed
486
  border-bottom: 1px solid $white-dark;
487
  padding: $gl-btn-padding $gl-padding;
Phil Hughes's avatar
Phil Hughes committed
488
}
489

490 491 492
.multi-file-commit-panel-header-title {
  display: flex;
  flex: 1;
493
  align-items: center;
494

495 496
  svg {
    margin-right: $gl-btn-padding;
497
    color: $theme-gray-700;
498
  }
Phil Hughes's avatar
Phil Hughes committed
499
}
Jacob Schatz's avatar
Jacob Schatz committed
500

501 502
.multi-file-commit-panel-collapse-btn {
  border-left: 1px solid $white-dark;
503
  margin-left: auto;
504 505
}

Phil Hughes's avatar
Phil Hughes committed
506 507
.multi-file-commit-list {
  flex: 1;
508
  overflow: auto;
509
  padding: $gl-padding;
Phil Hughes's avatar
Phil Hughes committed
510
  min-height: 60px;
Phil Hughes's avatar
Phil Hughes committed
511
}
512

Phil Hughes's avatar
Phil Hughes committed
513 514
.multi-file-commit-list-item {
  display: flex;
Phil Hughes's avatar
Phil Hughes committed
515
  padding: 0;
Phil Hughes's avatar
Phil Hughes committed
516
  align-items: center;
517
  border-radius: $border-radius-default;
Phil Hughes's avatar
Phil Hughes committed
518 519 520

  .multi-file-discard-btn {
    display: none;
521
    margin-top: -2px;
Phil Hughes's avatar
Phil Hughes committed
522
    margin-left: auto;
523
    margin-right: $grid-size;
Phil Hughes's avatar
Phil Hughes committed
524 525 526 527 528 529 530 531 532 533 534 535
    color: $gl-link-color;

    &:focus,
    &:hover {
      text-decoration: underline;
    }
  }

  &:hover {
    background: $white-normal;

    .multi-file-discard-btn {
536
      display: flex;
Phil Hughes's avatar
Phil Hughes committed
537 538
    }
  }
Phil Hughes's avatar
Phil Hughes committed
539
}
540

Phil Hughes's avatar
Phil Hughes committed
541 542
.multi-file-additions,
.multi-file-additions-solid {
Phil Hughes's avatar
Phil Hughes committed
543 544
  fill: $green-500;
}
545

Phil Hughes's avatar
Phil Hughes committed
546 547
.multi-file-modified,
.multi-file-modified-solid {
Phil Hughes's avatar
Phil Hughes committed
548 549
  fill: $orange-500;
}
550

Phil Hughes's avatar
Phil Hughes committed
551 552 553
.multi-file-commit-list-collapsed {
  display: flex;
  flex-direction: column;
554
  padding: $gl-padding 0;
555

556 557
  svg {
    display: block;
Phil Hughes's avatar
Phil Hughes committed
558 559
    margin-left: auto;
    margin-right: auto;
560
    color: $theme-gray-700;
561
  }
Phil Hughes's avatar
Phil Hughes committed
562 563 564 565 566 567

  .file-status-icon {
    width: 10px;
    height: 10px;
    margin-left: 3px;
  }
568 569
}

Phil Hughes's avatar
Phil Hughes committed
570
.multi-file-commit-list-path {
Phil Hughes's avatar
Phil Hughes committed
571
  padding: $grid-size / 2;
572
  padding-left: $grid-size;
Phil Hughes's avatar
Phil Hughes committed
573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591
  background: none;
  border: 0;
  text-align: left;
  width: 100%;
  min-width: 0;

  svg {
    min-width: 16px;
    vertical-align: middle;
    display: inline-block;
  }

  &:hover,
  &:focus {
    outline: 0;
  }
}

.multi-file-commit-list-file-path {
Phil Hughes's avatar
Phil Hughes committed
592
  @include str-truncated(100%);
Phil Hughes's avatar
Phil Hughes committed
593 594 595 596 597 598 599 600

  &:hover {
    text-decoration: underline;
  }

  &:active {
    text-decoration: none;
  }
Phil Hughes's avatar
Phil Hughes committed
601
}
602

Phil Hughes's avatar
Phil Hughes committed
603
.multi-file-commit-form {
Phil Hughes's avatar
Phil Hughes committed
604
  position: relative;
605
  padding: $gl-padding;
606
  background-color: $white-light;
Phil Hughes's avatar
Phil Hughes committed
607
  border-top: 1px solid $white-dark;
608
  border-left: 1px solid $white-dark;
Phil Hughes's avatar
Phil Hughes committed
609
  transition: all 0.3s ease;
Mike Greiling's avatar
Mike Greiling committed
610

Phil Hughes's avatar
Phil Hughes committed
611
  .btn {
Phil Hughes's avatar
Phil Hughes committed
612
    font-size: $gl-font-size;
Jacob Schatz's avatar
Jacob Schatz committed
613 614
  }
}
615

616 617
.dirty-diff {
  // !important need to override monaco inline style
Phil Hughes's avatar
Phil Hughes committed
618 619
  width: 4px !important;
  left: 0 !important;
620 621

  &-modified {
622
    background-color: $blue-500;
623 624 625
  }

  &-added {
626
    background-color: $green-600;
627 628 629
  }

  &-removed {
Phil Hughes's avatar
Phil Hughes committed
630 631
    height: 0 !important;
    width: 0 !important;
632
    bottom: -2px;
633 634 635 636 637 638 639 640 641 642 643
    border-style: solid;
    border-width: 5px;
    border-color: transparent transparent transparent $red-500;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100px;
      height: 1px;
Phil Hughes's avatar
Phil Hughes committed
644
      background-color: rgba($red-500, 0.5);
645
    }
646 647
  }
}
648 649 650 651 652 653 654 655 656 657 658 659 660 661 662

.ide-loading {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

.ide-empty-state {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}

Phil Hughes's avatar
Phil Hughes committed
663
.ide-new-btn {
664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680
  .dropdown-toggle svg {
    margin-top: -2px;
    margin-bottom: 2px;
  }

  .dropdown-menu {
    left: auto;
    right: 0;

    label {
      font-weight: $gl-font-weight-normal;
      padding: 5px 8px;
      margin-bottom: 0;
    }
  }
}

Phil Hughes's avatar
Phil Hughes committed
681 682
.ide {
  overflow: hidden;
Tim Zallmann's avatar
Tim Zallmann committed
683

Phil Hughes's avatar
Phil Hughes committed
684
  &.nav-only {
685 686 687 688 689 690
    padding-top: $header-height;

    .with-performance-bar & {
      padding-top: $header-height + $performance-bar-height;
    }

Phil Hughes's avatar
Phil Hughes committed
691
    .flash-container {
692
      margin-top: 0;
Phil Hughes's avatar
Phil Hughes committed
693 694
      margin-bottom: 0;
    }
Tim Zallmann's avatar
Tim Zallmann committed
695

Phil Hughes's avatar
Phil Hughes committed
696 697 698 699
    .alert-wrapper .flash-container .flash-alert:last-child,
    .alert-wrapper .flash-container .flash-notice:last-child {
      margin-bottom: 0;
    }
Tim Zallmann's avatar
Tim Zallmann committed
700

Phil Hughes's avatar
Phil Hughes committed
701
    .content-wrapper {
702
      margin-top: 0;
Phil Hughes's avatar
Phil Hughes committed
703
      padding-bottom: 0;
Tim Zallmann's avatar
Tim Zallmann committed
704 705
    }

Phil Hughes's avatar
Phil Hughes committed
706 707 708 709 710 711 712 713
    &.flash-shown {
      .content-wrapper {
        margin-top: 0;
      }

      .ide-view {
        height: calc(100vh - #{$header-height + $flash-height});
      }
Tim Zallmann's avatar
Tim Zallmann committed
714 715
    }

Phil Hughes's avatar
Phil Hughes committed
716 717 718 719
    .projects-sidebar {
      .multi-file-commit-panel-inner-scroll {
        flex: 1;
      }
Tim Zallmann's avatar
Tim Zallmann committed
720 721
    }
  }
722
}
723

Tim Zallmann's avatar
Tim Zallmann committed
724 725
.with-performance-bar .ide.nav-only {
  .flash-container {
726
    margin-top: 0;
Tim Zallmann's avatar
Tim Zallmann committed
727 728
  }

Phil Hughes's avatar
Phil Hughes committed
729
  .content-wrapper {
730
    margin-top: 0;
Phil Hughes's avatar
Phil Hughes committed
731
    padding-bottom: 0;
732 733 734 735 736
  }

  .ide-view {
    height: calc(100vh - #{$header-height + $performance-bar-height});
  }
Tim Zallmann's avatar
Tim Zallmann committed
737 738 739

  &.flash-shown {
    .ide-view {
740
      height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height});
Tim Zallmann's avatar
Tim Zallmann committed
741 742
    }
  }
743 744 745 746 747 748
}

.dragHandle {
  position: absolute;
  top: 0;
  bottom: 0;
749
  width: 1px;
750 751 752 753 754 755 756 757 758 759
  background-color: $white-dark;

  &.dragright {
    right: 0;
  }

  &.dragleft {
    left: 0;
  }
}
Phil Hughes's avatar
Phil Hughes committed
760

761 762
.ide-commit-list-container {
  display: flex;
763
  flex: 1;
764 765
  flex-direction: column;
  width: 100%;
766
  min-height: 140px;
767

Phil Hughes's avatar
Phil Hughes committed
768 769 770
  &.is-first {
    border-bottom: 1px solid $white-dark;
  }
771 772
}

773 774 775 776 777
.ide-staged-action-btn {
  margin-left: auto;
  line-height: 22px;
}

778 779
.ide-commit-file-count {
  min-width: 22px;
780
  margin-left: auto;
781 782 783 784 785
  background-color: $gray-light;
  border-radius: $border-radius-default;
  border: 1px solid $white-dark;
  line-height: 20px;
  text-align: center;
786 787
}

Phil Hughes's avatar
Phil Hughes committed
788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805
.ide-commit-radios {
  label {
    font-weight: normal;
  }

  .help-block {
    margin-top: 0;
    line-height: 0;
  }
}

.ide-commit-new-branch {
  margin-left: 25px;
}

.ide-sidebar-link {
  display: flex;
  align-items: center;
806
  position: relative;
Phil Hughes's avatar
Phil Hughes committed
807
  height: 60px;
808
  width: 100%;
Phil Hughes's avatar
Phil Hughes committed
809
  padding: 0 $gl-padding;
810 811 812 813 814 815 816 817 818 819 820
  color: $gl-text-color-secondary;
  background-color: transparent;
  border: 0;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  outline: 0;

  svg {
    margin: 0 auto;
  }

Phil Hughes's avatar
Phil Hughes committed
821
  &:hover {
Phil Hughes's avatar
Phil Hughes committed
822
    color: $gl-text-color;
Phil Hughes's avatar
Phil Hughes committed
823 824 825
    background-color: $theme-gray-100;
  }

826
  &:focus {
Phil Hughes's avatar
Phil Hughes committed
827
    color: $gl-text-color;
Phil Hughes's avatar
Phil Hughes committed
828
    background-color: $theme-gray-200;
829 830 831
  }

  &.active {
832 833 834
    // extend width over border of sidebar section
    width: calc(100% + 1px);
    padding-right: $gl-padding + 1px;
835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853
    background-color: $white-light;
    border-top-color: $white-dark;
    border-bottom-color: $white-dark;

    &::after {
      content: '';
      position: absolute;
      right: -1px;
      top: 0;
      bottom: 0;
      width: 1px;
      background: $white-light;
    }
  }
}

.ide-activity-bar {
  position: relative;
  flex: 0 0 60px;
Phil Hughes's avatar
Phil Hughes committed
854
}
Phil Hughes's avatar
Phil Hughes committed
855

Phil Hughes's avatar
Phil Hughes committed
856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874
.ide-file-finder-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
}

.ide-file-finder {
  top: 10px;
  left: 50%;
  transform: translateX(-50%);

  .highlighted {
    color: $blue-500;
    font-weight: $gl-font-weight-bold;
  }
}
875

Phil Hughes's avatar
Phil Hughes committed
876 877 878 879 880 881 882 883 884 885 886 887 888 889 890
.ide-commit-message-field {
  height: 200px;
  background-color: $white-light;

  .md-area {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .nav-links {
    height: 30px;
  }

  .help-block {
Phil Hughes's avatar
Phil Hughes committed
891
    margin-top: 2px;
Phil Hughes's avatar
Phil Hughes committed
892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945
    color: $blue-500;
    cursor: pointer;
  }
}

.ide-commit-message-textarea-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .note-textarea {
    font-family: $monospace_font;
  }
}

.ide-commit-message-highlights-container {
  position: absolute;
  left: 0;
  top: 0;
  right: -100px;
  bottom: 0;
  padding-right: 100px;
  pointer-events: none;
  z-index: 1;

  .highlights {
    white-space: pre-wrap;
    word-wrap: break-word;
    color: transparent;
  }

  mark {
    margin-left: -1px;
    padding: 0 2px;
    border-radius: $border-radius-small;
    background-color: $orange-200;
    color: transparent;
    opacity: 0.6;
  }
}

.ide-commit-message-textarea {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: transparent;
  resize: none;
}
Phil Hughes's avatar
Phil Hughes committed
946 947 948 949 950 951 952 953 954 955 956 957 958

.ide-tree-header {
  display: flex;
  align-items: center;
  padding: 10px 0;
  margin-left: 10px;
  margin-right: 10px;
  border-bottom: 1px solid $white-dark;

  .ide-new-btn {
    margin-left: auto;
  }
}
959 960 961 962 963 964 965 966 967 968

.ide-sidebar-branch-title {
  font-weight: $gl-font-weight-normal;

  svg {
    position: relative;
    top: 3px;
    margin-top: -1px;
  }
}
969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008

.commit-form-compact {
  .btn {
    margin-bottom: 8px;
  }

  p {
    margin-bottom: 0;
  }
}

.commit-form-slide-up-enter-active,
.commit-form-slide-up-leave-active {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  transition: all 0.3s ease;
}

.is-full .commit-form-slide-up-enter {
  transform: translateY(100%);
}

.is-full .commit-form-slide-up-enter-to {
  transform: translateY(0);
}

.commit-form-slide-up-enter,
.commit-form-slide-up-leave-to {
  opacity: 0;
}

.is-compact .commit-form-slide-up-leave {
  transform: translateY(0);
}

.is-compact .commit-form-slide-up-leave-to {
  transform: translateY(100%);
}
1009

1010 1011 1012 1013 1014 1015 1016 1017
.ide-review-header {
  flex-direction: column;
  align-items: flex-start;
}

.ide-review-sub-header {
  color: $gl-text-color-secondary;
}
1018

1019 1020 1021
.ide-new-modal-label {
  line-height: 34px;
}