1 files changed, 784 insertions, 235 deletions

diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 7a8fbfc517d..3c24aaa65e8 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -17,12 +17,13 @@
 }
 
 .ide-view {
+  position: relative;
   display: flex;
   height: calc(100vh - #{$header-height});
-  margin-top: 40px;
-  color: $almost-black;
+  margin-top: 0;
   border-top: 1px solid $white-dark;
-  border-bottom: 1px solid $white-dark;
+  padding-bottom: $ide-statusbar-height;
+  color: $gl-text-color;
 
   &.is-collapsed {
     .ide-file-list {
@@ -38,18 +39,25 @@
 
 .ide-file-list {
   flex: 1;
+  padding-left: $gl-padding;
+  padding-right: $gl-padding;
+  padding-bottom: $grid-size;
 
   .file {
     cursor: pointer;
 
-    &.file-open {
-      background: $white-normal;
+    &.file-active {
+      background: $theme-gray-100;
     }
 
     .ide-file-name {
       flex: 1;
       white-space: nowrap;
       text-overflow: ellipsis;
+      max-width: inherit;
+      line-height: 16px;
+      display: inline-block;
+      height: 18px;
 
       svg {
         vertical-align: middle;
@@ -62,26 +70,36 @@
       }
     }
 
+    .ide-file-icon-holder {
+      display: flex;
+      align-items: center;
+    }
+
     .ide-file-changed-icon {
       margin-left: auto;
+
+      > svg {
+        display: block;
+      }
     }
 
     .ide-new-btn {
       display: none;
-      margin-bottom: -4px;
-      margin-right: -8px;
+
+      .btn {
+        padding: 2px 5px;
+      }
     }
 
-    &:hover {
+    &:hover,
+    &:focus {
       .ide-new-btn {
         display: block;
       }
     }
 
-    &.folder {
-      svg {
-        fill: $gl-text-color-secondary;
-      }
+    .folder-icon {
+      fill: $gl-text-color-secondary;
     }
   }
 
@@ -95,24 +113,16 @@
   }
 }
 
-.file-name,
-.file-col-commit-message {
+.file-name {
   display: flex;
   overflow: visible;
-  padding: 6px 12px;
+  align-items: center;
+  width: 100%;
 }
 
 .multi-file-loading-container {
   margin-top: 10px;
   padding: 10px;
-
-  .animation-container {
-    background: $gray-light;
-
-    div {
-      background: $gray-light;
-    }
-  }
 }
 
 .multi-file-table-col-commit-message {
@@ -139,69 +149,56 @@
   }
 
   li {
-    position: relative;
-  }
-
-  .dropdown {
     display: flex;
-    margin-left: auto;
-    margin-bottom: 1px;
-    padding: 0 $grid-size;
-    border-left: 1px solid $white-dark;
-    background-color: $white-light;
-
-    &.shadow {
-      box-shadow: 0 0 10px $dropdown-shadow-color;
-    }
+    align-items: center;
+    padding: $grid-size $gl-padding;
+    background-color: $gray-normal;
+    border-right: 1px solid $white-dark;
+    border-bottom: 1px solid $white-dark;
 
-    .btn {
-      margin-top: auto;
-      margin-bottom: auto;
+    &.active {
+      background-color: $white-light;
+      border-bottom-color: $white-light;
     }
   }
 }
 
 .multi-file-tab {
-  @include str-truncated(150px);
-  padding: ($gl-padding / 2) ($gl-padding + 12) ($gl-padding / 2) $gl-padding;
-  background-color: $gray-normal;
-  border-right: 1px solid $white-dark;
-  border-bottom: 1px solid $white-dark;
+  @include str-truncated(141px);
   cursor: pointer;
 
   svg {
     vertical-align: middle;
   }
-
-  &.active {
-    background-color: $white-light;
-    border-bottom-color: $white-light;
-  }
 }
 
 .multi-file-tab-close {
-  position: absolute;
-  right: 8px;
-  top: 50%;
   width: 16px;
   height: 16px;
   padding: 0;
+  margin-left: $grid-size;
   background: none;
   border: 0;
   border-radius: $border-radius-default;
   color: $theme-gray-900;
-  transform: translateY(-50%);
 
   svg {
     position: relative;
-    top: -1px;
+    top: -2px;
   }
 
-  &:hover {
+  .ide-file-changed-icon {
+    display: block;
+    position: relative;
+    top: 1px;
+    right: -2px;
+  }
+
+  &:not([disabled]):hover {
     background-color: $theme-gray-200;
   }
 
-  &:focus {
+  &:not([disabled]):focus {
     background-color: $blue-500;
     color: $white-light;
     outline: 0;
@@ -232,6 +229,17 @@
     display: none;
   }
 
+  .is-readonly,
+  .editor.original {
+    .view-lines {
+      cursor: default;
+    }
+
+    .cursors-layer {
+      display: none;
+    }
+  }
+
   .monaco-diff-editor.vs {
     .editor.modified {
       box-shadow: none;
@@ -274,8 +282,8 @@
     }
 
     .margin {
-      background-color: $gray-light;
-      border-right: 1px solid $white-normal;
+      background-color: $white-light;
+      border-right: 1px solid $theme-gray-100;
 
       .line-insert {
         border-right: 1px solid $line-added-dark;
@@ -295,26 +303,126 @@
 
 .multi-file-editor-holder {
   height: 100%;
+  min-height: 0;
+
+  &.is-readonly,
+  .editor.original {
+    .monaco-editor,
+    .monaco-editor-background,
+    .monaco-editor .inputarea.ime-input {
+      background-color: $theme-gray-50;
+    }
+  }
 }
 
-.multi-file-editor-btn-group {
-  padding: $gl-bar-padding $gl-padding;
-  border-top: 1px solid $white-dark;
+.preview-container {
+  flex-grow: 1;
+  position: relative;
+
+  .md-previewer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    padding: $gl-padding;
+  }
+
+  .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%;
+      }
+
+      .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;
+    }
+  }
+}
+
+.ide-mode-tabs {
   border-bottom: 1px solid $white-dark;
-  background: $white-light;
+
+  .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;
+  line-height: 24px;
 }
 
 .ide-status-bar {
-  padding: $gl-bar-padding $gl-padding;
+  border-top: 1px solid $white-dark;
+  padding: 2px $gl-padding-8 0;
   background: $white-light;
   display: flex;
   justify-content: space-between;
+  height: $ide-statusbar-height;
+
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+
+  font-size: 12px;
+  line-height: 22px;
+
+  * {
+    font-size: inherit;
+  }
+
+  > div + div {
+    padding-left: $gl-padding;
+  }
 
   svg {
-    vertical-align: middle;
+    vertical-align: sub;
   }
 }
 
+.ide-status-file {
+  text-align: right;
+
+  .ide-status-branch + &,
+  &:first-child {
+    margin-left: auto;
+  }
+}
 // Not great, but this is to deal with our current output
 .multi-file-preview-holder {
   height: 100%;
@@ -350,26 +458,35 @@
 .multi-file-commit-panel {
   display: flex;
   position: relative;
-  flex-direction: column;
   width: 340px;
   padding: 0;
   background-color: $gray-light;
-  padding-right: 3px;
+  padding-right: 1px;
+
+  .context-header {
+    width: auto;
+    margin-right: 0;
+
+    > a,
+    > button {
+      height: 60px;
+    }
+  }
 
   .projects-sidebar {
+    min-height: 0;
     display: flex;
     flex-direction: column;
-
-    .context-header {
-      width: auto;
-      margin-right: 0;
-    }
+    flex: 1;
   }
 
   .multi-file-commit-panel-inner {
+    position: relative;
     display: flex;
-    flex: 1;
     flex-direction: column;
+    height: 100%;
+    min-width: 0;
+    width: 100%;
   }
 
   .multi-file-commit-panel-inner-scroll {
@@ -377,69 +494,10 @@
     flex: 1;
     flex-direction: column;
     overflow: auto;
-  }
-
-  &.is-collapsed {
-    width: 60px;
-
-    .multi-file-commit-list {
-      padding-top: $gl-padding;
-      overflow: hidden;
-    }
-
-    .multi-file-context-bar-icon {
-      align-items: center;
-
-      svg {
-        float: none;
-        margin: 0;
-      }
-    }
-  }
-
-  .branch-container {
-    border-left: 4px solid $indigo-700;
-    margin-bottom: $gl-bar-padding;
-  }
-
-  .branch-header {
-    background: $white-dark;
-    display: flex;
-  }
-
-  .branch-header-title {
-    flex: 1;
-    padding: $grid-size $gl-padding;
-    color: $indigo-700;
-    font-weight: $gl-font-weight-bold;
-
-    svg {
-      vertical-align: middle;
-    }
-  }
-
-  .branch-header-btns {
-    padding: $gl-vert-padding $gl-padding;
-  }
-
-  .left-collapse-btn {
-    display: none;
-    background: $gray-light;
-    text-align: left;
+    background-color: $white-light;
+    border-left: 1px solid $white-dark;
     border-top: 1px solid $white-dark;
-
-    svg {
-      vertical-align: middle;
-    }
-  }
-}
-
-.multi-file-context-bar-icon {
-  padding: 10px;
-
-  svg {
-    margin-right: 10px;
-    float: left;
+    border-top-left-radius: $border-radius-small;
   }
 }
 
@@ -447,98 +505,77 @@
   display: flex;
   flex-direction: column;
   flex: 1;
+  max-height: 100%;
+  overflow: auto;
 }
 
-.multi-file-commit-empty-state-container {
-  align-items: center;
-  justify-content: center;
+.ide-commit-empty-state {
+  padding: 0 $gl-padding;
+}
+
+.ide-commit-empty-state-container {
+  margin-top: auto;
+  margin-bottom: auto;
 }
 
 .multi-file-commit-panel-header {
   display: flex;
   align-items: center;
-  margin-bottom: 12px;
+  margin-bottom: 0;
   border-bottom: 1px solid $white-dark;
-  padding: $gl-btn-padding 0;
-
-  &.is-collapsed {
-    border-bottom: 1px solid $white-dark;
-
-    svg {
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    .multi-file-commit-panel-collapse-btn {
-      margin-right: auto;
-      margin-left: auto;
-      border-left: 0;
-    }
-  }
+  padding: 12px 0;
 }
 
 .multi-file-commit-panel-header-title {
   display: flex;
   flex: 1;
-  padding: 0 $gl-btn-padding;
+  align-items: center;
 
   svg {
     margin-right: $gl-btn-padding;
+    color: $theme-gray-700;
   }
 }
 
 .multi-file-commit-panel-collapse-btn {
   border-left: 1px solid $white-dark;
+  margin-left: auto;
 }
 
 .multi-file-commit-list {
   flex: 1;
   overflow: auto;
-  padding: $gl-padding 0;
+  padding: $grid-size 0;
+  margin-left: -$grid-size;
+  margin-right: -$grid-size;
   min-height: 60px;
-}
 
-.multi-file-commit-list-item {
-  display: flex;
-  padding: 0;
-  align-items: center;
-
-  .multi-file-discard-btn {
-    display: none;
-    margin-left: auto;
-    color: $gl-link-color;
-    padding: 0 2px;
-
-    &:focus,
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  &:hover {
-    background: $white-normal;
-
-    .multi-file-discard-btn {
-      display: block;
-    }
+  &.form-text.text-muted {
+    margin-left: 0;
+    right: 0;
   }
 }
 
-.multi-file-addition {
-  fill: $green-500;
+.multi-file-addition,
+.multi-file-addition-solid {
+  color: $green-500;
 }
 
-.multi-file-modified {
-  fill: $orange-500;
+.multi-file-modified,
+.multi-file-modified-solid {
+  color: $orange-500;
 }
 
 .multi-file-commit-list-collapsed {
   display: flex;
   flex-direction: column;
+  padding: $gl-padding 0;
 
-  > svg {
+  svg {
+    display: block;
     margin-left: auto;
     margin-right: auto;
+    color: $theme-gray-700;
   }
 
   .file-status-icon {
@@ -548,51 +585,88 @@
   }
 }
 
-.multi-file-commit-list-path {
-  padding: $grid-size / 2;
-  padding-left: $gl-padding;
-  background: none;
-  border: 0;
+.multi-file-commit-list-path,
+.ide-file-list .file {
+  display: flex;
+  align-items: center;
+  margin-left: -$grid-size;
+  margin-right: -$grid-size;
+  padding: $grid-size / 2 $grid-size;
+  border-radius: $border-radius-default;
   text-align: left;
-  width: 100%;
-  min-width: 0;
 
-  svg {
-    min-width: 16px;
-    vertical-align: middle;
-    display: inline-block;
+  &:hover,
+  &:focus {
+    background: $theme-gray-100;
+  }
+
+  &:active {
+    background: $theme-gray-200;
+  }
+}
+
+.multi-file-commit-list-path {
+  cursor: pointer;
+
+  &.is-active {
+    background-color: $white-normal;
   }
 
   &:hover,
   &:focus {
     outline: 0;
   }
+
+  svg {
+    min-width: 16px;
+    vertical-align: middle;
+    display: inline-block;
+  }
 }
 
 .multi-file-commit-list-file-path {
-  @include str-truncated(100%);
-
-  &:hover {
-    text-decoration: underline;
-  }
+  @include str-truncated(calc(100% - 30px));
 
   &:active {
     text-decoration: none;
   }
 }
 
+.multi-file-discard-btn {
+  top: 4px;
+  right: 8px;
+  bottom: 4px;
+
+  svg {
+    top: 0;
+  }
+}
+
 .multi-file-commit-form {
-  padding: $gl-padding;
-  border-top: 1px solid $white-dark;
+  position: relative;
+  background-color: $white-light;
+  border-left: 1px solid $white-dark;
+  transition: all 0.3s ease;
+
+  > form,
+  > .commit-form-compact {
+    padding: $gl-padding 0;
+    margin-left: $gl-padding;
+    margin-right: $gl-padding;
+    border-top: 1px solid $white-dark;
+  }
 
   .btn {
     font-size: $gl-font-size;
   }
+
+  .multi-file-commit-panel-success-message {
+    top: 0;
+  }
 }
 
-.multi-file-commit-message.form-control {
-  height: 160px;
-  resize: none;
+.multi-file-commit-panel-bottom {
+  position: relative;
 }
 
 .dirty-diff {
@@ -643,9 +717,17 @@
 }
 
 .ide-new-btn {
+  .btn {
+    padding-top: 3px;
+    padding-bottom: 3px;
+  }
+
+  .dropdown {
+    display: flex;
+  }
+
   .dropdown-toggle svg {
-    margin-top: -2px;
-    margin-bottom: 2px;
+    top: 0;
   }
 
   .dropdown-menu {
@@ -664,8 +746,14 @@
   overflow: hidden;
 
   &.nav-only {
+    padding-top: $header-height;
+
+    .with-performance-bar & {
+      padding-top: $header-height + $performance-bar-height;
+    }
+
     .flash-container {
-      margin-top: $header-height;
+      margin-top: 0;
       margin-bottom: 0;
     }
 
@@ -675,7 +763,7 @@
     }
 
     .content-wrapper {
-      margin-top: $header-height;
+      margin-top: 0;
       padding-bottom: 0;
     }
 
@@ -699,11 +787,11 @@
 
 .with-performance-bar .ide.nav-only {
   .flash-container {
-    margin-top: #{$header-height + $performance-bar-height};
+    margin-top: 0;
   }
 
   .content-wrapper {
-    margin-top: #{$header-height + $performance-bar-height};
+    margin-top: 0;
     padding-bottom: 0;
   }
 
@@ -712,14 +800,8 @@
   }
 
   &.flash-shown {
-    .content-wrapper {
-      margin-top: 0;
-    }
-
     .ide-view {
-      height: calc(
-        100vh - #{$header-height + $performance-bar-height + $flash-height}
-      );
+      height: calc(100vh - #{$header-height + $performance-bar-height + $flash-height});
     }
   }
 }
@@ -728,7 +810,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  width: 3px;
+  width: 1px;
   background-color: $white-dark;
 
   &.dragright {
@@ -740,12 +822,48 @@
   }
 }
 
+.ide-commit-list-container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 140px;
+  margin-left: $gl-padding;
+  margin-right: $gl-padding;
+
+  &.is-first {
+    border-bottom: 1px solid $white-dark;
+  }
+}
+
+.ide-staged-action-btn {
+  width: 22px;
+  margin-left: -1px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+
+  > svg {
+    top: 0;
+  }
+}
+
+.ide-commit-file-count {
+  min-width: 22px;
+  background-color: $gray-light;
+  border: 1px solid $white-dark;
+}
+
 .ide-commit-radios {
   label {
     font-weight: normal;
+
+    &.is-disabled {
+      .ide-radio-label {
+        text-decoration: line-through;
+      }
+    }
   }
 
-  .help-block {
+  .form-text.text-muted {
     margin-top: 0;
     line-height: 0;
   }
@@ -755,28 +873,459 @@
   margin-left: 25px;
 }
 
-.ide-external-links {
+.ide-sidebar-link {
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: 60px;
+  width: 100%;
+  padding: 0 $gl-padding;
+  color: $gl-text-color-secondary;
+  background-color: transparent;
+  border: 0;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+  outline: 0;
+  cursor: pointer;
+
+  svg {
+    margin: 0 auto;
+  }
+
+  &:hover {
+    color: $gl-text-color;
+    background-color: $theme-gray-100;
+  }
+
+  &:focus {
+    color: $gl-text-color;
+    background-color: $theme-gray-200;
+  }
+
+  &.active {
+    // extend width over border of sidebar section
+    width: calc(100% + 1px);
+    padding-right: $gl-padding + 1px;
+    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;
+    }
+
+    &.is-right {
+      padding-right: $gl-padding;
+      padding-left: $gl-padding + 1px;
+
+      &::after {
+        right: auto;
+        left: -1px;
+      }
+    }
+  }
+}
+
+.ide-activity-bar {
+  position: relative;
+  flex: 0 0 60px;
+  z-index: 1;
+}
+
+.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;
+  }
+}
+
+.ide-commit-message-field {
+  height: 200px;
+  background-color: $white-light;
+
+  .md-area {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .nav-links {
+    height: 30px;
+  }
+
+  .form-text.text-muted {
+    margin-top: 2px;
+    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;
+}
+
+.ide-tree-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  padding: 12px 0;
+  border-bottom: 1px solid $white-dark;
+
+  .ide-new-btn {
+    margin-left: auto;
+  }
+}
+
+.ide-sidebar-branch-title {
+  font-weight: $gl-font-weight-normal;
+
+  svg {
+    position: relative;
+    top: 3px;
+    margin-top: -1px;
+  }
+}
+
+.commit-form-compact {
+  .btn {
+    margin-bottom: 8px;
+  }
+
   p {
-    margin: 0;
+    margin-bottom: 0;
   }
 }
 
-.ide-sidebar-link {
-  padding: $gl-padding-8 $gl-padding;
-  background: $indigo-700;
-  color: $white-light;
-  text-decoration: none;
+.commit-form-slide-up-enter-active,
+.commit-form-slide-up-leave-active {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  transition: all 0.3s ease;
+}
+
+.is-full .commit-form-slide-up-enter,
+.is-compact .commit-form-slide-up-leave-to {
+  transform: translateY(100%);
+}
+
+.is-full .commit-form-slide-up-enter-to,
+.is-compact .commit-form-slide-up-leave {
+  transform: translateY(0);
+}
+
+.commit-form-slide-up-enter,
+.commit-form-slide-up-leave-to {
+  opacity: 0;
+}
+
+.ide-review-header {
+  flex-direction: column;
+  align-items: flex-start;
+
+  .dropdown {
+    margin-left: auto;
+  }
+
+  a {
+    color: $gl-link-color;
+  }
+}
+
+.ide-review-sub-header {
+  color: $gl-text-color-secondary;
+}
+
+.ide-tree-changes {
   display: flex;
   align-items: center;
+  font-size: 12px;
+}
 
-  &:focus,
-  &:hover {
-    color: $white-light;
-    text-decoration: underline;
-    background: $indigo-500;
+.multi-file-commit-panel-success-message {
+  position: absolute;
+  top: 61px;
+  left: 1px;
+  bottom: 0;
+  right: 0;
+  z-index: 10;
+  background: $white-light;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.ide-review-button-holder {
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+
+.ide-context-header {
+  .avatar {
+    flex: 0 0 38px;
   }
 
-  &:active {
-    background: $indigo-800;
+  .ide-merge-requests-dropdown.dropdown-menu {
+    width: 385px;
+    max-height: initial;
+  }
+}
+
+.ide-sidebar-project-title {
+  min-width: 0;
+
+  .sidebar-context-title {
+    white-space: nowrap;
+  }
+
+  .ide-sidebar-branch-title {
+    min-width: 50px;
+  }
+}
+
+.ide-external-link {
+  position: relative;
+
+  svg {
+    display: none;
+    position: absolute;
+    top: 2px;
+    right: -$gl-padding;
+  }
+
+  &:hover,
+  &:focus {
+    svg {
+      display: inline-block;
+    }
+  }
+}
+
+.ide-right-sidebar {
+  width: auto;
+  min-width: 60px;
+
+  .ide-activity-bar {
+    border-left: 1px solid $white-dark;
+  }
+
+  .multi-file-commit-panel-inner {
+    width: 350px;
+    padding: $grid-size $gl-padding;
+    background-color: $white-light;
+    border-left: 1px solid $white-dark;
+  }
+}
+
+.ide-pipeline {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  margin-top: -$grid-size;
+  margin-bottom: -$grid-size;
+
+  .empty-state {
+    margin-top: auto;
+    margin-bottom: auto;
+
+    p {
+      margin: $grid-size 0;
+      text-align: center;
+      line-height: 24px;
+    }
+
+    .btn,
+    h4 {
+      margin: 0;
+    }
+  }
+
+  .build-trace,
+  .top-bar {
+    margin-left: -$gl-padding;
+  }
+
+  &.build-page .top-bar {
+    top: 0;
+    font-size: 12px;
+    border-top-right-radius: $border-radius-default;
+  }
+}
+
+.ide-pipeline-list {
+  flex: 1;
+  overflow: auto;
+}
+
+.ide-pipeline-header {
+  min-height: 55px;
+  padding-left: $gl-padding;
+  padding-right: $gl-padding;
+
+  .ci-status-icon {
+    display: flex;
+  }
+}
+
+.ide-job-item {
+  display: flex;
+  padding: 16px;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid $border-color;
+  }
+
+  .ci-status-icon {
+    display: flex;
+    justify-content: center;
+    min-width: 24px;
+    overflow: hidden;
+  }
+}
+
+.ide-stage {
+  .card-header {
+    display: flex;
+    cursor: pointer;
+
+    .ci-status-icon {
+      display: flex;
+      align-items: center;
+    }
   }
+
+  .card-body {
+    padding: 0;
+  }
+}
+
+.ide-stage-collapse-icon {
+  margin: auto 0 auto auto;
+}
+
+.ide-stage-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ide-job-header {
+  min-height: 60px;
+}
+
+.ide-merge-requests-dropdown {
+  .nav-links li {
+    width: 50%;
+    padding-left: 0;
+    padding-right: 0;
+
+    a {
+      text-align: center;
+
+      &:not(.active) {
+        background-color: $gray-light;
+      }
+    }
+  }
+
+  .dropdown-input {
+    padding-left: $gl-padding;
+    padding-right: $gl-padding;
+
+    .fa {
+      right: 26px;
+    }
+  }
+
+  .btn-link {
+    padding-top: $gl-padding;
+    padding-bottom: $gl-padding;
+  }
+}
+
+.ide-merge-request-current-icon {
+  min-width: 18px;
+}
+
+.ide-merge-requests-empty {
+  height: 230px;
+}
+
+.ide-merge-requests-dropdown-content {
+  min-height: 230px;
+  max-height: 470px;
+}
+
+.ide-merge-request-project-path {
+  font-size: 12px;
+  line-height: 16px;
+  color: $gl-text-color-secondary;
 }