1 files changed, 233 insertions, 227 deletions

diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index d93c51d5448..402412eae71 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -35,270 +35,276 @@
   }
 }
 
-.repository-view {
-  border: 1px solid $border-color;
-  border-radius: $border-radius-default;
-  color: $almost-black;
+.multi-file {
+  display: flex;
+  height: calc(100vh - 145px);
+  border-top: 1px solid $white-dark;
+  border-bottom: 1px solid $white-dark;
+
+  &.is-collapsed {
+    .ide-file-list {
+      max-width: 250px;
+    }
+  }
+}
 
-  .code.white pre .hll {
-    background-color: $well-light-border !important;
+.ide-file-list {
+  flex: 1;
+  overflow: scroll;
+
+  .file {
+    cursor: pointer;
   }
 
-  .tree-content-holder {
-    display: -webkit-flex;
-    display: flex;
-    min-height: 300px;
+  a {
+    color: $gl-text-color;
   }
 
-  .tree-content-holder-mini {
-    height: 100vh;
+  th {
+    position: sticky;
+    top: 0;
   }
+}
 
-  .panel-right {
-    display: -webkit-flex;
-    display: flex;
-    -webkit-flex-direction: column;
-    flex-direction: column;
-    width: 80%;
-    height: 100%;
+.multi-file-table-name,
+.multi-file-table-col-commit-message {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 0;
+}
 
-    .monaco-editor.vs {
-      .current-line {
-        border: 0;
-        background: $well-light-border;
-      }
+.multi-file-table-name {
+  width: 350px;
+}
 
-      .line-numbers {
-        cursor: pointer;
+.multi-file-table-col-commit-message {
+  width: 50%;
+}
 
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
+.multi-file-edit-pane {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  border-left: 1px solid $white-dark;
+  overflow: hidden;
+}
 
-    .blob-no-preview {
-      .vertical-center {
-        justify-content: center;
-        width: 100%;
-      }
-    }
+.multi-file-tabs {
+  display: flex;
+  overflow: scroll;
+  background-color: $white-normal;
+  box-shadow: inset 0 -1px $white-dark;
 
-    &.blob-editor-container {
-      overflow: hidden;
-    }
+  > li {
+    position: relative;
+  }
+}
 
-    .blob-viewer-container {
-      -webkit-flex: 1;
-      flex: 1;
-      overflow: auto;
-
-      > div,
-      .file-content:not(.wiki) {
-        display: flex;
-      }
-
-      > div,
-      .file-content,
-      .blob-viewer,
-      .line-number,
-      .blob-content,
-      .code {
-        min-height: 100%;
-        width: 100%;
-      }
-
-      .line-numbers {
-        min-width: 44px;
-      }
-
-      .blob-content {
-        flex: 1;
-        overflow-x: auto;
-      }
-    }
+.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;
+  cursor: pointer;
+
+  &.active {
+    background-color: $white-light;
+    border-bottom-color: $white-light;
+  }
+}
 
-    #tabs {
-      position: relative;
-      flex-shrink: 0;
-      display: flex;
-      width: 100%;
-      padding-left: 0;
-      margin-bottom: 0;
-      white-space: nowrap;
-      overflow-y: hidden;
-      overflow-x: auto;
-
-      li {
-        position: relative;
-        background: $gray-normal;
-        padding: #{$gl-padding / 2} $gl-padding;
-        border-right: 1px solid $white-dark;
-        border-bottom: 1px solid $white-dark;
-        cursor: pointer;
-
-        &.active {
-          background: $white-light;
-          border-bottom: 0;
-        }
-
-        a {
-          @include str-truncated(100px);
-          color: $gl-text-color;
-          vertical-align: middle;
-          text-decoration: none;
-          margin-right: 12px;
-
-          &:focus {
-            outline: none;
-          }
-        }
-
-        .close-btn {
-          position: absolute;
-          right: 8px;
-          top: 50%;
-          padding: 0;
-          background: none;
-          border: 0;
-          font-size: $gl-font-size;
-          transform: translateY(-50%);
-        }
-
-        .close-icon:hover {
-          color: $hint-color;
-        }
-
-        .close-icon,
-        .unsaved-icon {
-          color: $gray-darkest;
-        }
-
-        .unsaved-icon {
-          color: $brand-success;
-        }
-
-        &.tabs-divider {
-          width: 100%;
-          background-color: $white-light;
-          border-right: 0;
-          border-top-right-radius: 2px;
-        }
-      }
-    }
+.multi-file-tab-close {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  padding: 0;
+  background: none;
+  border: 0;
+  font-size: $gl-font-size;
+  color: $gray-darkest;
+  transform: translateY(-50%);
+
+  &:not(.modified):hover,
+  &:not(.modified):focus {
+    color: $hint-color;
+  }
 
-    .repo-file-buttons {
-      background-color: $white-light;
-      padding: 5px 10px;
-      border-top: 1px solid $white-normal;
-    }
+  &.modified {
+    color: $indigo-700;
+  }
+}
 
-    #binary-viewer {
-      height: 80vh;
-      overflow: auto;
-      margin: 0;
-
-      .blob-viewer {
-        padding-top: 20px;
-        padding-left: 20px;
-      }
-
-      .binary-unknown {
-        text-align: center;
-        padding-top: 100px;
-        background: $gray-light;
-        height: 100%;
-        font-size: 17px;
-
-        span {
-          display: block;
-        }
-      }
-    }
+.multi-file-edit-pane-content {
+  flex: 1;
+  height: 0;
+}
+
+.multi-file-editor-btn-group {
+  padding: $grid-size;
+  border-top: 1px solid $white-dark;
+}
+
+// Not great, but this is to deal with our current output
+.multi-file-preview-holder {
+  height: 100%;
+  overflow: scroll;
+
+  .blob-viewer {
+    height: 100%;
   }
 
-  #commit-area {
-    background: $gray-light;
-    padding: 20px;
+  .file-content.code {
+    display: flex;
 
-    .help-block {
-      padding-top: 7px;
-      margin-top: 0;
+    i {
+      margin-left: -10px;
     }
   }
 
-  #view-toggler {
-    height: 41px;
-    position: relative;
-    display: block;
-    border-bottom: 1px solid $white-normal;
-    background: $white-light;
-    margin-top: -5px;
+  .line-numbers {
+    min-width: 50px;
   }
 
-  #binary-viewer {
-    img {
-      max-width: 100%;
-    }
+  .file-content,
+  .line-numbers,
+  .blob-content,
+  .code {
+    min-height: 100%;
   }
+}
 
-  #sidebar {
-    flex: 1;
-    height: 100%;
+.multi-file-commit-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 290px;
+  padding: $gl-padding;
+  background-color: $gray-light;
+  border-left: 1px solid $white-dark;
+
+  &.is-collapsed {
+    width: 60px;
+    padding: 0;
+  }
+}
 
-    &.sidebar-mini {
-      width: 20%;
-      border-right: 1px solid $white-normal;
-      overflow: auto;
-    }
+.multi-file-commit-panel-section {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
 
-    .table {
-      margin-bottom: 0;
-    }
+.multi-file-commit-panel-header {
+  display: flex;
+  align-items: center;
+  padding: 0 0 12px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid $white-dark;
 
-    tr {
-      .repo-file-options {
-        padding: 2px 16px;
-        width: 100%;
-      }
-
-      .title {
-        font-size: 10px;
-        text-transform: uppercase;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        vertical-align: middle;
-      }
-
-      .file-icon {
-        margin-right: 5px;
-      }
-
-      td {
-        white-space: nowrap;
-      }
-    }
+  &.is-collapsed {
+    border-bottom: 1px solid $white-dark;
 
-    .file {
-      cursor: pointer;
+    svg {
+      margin-left: auto;
+      margin-right: auto;
     }
+  }
+}
 
-    a {
-      @include str-truncated(250px);
-      color: $almost-black;
-    }
+.multi-file-commit-panel-collapse-btn {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-left: auto;
+  font-size: 20px;
+
+  &.is-collapsed {
+    margin-right: auto;
+  }
+}
+
+.multi-file-commit-list {
+  flex: 1;
+  overflow: scroll;
+}
+
+.multi-file-commit-list-item {
+  display: flex;
+  align-items: center;
+}
+
+.multi-file-addition {
+  fill: $green-500;
+}
+
+.multi-file-modified {
+  fill: $orange-500;
+}
+
+.multi-file-commit-list-collapsed {
+  display: flex;
+  flex-direction: column;
+
+  > svg {
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
-.render-error {
-  min-height: calc(100vh - 62px);
+.multi-file-commit-list-path {
+  @include str-truncated(100%);
+}
+
+.multi-file-commit-form {
+  padding-top: 12px;
+  border-top: 1px solid $white-dark;
+}
+
+.multi-file-commit-fieldset {
+  display: flex;
+  align-items: center;
+  padding-bottom: 12px;
 
-  p {
-    width: 100%;
+  .btn {
+    flex: 1;
   }
 }
 
-.multi-file-table-col-name {
-  width: 350px;
+.multi-file-commit-message.form-control {
+  height: 80px;
+  resize: none;
+}
+
+.dirty-diff {
+  // !important need to override monaco inline style
+  width: 4px !important;
+  left: 0 !important;
+
+  &-modified {
+    background-color: $blue-500;
+  }
+
+  &-added {
+    background-color: $green-600;
+  }
+
+  &-removed {
+    height: 0 !important;
+    width: 0 !important;
+    bottom: -2px;
+    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;
+      background-color: rgba($red-500, .5);
+    }
+  }
 }