1 files changed, 202 insertions, 0 deletions
diff --git a/app/assets/stylesheets/page_bundles/editor.scss b/app/assets/stylesheets/page_bundles/editor.scss
new file mode 100644
index 00000000000..b7b698b2128
--- /dev/null
+++ b/app/assets/stylesheets/page_bundles/editor.scss
@@ -0,0 +1,202 @@
+@import 'page_bundles/mixins_and_variables_and_functions';
+
+.file-editor {
+  .nav-links {
+    border-top: 1px solid var(--border-color, $border-color);
+    border-right: 1px solid var(--border-color, $border-color);
+    border-left: 1px solid var(--border-color, $border-color);
+    border-bottom: 0;
+    border-radius: $border-radius-small $border-radius-small 0 0;
+    background: var(--gray-50, $gray-50);
+  }
+
+  #editor,
+  .editor {
+    @include gl-border-0;
+    @include gl-m-0;
+    @include gl-p-0;
+    @include gl-relative;
+    @include gl-w-full;
+    height: 500px;
+
+    .editor-loading-content {
+      @include gl-h-full;
+      @include gl-border-0;
+    }
+  }
+
+  .cancel-btn {
+    color: $red-600;
+
+    &:hover {
+      color: $red-600;
+    }
+  }
+
+  .file-title {
+    @include gl-font-monospace;
+  }
+
+  .editor-ref {
+    background: var(--gray-10, $gray-10);
+    padding-right: $gl-padding;
+    border-right: 1px solid var(--border-color, $border-color);
+    display: block;
+    float: left;
+    margin-right: 10px;
+    max-width: 250px;
+  }
+
+  .new-file-name,
+  .new-file-path {
+    display: inline-block;
+    max-width: 250px;
+    float: left;
+
+    @media(max-width: map-get($grid-breakpoints, lg)-1) {
+      width: 180px;
+    }
+
+    @media (max-width: 1360px) {
+      width: auto;
+    }
+  }
+
+  .file-buttons {
+    flex: 1;
+  }
+
+  .soft-wrap-toggle {
+    font-family: $regular-font;
+    margin-left: $gl-padding-8;
+
+    .soft-wrap {
+      display: inline-flex;
+    }
+
+    .no-wrap {
+      display: none;
+    }
+
+    &.soft-wrap-active {
+      .soft-wrap {
+        display: none;
+      }
+
+      .no-wrap {
+        display: inline-flex;
+      }
+    }
+  }
+}
+
+
+@include media-breakpoint-down(md) {
+  .file-editor {
+    .file-title {
+      display: block;
+    }
+
+    .new-file-name,
+    .new-file-path {
+      max-width: none;
+      width: 100%;
+      margin-top: $gl-padding-8;
+    }
+
+    .file-buttons {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+
+      .md-header-toolbar {
+        margin: $gl-padding 0;
+      }
+
+      .soft-wrap-toggle {
+        width: 100%;
+        margin-left: 0;
+      }
+
+      @media(max-width: map-get($grid-breakpoints, md)-1) {
+        clear: both;
+      }
+    }
+  }
+}
+
+.blob-new-page-title,
+.blob-edit-page-title {
+  margin: 19px 0 21px;
+  vertical-align: top;
+  display: inline-block;
+
+  @media(max-width: map-get($grid-breakpoints, lg)-1) {
+    display: block;
+    margin: 19px 0 12px;
+  }
+}
+
+.template-selectors-menu {
+  display: flex;
+  vertical-align: top;
+
+  @media(max-width: map-get($grid-breakpoints, lg)-1) {
+    display: inline-block;
+    width: 100%;
+    padding: 0;
+    border-left: 0;
+  }
+}
+
+.template-selector-dropdowns-wrap {
+  display: flex;
+  vertical-align: top;
+
+  @media(max-width: map-get($grid-breakpoints, lg)-1) {
+    display: block;
+    width: 100%;
+    margin: 0 0 16px;
+  }
+
+  .license-selector,
+  .gitignore-selector,
+  .gitlab-ci-yml-selector,
+  .dockerfile-selector,
+  .template-type-selector,
+  .metrics-dashboard-selector {
+    display: inline-block;
+    vertical-align: top;
+    font-family: $regular_font;
+    margin: 0 8px 0 0;
+
+    @media(max-width: map-get($grid-breakpoints, lg)-1) {
+      display: block;
+      width: 100%;
+      margin: 5px 0;
+    }
+
+    .dropdown {
+      line-height: 21px;
+    }
+
+    .dropdown-menu-toggle {
+      width: 200px;
+      vertical-align: top;
+
+      @media (max-width: map-get($grid-breakpoints, xl)-1) {
+        width: auto;
+      }
+
+      @media(max-width: map-get($grid-breakpoints, lg)-1) {
+        display: block;
+        width: 100%;
+        margin: 5px 0;
+      }
+    }
+  }
+}
+
+.popover.suggest-gitlab-ci-yml {
+  z-index: $header-zindex - 1;
+}